Rod* Wilhelmy

@defvol·7 public vizzes

Fork of Working with Time

A fork of the "Working with Time" example visualizes temperature over time as a scatter plot with a smooth line connecting points. The chart plots time on the x-axis and temperature on the y-axis, using a dataset from Data Canvas Sense Your City (week temperature data for San Francisco). Built with React and D3 v5, it leverages D3 scales (`scaleTime`, `scaleLinear`), the `line` and `curveNatural` path generators, and `csv` for data loading. The SVG rendering includes interactive circle tooltips via a `<title>` element.

Jan 3, 2022

Loading thumbnail…

Iris Scatterplot

This example visualizes the Iris dataset, showing each flower’s sepal length against its sepal width as a point on a scatterplot. The chart uses React to render SVG circles via a custom `Marks` component, with D3 scales (`d3.scaleLinear`) and axes generated by reusable `AxisBottom` and `AxisLeft` components. Data is loaded asynchronously from a CSV file using `useData` and `d3.csv`, and hoverable tooltips are provided through SVG `<title>` elements. The visualization emphasizes clean axes and labeled tick marks for readability.

Dec 28, 2021

Loading thumbnail…

Refactored barchart

This bar chart displays the top 10 most populous countries for 2020, based on United Nations World Population Prospects data. The chart renders horizontal bars using React and SVG, with axes built from reusable components that call `d3.scaleBand`, `d3.scaleLinear`, and `d3.max`. Data loads via `d3.csv`, and tick labels use `d3.format` with a custom suffix replacement. Hovering a bar reveals its exact population via an SVG `<title>` tooltip.

Dec 28, 2021

Loading thumbnail…

Fork of Loading Data with React & D3

This example renders the CSS named colors dataset as a pie chart. Each color is represented by a slice whose fill matches its RGB hex value, providing a visual catalog of the data. The code loads the CSV using D3’s `csv` utility and manages state with React’s `useState` and `useEffect`. The pie layout and arc paths are generated via D3’s `pie` and `arc` functions, with the SVG output produced declaratively through React.

Dec 28, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This bar chart, built with the Vega-Lite API, visualizes the relationship between vehicle weight, horsepower, and fuel efficiency across different origins. Each circle represents a car model, with position encoding weight and horsepower, while color indicates origin and size reflects miles per gallon. The visualization uses the Vega-Lite API’s `markCircle` and encoding channels to generate the SVG directly in the browser. The underlying data is loaded from a CSV file via `d3.csv`, and the tooltip is enabled through the vega-tooltip `Handler`, with basic chart styling customized in the `config` object.

Dec 27, 2021

Loading thumbnail…

Fork of Mouse Interaction

A fork of the Mouse Interaction example renders a single yellow SVG circle that follows the mouse cursor across the full browser window. Built with React 16.9 and the `useState` and `useCallback` hooks, the component updates the circle's `cx` and `cy` attributes in response to `onMouseMove` events. The visualization demonstrates real-time position tracking without a fixed data source, relying solely on the user's pointer coordinates.

Dec 27, 2021

Loading thumbnail…

Fork of Smiley Face Part V

Eighteen randomly generated smiley faces fill the viewport, each composed of a yellow circle with a black outline, two dark eyes, and a curved mouth drawn with D3’s `arc` generator. The faces vary in eye offset, eye radius, and mouth size, created as React components that render SVG elements. The code imports `range` from D3 to loop and `arc` for the mouth path, while the React DOM renders each `Face` with randomized parameters.

Dec 27, 2021