Interactive Data Visualization for the WebInteractive Data Visualization for the WebA Note Regarding Supplemental FilesPrefaceConventions Used in This BookUsing Code ExamplesSafari® Books OnlineHow to Contact UsAcknowledgments1. IntroductionWhy Data Visualization?Why Write Code?Why Interactive?Why on the Web?What This Book IsWho You AreWhat This Book Is NotUsing Sample CodeThank You2. Introducing D3What It DoesWhat It Doesn’t DoOrigins and ContextAlternativesEasy ChartsGraph VisualizationsGeomappingAlmost from ScratchThree-DimensionalTools Built with D33. Technology FundamentalsThe WebHTMLContent Plus StructureAdding Structure with ElementsCommon ElementsAttributesClasses and IDsCommentsDOMDeveloper ToolsRendering and the Box ModelCSSSelectorsProperties and ValuesCommentsReferencing StylesEmbed the CSS in your HTML.Reference an external stylesheet from the HTML.Attach inline styles.Inheritance, Cascading, and SpecificityJavaScriptHello, ConsoleVariablesOther Variable TypesArraysObjectsObjects and ArraysJSONGeoJSONMathematical OperatorsComparison OperatorsControl Structuresif() onlyfor() nowWhat arrays are made for()FunctionsCommentsReferencing ScriptsJavaScript GotchasDynamic typingVariable hoistingFunction-level scopeGlobal namespaceSVGThe SVG ElementSimple ShapesStyling SVG ElementsLayering and Drawing OrderTransparencyA Note on Compatibility4. SetupDownloading D3Referencing D3Setting Up a Web ServerTerminal with PythonMAMP, WAMP, and LAMPDiving In5. DataGenerating Page ElementsChaining MethodsOne Link at a TimeThe Hand-offGoing ChainlessBinding DataIn a BindDataLoading CSV dataLoading JSON dataPlease Make Your SelectionBound and DeterminedUsing Your DataHigh-FunctioningData Wants to Be HeldBeyond Text6. Drawing with DataDrawing divsSetting AttributesA Note on ClassesBack to the BarsSetting StylesThe Power of data()Random DataDrawing SVGsCreate the SVGData-Driven ShapesPretty Colors, Oooh!Making a Bar ChartThe Old ChartThe New ChartColorLabelsMaking a ScatterplotThe DataThe ScatterplotSizeLabelsNext Steps7. ScalesApples and PixelsDomains and RangesNormalizationCreating a ScaleScaling the Scatterplotd3.min() and d3.max()Setting Up Dynamic ScalesIncorporating Scaled ValuesRefining the PlotOther MethodsOther Scales8. AxesIntroducing AxesSetting Up an AxisCleaning It UpCheck for TicksY Not?Final TouchesFormatting Tick Labels9. Updates, Transitions, and MotionModernizing the Bar ChartOrdinal Scales, ExplainedRound Bands Are All the Range These DaysReferencing the Ordinal ScaleOther UpdatesUpdating DataInteraction via Event ListenersChanging the DataUpdating the VisualsTransitionsduration(), or How Long Is This Going to Take?ease()-y Does ItPlease Do Not delay()Randomizing the DataUpdating ScalesUpdating Axeseach() Transition Starts and EndsWarning: Start carefullyEnd gracefullyTransitionless each()Containing visual elements with clipping pathsOther Kinds of Data UpdatesAdding Values (and Elements)SelectEnterUpdateRemoving Values (and Elements)ExitMaking a smooth exitData Joins with KeysPreparing the dataUpdating all referencesKey functionsExit transitionAdd and Remove: Combo PlatterRecap10. InteractivityBinding Event ListenersIntroducing BehaviorsHover to HighlightGrouping SVG ElementsClick to SortTooltipsDefault Browser TooltipsSVG Element TooltipsHTML div TooltipsConsideration for Touch DevicesMoving Forward11. LayoutsPie LayoutStack LayoutForce Layout12. GeomappingJSON, Meet GeoJSONPathsProjectionsChoroplethAdding PointsAcquiring and Parsing GeodataFind ShapefilesChoose a ResolutionSimplify the ShapesConvert to GeoJSON13. ExportingBitmapsPDFSVGA. Appendix: Further StudyBooksWebsitesTwitterersIndexAbout the AuthorColophonCopyright