SkyBTW

@SkyBTW·4 public vizzes

D3.js Step by Step: Step 3 - Adding a Legend

This example demonstrates a donut chart with a legend, showing seven categorical labels with zero counts. The visualization uses D3 v4 to generate SVG paths via `d3.arc` and `d3.pie`, with a categorical color scale from `d3.scaleOrdinal(d3.schemeCategory20)`. A legend is added on the left side, positioning colored rectangles and text labels using the same color scale’s domain. The code manually calculates legend offsets based on fixed rectangle sizes and spacing, rendering the static dataset without interaction.

Feb 22, 2018

Loading thumbnail…

D3.js Step by Step: Step 3 - Adding a Legend

This example demonstrates a donut chart whose legend identifies each slice by category label, such as “A: <= 0.25 acres” and “G: 5000+ acres.” The chart is rendered as SVG using D3.js v4, with `d3.pie` and `d3.arc` generating the donut shape and `d3.scaleOrdinal` assigning colors from `d3.schemeCategory20`. The legend is built by appending a `g` element for each color domain entry, adding a colored `rect` and a `text` label, and positioning them vertically. All data counts are zero, so the chart displays an empty donut with its legend intact.

Feb 19, 2018

Loading thumbnail…

fresh block

This example shows an animated donut chart comparing two datasets: the number of fires and acreage burned, loaded from a TSV file. Toggling between the datasets via radio buttons triggers a smooth transition of the chart’s arcs. The visualization uses `d3.layout.pie`, `d3.svg.arc`, and a custom `arcTween` function with `transition.attrTween` to interpolate between the old and new arc angles. The data is parsed with `d3.tsv`, and the color scale uses `d3.scale.category20`.

Feb 19, 2018

Loading thumbnail…

simple scatterplot

A simple scatterplot displays seven data points on an SVG canvas, with each point positioned according to its x and y coordinates from a hard-coded JavaScript array. The visualization uses D3 v4 to append an SVG element to the body and set its dimensions to 960 by 500 pixels. While the code initializes the scatterplot structure and data, the point-rendering logic is incomplete, leaving the circles unplotted and the chart unfinished.

Feb 16, 2018