H

HollyClarke19

@HollyClarke19·30 public vizzes

Loading thumbnail…

Multiple Views with Brushing

A choropleth-style bubble map and time-series histogram display global migrant deaths and disappearances, with brushing on the histogram filtering circles on the map in real time. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to render country boundaries, graticules, and proportional circle sizes scaled by the square root of the death count. The histogram bins monthly totals using `d3.bin` and applies a brush with `d3.brushX` to link the two views. Data comes from the Missing Migrants Project CSV, with React managing state and D3 v5 rendering SVG elements.

Loading thumbnail…

Fork of Missing Migrants Date Histogram (for ref, did not code)

A date histogram displays the monthly sum of dead and missing migrants, with bars colored teal and axes labeled "Time" and "Total Dead and Missing." The visualization uses React components to render an SVG, with `d3.bin` and `d3.sum` aggregating the data, `scaleTime` and `scaleLinear` mapping the scales, and custom `AxisBottom`, `AxisLeft`, and `Marks` components drawing the ticks and rectangles. Data comes from the Missing Migrants Dataset, loaded via `d3.csv`.

Loading thumbnail…

Size and Points on a Map

This map shows the population of cities worldwide as scaled symbols overlaid on a geographic projection. Using React with D3 v6, it renders a Natural Earth projection with graticules and land boundaries via `geoNaturalEarth1` and `geoPath`. City populations are encoded as circle radii using a square root scale (`scaleSqrt`) ranging up to 15 pixels, with the data sourced from a cleaned world cities CSV file. The visualization demonstrates a hybrid React-D3 approach, where D3 handles the mathematical projection and scaling while React manages the SVG markup and component lifecycle.

Loading thumbnail…

Points on a Map

A world map rendered with a Natural Earth projection displays city locations as semi-transparent green circles. The visualization layers geographic context using D3's `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to draw the sphere, graticules, landmasses, and country borders from TopoJSON data. City coordinates from a CSV dataset are projected onto the map and plotted as SVG circles, processed through React hooks that load the world atlas and city data asynchronously.

Loading thumbnail…

Attempt menus and colour

This interactive scatter plot explores the Iris dataset, allowing users to dynamically select which flower measurements appear on the x and y axes via React dropdown menus. Hovering over the color legend for species fades unrelated points and highlights the selected group. Built with React and D3 v6, the visualization uses `scaleLinear`, `scaleOrdinal`, `csv`, `extent`, and `format` to render SVG circles and axes, with brush-free interactivity driven by React state hooks.

Loading thumbnail…

Interactive Colour Legend

This example shows an interactive scatter plot of the Iris dataset, encoding petal length and sepal width along the x- and y-axes, with species mapped to color. The ordinal color legend uses `d3.scaleOrdinal` with SVG circles; hovering over a legend item highlights only the corresponding species by filtering the data with React state. Non-hovered marks fade via opacity, and the axis components use `d3.scaleLinear` and `extent` to derive domains. The data loads asynchronously through `d3.csv`.

Loading thumbnail…

Making a Colour Legend

This example displays the Iris dataset as a scatter plot of petal length against sepal width, with points colored by species. A custom color legend built from the ordinal color scale sits to the right of the plot. The visualization uses React to render SVG elements, with D3 v6 scales and axes. The iris data is loaded from a CSV URL using `d3.csv`, and the legend maps each species name to a colored circle using `scaleOrdinal`.

Loading thumbnail…

ScatterPlot with colour

This scatter plot visualizes the Iris dataset, showing the relationship between petal length and sepal width, with each of the three species distinguished by color. Built with React and D3 v6, the visualization renders SVG circles using `scaleLinear` for x and y axes and `scaleOrdinal` for the categorical color mapping. The code uses `d3.csv` to load the data and custom React components for axes and marks.

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, showing relationships between two selected attributes such as petal length and sepal width. Users can choose any variable for the X and Y axes using dropdown menus, which re-render the visualization with new scales and labels. Built with React and D3 v6, the chart uses d3.scaleLinear for axes and d3.csv for data loading, rendering circles as SVG marks. The code also implements custom axis components and formatted tick labels for a polished presentation.

Loading thumbnail…

Scatter Plot with Menus

A scatter plot of the Iris dataset displays the relationship between two selectable measurements, such as petal length and sepal width. Two dropdown menus let the user choose which flower attributes appear on the x- and y-axes, with axes and point labels updating dynamically. The visualization uses React for component state and rendering, and D3 v6 functions like `scaleLinear`, `extent`, and `csv` for data loading and scales. Points are rendered as SVG circles using the `Marks` component.

Loading thumbnail…

Menus with React

