swvogt

@swvogt·3 public vizzes

Making a Bar Chart

A bar chart displays the population of the top 10 most populous countries using 2018 estimates from the United Nations’ World Population Prospects 2017. The chart uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the bars, with axes customized to remove domain lines and format population ticks in billions. SVGs are generated dynamically via `csv()` loaded data, and the chart includes a title and x-axis label.

Jan 15, 2020

Loading thumbnail…

Cantor Set

The Cantor Set appears as a fractal ladder of horizontal black bars against a white background, with each successive row containing fewer and shorter segments. The visualization computes the set as an L-System using production rules (A→ABA, B→BBB), iterated eight times, and renders the result as SVG rectangles via React. D3’s `scaleBand` maps each symbol’s position and width, while a filter selects only A symbols for display. The code leverages React 16.10 and D3 v5, with ReactDOM rendering the final geometric pattern.

Jan 14, 2020

Loading thumbnail…

Temperature in San Francisco Area Chart

This area chart visualizes a week of temperature readings in San Francisco, plotting temperature over time with a smooth, maroon-filled curve. The x-axis shows timestamps and the y-axis shows temperature, with labeled axes and a title. Built with D3 v5, the code uses `scaleTime`, `scaleLinear`, and the `area` generator with `curveBasis` to create the smooth path, while `axisBottom` and `axisLeft` render the tick marks. Data is loaded from a CSV file, and the SVG rendering approach is evident.

Jan 13, 2020