Cover image for D3.js By Example

D3.js By Example

Author Michael Heydt
Release Date: 2015/12/01
ISBN: 9781785280085
Topic:
0%
77
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

Book Description

Create attractive web-based data visualizations using the amazing JavaScript library D3.js

About This Book

  • Learn to use the facilities provided by D3.js to create data-driven visualizations
  • Explore the concepts of D3.js through examples that enable you to quickly create visualizations including charts, network diagrams, and maps
  • Get practical examples of visualizations using real-world data sets that show you how to use D3.js to visualize and interact with information to glean its underlying meaning

Who This Book Is For

Whether you are new to data and data visualization, a seasoned data scientist, or a computer graphics specialist, this book will provide you with the skills you need to create web-based and interactive data visualizations. This book assumes some knowledge of coding and in particular, experience coding in JavaScript.

What You Will Learn

  • Install and use D3.js to create HTML elements within the document
  • Use development tools such as JSBIN and Chrome Developer Tools to create D3.js applications
  • Retrieve JSON data and use D3.js selections and data binding to create visual elements from data
  • Create and style graphical elements such as circles, ellipses, rectangles, lines, paths, and text using SVG
  • Turn your data into bar and scatter charts, and add margins, axes, labels, and legends
  • Use D3.js generators to perform the magic of creating complex visualizations from data
  • Add interactivity to your visualizations, including tool-tips, sorting, hover-to-highlight, and grouping and dragging of visuals

In Detail

This book will take you through all the concepts of D3.js starting with the most basic ones and progressively building on them in each chapter to expand your knowledge of D3.js.

Starting with obtaining D3.js and creating simple data bindings to non-graphical HTML elements, you will then master the creation of graphical elements from data. You'll discover how to combine those elements into simple visualizations such as bar, line, and scatter charts, as well as more elaborate visualizations such as network diagrams, Sankey diagrams, maps, and choreopleths.

Using practical examples provided, you will quickly get to grips with the features of D3.js and use this learning to create your own spectacular data visualizations with D3.js.

Style and approach

This book uses a practical, step-by-step approach that builds iteratively, starting with the basic concepts right through to mastery of the technology. Each concept is demonstrated using code examples that are interactively available online (and can also be run locally), and each chapter builds upon the concepts covered in the previous chapter,with succinct explanations of what the code does and how it fits into the bigger picture.

