mikepec

@mikepec·3 public vizzes

Customizing Axes

This example visualizes the top 10 most populous countries using a horizontal bar chart, based on 2018 estimates from the United Nations World Population Prospects. It highlights customization of D3 axes: the y-axis removes its domain line and tick lines, while the x-axis uses a custom tick format that abbreviates large numbers (e.g., converting "G" billions to "B") and extends tick lines across the full chart height. The visualization renders in SVG via D3 v5, using `scaleLinear` and `scaleBand` for scales, and `axisBottom` and `axisLeft` for axes. Data is loaded from a `data.csv` file containing car prices, though the chart's population data is derived from that source.

Feb 16, 2020

Loading thumbnail…

Rebrickable Lego Sets by Year

A bar chart displays the cumulative count of LEGO sets released each year, using a CSV of year and running total values. The visualization renders as an SVG with a date-scaled x-axis and a linear y-axis, using `d3.scaleTime()`, `d3.scaleLinear()`, and `d3.axisBottom()`/`d3.axisLeft()`. Bars are drawn via `d3.select("body")`, `g.selectAll('rect')`, and `.enter().append('rect')`, with animated transitions and custom axis-label styling.

Jan 25, 2020

Loading thumbnail…

Cars Report

This example uses a bar chart to compare the prices of five cars, with makes on the y-axis and a linear price scale along the x-axis. The chart is rendered as an SVG using D3 v5, employing `scaleBand`, `scaleLinear`, `axisLeft`, and `axisBottom` to position bars and ticks. A separate textual report, generated from the same CSV data via `csv()`, displays car details in a loading simulation before the chart renders. The interface simulates a delayed network request using a Promise.

Jan 19, 2020