shb02192

@shb02192·3 public vizzes

making a bar chart

This example shows the populations of the ten most populous countries using horizontal bars, with each bar’s length proportional to its population value. The chart reads from a CSV file listing country names and populations, sourced from the World Population Prospects 2017. It uses D3 v6’s `scaleLinear` and `scaleBand` to map data to pixel coordinates, and `axisLeft` and `axisBottom` to render the axes. Bars are drawn as SVG `rect` elements, styled with `fill: steelblue`.

Oct 1, 2020

Loading thumbnail…

let's make a face

This example displays a simple yellow circle with a black outline centered inside an SVG canvas, accompanied by a static list of cars below it. The visualization uses D3 v6’s `select` function to locate the SVG element and `append` a circle, with its radius and position derived from the viewport’s height and width. The circle’s fill and stroke are set via attribute chaining, while the page’s layout and typography are styled through standard CSS. The underlying data is hardcoded list items shown in plain HTML.

Sep 12, 2020

Loading thumbnail…

HTML cars report

This example renders a static SVG report titled “cars report” using React and plain SVG elements. It displays a list of car models, including a 2012 Nissan Leaf and two 2009 vehicles, alongside abstract geometric shapes like circles, rectangles, lines, and a path. The SVG markup is written directly in JSX, with styling applied via an external stylesheet that sets a monospace font and red accents. The code uses no data-binding libraries, relying instead on hardcoded SVG primitives and CSS classes for visual formatting, making it a minimal front-end demonstration.

Sep 12, 2020