Learn D3.js: Create interactive data-driven visualizations for the web with the D3.js library

Description

Explore the power of D3.js 5 and its integration with web technologies for building rich and interactive data visualization solutions. This book is a practical hands-on introduction to D3 (Data-driven Documents): the most popular open-source JavaScript library for creating interactive web-based data visualizations. Based entirely on open web standards, D3 provides an integrated collection of tools for efficiently binding data to graphical elements. If you have basic knowledge of HTML, CSS and JavaScript you can use D3.js to create beautiful interactive web-based data visualizations. D3 is not a charting library. It doesn't contain any pre-defined chart types, but can be used to create whatever visual representations of data you can imagine. The goal of this book is to introduce D3 and provide a learning path so that you obtain a solid understanding of its fundamental concepts, learn to use most of its modules and functions, and gain enough experience to create your own D3 visualizations. You will learn how to create bar, line, pie and scatter charts, trees, dendograms, treemaps, circle packs, chord/ribbon diagrams, sankey diagrams, animated network diagrams, and maps using different geographical projections. Fundamental concepts are explained in each chapter and then applied to a larger example in step-by-step tutorials, complete with full code, from hundreds of examples you can download and run. This book covers D3 version 5 and is based on ES2015 JavaScript. Cover Title Page Copyright and Credits About Packt Contributors Table of Contents Preface Introduction D3 data-driven documents What is D3? How does it work? Using D3 Environment setup Hello, world Debugging D3 Modules (microlibraries) Data manipulation Document manipulation Interactivity and animation Colors Asynchronous operations and packaging 2D geometry Spherical geometry and geographic maps Layouts Summary References Technical Fundamentals Scalable Vector Graphics (SVG) SVG graphics context (viewport) Shapes Fills and strokes SVG styling with CSS Transparency Ellipses Polygons and polylines Paths Text Group containers Reusing objects: use and defs Matrix transforms Configuring the SVG viewport Gradients Clipping Filters An SVG example Essential Javascript data structures Arrays Strings Functions Objects Maps and sets HTML5 Canvas A Canvas example Data formats CSV XML JSON Summary References Quick Start Selecting and binding data Selecting and appending Binding data Creating a bar chart with D3 and HTML Binding data to HTML Scales Array utilities Adding labels More labels, formatting, and colors Changing colors Loading external files Creating a bar chart with D3 and SVG Updating data visualizations Handling events Data updates Smooth transitions Displaying a map using D3 and SVG Summary References Data Binding Selections W3C selectors Selecting and filtering elements Joining data Getting and setting attributes, styles, and content Modifying the structure of the node tree Node ordering Calling functions from a selection Event handling Multiple selections D3 general update pattern Creating elements Updating selections Entering new elements Merging selections Exiting unused elements Data joining Loading and parsing data Using delimiter-separated values Loading files A complete step-by-step example What are we going to create? Setting up the page and view port Loading data Configuring scales and filtering data Drawing the planet Calculating the position of each moon Entering the moons Adding text labels Changing views Updating views Adding new elements and merging selections Removing extra elements Using join() for updates Other improvements Summary References Manipulating Data and Formatting Manipulating arrays, collections, and objects Searching and statistics Sorting Transforming data Generating data Grouping operations ES2015 replacements for d3-collection Grouping data with d3.nest() Nesting configuration Sorting Rollup A step-by-step grouping example Histograms Random numbers Interpolation Other interpolators Text formatting and internationalization Number formatting Date and time parsing and formatting Summary References Scales, Axes, and Colors Axes Configuring ticks Styling Cartesian axes Cartesian grids Radial axes Scales Continuous scales Linear scale Exponential scale Logarithmic scale Symlog scale Identity scale Time scale Interpolated scales Sequential scale Diverging scale Discrete scales Quantize scale Quantile scale Threshold scale Ordinal scale Band scale Point scale Color palettes, schemes, and spaces Color palettes Categorical color schemes Color spaces RGB color space HSL color space CIELAB color space HCL color space Cubehelix Other color spaces Color interpolation Interpolated color schemes Creating a scatterplot Drawing dots on a Cartesian grid Adding axes and labels Configuring axis styles Using a logarithmic scale Grouping dots by category Adding interactivity Creating a bubble chart Summary References Shape and Layout Generators Shapes and layouts Lines Symbols Curve functions Areas Stacked layouts Radial charts Radial line Radial area Arcs Pie layout Canvas rendering SVG to Canvas and back Summary References Animation and Interactivity Events Native DOM events Mouse events in D3 Custom events and dispatching Transitions Transition dynamics Tweening and text transitions Easing algorithms Multiple transitions Life cycle of a transition and events Timers Dragging behavior Configuration methods Brushing behavior Configuration methods One-dimensional brush Two-dimensional brush Zooming behavior Configuration methods Interactive zoom Programmatic zoom Zoom transforms Canvas zooming Semantic zoom Summary References Visualizing Hierarchical Data Hierarchical data A standard hierarchical layout  Creating hierarchical structures Layout  generators Unidirectional node-link diagrams Trees and dendograms Path links Horizontal trees Using Canvas Radial trees Partitions Icicle charts Sunburst diagrams Enclosure diagrams Circle packing Treemap Interactive visualizations Highlighting a path Changing the root Navigating a subtree Summary References Visualizing Flows and Networks Network visualization Graphs and data structures Adjacency matrices Node-link structures Adjacency diagrams Creating a simple adjacency diagram Chord diagrams Creating a chord/ribbon diagram Sankey diagrams Creating a Sankey diagram Arc diagrams Node-link diagrams with force-directed simulations Creating a force-directed network diagram Forces Simulation dynamics Interactive highlighting Dragging nodes Fixing nodes to a position Adding and removing nodes Canvas rendering Zooming in and out Summary References Visualizing Geographical Data Geographical information systems GIS data formats Thematic maps How to make a thematic map GeoJSON Drawing a map with D3 Making a choropleth Adding tooltips Adding graticules to a map Simple SVG zooming and panning GeoJSON geometries Primitive geometries Multipart geometries Drawing geometries as paths Drawing points and text TopoJSON Obtaining GeoJSON features Merging geometries Creating a mesh Discovering neighbors Converting GeoJSON to TopoJSON Graticules, circles and lines Lines and outlines Drawing circles Projections Types of projections Choosing a projection Conformal, equal-area and equidistant projections Using a projection Moving, rotating and scaling a projected map Fitting a projection in a viewport Rotating the sphere inside a projection Clipping Clipping to the sphere Spherical geometry Measuring distances Calculating areas Centroids and bounds Interpolation, rotation and containment Zooming, brushing and rotating Brushing, or zoom to bounding box Zoom to object Rotate and zoom to object Zooming with drag and rotate Quaternion dragging and zooming Inertia Using Canvas Summary References Other Books You May Enjoy Index