glennburger

@glennburger·2 public vizzes

Untitled

This example demonstrates how to create a simple bar chart using D3.js version 7 and SVG rendering within a React framework. It renders three orange rectangles with fixed widths and heights that vary based on the dataset [4, 15, 34], positioning them horizontally with a 25-pixel spacing. The visualization uses `d3.select`, `d3.selectAll`, and the `.data()` method to bind the data array to SVG rect elements, with `attr()` calls setting fill color, dimensions, and x/y coordinates. The chart shows how D3's declarative API can generate static SVG graphics without animation.

Jan 18, 2022

Loading thumbnail…

Smiles

This visualization plots automobile data as a scatterplot, using a circle mark for each vehicle. The horizontal axis maps origin, the vertical axis maps horsepower, with color encoding weight, size encoding miles per gallon, and a tooltip showing the car name. It is built with React and uses the vega-lite-api to construct the chart specification, rendering marks with a fixed size and partial opacity. The visualization relies on the `vl.markCircle`, `vl.x`, `vl.y`, `vl.color`, `vl.size`, and `vl.tooltip` APIs to define the encoding.

Jan 14, 2022