Ed Hutchinson

@edwardhutchinson·12 public vizzes

ScatterWithDropdowns -- UsingD3Selects

This example displays the classic Iris dataset as a scatter plot, mapping petal length and sepal length along the x- and y-axes. The visualization uses D3’s `scaleLinear` for axes and `scaleOrdinal` for color coding, with a hoverable legend to highlight species. Built with React and D3 v5, the SVG is generated via D3 selections and the `join` API, while a dropdown menu offers interactive selection of the data columns to plot.

May 14, 2023

Loading thumbnail…

Tutorial(migrants case study)

A line chart plots temperature over timestamp from a subset of the Missing Migrants Global dataset, with each point rendered as a circle and connected by a natural curve. The example demonstrates a React-based D3 workflow, using `d3.csv` for loading data, `scaleTime` and `scaleLinear` for axes, `extent` for domains, and `line().curve(curveNatural)` for the path geometry. SVG output is generated through React components for axes and marks, styled with a serif font and purple accents.

May 14, 2023

Loading thumbnail…

Fork of WorldMap (mit Cities)

This is a world map visualization that displays global cities as circles, with their size scaled by population using a square root scale. The map is rendered using SVG paths and circles, with D3.js handling the geographic projections and data processing. The visualization uses `geoNaturalEarth1` for the map projection, `geoPath` for drawing countries and graticules, and `scaleSqrt` for city sizing. City and country data are loaded from external JSON and CSV sources, with React managing the user interface and rendering.

May 14, 2023

Loading thumbnail…

ScatterWithDropdowns

This interactive scatterplot displays the classic Iris dataset, allowing users to choose which flower measurements appear on the x- and y-axes via two dropdown menus. A legend color-codes points by species, and hovering over a legend entry filters the displayed points. The visualization is built with React and D3 v5, using D3's `scaleLinear`, `scaleOrdinal`, and `extent` for scaling, while `csv` loads the data. Rendering is done as an SVG, with custom `AxisBottom`, `AxisLeft`, `Marks`, and `Dropdown` components.

May 13, 2023

Loading thumbnail…

SelectDropdown

This example shows a React dropdown menu for selecting a pet, with the current choice logged to the console. It uses the `useState` hook to manage the selected value and a reusable `Dropdown` component that renders HTML `<select>` and `<option>` elements. The `onChange` event handler updates the state via `onSelectedValueChange`, while selected options are marked with the `selected` attribute. The app is rendered with `ReactDOM.render` into a root div.

Apr 24, 2023

Loading thumbnail…

WorldMap

This visualization shows a world map with country boundaries rendered in green, overlaid with graticule lines and gray sphere background. Using React to manage the component lifecycle, the code loads GeoJSON data from the world-atlas package via D3’s json function, then applies d3.geoNaturalEarth1 projection and d3.geoPath to draw SVG paths. TopoJSON’s feature and mesh utilities extract country polygons and interior borders from the topology.

Apr 23, 2023

Loading thumbnail…

LineChart

This interactive line chart visualizes weekly temperature trends in San Francisco, plotting temperature readings across time with carefully styled curves and circular data points. Built with React 16 and D3 v5, it uses d3.scaleTime and d3.scaleLinear for axes, while d3.line with a curveNatural interpolation generates smooth paths from CSV data loaded via d3.csv. The SVG rendering includes custom axis components with tick marks and labels, plus styled marks using a muted purple palette for the path and circles.

Apr 23, 2023

Loading thumbnail…

IrisStuff

This example visualizes the Iris dataset, plotting sepal length against sepal width as a scatterplot with fixed-radius circles. It loads CSV data via `d3.csv` and uses React to render SVG elements. The code constructs linear scales with `d3.scaleLinear` and `d3.extent`, formats axes with `d3.format`, and maps each flower to a circle in the `Marks` component. Custom `AxisBottom` and `AxisLeft` components generate tick lines and labels. The chart includes axis labels and a loading state, with data transformed to numeric values using a row-accessor function.

Apr 22, 2023

Loading thumbnail…

World Populations

This example displays a horizontal bar chart of the world’s top 20 most populous countries, using population data from the UN’s 2019 estimates. React components render SVG bars, scales, and axes, with d3.scaleBand and d3.scaleLinear mapping country names and population values. The d3.csv utility loads the dataset, while d3.format converts numeric labels into abbreviated “B” for billions. The chart highlights each bar’s exact population on hover via a native SVG `<title>` tooltip, with axis ticks styled through CSS.

Apr 22, 2023

Loading thumbnail…

CSS Colours

This example visualizes the 148 named CSS colours by fetching and parsing a CSV file of colour names and values from a remote gist. It uses `fetch` to retrieve the data and `d3.csvParse` to convert the raw text into structured rows, then logs the file size, row count, and column count to the browser console. The page is a minimal HTML document that loads D3 v7 from a CDN and embeds all logic in a script tag, demonstrating a straightforward data-loading pipeline without any graphical rendering.

Apr 16, 2023

Loading thumbnail…

Interaction with React

This example shows a single yellow circle that follows the mouse cursor across a 960-by-500 SVG canvas. Built with React 16.9 and D3 v5, the app uses the `useState` and `useCallback` hooks to track the cursor’s `clientX` and `clientY` coordinates, updating the circle’s `cx` and `cy` attributes on every `mousemove` event. The D3 `arc` import is included but unused in the visible code.

Apr 16, 2023

Loading thumbnail…

Let's make a face

This example shows a cartoon face built from layered SVG shapes, with a blue circular background, two black eyes, and a curved mouth. The face is composed modularly, with separate React components for the background, eyes, mouth, and a container that translates the center point. The mouth uses the d3.arc() API to generate its path from radius and angle parameters. All elements render as SVG inside a React component tree, positioning the face at the center of a 960-by-500 viewport.

Apr 15, 2023