Nart Williamson

missing migrants

This visualization shows a world map with cities that have populations greater than 50,000, sourced from the Simplemaps World Cities Database. Each city appears as a small semi-transparent circle positioned by longitude and latitude. The map uses d3.geoPath with the geoNaturalEarth1 projection, rendering land masses, country boundaries, and graticules from the World Atlas TopoJSON. The React-based code loads the data with d3.csv and d3.json, then draws the SVG marks.

May 7, 2021

Scatter binned

A scatter plot of the Missing Migrants Dataset aggregates individual events into monthly bins along the time axis, with bar heights representing the total dead and missing per month. The visualization uses React to structure SVG rendering, with D3.js providing `scaleTime`, `scaleLinear`, the `histogram` binning API, and `timeMonths` for threshold generation. Axes are constructed from custom React components that map scales to ticks and grid lines.

May 6, 2021

Fork of Missing Migrants on a Map

This visualization maps events from the Missing Migrants Dataset as circles sized by the total dead and missing per incident. It uses a natural Earth projection with SVG rendering, showing country boundaries, graticules, and a sphere outline. The code leverages d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule for map geometry, while d3.scaleSqrt maps death tolls to circle radii. Data loading relies on d3.csv and topojson for world atlas features, all within a React framework using d3.v5.

May 5, 2021

map

This example displays a world map using the GeoJSON country boundaries from the World Atlas TopoJSON dataset. The map is rendered as SVG paths via `d3.geoEqualEarth` and `d3.geoPath`, with each country filled in teal and outlined in light gray, while a separate sphere path provides a neutral background. It uses React for component structure, with data loaded through D3’s `json` method and converted from TopoJSON to GeoJSON using the `feature` function.

May 4, 2021

Fork of Force Directed Graph Starter

This example shows a minimal force-directed graph with three nodes and two links arranged dynamically. It renders circles for nodes and lines for edges in an SVG container, using a simulation that applies charge, link, and centering forces to position the elements. The code implements this with D3 v6 functions including `forceSimulation`, `forceManyBody`, `forceLink`, and `forceCenter`. Node and link positions update on each simulation tick by setting SVG attributes directly. The data is hardcoded as three named nodes and two connections.

Graph no react

This example shows a force-directed graph with three nodes and two links, rendered as circles in an SVG container. It uses React only to mount the visualization, while D3 handles the simulation and rendering logic. The code calls `forceSimulation`, `forceManyBody`, `forceLink`, and `forceCenter` to compute layout, and appends circles via `select` and `data`. A `tick` event logs to the console but does not update the circle positions, leaving the graph static.

Fork of Time line chart

This line chart visualizes temperature readings over time, with each data point marked by a circle and connected by a smooth natural curve. The visualization uses React components for rendering SVG elements, with D3 v5 functions like `scaleTime` and `scaleLinear` to map data to coordinates, and `curveNatural` to smooth the line. The chart includes labeled axes for time and temperature, with tick marks styled via CSS. The data is loaded from a CSV file of weekly San Francisco temperatures using D3's `csv` parser.

Graph

This example shows a React component that renders a simple graph visualization, with a placeholder "test" div in place of actual chart content. The implementation combines React 16.9 with D3 v5, importing the `arc` function from D3 while using ReactDOM to mount the component into the DOM. The HTML file loads React, ReactDOM, and D3 from CDN, with the body containing a root div and a bundled JavaScript file. The code demonstrates the basic integration pattern of embedding D3 utilities within a React component structure.

Menus with react

A React component renders a large pet-selection dropdown, demonstrating how D3 and React coexist in a single visualization. The example uses React's `useState` hook to manage the currently selected pet, with a custom `Dropdown` component that maps array options to `<select>` and `<option>` elements. While the full D3 implementation is not shown here, the setup pairs React's declarative UI with D3's data manipulation capabilities, as referenced by the included d3.v5 library. The page displays a simple, centered interface with a label and styled select element.

May 2, 2021

React starter

This example demonstrates a minimal React and D3 integration, rendering a simple "test" message inside a React component. The app uses `ReactDOM.render` to mount the `<App />` component into the page root, while the HTML loads React 16.9, ReactDOM, and D3 v5 from CDNs. The code imports the `arc` function from D3, though it is not utilized in the visible UI. The setup serves as a starter template for combining React’s component model with D3’s visualization utilities.