Table of Contents

  1. D3.js By Example
    1. Table of Contents
    2. D3.js By Example
    3. Credits
    4. About the Author
    5. About the Reviewers
    6. www.PacktPub.com
      1. Support files, eBooks, discount offers, and more
        1. Why subscribe?
        2. Free access for Packt account holders
    7. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    8. 1. Getting Started with D3.js
      1. A brief overview of D3.js
        1. Selections
        2. Data and data binding
        3. Interaction and animation
        4. Modules
      2. Tools for creating and sharing D3.js visualizations
        1. Js Bin
        2. bl.ocks.org
      3. Google Chrome and Developer tools
      4. Hello World – D3.js style
      5. Examining the DOM generated by D3.js
      6. Summary
    9. 2. Selections and Data Binding
      1. D3.js selections
        1. Changing the style of a DOM element
          1. Changing the style of multiple items
      2. D3.js and data binding
        1. Data binding
          1. Specifying the entering elements with .enter()
        2. Adding new items using .enter()
          1. Updating values
          2. Removing items with .exit()
        3. A few notes for the wise about the general update pattern
      3. Summary
    10. 3. Creating Visuals with SVG
      1. Introducing SVG
        1. The SVG coordinate system
        2. SVG attributes
        3. Drawing circles with SVG
      2. The basic shapes provided by SVG
        1. Ellipse
        2. Rectangle
        3. Lines
        4. Paths
        5. Text
      3. Applying CSS styles to SVG elements
      4. Strokes, caps, and dashes
      5. Applying SVG transforms
        1. Rotate
        2. Translate
        3. Scale
      6. Groups
      7. Transparency
      8. Layers
      9. Summary
    11. 4. Creating a Bar Graph
      1. The basic bar graph
        1. Adding labels to the bars
      2. Margins and axes
        1. Creating margins in the bar graph
        2. Creating an axis
          1. Changing the axis orientation
        3. Inverting the labels on an axis
        4. Adding the axis to the graph
      3. Summary
    12. 5. Using Data and Scales
      1. Data
        1. Loading data with D3.js
          1. Loading JSON data
          2. Loading TSV data
          3. Loading CSV data
        2. Mapping fields and converting strings to numbers
      2. Scales
        1. Linear scales
        2. Ordinal scales
          1. Mapping color strings to codes
          2. Mapping integers to color scales
          3. The ordinal scale using rangeBands
        3. Visualizing The Walking Dead viewership
      3. Summary
    13. 6. Creating Scatter and Bubble Plots
      1. Creating scatter plots
        1. Plotting points
        2. Sprucing up the scatter plot
          1. Adding gridlines
      2. Creating a bubble plot
      3. Summary
    14. 7. Creating Animated Visuals
      1. Introduction to animation
        1. Animating using transitions
          1. Animating the fill color of a rectangle
          2. Animating multiple properties simultaneously
          3. Delaying a transition
          4. Creating chained transitions
          5. Handling the start and end events of transitions
        2. Changing the content and size of text using tweening
        3. Timers
      2. Adding a fifth dimension to a bubble plot – time
      3. Summary
    15. 8. Adding User Interactivity
      1. Handling mouse events
        1. Tracking the mouse position using mousemove
        2. Capturing the mouse entering and exiting an SVG element
        3. Letting the user know they have clicked the mouse
      2. Using behaviors to drag, pan, and zoom
        1. Drag
        2. Pan and zoom
      3. Enhancing a bar graph with interactivity
      4. Highlighting selected items using brushes
        1. Online examples of brushes
        2. Implementing focus + context
      5. Summary
    16. 9. Complex Shapes Using Paths
      1. An overview of path data generators
        1. Creating a sequence of lines
        2. Areas
        3. Creating arcs, donuts, wedges, and segments
        4. Creating a pie chart
          1. Exploding the pie
          2. Creating a ring graph
        5. Creating symbols
        6. Using diagonals to create curved lines
      2. Drawing line graphs using interpolators
        1. Linear and linear-closed interpolators
        2. Step-before and step-after interpolations
        3. Creating curved lines using the basis interpolation
        4. Creating curved lines using the bundle interpolation
        5. Creating curved lines using the cardinal interpolation
      3. Summary
    17. 10. Using Layouts to Visualize Series and Hierarchical Data
      1. Using stacked layouts
        1. Creating a stacked bar graph
        2. Modifying the stacked bar into a stacked area graph
        3. Converting the area graph to an expanded area graph
      2. Visualizing hierarchical data
        1. Tree diagrams
        2. Creating a cluster dendrogram
        3. Representing hierarchy with an enclosure diagram
      3. Representing relationships with chord diagrams
      4. Techniques to demonstrate the flow of information
        1. Using streamgraphs to show changes in values
        2. Representing flows through multiple nodes
      5. Summary
    18. 11. Visualizing Information Networks
      1. An overview of force-directed graphs
      2. A simple force-directed graph
      3. Using link distance to spread out the nodes
      4. Adding repulsion to nodes for preventing crossed links
        1. Labelling the nodes
        2. Making nodes stick in place
        3. Adding directionality markers and style to the links
      5. Summary
    19. 12. Creating Maps with GeoJSON and TopoJSON
      1. Introducing TopoJSON and GeoJSON
      2. Creating a map of the United States
        1. Creating our first map of the United States with GeoJSON
      3. Styling the map of the United States
        1. Using the albersUsa projection
      4. Creating a flat map of the world
        1. Loading and rendering with TopoJSON
        2. Creating a map of the world using a Mercator projection
        3. Creating spherical maps with orthographic projection
      5. Spicing up a globe
        1. Coloring the countries on a globe
      6. Adding interactivity to maps
        1. Panning and zooming a world map
        2. Highlighting country borders on mouse hover
        3. Rotating a globe using the mouse
      7. Annotating a map
        1. Labelling states using centroids
        2. Placing symbols at specific geographic locations
        3. Creating a choropleth
      8. Summary
    20. 13. Combining D3.js and AngularJS
      1. An overview of composite visualization
      2. Creating a bar graph using AngularJS
        1. The web page and application
        2. The controller
        3. The directive for a bar graph
      3. Adding a second directive for a donut
        1. The web page
        2. The directive for the donut graph
      4. Adding a detail view and interactivity
        1. The web page
        2. Specifying an initial selectedItem in the controller
        3. The modified bars view directive
        4. Implementing the details view directive
        5. The resulting interactive page
      5. Updating graphs upon the modification of details data
        1. The web page
        2. The revised bar-view directive
        3. The revised donut-view directive
        4. The detail-view directive
        5. The results
      6. Summary
    21. Index
3.21.46.226