Snivvy (@Snivvy), VizHub

Make a face with D3.js

This example draws a simple cartoon face using D3.js v5’s selection and shape APIs. A yellow circle serves as the head, with two smaller circles for eyes and an arc-generated path for the mouth, all positioned relative to a centered group. The code explicitly uses `d3.select`, `d3.arc`, and SVG attributes like `cx`, `cy`, and `r` to construct the SVG output, with a fixed eye spacing and offset defined as constants.

May 20, 2020

Loading thumbnail…

customizing axes

This example demonstrates a horizontal bar chart of the eight most populous countries, with population values formatted in billions using a custom tick formatter that replaces "G" with "B." The chart uses `d3.csv` to load data, `d3.scaleLinear` and `d3.scaleBand` for scaling, and `d3.axisBottom` and `d3.axisLeft` for axes. Grid lines extend from the x-axis ticks, while the y-axis domain line is removed for a cleaner look. The SVG is rendered via React.

May 20, 2020

Loading thumbnail…

Making a bar chart

This example shows a horizontal bar chart of population estimates for eight countries, with country names on the y-axis and population values on the x-axis. The visualization uses D3 v5’s `scaleLinear`, `scaleBand`, and `axisLeft`/`axisBottom` to position bars and ticks within an SVG, loading data from a CSV file via `d3.csv`. React is listed as the framework, though the visible code relies on direct DOM selection. Bars are styled with a steelblue fill via CSS.

May 19, 2020

Loading thumbnail…

Make a face with D3.js

This example draws a simple cartoon face using D3.js v5’s selection and shape APIs. A yellow circle serves as the head, with two smaller circles for eyes and an arc-generated path for the mouth, all positioned relative to a centered group. The code explicitly uses `d3.select`, `d3.arc`, and SVG attributes like `cx`, `cy`, and `r` to construct the SVG output, with a fixed eye spacing and offset defined as constants.

May 19, 2020