torstenaan

@torstenaan·13 public vizzes

Working with tim

This example shows temperature measurements over time as a line chart with circular markers, using data from a CSV file of weekly San Francisco temperatures. The visualization is built with React and D3 v5, using `scaleTime` and `scaleLinear` for the axes and `d3.line` with `curveNatural` for the smooth path. SVG circles with embedded `<title>` elements provide native tooltips on hover, while custom React components `AxisBottom` and `AxisLeft` render the tick marks and labels.

Feb 25, 2021

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, showing the relationship between sepal length and sepal width for individual iris flowers. The visualization uses React with D3 v5 SVG components, including custom axis and mark components that render circles for each data point. The code employs D3's `csv` parser, `scaleLinear`, and `extent` functions to load and scale the data, with axes configured using `AxisBottom` and `AxisLeft` components. The plot features a teal color scheme with gray gridlines and rotated axis labels, presenting a clean, modern take on the classic scatter plot.

Feb 25, 2021

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the population of the ten most populous countries from the United Nations World Population Prospects 2019 dataset. It uses React components to render SVG rectangles, with d3.scaleBand and d3.scaleLinear mapping countries and population values. Axes are built from custom React components calling xScale.ticks(), while a native SVG <title> element provides tooltips. The chart applies a teal fill, gray gridlines, and Roboto Condensed typography.

Feb 25, 2021

Loading thumbnail…

Refactored Bar Chart

This example shows a horizontal bar chart of population figures for the top ten countries from the United Nations World Population Prospects 2019 dataset. The visualization uses React components to render each bar and axis as SVG elements, with scales created via d3.scaleBand and d3.scaleLinear. Data is loaded asynchronously with d3.csv, while the axis tick marks and labels are generated by mapping over the scales' domains.

Feb 25, 2021

Loading thumbnail…

Axes with React and D3

This example shows a horizontal bar chart ranking the ten most populous countries using 2020 data from the United Nations World Population Prospects 2019. React manages the component state and lifecycle, fetching the CSV with d3.csv and storing the parsed data via useState. D3 scales, including scaleBand and scaleLinear, position the bars and axes, while the SVG rendering manually draws tick marks, labels, and rectangles rather than using d3.axis.

Feb 25, 2021

Loading thumbnail…

Margin Convention

This example shows a simple horizontal bar chart of the ten most populous countries, using data from the United Nations World Population Prospects 2019 dataset. The chart displays population values for 2020 as bars, with country names on the y-axis and a linear population scale on the x-axis. The visualization uses React to render SVG elements, while D3’s `csv`, `scaleBand`, `scaleLinear`, and `max` functions handle data parsing, scaling, and domain calculations. A fixed margin of 20 pixels on all sides positions the chart within a 960-by-500 pixel SVG canvas.

Feb 25, 2021

Loading thumbnail…

Simple Bar Chart

This example shows a simple horizontal bar chart ranking the ten most populous countries for 2020, with the length of each bar proportional to the country’s population. The chart is rendered as SVG using React, with d3.csv loading the United Nations World Population Prospects 2019 dataset and d3.scaleBand and d3.scaleLinear mapping country names and population values to positions and bar widths. React’s useState and useEffect manage the asynchronous data loading and state updates, while the bars themselves are drawn as SVG `<rect>` elements.

Feb 25, 2021

Loading thumbnail…

Rendering data as a pie chart with React and D3

A pie chart visualizes the relative frequency of CSS named colors by rendering each color as a slice of equal size, filled with its corresponding RGB hex value. The example loads color data from a CSV file using `d3.csv`, then computes the pie layout with `d3.pie` and generates SVG paths via `d3.arc`. React manages the component state and renders the SVG elements, while D3 handles the data loading and geometric calculations. The visualization highlights the color names themselves, with each slice showing the actual color it represents.

Feb 25, 2021

Loading thumbnail…

Rendering data with React and D3

The example displays a horizontal strip of CSS named colors, loaded from a CSV file, with each color rendered as a thin 3-pixel-high div. It demonstrates integrating React with D3 by using D3’s `csv` function to fetch and parse the data, then mapping over the array to create React elements with inline background colors. The code relies on React hooks (`useState`, `useEffect`, `useCallback`) and ReactDOM, while D3 v5 handles the asynchronous data loading.

Feb 25, 2021

Loading thumbnail…

Smiley Faces

Smiley Faces displays a grid of eighteen randomly generated cartoon faces, each with distinct eye size, eye offset, mouth thickness, and stroke width. The faces are rendered as SVG elements using React components for the face, skin, eyes, and mouth, with ReactDOM mounting the output. D3's `arc` generator creates the smile shape from a half-circle path, while `d3.range` produces the face count; all visual parameters are assigned via `Math.random()` at render time.

Feb 25, 2021

Loading thumbnail…

Loading data with React and D3

This example demonstrates loading a dataset of CSS named colors via `d3.csv`, then displaying its file size, row count, and column count. The app uses React’s `useState` and `useEffect` hooks to asynchronously fetch the CSV and update the UI, rendering the summary as a large `<pre>` element. It combines React’s state management with D3’s `csvFormat` utility to calculate file size directly from the fetched data.

Feb 25, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file using D3 v5, displaying basic statistics about the dataset in a large text block. The page fetches a CSV of CSS named colors from a GitHub gist via `d3.csv`, then computes the file size in kilobytes with `d3.csvFormat`, and counts the number of rows and columns before writing the results to a `pre` element. It showcases the asynchronous promise-based loading pattern and data inspection methods provided by D3’s CSV utilities.

Feb 24, 2021

Loading thumbnail…

Mouse Follower

A black circle follows the mouse cursor across a fixed 960x500 SVG canvas, remaining centered on the pointer’s exact position. Built with React’s `useState` and `useCallback`, the app listens to the SVG’s `onMouseMove` event, updates the circle’s `cx` and `cy` coordinates, and re-renders accordingly. D3 v5 is loaded but not directly used in the visible logic, while React produces the SVG elements and manages state updates.

Feb 23, 2021