Skip to main content
Log in
V

Vanessa

@vjgray·18 public vizzes

Loading thumbnail…

Polished World Map

This example presents a polished world map rendered in an SVG using React and D3 version 5. The visualization displays landmasses in teal, a light gray sphere background, a graticule grid, and interior borders, all generated via `d3.geoNaturalEarth1` and `d3.geoPath`. The map is built from world-atlas TopoJSON data, processed with the `topojson` library's `feature` and `mesh` functions to create land and interior line geometries. Styling is applied through CSS classes for each map layer.

Apr 5, 2021
Loading thumbnail…

E26 Working with Time

This line chart illustrates temperature readings over time, using a smooth natural curve to connect data points. The visualization is built with React and D3 v5, rendering an SVG with time-scaled x-axis and linear y-axis. Data is loaded from a CSV file using `d3.csv`, with timestamps parsed as Date objects. Axis ticks are formatted using `timeFormat('%a')` for day-of-week labels. The chart includes styled axis labels and tick marks, with the temperature line drawn using `d3.line` and `curveNatural`.

Apr 5, 2021
Loading thumbnail…

E25 Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, plotting sepal length against sepal width. The React component renders SVG circles with a teal fill, styled with Poppins font and custom gridlines. It uses d3.scaleLinear for both axes, d3.extent for domain calculation, and d3.format for tick labels. Axes are built from reusable React components, and the data is loaded asynchronously via d3.csv.

Mar 30, 2021
Loading thumbnail…

E24 - STYLISED a Bar Chart

This stylized bar chart visualizes regional trip volumes using an SVG-based React interface. It loads a CSV dataset via the `csv` function from D3 v5 and maps the data to horizontal bars, with the y-axis displaying regions and the x-axis showing trips. The example clearly separates concerns across three modular files: `AxisBottom.js`, `AxisLeft.js`, and `Marks.js`, which utilize D3's `scaleBand`, `scaleLinear`, and `format` utilities for scaling and tick formatting. The chart uses a linear scale for the x-axis, with tick labels formatted using a custom two-significant-figure format, and includes a tooltip for each bar.

Mar 23, 2021
Loading thumbnail…

E23 - Refactoring a Bar Chart

This bar chart shows the number of trips per region, rendered as horizontal bars using SVG within a React component. The code imports `scaleBand` and `scaleLinear` from d3 to map data to pixel coordinates, while React’s `useState` and `useEffect` handle asynchronous CSV loading via d3’s `csv` method. The `AxisBottom`, `AxisLeft`, and `Marks` components are separated for reuse, producing a clean, refactored visualization with a left margin aligned to the region labels.

Mar 16, 2021
Loading thumbnail…

Fork of E22 - axis with react and d3

This example shows a horizontal bar chart of trip volumes by region, rendered as an SVG with React components managing the visualization’s state and layout. The code loads CSV data via `d3.csv`, scales the bars with `d3.scaleBand` and `d3.scaleLinear`, and manually generates axis ticks and gridlines using `d3.axis`-style logic. React’s `useState` and `useEffect` hooks handle asynchronous data fetching, while D3 utilities compute the maximum value and tick positions for the chart.

Mar 16, 2021
Loading thumbnail…

E22 - the Margin Convention on Basic Bar Chart

This example shows a basic horizontal bar chart of regional trip volumes using the D3 margin convention. The chart loads CSV data from a GitHub gist with D3’s `csv` utility, then uses React hooks (`useState`, `useEffect`) to manage asynchronous data fetching. Rendering is done as SVG, with `scaleBand` for the categorical y-axis (regions) and `scaleLinear` for the numeric x-axis (trips). The margin object defines inner chart dimensions, and a transformed `<g>` element positions the bars within the SVG canvas.

Mar 8, 2021
Loading thumbnail…

Fork of E20 Fork of Rendering Data with React & D3

A bar chart displays the volume of trips for various regions using React and D3. The visualization loads CSV data from a GitHub gist via `d3.csv`, then renders SVG rectangles with React components. The x-axis scale uses `d3.scaleLinear` to map trip volumes to pixel widths, while the y-axis uses `d3.scaleBand` to position each region’s bar. The chart is rendered inside a React app that manages data loading with state hooks and displays a loading message until the data arrives.

Mar 1, 2021
Loading thumbnail…

E20 - Rendering Data with React

This example demonstrates real-time New Zealand transport volume data, imported from a GitHub-hosted CSV file, rendered as a series of colored div elements using React. The application uses D3’s `csv` utility to asynchronously fetch and parse the dataset, converting the string `Volume` values into numeric `Trips` properties. React’s `useState` and `useEffect` hooks manage the loading state, displaying a large "loading..." message until data is ready, after which each record becomes an individual styled `<div>`. The visualization leverages React’s DOM rendering capabilities rather than SVG, with colors sourced directly from the data’s `color` field.