This example shows a pet-selection dropdown menu built with React. The interface displays a labeled "Choose a pet" menu with options for dog, cat, hamster, parrot, spider, and goldfish, defaulting to hamster. The code uses React's `useState` hook to track the selected value, and a reusable `Dropdown` component that maps over the options array to render native HTML `<select>` and `<option>` elements. The component updates the state via an `onSelectedValueChange` callback, with `ReactDOM.render` mounting the app into the root div.

Loading thumbnail…

React Starter

This example demonstrates a minimal React application that renders the text "Hello React!" to the browser. The code defines a simple functional component, `App`, and uses `ReactDOM.render` to mount it into a `#root` div. It relies on the React and React-DOM production libraries, loaded via external scripts in the `index.html` file, with the custom component logic contained in a separate `index.js` file. The visualization is purely a text-based output with no data processing or graphical elements.

Loading thumbnail…

World Map

This interactive visualization displays a world map using D3 and React, rendering Earth’s landmasses in green with country borders and graticule lines overlaid on a light gray sphere. The map is drawn using `d3.geoNaturalEarth1` projection and `d3.geoPath`, with geographic data sourced from the world-atlas TopoJSON file (countries-50m.json). Country interiors and borders are derived via `topojson.feature` and `topojson.mesh`, while React manages the SVG rendering and loading state.

Loading thumbnail…

Line Plot

This line plot visualizes weekly temperature data from the ‘Data Canvas Sense Your City’ dataset, showing temperature readings over time. The chart uses D3 scales (`scaleTime`, `scaleLinear`) and axes components (`AxisBottom`, `AxisLeft`) to map time to the x-axis and temperature to the y-axis. The data is loaded via D3’s `csv` parser and rendered as a smooth curved line using `line()` with `curveNatural`. The visualization is built with React components, renders as SVG, and includes custom styling for ticks, labels, and the path stroke.

Loading thumbnail…

Stylised Scatter Plot

A stylised scatter plot displays the relationship between petal length and sepal width from the Iris dataset, rendered as an SVG using React. The visualization uses D3's `scaleLinear` and `extent` functions to map data values to pixel coordinates, with axes generated by custom `AxisBottom` and `AxisLeft` components. Point positions are plotted via `Marks` circles, with tooltips showing formatted values. The data is loaded through D3's `csv` function from a GitHub Gist, and styling is applied via Poppins font and teal-colored marks.

Loading thumbnail…

Working with Time

This scatterplot shows temperature readings from the "data canvas sense your city" dataset over a one-week period in San Francisco. The visualization uses D3 v6 scales (`scaleTime` and `scaleLinear`) to map timestamps and temperatures to SVG circle positions, with axes rendered as custom React components (AxisBottom, AxisLeft). The code loads CSV data via `d3.csv`, formats time ticks with `timeFormat('%a')`, and includes native SVG `<title>` elements as tooltips showing each point's day.

Loading thumbnail…

stylised bar chart

This stylized bar chart visualizes the top 15 countries by population using a horizontal bar layout. Built with React and D3, it employs `scaleBand` for the categorical y-axis and `scaleLinear` for the population x-axis. The SVG rendering includes custom axes and tooltips that format numbers with D3's `format('.2s')`. Data comes from the UN Population 2019 CSV, loaded via `d3.csv`. The chart displays population values with a teal color scheme, and the country labels are positioned on the left side.

Loading thumbnail…

refactored bar chart

This example shows a horizontal bar chart of population data for the top 10 countries in 2020, sourced from a UN population CSV file. React components render SVG rectangles for the bars, with D3’s scaleBand and scaleLinear mapping country names and population values. AxisBottom and AxisLeft components generate tick marks and labels using D3’s scale ticks, while the useData hook asynchronously loads and parses the CSV with d3.csv.

Loading thumbnail…

Axes with React & D3

This example shows a horizontal bar chart ranking the top 10 countries by projected 2020 population, with SVG rendering driven by React’s declarative component model. D3 utilities—`csv` for loading the UN population dataset, `scaleBand` and `scaleLinear` for positioning bars, and `max` for domain computation—prepare the scales, while React maps the data to `<rect>` and `<text>` elements. The chart also displays x-axis tick lines and labels derived from `xScale.ticks()`, with margins applied via an SVG `<g>` transform.

Loading thumbnail…

bar chart with margins

This bar chart displays the ten most populous countries in 2020, using horizontal bars to compare their population sizes. The visualization loads data from a CSV file via `d3.csv`, then uses React’s `useState` and `useEffect` hooks to manage the data. Bars are rendered as SVG `<rect>` elements, positioned with a `scaleBand` for countries on the y-axis and scaled with `scaleLinear` for population on the x-axis. Margins are applied through a `<g>` transform, with D3 v6 handling data parsing and scales.