May 2, 2021

Time line chart

This example visualizes the weekly temperature fluctuations in San Francisco over a period of time, using a time series line chart. The x-axis represents time using a d3.scaleTime, while the y-axis maps temperature with a d3.scaleLinear. The data is loaded via d3.csv from a gist containing weekly temperature records. Each data point is rendered as a circle using React components, with axes and labels provided by custom AxisBottom and AxisLeft components, all drawn as SVG elements.

May 2, 2021

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the Iris dataset, mapping petal length on the x-axis against sepal width on the y-axis for each flower specimen. Built with React and D3 v5 using SVG rendering, the chart displays all data points as teal circles with hover tooltips showing exact values. The code uses D3's `scaleLinear` and `extent` functions to construct the axes, while the `csv` loader fetches data from a GitHub gist. The minimalist design employs Poppins typography and custom axis tick styling for a clean presentation.

Apr 29, 2021

iris scatter

This example shows a scatter plot of the Iris flower dataset, comparing petal length against sepal width. The visualization uses React to render SVG circles positioned via d3.scaleLinear scales, with d3.axisBottom and d3.axisLeft for tick marks. Data is loaded asynchronously from a CSV file using d3.csv, with numeric parsing applied to each measurement field. The plot includes axis labels and a clean, minimal style with teal-colored marks on a white background.

Apr 29, 2021

Fork of iris scatter

This bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019. Each horizontal bar represents a country, with its length proportional to the 2020 population estimate. The visualization uses React with D3’s `scaleBand` and `scaleLinear` for positioning and scaling, and renders SVG elements with custom axis components. A tooltip on each bar shows the population value using D3’s `format` function, with billions abbreviated as “B”.

Apr 29, 2021

Stylized Fork of Refactored Bar Chart

This stylized fork of a bar chart displays the top 10 most populous countries, using a horizontal layout with a reversed categorical axis. The chart uses React with D3 v5 scales (scaleBand and scaleLinear) to render SVG rectangles, with axes drawn via custom components. The data comes from the UN World Population Prospects 2019. The visualization omits left axis labels, instead using a single "Population" label, and applies a custom Poppins font and muted color palette for a polished aesthetic.

Apr 28, 2021

styled Fork of refactor bar chart

This bar chart displays the top 10 most populous countries with a horizontal bar for each, using population values from the United Nations World Population Prospects 2019 dataset. The chart renders in SVG via React components, with axes drawn using custom React elements that reference d3 scales (`scaleBand` and `scaleLinear`) for positioning. The bottom axis uses `xScale.ticks()` to generate tick marks, while the left axis maps country names. Population data is loaded asynchronously with `d3.csv` and sorted to show the ten largest entries.

Apr 28, 2021

refactor bar chart

This example visualizes the top 10 most populous countries as a horizontal bar chart, with country names on the y-axis and population values on the x-axis, rendered as SVG via React components. The chart uses `d3.scaleBand` and `d3.scaleLinear` to map data from the United Nations World Population Prospects 2019 dataset. Axis and mark components are split into separate React files, with `Marks.js` drawing rectangles and `AxisBottom` and `AxisLeft` adding ticks and labels, demonstrating a refactored modular architecture.

Apr 28, 2021

Fork of axis

This example displays the top 10 most populous countries as a bar chart with no axes, using React to render SVG elements. It loads United Nations World Population Prospects 2019 data via d3.csv, then uses d3.scaleBand for the y-axis categories and d3.scaleLinear for the x-axis values. The chart draws tick marks and labels for both scales using d3’s scale methods, while the bars themselves are plain SVG rectangles. The rendering relies on React’s useState and useEffect hooks to manage the asynchronous data fetching.

Apr 27, 2021

axis

