onika123

@onika123·6 public vizzes

Barchart!

This bar chart shows the number of registered passenger cars per brand in the Netherlands, filtered to brands with at least 100 vehicles. The data comes from the RDW open data API and is loaded via d3.json. The visualization uses D3 v5 with SVG rendering, using scaleLinear and scalePoint for the axes, axisLeft and axisBottom for ticks, and circle elements to represent data points.

Nov 25, 2020

Loading thumbnail…

Making a Bar Chart

This bar chart ranks the top 10 most populous countries, with population values sourced from the 2018 United Nations World Population Prospects estimate. The chart uses D3 v5’s `scaleLinear` and `scaleBand` for axes, `axisBottom` and `axisLeft` for tick marks, and SVG rectangles for bars. The x-axis tick labels are formatted via `d3.format` to abbreviate large numbers, such as converting billions to billions with the letter "B". The visualization also customizes axes by removing domain lines and adding a plot title and axis label.

Nov 24, 2020

Loading thumbnail…

D3 piecharts

This example visualizes data as a set of pie charts rendered with SVG, with each chart’s arcs sized relative to its slice values. Built using D3 v4 within a React starter setup, the code creates a single pink-background SVG, centers a `<g>` container via an explicit transform, and appends pie chart elements directly to it. The visualization relies on D3’s selection and SVG primitives, with layout logic implied through D3’s pie and arc generators.

Nov 20, 2020

Loading thumbnail…

Making a Bar Chart

This example displays a horizontal bar chart of country populations using D3 v5, with the data loaded from a CSV file via `d3.csv`. The chart uses `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis, rendering SVG rectangles with a steelblue fill. Axes are added with `d3.axisLeft` and `d3.axisBottom`, and the population values are incremented by a constant before rendering, as shown in the code.

Nov 4, 2020

Loading thumbnail…

Let's Make a Face Part I

A yellow circle with black outlines forms a static face, complete with two eyes and a mouth drawn as an arc. The only animated element is the right eyebrow, which transitions downward and then back upward over two seconds using chained D3 transitions. The visualization is built with D3 v5, using `select`, `arc`, and `transition` APIs to construct SVG shapes and animate them. The face is centered within a fixed 960×500 SVG canvas, with all elements positioned relative to the center via a translated group.

Nov 4, 2020

Loading thumbnail…

Smiley Face Part IV

A smiling face rendered with React and D3 fills the browser window against a solid red background. The visualization is built as a React component that leverages D3 v5 for drawing the facial features. It uses a static SVG element selected via `d3.select` and styled with a background color through D3’s style method. The example demonstrates a simple, direct integration of React for component structure and D3 for SVG manipulation, with no interactive or animated behavior present.

Nov 4, 2020