Interactive Data Visualization for the Web by Murray, Scott -- Read -- Imperial Library of Trantor

Index

Interactive Data Visualization for the Web A Note Regarding Supplemental Files Preface

Conventions Used in This Book Using Code Examples Safari® Books Online How to Contact Us Acknowledgments

1. Introduction

Why Data Visualization? Why Write Code? Why Interactive? Why on the Web? What This Book Is Who You Are What This Book Is Not Using Sample Code Thank You

2. Introducing D3

What It Does What It Doesn’t Do Origins and Context Alternatives

Easy Charts Graph Visualizations Geomapping Almost from Scratch Three-Dimensional Tools Built with D3

3. Technology Fundamentals

The Web HTML

Content Plus Structure Adding Structure with Elements Common Elements Attributes Classes and IDs Comments

DOM Developer Tools Rendering and the Box Model CSS

Selectors Properties and Values Comments Referencing Styles

Embed the CSS in your HTML. Reference an external stylesheet from the HTML. Attach inline styles.

Inheritance, Cascading, and Specificity

JavaScript

Hello, Console Variables Other Variable Types Arrays Objects Objects and Arrays

JSON GeoJSON

Mathematical Operators Comparison Operators Control Structures

if() only for() now What arrays are made for()

Functions Comments Referencing Scripts JavaScript Gotchas

Dynamic typing Variable hoisting Function-level scope Global namespace

SVG

The SVG Element Simple Shapes Styling SVG Elements Layering and Drawing Order Transparency

A Note on Compatibility

4. Setup

Downloading D3 Referencing D3 Setting Up a Web Server

Terminal with Python MAMP, WAMP, and LAMP Diving In

5. Data

Generating Page Elements

Chaining Methods One Link at a Time The Hand-off Going Chainless

Binding Data

In a Bind Data

Loading CSV data Loading JSON data

Please Make Your Selection Bound and Determined Using Your Data High-Functioning Data Wants to Be Held Beyond Text

6. Drawing with Data

Drawing divs

Setting Attributes A Note on Classes Back to the Bars Setting Styles

The Power of data()

Random Data

Drawing SVGs

Create the SVG Data-Driven Shapes Pretty Colors, Oooh!

Making a Bar Chart

The Old Chart The New Chart Color Labels

Making a Scatterplot

The Data The Scatterplot Size Labels

Next Steps

7. Scales

Apples and Pixels Domains and Ranges Normalization Creating a Scale Scaling the Scatterplot

d3.min() and d3.max() Setting Up Dynamic Scales Incorporating Scaled Values

Refining the Plot Other Methods Other Scales

8. Axes

Introducing Axes Setting Up an Axis Cleaning It Up Check for Ticks Y Not? Final Touches Formatting Tick Labels

9. Updates, Transitions, and Motion

Modernizing the Bar Chart

Ordinal Scales, Explained Round Bands Are All the Range These Days Referencing the Ordinal Scale Other Updates

Updating Data

Interaction via Event Listeners Changing the Data Updating the Visuals

Transitions

duration(), or How Long Is This Going to Take? ease()-y Does It Please Do Not delay() Randomizing the Data Updating Scales Updating Axes each() Transition Starts and Ends

Warning: Start carefully End gracefully Transitionless each() Containing visual elements with clipping paths

Other Kinds of Data Updates

Adding Values (and Elements)

Select Enter Update

Removing Values (and Elements)

Exit Making a smooth exit

Data Joins with Keys

Preparing the data Updating all references Key functions Exit transition

Add and Remove: Combo Platter Recap

10. Interactivity

Binding Event Listeners Introducing Behaviors

Hover to Highlight

Grouping SVG Elements

Click to Sort

Tooltips

Default Browser Tooltips SVG Element Tooltips HTML div Tooltips

Consideration for Touch Devices Moving Forward

11. Layouts

Pie Layout Stack Layout Force Layout

12. Geomapping

JSON, Meet GeoJSON Paths Projections Choropleth Adding Points Acquiring and Parsing Geodata

Find Shapefiles Choose a Resolution Simplify the Shapes Convert to GeoJSON

13. Exporting

Bitmaps PDF SVG

A. Appendix: Further Study

Books Websites Twitterers

Index About the Author Colophon Copyright

← Prev
Back
Next →

← Prev
Back
Next →