Skip to main content
Log in
C

Cameron

@campatrick·5 public vizzes

Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries in 2018, based on United Nations population estimates. It shows how D3 axis customization can enhance readability, using custom tick formats (e.g., abbreviating millions as "B") and styled grid lines. The chart employs `d3.scaleLinear` and `d3.scaleBand` for scales, with `d3.axisBottom` and `d3.axisLeft` for axes. SVG rendering styles tick text, grid lines, and labels via CSS. Data is loaded from a CSV file using `d3.csv`, with population values multiplied by 1000.

Jun 29, 2020
Loading thumbnail…

Let's make a face with D3.js!

This example shows a dual-line chart comparing stock close and open prices over time, with two colored axes (steel blue for close, red for open) to distinguish the scales. It uses D3 v5’s `d3.csv` to load the data, `d3.timeParse` to format dates, and `d3.scaleTime`/`d3.scaleLinear` for the x and y ranges. The lines are drawn with `d3.line` and appended as SVG paths, with axes rendered via `d3.axisBottom`, `d3.axisLeft`, and `d3.axisRight`. Data comes from `data4.csv`.

Jun 29, 2020
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG using D3.js v5. Its eyes and mouth are static, while its rectangular eyebrows animate upward and back down via chained `transition` calls on a group element. The code uses `d3.select` and `d3.arc` to construct the face, with all positions and dimensions defined as numeric constants. The animation runs once over four seconds, demonstrating basic DOM manipulation and data-driven shape creation with D3.

Jun 29, 2020
Loading thumbnail…

Let's make a face with D3.js!

A smiley face drawn with SVG shapes animates its eyebrows in a looping motion. The example demonstrates fundamental D3.js DOM manipulation by using `select` to target SVG elements and `append` to build circles, rectangles, and a path arc for the mouth. A chained `transition().duration()` sequence moves the eyebrow group up and down over two-second intervals. The face is centered on a 960-by-500 viewport, with all coordinates offset from the middle via a translation transform.

Jun 29, 2020
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG using D3.js v5. Its eyes and mouth are static, while its rectangular eyebrows animate upward and back down via chained `transition` calls on a group element. The code uses `d3.select` and `d3.arc` to construct the face, with all positions and dimensions defined as numeric constants. The animation runs once over four seconds, demonstrating basic DOM manipulation and data-driven shape creation with D3.

Jun 29, 2020