x1umao

@x1umao·2 public vizzes

Let's make a bar chart with D3.js

This example shows a bar chart of country populations using D3.js, with each bar’s height scaled linearly from the population values and positioned along a categorical axis for country names. It renders entirely as SVG, using `scaleLinear` for the y-axis, `scaleBand` for the x-axis, and `axisLeft` to draw tick marks. Population data comes from a CSV file loaded via `csv`, and the bars are appended as `rect` elements with a steelblue fill. The chart uses margins to place the plot area within a fixed 960×500 SVG canvas.

Oct 18, 2020

Loading thumbnail…

Making an Interactive Pie Chart

This interactive donut chart visualizes income sources (Sales, Dividends, Interest) from a CSV file, with each slice’s arc length proportional to its amount. Hovering a slice reveals a tooltip showing its percentage of the total, computed via `d3.sum`. Built with D3 v5, it uses `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` for coloring, and renders as SVG with hover effects and a styled tooltip.

Oct 17, 2020