Simon Davis

@Skidragon·4 public vizzes

Fork of Stylized Bar Chart

This example shows the top 10 most populous countries as a horizontal bar chart, using population data from the United Nations World Population Prospects 2019. The chart uses React with SVG rendering, and it relies on D3 v5 APIs including `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and the `bottom` and `left` axis tick generators. The bars are drawn as SVG `<rect>` elements, with tooltips formatted using D3's `format` function to display abbreviated numbers, such as “1.4B” for billions.

May 13, 2021

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as horizontal bars, using bar length to encode population without any axes or labels. The visualization is built with React and D3 v5, reading United Nations population data from a CSV file. It uses d3.csv for data loading, d3.scaleBand for the categorical y-axis positions, and d3.scaleLinear for the quantitative x-axis scaling. The bars are rendered as SVG rectangles within a red-background SVG canvas, positioned using D3’s transform utility.

May 12, 2021

Loading thumbnail…

Fork of Rendering Data with React & D3

This example visualizes CSS named colors as a radial burst of pie slices, each colored according to its hex value. The React component loads the data from a CSV file using D3's `csv` utility, then maps each row to a `path` element generated by D3's `pie` and `arc` functions within an SVG canvas. The visualization demonstrates a full-screen, frameless design that merges React's state management with D3's layout algorithms.

May 12, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatter plot of automobile displacement against horsepower, with each point representing a car model and tooltips revealing the vehicle name on hover. The visualization uses the Vega-Lite API to declaratively define the mark encoding and scales, while D3's `csv` function loads the auto-mpg dataset from a GitHub gist. The chart renders as a full-window SVG using Vega's renderer, with Vega-Tooltip handling interactive hover details. Custom axis and label styling from the `config` object improves readability against a clean background.

May 12, 2021