Tsaikkari

@Tsaikkari·11 public vizzes

Fork of Stylized Line Chart

This example displays a stylized line chart of weekly temperature data from the Data Canvas Sense Your City dataset, plotting temperature against time. The visualization uses rounded, natural curves via d3.line and curveNatural, with a smooth, minimalist aesthetic defined by Poppins typography and teal strokes. The chart is rendered as SVG through React components, with axes generated by d3.scaleTime and d3.scaleLinear, while data loading and parsing rely on d3.csv and date/temperature formatting.

May 3, 2023

Loading thumbnail…

Axes with React and D3

This example shows a bar chart of the top 10 countries by population in 2020, with a horizontal layout and labeled axes. React manages the component state and SVG rendering, while d3.csv loads the UN population data and d3.scaleBand and d3.scaleLinear compute the bar positions and widths. Axes are drawn manually using xScale.ticks and yScale.domain, with tick marks and text elements generated as React components.

Aug 1, 2021

Loading thumbnail…

The Margin Convention

This example demonstrates the Margin Convention, a fundamental layout pattern for D3 visualizations, using a horizontal bar chart of the ten most populous countries in 2020. The chart loads UN population data via `d3.csv`, then renders SVG rectangles with React components. The visualization shows how margins create an inner plotting area, with `d3.scaleBand` mapping country names to the y-axis and `d3.scaleLinear` scaling population values to the x-axis. The code explicitly calculates `innerHeight` and `innerWidth` by subtracting margins from the total dimensions, and applies the margin offset through an SVG `<g>` transform.

Aug 1, 2021

Loading thumbnail…

Pathetic bar chart

This example shows a horizontal bar chart displaying the populations of the ten most populous countries, using data from the UN Population 2019 CSV file. The bars are rendered as SVG rectangles via React, with the d3.csv function loading the data and d3.scaleBand and d3.scaleLinear mapping country names to vertical positions and population values to horizontal bar widths, respectively. The chart appears sparse, with only bars and no axes or labels, which highlights the raw data in a minimal layout.

Aug 1, 2021

Loading thumbnail…

Rendering data with React and D3

A radial burst of named CSS colors, loaded from a CSV file, visualizes each color as a slice in a pie chart. The code uses D3’s `csv` loader and `pie` generator to compute angles, while `arc` creates the paths that React renders as SVG elements. The example demonstrates a hybrid workflow where D3 handles data parsing and layout calculations, and React manages the component state and DOM updates via hooks like `useState` and `useEffect`.

Aug 1, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This gallery example shows a scatter plot of auto-mpg data, with horsepower on the y-axis and year on the x-axis. Each circle’s size encodes vehicle weight, while its color represents the country of origin, and hovering reveals the car’s name. Built with the Vega-Lite API, it loads CSV data via d3.csv and renders the visualization using Vega and Vega-Lite, with a customized config and tooltip handler.

Jul 31, 2021

Loading thumbnail…

Fork of Loading Data with React & D3

This example shows a React application that loads a CSV file of CSS named colors and displays a summary of the dataset. The interface presents a large-text message reporting the file size in kilobytes, the number of data rows, and the number of columns. The app uses React’s `useState` and `useEffect` hooks to manage the asynchronous data loading, with D3’s `csv` function fetching the remote CSV file. Once the data is retrieved, the custom `message` module calculates the byte length of the formatted data using `d3.csvFormat`.

Jul 26, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL using D3 v5. It displays the file size in kilobytes, the number of rows, and the number of columns in a large text element. The code uses `d3.csv` to fetch and parse the data, then accesses the resulting array’s `length` and `columns` properties. It also relies on `d3.csvFormat` to compute the formatted size, with an alternative commented approach using `fetch`, `async/await`, and `d3.csvParse`. The data comes from a GitHub gist containing named colors.

Jul 26, 2021

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor within an SVG canvas, updating its position in real time to mirror the pointer's movement. The visualization demonstrates state management and event handling in a React application, where the mouse position is tracked via the SVG's `onMouseMove` event and stored in React state. The circle is rendered as an SVG `<circle>` element, with its `cx` and `cy` attributes bound to the current mouse coordinates. The code uses React Hooks, specifically `useState` and `useCallback`, alongside D3 v5 for SVG creation, all within a React 16.9 framework.

Jul 25, 2021

Loading thumbnail…

Fork of Smiley Face Part VI

A grid of eighteen randomly generated smiley faces demonstrates how React components and D3 shape generators can be combined for declarative SVG rendering. Each face reuses the same `Face` component, with randomized properties for stroke width, eye offset, eye radius, mouth width, and mouth radius passed as props. The mouth is drawn using D3’s `arc` generator, while the background circle and eyes are plain SVG elements. The React app maps over an array from `d3.range` to render the faces, with all positioning handled by a shared `FaceContainer` SVG group.

Jul 25, 2021

Loading thumbnail…

Assignment: Tweaked Face

A smiling face rendered in yellow SVG, composed of circles, ellipses, and polylines, is programmatically assembled from React components. The face includes blinking eyes, a mouth that briefly disappears, and animated cigarettes that move across the canvas while smoke puffs fade upward using CSS keyframes. Built with React and D3 v7, the visualization uses D3's arc generator to create a partially closed eyelid, while SVG elements handle the face’s geometry. The data is static, defined through component props and hardcoded coordinates, with animation driven entirely by CSS rather than D3 transitions.

Jul 25, 2021