This example displays the ten most populous countries as horizontal bars, sized by their 2020 population estimates from the United Nations World Population Prospects 2019 dataset. The chart deliberately omits axes, emphasizing the raw length comparisons. Using React’s `useState` and `useEffect` hooks, it fetches CSV data via `d3.csv`, then renders SVG rectangles with `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis. The visualization highlights how bar charts rely on axes for accurate value interpretation.

Apr 27, 2021

Fork of Axes with React & D3

This example renders the top 10 most populous countries as horizontal bars using React for component structure and D3 for scales and data loading. It uses `scaleBand` and `scaleLinear` from D3 to map countries and population values to pixel positions, while manually drawing tick marks and labels for both axes. The data comes from the United Nations World Population Prospects 2019 CSV, and the SVG output demonstrates a minimal, self-contained approach to axis generation without D3 axis components.

Apr 27, 2021

bar chart united natations

This bar chart displays United Nations population estimates for 2020 across countries, using horizontal bars ranked along a categorical y-axis with a linear x-axis scaled to the maximum population value. The visualization is built with React and D3 v5, loading CSV data from a GitHub Gist via `d3.csv` and rendering SVG rectangles positioned through `scaleBand` and `scaleLinear`.

Fork of rendering data with react

This example uses React to render a full-screen pie chart of CSS named colors, with each color represented by an arc segment at equal value. The visualization loads data from a CSV file containing named colors and their hex values, fetched via a URL. The chart is built declaratively using React elements, with D3.js v5 APIs such as `csv` for parsing and `pie` and `arc` for calculating segment paths. SVG paths are generated and filled with the hex values from the data.

rendering data with react

This example displays a dataset of CSS named colors as a vertical strip of colored rows, one 4-pixel-tall rectangle per color. The visualization loads a CSV file from a GitHub gist using D3’s `d3.csv` method and renders each row as an SVG-friendly React `<div>` with a background color set to the CSS `RGB hex value`. React’s `useState` and `useEffect` hooks manage the asynchronous data fetch, while a loading message appears until the data arrives. The project combines React 16.9, D3 v5, and SVG-like divs for a simple data-driven 960-pixel-wide rendering.

Fork of loading data with react and d3

This example demonstrates how to load and display CSV data in a React application using D3’s `d3.csv` method. It fetches a dataset of CSS named colors from a GitHub gist and stores the parsed rows in component state via React’s `useState` and `useEffect` hooks. The code includes a commented-out SVG visualization of circles, suggesting potential rendering with React elements, though no visual output is actively rendered. A utility function in `message.js` calculates dataset statistics like file size, row count, and column count using `d3.csvFormat`.

loading data with react and d3

This example demonstrates how to load and summarize external CSV data within a React application using D3.js. The visualization presents a plain-text summary of the dataset’s size, row count, and column count, displayed in a large `<pre>` element. The code uses React’s `useState` and `useEffect` hooks to fetch the CSV from a GitHub gist via `d3.csv`, then formats the summary with `d3.csvFormat`. The `message.js` module computes the file size in kilobytes and counts rows and columns, while `ReactDOM.render` mounts the component to an SVG-rendered page.

Loading and Parsing CSV data

This example demonstrates how to load and parse CSV data using two approaches: the `d3.csv` method for direct fetching and parsing, and a manual `fetch` with `d3.csvParse` for text-based parsing. It displays the data size in kilobytes, row count, and column count for a CSS named colors dataset sourced from a GitHub gist. The code uses D3 v5’s `d3.csv`, `d3.csvParse`, and `d3.csvFormat` APIs, alongside native `fetch` and async/await, rendering results into a styled `<pre>` element.

Fork of Smiley Face Part II

This interactive React visualization displays a single black circle on a blank SVG canvas that follows the user’s mouse movements. It demonstrates a simple event-driven interaction where the circle’s center coordinates update in real time based on the pointer’s clientX and clientY values. Built with React 16.9, the app uses the useState and useCallback hooks to manage and update the mouse position state, while the SVG onMouseMove handler triggers these updates. The example shows how React’s declarative rendering can create responsive, mouse-tracked graphics in a minimal, frame-free environment.

Fordker

This example generates a grid of 18 stylized faces, each built from reusable React components for the background circle, eyes, and mouth. The faces are rendered as SVG elements within a shared coordinate system, using d3’s `arc` generator to draw each mouth. Eye radius varies randomly per face, while all other facial features and positions remain constant. The visualization demonstrates component composition and d3 integration within a React framework, with the SVG output driven by the `FaceContainer` component.