
Learn D3.js
Description
Alles über E-Books | Antworten auf Fragen rund um E-Books, Kopierschutz und Dateiformate finden Sie in unserem Info- & Hilfebereich.
- Practical guide for creating interactive graphics and data-driven apps with JavaScript
- Build Real-time visualization and transition on web using SVG with D3.js
Book DescriptionThis 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. What you will learn - Learn to use D3.js version 5 and web standards to create beautiful interactive data-driven visualizations for the web
- Bind data to DOM elements, applying different scales, color schemes and configuring smooth animated transitions for data updates
- Generate data structures and layouts for many popular chart formats
- Apply interactive behaviors to any chart
- Create thematic maps based on GIS data using different geographical projections with interactive behaviors
- Load, parse and transform data from JSON and CSV formats
Who this book is forThe book is intended for web developers, web designers, data scientists, artists, and any developer who wish to create interactive data visualization for the Web using D3. The book assumes basic knowledge of HTML, CSs, and JavaScript.
More details
Other editions
Additional editions

Content
- 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
System requirements
File format: ePUB
Copy protection: Adobe-DRM (Digital Rights Management)
System requirements:
- Computer (Windows; MacOS X; Linux): Install the free reader Adobe Digital Editions prior to download (see eBook Help).
- Tablet/smartphone (Android; iOS): Install the free app Adobe Digital Editions or the app PocketBook before downloading (see eBook Help).
- E-reader: Bookeen, Kobo, Pocketbook, Sony, Tolino and many more (not Kindle).
The file format ePub works well for novels and non-fiction books – i.e., „flowing” text without complex layout. On an e-reader or smartphone, line and page breaks automatically adjust to fit the small displays.
This eBook uses Adobe-DRM, a „hard” copy protection. If the necessary requirements are not met, unfortunately you will not be able to open the eBook. You will therefore need to prepare your reading hardware before downloading.
Please note: We strongly recommend that you authorise using your personal Adobe ID after installation of any reading software.
For more information, see our ebook Help page.