Skip to main content
Log in
J

jsrussell11

@jsrussell11·4 public vizzes

Loading thumbnail…

Data

This example renders the same dataset of monthly closing values as three distinct HTML tables using D3’s data join methods. The code builds tables by appending `thead` and `tbody` elements, then binds the array of date-and-close objects to rows and cells. It demonstrates creating a two-column table, a date-only table, and a close-only table, all styled with bright orange and blue cells via CSS. The script uses `d3.select`, `selectAll`, `data`, and `enter` to generate the tabular structures.

Nov 30, 2020
Loading thumbnail…

Data table

This example displays tabular data from a JSON file as an HTML table, with columns for each data key and rows for each object. The code uses `d3.json` to load the data and d3 selections such as `selectAll`, `enter`, and `append` to construct the `table`, `thead`, `tbody`, `th`, `tr`, and `td` elements. It maps over the data’s columns and rows dynamically to populate the cells, demonstrating a straightforward data-binding workflow in D3 v6 with React’s file structure.

Nov 30, 2020
Loading thumbnail…

Let's make a face with D3.js!

This visualization assembles a cartoon face from basic SVG shapes, depicting animated eyebrows alongside static eyes, a mouth, and a yellow circular head. The code constructs the face using D3.js v6 within a React framework, leveraging method chaining to position elements like the eyes and brows. Eyebrows transition vertically over two seconds via D3 transitions, while a mouth is drawn using the `arc` API to generate a path. The SVG canvas is 960 by 500 pixels, and all elements are centered using a translated group.

Nov 24, 2020
Loading thumbnail…

Let's make a face with D3.js!

This visualization assembles a cartoon face from basic SVG shapes, depicting animated eyebrows alongside static eyes, a mouth, and a yellow circular head. The code constructs the face using D3.js v6 within a React framework, leveraging method chaining to position elements like the eyes and brows. Eyebrows transition vertically over two seconds via D3 transitions, while a mouth is drawn using the `arc` API to generate a path. The SVG canvas is 960 by 500 pixels, and all elements are centered using a translated group.

Nov 24, 2020