judietrich

@judietrich·4 public vizzes

Vertical Bar Chart

This vertical bar chart visualizes the ten most populous countries, using data from the United Nations World Population Prospects 2019. The visualization renders as an SVG via React, with bars drawn by the custom `Marks` component. Categorical country names are placed on the x-axis via `xScale`, while the `yScale` maps population values to bar heights. The chart uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with tick labels formatted using `d3.format`.

Oct 4, 2021

Loading thumbnail…

Fork of Working with Time

This fork of “Working with Time” visualizes weekly temperature readings from the Data Canvas Sense Your City dataset as a time-series scatter plot. Using React with D3 v5, it renders SVG circles positioned via d3.scaleTime and d3.scaleLinear on axes generated with custom tick components, while d3.csv loads and parses the timestamp and temperature values. The y-axis label is rotated via SVG transforms, and each circle includes a native `<title>` tooltip formatted with d3.timeFormat.

Oct 3, 2021

Loading thumbnail…

Let's Make a Face III

The visualization presents a grid of 18 procedurally generated cartoon faces, each with randomized eye positions, radii, mouth dimensions, and stroke widths on a yellow background. Built with React and rendered as SVG, the code composes reusable components like `BackgroundCircle`, `BothEyes`, and `Mouth`. The mouth is drawn using `d3.arc` with an inner and outer radius, while the faces are positioned via SVG `<g>` transforms. All properties are assigned random values within ranges, producing varied expressions across the grid.

Oct 1, 2021

Loading thumbnail…

Let's Make a Face

A yellow cartoon face composed of SVG shapes—two eyes, a mouth, and a circular head—renders in a React application. The code imports `arc` from d3 to generate the mouth path, while static circle elements define the eyes and head. The React component returns an `<svg>` element, positioning all shapes within a translated group using the center coordinates. D3 v7 is loaded globally, and ReactDOM renders the component into the page. This example demonstrates a simple declarative composition of geometric primitives without interactive behavior or external data.

Sep 27, 2021