Skip to main content
Log in
S

simontoblad

@simontoblad·15 public vizzes

Loading thumbnail…

Fork of Stylized Line Chart

This example visualizes temperature readings over a week from the Data Canvas Sense Your City dataset, plotting time on the x-axis and temperature on the y-axis. The chart uses a smooth natural curve to connect data points, with styled axes and labels rendered in React and SVG. D3’s `scaleTime`, `scaleLinear`, `extent`, and `line` with `curveNatural` handle the data scaling and path generation, while custom React components build the axes and marks. The dataset is loaded as CSV and parsed with `d3.csv`.

Jan 30, 2022
Loading thumbnail…

Fork of Working with Time

This visualization displays temperature readings over time from the Data Canvas Sense Your City dataset as a connected line chart, with time on the x-axis and temperature on the y-axis. The data is loaded via d3.csv from a public GitHub gist. Built with React and d3.v5, the chart uses d3.scaleTime and d3.scaleLinear for scales, custom React components for axes, and d3.line to generate the SVG path.

Jan 30, 2022
Loading thumbnail…

Stylized Line Chart

A stylized line chart visualizes San Francisco weekly temperature trends over time, with each data point rendered as a circle tooltip. Built with React and D3 v5, it uses `scaleLinear` for both axes and `extent` to set domains from CSV data loaded via `d3.csv`. The SVG rendering includes custom axis components with formatted tick labels using `d3.format`, while the Poppins font and muted teal color style the minimalist design.

Jan 30, 2022
Loading thumbnail…

Fork of Stylized Bar Chart

This example visualizes the top 10 most populous countries in 2020 using a horizontal bar chart, based on UN World Population Prospects data. React renders the SVG, while d3’s `scaleBand` and `scaleLinear` position bars and axes, with d3’s `format` converting population values into abbreviated labels like “1.4B.” The chart loads CSV data via `d3.csv` and includes hover tooltips through SVG `<title>` elements. A Poppins font and orange bar styling give the chart its distinctive appearance.

Jan 30, 2022
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries using a horizontal bar layout with no axis labels, making the visualization intentionally minimal. The bars are rendered as SVG rectangles via React, with D3's `scaleBand` and `scaleLinear` determining the y-axis categories and x-axis lengths. The chart uses data from the United Nations World Population Prospects 2019 and is implemented with React and d3.v5, demonstrating a simple yet visually stark representation of population rankings.

Jan 30, 2022
Loading thumbnail…

Refactoring a Bar Chart

This example displays the top 10 most populous countries as a horizontal bar chart, with country names along the y-axis and population values on the x-axis. Built with React and SVG, it uses reusable components to render the bottom axis, left axis, and bars, with scales created via d3.scaleBand and d3.scaleLinear. Data is loaded asynchronously from a 2019 United Nations population CSV using d3.csv, and the visualization responds to loading with a placeholder text.

Jan 29, 2022
Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a minimal bar chart with no axes, using rectangles positioned by a d3.scaleBand and scaled by d3.scaleLinear. The data comes from the United Nations World Population Prospects 2019 CSV, loaded via d3.csv. Built with React, it renders SVG elements that include vertical gridlines generated from d3.scaleLinear ticks, though no axis labels or tick text appear.

Jan 28, 2022
Loading thumbnail…

Fork of Rendering Data with React & D3

This example displays a radial burst visualization of CSS named colors, using each color’s RGB hex value to fill a pie slice of equal size. The visualization loads data from a remote CSV file via D3’s `csv` utility, then uses React with hooks like `useState` and `useEffect` to manage the asynchronous data loading. The rendering is done in SVG, with D3’s `pie` and `arc` functions computing the slice geometry, while React maps each data point to a `<path>` element.

Jan 28, 2022
Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a horizontal bar chart of population by country, with bars sorted in descending order and tooltips displaying population values on hover. Built using the Vega-Lite API, it loads CSV data from an external URL via d3.csv, configures visual styling through a custom config object, and renders the chart as an SVG using vega and vega-lite. The chart resizes to fit the window with automatic width and height calculations, and tooltips are enabled through the vega-tooltip Handler.

Jan 27, 2022
Loading thumbnail…

Loading Data with React D3

This example demonstrates how to load and summarize a CSV dataset within a React application using D3. It fetches a list of CSS named colors from a GitHub Gist via D3’s `csv` function, then displays a text summary of the data’s size, row count, and column count. The rendering relies on React hooks like `useState` and `useEffect` to manage asynchronous data loading, while the `message.js` module formats the output using `d3.csvFormat` and `data.columns`. The visualization is a simple SVG-based preformatted text block, highlighting the integration of React and D3 for data fetching and display.

Jan 27, 2022
Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example displays summary statistics about a CSV dataset of CSS named colors, including file size in kilobytes, row count, and column count. The visualization is minimal—just text in a large font—but demonstrates three approaches to loading and parsing CSV data using D3 v5 and modern JavaScript. The active code uses `d3.csv` with a promise, while commented-out alternatives show `fetch` with `async`/`await` and `d3.csvParse`, as well as a nested promise structure often called the “pyramid of doom.” The data comes from a GitHub gist of named colors.

Jan 27, 2022
Loading thumbnail…

Fork of Smiley Face Part II

A yellow smiley face with black-outlined eyes and a wide circular head is rendered on a 960 by 500 SVG canvas. Underneath the static face, an interactive circle tracks the mouse pointer position, moving in real-time as the user moves over the canvas. The application uses React and ReactDOM, with the `useState` hook managing the mouse coordinates and an `onMouseMove` event handler updating the circle's center via SVG attributes. The smiley face itself is drawn using raw SVG circle elements, while the interactive element is generated programmatically through React's declarative rendering.

Jan 26, 2022
Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the initial step of a data visualization pipeline: loading and parsing CSV data. It shows how to asynchronously retrieve a text file from a remote URL using the `fetch` API, then prepare the raw text for subsequent parsing. The code defines a `fetchText` async function that calls `fetch(url)` and `response.text()` to acquire the CSV contents from a GitHub Gist containing named CSS colors. However, the example only fetches the data and does not yet parse or visualize it, leaving the actual CSV parsing and rendering for subsequent steps.

Jan 26, 2022
Loading thumbnail…

Smiley Face

A grid of eighteen smiley faces is rendered, each with randomly sized eyes and mouths, creating subtle variety across the collection. The faces are built using React components for the background circle, eyes, and mouth, with the mouth drawn using D3’s `arc` generator. Positioned via SVG groups and transforms, each face is a standalone SVG of 160 by 160 pixels. The code relies on React 17 and D3 v7, with the face components parameterized to vary eye radius, mouth width, and mouth radius per instance.

Jan 23, 2022
Loading thumbnail…

Fork of Smiley Face

A yellow smiley face rendered as an SVG, centered on a 960x500 canvas. It uses React to build the SVG elements and d3’s `arc` generator to create the mouth path. Circles define the face, eyes, and mouth stroke, all positioned relative to the center. The face outline and features use black strokes with a yellow fill, and the mouth arc spans from 90 to 270 degrees.

Jan 23, 2022