tmrb

@tmrb·3 public vizzes

Stylized Bar Chart

This chart displays the top 10 most populous countries as horizontal bars, with population values formatted in billions and countries labeled on the vertical axis. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Data comes from the United Nations World Population Prospects 2019, loaded via `d3.csv`. The SVG rendering includes styled axes, tick marks, and hover tooltips generated using SVG `<title>` elements.

Jul 16, 2020

Loading thumbnail…

Making a Bar Chart

This example uses D3 v5 to render a horizontal bar chart of the top 10 most populous countries, with population values from the 2017 United Nations World Population Prospects (2018 estimates). It employs `scaleLinear` and `scaleBand` for positioning and sizing, and customizes the axes via `axisBottom` with a tick formatter that converts large numbers to billions. The chart’s bars are drawn as SVG rectangles, with axis labels and a title added as text elements.

Jul 15, 2020

Loading thumbnail…

Untitled

A scatter plot of the Iris dataset explores relationships between flower measurements. Dropdown menus allow selecting which attribute drives the x- and y-axes, using a linear scale for each. The visualization is built with React and D3, rendering SVG circles with tick marks and axis labels. Data is loaded asynchronously from a CSV via the `csv` function, and the chart updates dynamically based on user selections.

Jul 15, 2020