Mar 1, 2021
Loading thumbnail…

E20 Fork of Rendering Data with React & D3

A radial burst of CSS named colors is rendered as a pie chart, with each color category occupying a proportional slice. The visualization loads a CSV of color names and hex values from a GitHub gist, then uses React hooks (`useState`, `useEffect`) to fetch the data and D3 utilities (`csv`, `pie`, `arc`) to compute the slice angles and SVG paths. React renders the resulting `<path>` elements inside an SVG, filling each slice with its corresponding hex value. The layout centers the chart with a D3 arc generator and scales the outer radius to the full viewport width.

Mar 1, 2021
Loading thumbnail…

E18 Vega-Lite API Template

This example visualizes automobile performance and physical characteristics using a Vega-Lite API template. It plots engine displacement against weight, with color encoding by origin and point size representing miles per gallon, using a binned scatterplot of acceleration and displacement as an alternative view. The code loads data from a CSV via d3.csv, then constructs the visualization through the vega-lite-api library, which wraps Vega-Lite specifications. The visualization renders with SVG through Vega’s renderer, includes tooltips via vega-tooltip, and applies custom styling from the config.js file to improve label readability.

Feb 14, 2021
Loading thumbnail…

E16 Loading Data with React & D3

This example demonstrates how to load and summarize a CSV dataset using React state and D3 utilities. It fetches public transport performance data for New Zealand regions via the `csv` function from D3 v6, storing the parsed result in React’s `useState` hook. While loading, the view displays "loading..."; once the data arrives, it renders a text summary via `message.js`, showing the file size in kilobytes, row count, and column count. The visualization is purely textual, output in a large `<pre>` block with no graphical SVG elements.

Jan 31, 2021
Loading thumbnail…

E13 & E15 Loading and Parsing CSV Data Data

This example demonstrates loading and parsing CSV data from a remote URL using D3.js version 6. It fetches New Zealand public transport performance data by region and displays summary statistics—file size in kilobytes, row count, and column count—in large text on the page. The implementation uses `d3.csv()` to retrieve and parse the dataset, then reports the results via `d3.csvFormat()` and the parsed array’s properties. The code also includes commented alternatives using the Fetch API with `async`/`await` and `d3.csvParse()`.

Jan 31, 2021
Loading thumbnail…

E14 Mouse Follower

A yellow circle follows the mouse cursor across an SVG canvas, moving smoothly as the pointer travels. The example demonstrates interaction with React by using the `useState` hook to store the mouse's x and y coordinates, updating them via the `onMouseMove` event. The `useCallback` hook memoizes the event listener to optimize performance, while `ReactDOM.render` mounts the component. The circle's position is bound directly to the state, leveraging unidirectional data flow to keep the visualization in sync with user input.

Jan 31, 2021
Loading thumbnail…

Smiley Face - E9

A grid of randomly generated smiley faces demonstrates modular React component composition. Each face is defined recursively through separate files for the face container, background circle, eyes, and mouth, while the `index.js` file uses `d3.range` to map over an array and render 18 faces. The mouth uses `d3.arc` to create a semicircular path. All parts are rendered as SVG elements with randomized stroke widths, eye offsets, and radii, creating varied expressions within a uniform yellow and black style.

Jan 3, 2021
Loading thumbnail…

Smiley Face - E8

This example shows a simple smiley face rendered as vector graphics, composed of a yellow circle with a black outline, two dark eyes, and an arc-shaped mouth. The face is centered within an SVG canvas, with its features positioned relative to the center point. The code uses React to construct the SVG elements and the D3.js `arc` API to generate the mouth’s path. The background circle and stroke are defined explicitly, while the eyes are placed using offset coordinates. The rendering approach relies on SVG primitives within a React component, with D3 providing the arc geometry.

Dec 30, 2020
Loading thumbnail…

Smiley Face - Tweak the Face! Episode 7

A smiling face rendered in SVG uses React components and D3's `arc` API to draw all facial features. The code constructs geometric shapes, including circles for the head and eyes, ellipses for the mouth, rectangles for teeth, and a blue arc for hair. Positions and dimensions are defined through constant variables for easy tweaking. The SVG is centered using a translate transform, with D3 arcs generating the mouth and head outline paths.

Dec 29, 2020
Loading thumbnail…

Smiley Face - Episodes5, 6 and 7

This example renders a smiley face using React and D3 v6, drawing a yellow circle for the head, two dark circles for eyes, and an arc for the mouth. The SVG is centered at 960 by 500 pixels, with all shapes positioned relative to the center using a D3 arc generator for the mouth path. The code constructs the visualization with JSX, applying stroke widths and fill colors directly in the SVG elements. It demonstrates basic geometric composition and D3’s arc API within a React component structure.

Dec 29, 2020