Loading thumbnail…

shit bar chart

This example visualizes the top 10 countries by 2020 population as a horizontal bar chart, with each bar’s length proportional to its population value. It loads the UN Population 2019 dataset via `d3.csv`, parses the “2020” column to numbers, and slices the first ten rows. React manages the component state and renders SVG `<rect>` elements, while `d3.scaleBand` and `d3.scaleLinear` compute the y- and x-axis scales. The chart is built with d3.v6 and React 16.9, using the production UMD builds, and outputs a static SVG scene.

Loading thumbnail…

visualising css colour data with D3

This example visualizes CSS named color data as a circular radial burst, with each slice representing one color from the dataset. The code loads the data using `d3.csv` from a GitHub gist, then renders the visualization as SVG paths using React. D3’s `pie` generator assigns equal angles to each entry, while `arc` with an inner radius of zero and outer radius spanning the width produces the filled wedge shapes. Each path is colored by the hexadecimal value from the corresponding data row, creating a full spectrum wheel.

Loading thumbnail…

visualising css colour data with react and D3

A visualization displays all CSS named colors as stacked horizontal strips, each colored by its RGB hex value. The data loads from a CSV file using `d3.csv`, while React’s `useState` and `useEffect` manage the asynchronous fetch. Each row renders as a fixed-width block with height 4 pixels, creating a full-spectrum bar. The code relies on React DOM and the D3 CSV parser, with both libraries included via CDN in the HTML file.

Loading thumbnail…

loading data with react and d3

This example demonstrates a React application that loads a CSV file containing CSS named colors and displays a concise summary of the dataset, including its size in kilobytes, row count, and column count. The visualization bridges React state management with D3's data utilities, using the `useState`, `useCallback`, and `useEffect` hooks to manage asynchronous data fetching. The `csv` function from `d3.v6` retrieves the remote CSV, while `csvFormat` converts the parsed data back into a string for measurement. The ReactDOM renderer outputs either the loading message or the computed statistics, showcasing how D3's data handling integrates seamlessly within a modern React workflow.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the initial stage of a data visualization pipeline: loading and parsing CSV data from a remote URL. It fetches a dataset of CSS named colors using the Fetch API, then parses it with d3.csv. The visualization displays basic metadata about the parsed dataset—its size in kilobytes, row count, and column count—in a large pre element. The code highlights D3’s csvFormat method to compute data size and showcases how D3 v6 handles asynchronous data loading via Promises.

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across an SVG canvas, updating its position in real time as the pointer moves. The visualization is built with React, using the `useState` and `useCallback` hooks to track and update the mouse coordinates. The app renders a single cyan circle within an SVG element, and the circle’s `cx` and `cy` attributes are driven by the current mouse position from the `onMouseMove` event. No external data source is used; the interaction is purely based on user input.

Loading thumbnail…

Fork of Smiley face part VI

A grid of eighteen randomly generated smiley faces fills the screen, each with unique eye positions, radii, and mouth thickness. The faces are composed of SVG circles and paths built with React components, while the mouth uses the d3.arc() function to create a curved shape. Visual variation comes from the d3.range() function iterating to produce the grid, with each face receiving random property values. The rendering relies on ReactDOM to mount the components into an SVG container.

Loading thumbnail…

Smiley face part V

A smiley face rendered in SVG shows a yellow circle background with black outline, two black eyes, and a curved mouth. The visualization uses React components to structure each facial feature and D3’s arc generator to create the mouth shape. The drawing is centered in a 960 by 500 viewport, with the background circle radius derived from the viewport height and a fixed stroke width for the outline.

Loading thumbnail…

Smiley face part IV

This example draws a smiling face using React and D3’s `arc` generator to create a semi-circular mouth. A yellow circle with a black stroke forms the head, two smaller circles serve as eyes, and the mouth arc spans from 90 to 270 degrees. Rendering is done with SVG inside a React component, with all shapes positioned via a central transform translation. The code explicitly uses `d3.arc` from the d3 library and React’s `ReactDOM.render` to mount the visualization.

Loading thumbnail…

Smiley face custom

This example renders a classic yellow smiley face with custom details, including pink blurred blush ellipses and white eye highlights. Using React components and SVG, it centers a yellow circle with a black stroke, two black eyes, and a mouth drawn as an arc. The code leverages D3’s `arc` generator to create the mouth path, while SVG filters like `feGaussianBlur` apply the blush effect. All shapes are positioned via static coordinates within a responsive SVG canvas, with no interactive or data-driven behavior.