bilibili

@Gus0918·3 public vizzes

Making a bar chart

This example demonstrates the fundamental steps of creating a bar chart with D3.js, starting with selecting an SVG element and loading data from a CSV file. The code uses `d3.select` to grab the SVG and `d3.csv` to asynchronously fetch `data.csv`, logging the parsed data to the console. It sets the chart’s dimensions by reading the SVG’s width and height attributes. While the current implementation only loads and logs the data, it establishes the scaffolding for binding that data to visual bars, relying on D3 v5’s data-join and SVG rendering capabilities.

Jun 10, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face with eyes, eyebrows, and a mouth, rendered as SVG shapes. The eyebrows animate by moving up and down through a sequence of d3.transition() calls, each lasting 2000 milliseconds. The code builds the face by appending circle, rect, and path elements to the SVG, using D3.js v5 selection and arc() to define the mouth’s curved shape. The animation demonstrates fundamental DOM manipulation with D3’s append and attr methods.

Jun 10, 2020

Loading thumbnail…

Making a bar chart

A bar chart displays population estimates for ten countries, from China at 1.4 million to Mexico at 131 thousand. The example reads the `data.csv` file using `d3.csv` and logs the parsed rows to the console. The SVG canvas is selected with `d3.select` and its width and height attributes are read, but no bars are rendered yet. The code establishes the data-loading pipeline and SVG setup as a starting point for building the visualization.

Jun 10, 2020