Skip to main content
Log in
L

littlenanopichu

@littlenanopichu·6 public vizzes

Loading thumbnail…

Basic Bar Chart

This example displays a horizontal bar chart comparing the populations of ten countries, with bars extending from a shared baseline. The visualization maps each country’s population to bar length using D3’s `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis. It reads the data from a CSV file, multiplies each population value by 1000, and renders the SVG elements with `axisLeft`, `axisBottom`, and appended `rect` shapes. The chart uses a steelblue fill for the bars.

Apr 24, 2020
Loading thumbnail…

Basic Bar Chart

This bar chart displays the population of ten countries, sorted by country name along the vertical axis and using horizontal bars to encode population magnitude on the horizontal axis. It is built with D3 v5, using `select`, `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load data from a CSV file and render an SVG. The chart applies a linear scale for population values and a band scale for categorical country labels, with bars styled in steel blue.

Apr 24, 2020
Loading thumbnail…

Basic Bar Chart

This bar chart displays population figures for the ten most populous countries, using horizontal bars ranked from largest to smallest. The visualization loads data from a CSV file and renders it as SVG rectangles via D3 v5, with populations scaled linearly along the x-axis and countries positioned by a band scale on the y-axis. It includes axes generated by `axisBottom` and `axisLeft`, and applies a steelblue fill and font styles from an external CSS file.

Apr 24, 2020
Loading thumbnail…

Let's make a face with D3.js!

A smiling face is rendered as a yellow circle with black eyes, animated eyebrows, and a curved mouth built from an arc path. The code uses D3 v5 selections to append SVG shapes, and chains `transition().duration()` calls to move the rectangular eyebrows up and down. The mouth is generated with the `d3.arc()` helper, specifying inner and outer radii and angular extents. Static circle elements define the face and eyes, while the animation runs once on load in a React framework.

Apr 24, 2020
Loading thumbnail…

Basic Bar Chart

This bar chart displays the population of ten countries, sorted by country name along the vertical axis and using horizontal bars to encode population magnitude on the horizontal axis. It is built with D3 v5, using `select`, `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load data from a CSV file and render an SVG. The chart applies a linear scale for population values and a band scale for categorical country labels, with bars styled in steel blue.

Apr 24, 2020
Loading thumbnail…

Read in JSON department files

A zoomable sunburst visualization displays student enrollment counts by gender across university departments and courses. Three radio buttons filter the view to specific departments. The visualization loads data from three JSON files using `Promise.all` and `d3.json`, building a hierarchical structure with `d3.hierarchy` and `d3.partition`. The code uses `d3.arc` to render the sunburst segments and includes interactive zooming via click handlers.

Apr 24, 2020