HaHaFi

@HaHaFi·2 public vizzes

Fork of Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects 2017. The d3.v5 code loads data from a CSV and uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the SVG visualization. The y-axis labels show country names while the x-axis formats tick values with a custom `format('.3s')` function that replaces "G" with "B". The chart also includes a title, axis label, and gridlines.

Sep 27, 2022

Loading thumbnail…

making a bar chart

This example shows a single yellow circle animating downward over a red SVG background. The circle is centered horizontally and vertically, then transitions its vertical position over two seconds using a D3 transition. The code uses D3 v7’s `select` and `append` to create the SVG circle, and reads the SVG’s width and height attributes to position it. The animation is driven by the `transition().duration()` method, with a hardcoded frame size of 960 by 500 pixels.

Sep 27, 2022