DOCSEARCHbyAlgolia
Submit Docs

d3-graph-gallery

repository·master·Indexed 21 days ago

https://github.com/holtzy/d3-graph-gallery

A collection of D3.js chart examples and implementations. The repository provides source code for various visualizations, a structured learning path for D3.js basics—covering HTML, CSS, SVG, scales, and data mapping—and guidance on customization, interactivity, and the use of d3-shape functions like d3.arc().

Tokens
1.6K
Snippets
4
Records
9
Agent score
75%

What's inside d3-graph-gallery

  1. Overview of the d3-graph-gallery repository

    master
    The d3-graph-gallery repository serves as a collection of JavaScript code snippets used to power the D3.js graph gallery. It aggregates various implementations of D3 visualizations from different sources to provide a reference for developers looking to implement specific graph types.

  3. Produce a new static image for the gallery

    master

    To add a new screenshot of a graphic to the gallery, follow these steps:

    1. Take a screenshot of the graphic (ideally roughly square).
    2. Save the screenshot as tmp.png.
    3. Use the provided reformatting script to transform it into the required 480x480 white-background square format.

    The process uses ImageMagick to resize the image and add white space around it to ensure it is perfectly square.

    ./script_reformat_img.sh output_name.png

  4. Produce a new GIF for the gallery

    master

    To add a new animated GIF to the gallery, follow these steps:

    1. Record a .mov screen capture (e.g., using QuickTime Player).
    2. Save the recording as tmp.mov.
    3. Use the provided reformatting script to transform it into the required format.

    The script uses ImageMagick to add white space around the animation to make it square.

    ./script_reformat_gif.sh output_name.gif

  5. Add Interactivity to D3.js Charts

    master

    To make visualizations interactive, focus on these core concepts:

    • Data Updates: Implementing the enter, exit, and update pattern to handle changes in data. For a deep dive into this pattern, refer to d3indepth.com/enterexit/.
    • Animation: Adding smooth transitions to visual changes.
    • Hover: Triggering events when the mouse interacts with elements.
    • Zoom: Implementing zoom and pan capabilities.
    • Responsiveness: Ensuring charts adapt to different screen sizes.

  6. Customize D3.js Visualizations

    master

    Once basic charts are constructed, you can enhance them using the following customization techniques:

    • Color: Modifying the color schemes of elements.
    • Axis: Customizing axis appearance and behavior.
    • Small Multiples: Creating a series of similar graphs using different subsets of data.
    • Annotation: Adding explanatory text or markers (refer to Susie Lu's methods).
    • Legend: Adding legends to identify data series (refer to Susie Lu's methods).

  7. Learning Path for D3.js Basics

    master

    The basic section of the gallery provides a structured learning path for mastering D3.js, moving from static elements to dynamic data-driven visualizations. The curriculum follows this progression:

    1. HTML: Foundational structure.
    2. CSS: Controlling color and size.
    3. JavaScript: Implementing dynamic changes.
    4. SVG: Creating pure SVG elements and generating SVG via JavaScript.
    5. SVG Shapes: Working with different geometric shapes.
    6. Layout: Managing margins and coordinates.
    7. Scales & Axes: Drawing axes and understanding the concept of scales.
    8. Data Mapping: Mapping data to visual properties.
    9. Scatter-plots: Creating your first scatter-plot.
    10. Data Loading: Reading CSV files.

  8. Generate an arc shape using d3.arc()

    master

    To create an arc shape in D3, use the d3.arc() generator. This function returns a generator that, when called with a configuration object, produces a path string (d attribute) for an SVG <path> element.

    Required/Common configuration properties:

    • innerRadius: The radius of the inner circle (use 0 for a pie slice).
    • outerRadius: The radius of the outer circle.
    • startAngle: The starting angle in radians.
    • endAngle: The ending angle in radians.
    import * as d3 from "d3";

// Create an svg path using the arc function
const arcGenerator = d3.arc();
const arcPath = arcGenerator({
  innerRadius: 40,
  outerRadius: 100,
  startAngle: 0,
  endAngle: Math.PI
});

// Add a path to the DOM with d3
d3.select("#my_dataviz")
  .append("g")
  .attr("transform", "translate(100, 100)")
  .append("path")
  .attr("d", arcPath)
  .attr("fill", "#69b3a2")
  .attr("stroke", "black");

  9. Use the d3-shape arc function to generate SVG paths

    master

    The arc function from the d3-shape module is used to generate SVG path strings for arcs. It can be used in two ways:

    1. As a factory function: Call arc() to get a generator, then pass an object containing arc features (like innerRadius, outerRadius, startAngle, and endAngle) to that generator to produce a path string.
    2. Using a chainable API: Call arc() and then chain setter methods (e.g., .innerRadius(value)) to define fixed parameters. Calling the resulting function without arguments will produce a path using those fixed parameters.

    Common arc features include:

    • innerRadius
    • outerRadius
    • startAngle
    • endAngle
    import { arc } from "d3-shape";

// Method 1: Passing an object to the generator
const arcGenerator = arc();
const firstArc = arcGenerator({
  innerRadius: 0,
  outerRadius: 100,
  startAngle: 0,
  endAngle: Math.PI / 2
});

// Method 2: Using chainable setter methods for fixed parameters
const buildArcWithFixedParameters = arc()
  .innerRadius(0)
  .outerRadius(100)
  .startAngle(0)
  .endAngle(Math.PI / 2);
const secondArc = buildArcWithFixedParameters();