Sam

Fork of Multiple Views Cleanup

This interactive visualization combines a bubble map of missing migrants with a linked time-series histogram. The map projects city coordinates using `d3.geoNaturalEarth1` and overlays country boundaries and graticules from world-atlas TopoJSON data. The histogram bins reported dates into monthly intervals using `d3.histogram` and `d3.timeMonths`. A brushable selection component, created with `d3.brushX`, allows temporal filtering, with the map updating to reflect the selected time range. The visualization is built with React and rendered as SVG, using data from the Missing Migrants Global 2019 dataset.

May 18, 2021

Multiple Views Cleanup

This visualization combines a world map with a date histogram to show the locations and timing of migrant deaths and disappearances. The map uses a natural Earth projection with graticules, country boundaries, and semi-transparent circles scaled by the total dead and missing count. The histogram below aggregates the same metric by month, using d3.bin and d3.timeMonths. The data comes from a CSV of missing migrants, and the map is rendered with d3.geoPath and TopoJSON world atlas data.

May 16, 2021

Fork of Missing Migrants Multiple Views

A world map displays circles sized by the square-root-scaled 'Total Dead and Missing' count for each migrant incident location, alongside a monthly histogram of the same metric over time. The visualization uses D3's `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` to render the map, while a `histogram` with monthly `thresholds` and `scaleTime`/`scaleLinear` axes drive the bar chart. Data comes from a CSV of Missing Migrants Global incidents, with the React app fetching both it and the world atlas TopoJSON.

May 13, 2021

Missing Migrants on a Map

This visualization maps global missing migrant incidents, with each circle representing an event and its radius scaled proportionally to the reported deaths and missing persons using a square root scale. The map uses a natural Earth projection rendered via d3.geoPath, drawing landmasses, graticules, and country boundaries from World Atlas TopoJSON. Data comes from the Missing Migrants Dataset, loaded with d3.csv. The React app integrates with D3 v5, rendering all elements as SVG circles layered over geographic paths.

May 8, 2021

Fork of Missing Migrants Date Histogram

This chart displays the total number of dead and missing migrants per month, aggregated from the Missing Migrants Dataset. The visualization uses d3.bin to group reported incidents into monthly time bins, then d3.sum to calculate each bar’s height. React renders SVG bars and axes, while d3.scaleTime and d3.scaleLinear handle positioning. Hovering reveals exact totals via native tooltips.

May 8, 2021

Missing Migrants Date Histogram

This visualization displays a date histogram of the total dead and missing migrants per month, sourced from the Missing Migrants Dataset. The code uses D3.js v5’s `scaleTime`, `scaleLinear`, `histogram` (via `d3.bin`), and `sum` to bin the data by month and aggregate the counts. Rendered as an SVG with React, the chart includes custom axes and tooltips via SVG `<title>` elements.

May 8, 2021

Sized Points on a Map

This example displays a world map with circles sized by population for cities exceeding 50,000 residents. It uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to render landmasses, graticules, and interiors. City data is loaded from a CSV using `d3.csv`, with circle radii scaled by a square root scale (`d3.scaleSqrt`). The visualization is built with React and rendered as SVG, styled with soft teal, semi-transparent points.

May 5, 2021

Fork of Points on a Map

This visualization displays a world map populated with circles representing cities with populations over 50,000. The map uses a Natural Earth projection with visible graticules, country boundaries, and landmasses rendered in muted grays. City coordinates are projected from longitude and latitude data using D3’s `geoNaturalEarth1` and `geoPath`, with circles drawn as SVG elements. The example is built with React, relies on D3 v5 for data loading and projection, and sources city data from Simplemaps and country boundaries from the World Atlas TopoJSON.

May 3, 2021

Fork of Scatter Plot with Color Legend

This scatter plot visualizes the Iris dataset, mapping petal length and sepal width for 150 flowers. A color legend encodes species, and hovering over a legend item highlights that species by reducing the opacity of all other points. The code uses React with SVG rendering, d3.scaleLinear for axes, d3.scaleOrdinal for colors, and custom React components for marks and legends.

May 3, 2021

Fork of Polished Scatter Plot with Menus

This example visualizes the Iris Dataset as an interactive scatter plot, allowing users to dynamically select which floral measurements appear on the x- and y-axes via React Dropdown menus. The species of each iris is distinguished by color using a d3.scaleOrdinal with a categorical range. Built with React and D3 v5, the visualization renders circles as SVG marks, with axes generated by custom components that use d3.scaleLinear for positioning and d3.format for tick labels. The data is loaded asynchronously from a CSV URL using d3.csv.

May 1, 2021

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis and sepal width on the y-axis. Built with React and D3 v5, it uses `scaleLinear` and `extent` to compute scales, with custom `AxisBottom` and `AxisLeft` components for tick rendering. Each data point is an SVG circle with a tooltip, styled with a Poppins font and teal marks. The code loads CSV data via `d3.csv` and `useData` hook, demonstrating a clean React-D3 integration.

Fork of Scatter Plot with Menus

This interactive scatter plot, built with React and D3.js v5, visualizes the classic Iris Dataset, which contains measurements of sepal and petal dimensions for three iris species. Two dropdown menus allow users to independently select which quantitative attribute is mapped to the x-axis and y-axis, dynamically updating the linear scales and the displayed points. The visualization renders as an SVG, with each data point drawn as a circle. The code uses `d3.csv` to load the data and `d3.scaleLinear` to generate the axes, with React's `useState` managing the selected attributes.

Fork of Menus with React

This example demonstrates interactive dropdown menus built with React, allowing users to select a pet from a list of six options and displaying the chosen value in the console. The app uses the `useState` hook to manage the selected value, initialized to "hamster", and passes options and an event handler to a reusable `Dropdown` component. That component renders a native `<select>` element, mapping over the options array to create `<option>` elements and triggering the `onSelectedValueChange` callback on change. The code relies on React 16.9 and ReactDOM for rendering.

Polished World Map

This polished world map uses d3.geoNaturalEarth1 and d3.geoPath to render land masses, graticules, and interior country boundaries from the World Atlas TopoJSON dataset. The SVG output shows countries in teal against a light gray sphere, with subtle grid lines and distinct interior strokes for visual separation. The React component fetches the TopoJSON via d3.json and topojson’s `feature` and `mesh` methods, applying CSS classes for styling.

Fork of Polished World Map

This example displays a world map with country boundaries rendered using React and D3’s geoNaturalEarth1 projection. The visualization shows filled landmasses in teal, graticules, and interior borders, all drawn as SVG paths via d3.geoPath. Data is loaded from the World Atlas TopoJSON file, converted to GeoJSON using the topojson feature method, and mapped into path elements within a React component. The styling, including sphere background and stroke colors, is applied through CSS classes.

Stylized Line Chart

This stylized line chart visualizes weekly temperature data from the Data Canvas Sense Your City dataset, plotting temperature over time with a smooth natural curve. The React-based visualization uses d3-scale for time and linear scales, d3-shape’s line generator with curveNatural, and custom React components for axes. SVG rendering features a clean Poppins font, teal stroke styling, and labeled axes for time and temperature. The data loads asynchronously via d3.csv and displays a loading state until parsed.

Apr 29, 2021

Fork of Working with Time

This example visualizes temperature readings over time from the Data Canvas Sense Your City dataset, plotting each measurement as a circle on an SVG scatter plot with a connected line. The visualization uses React components and D3 v5 scales, including `scaleTime` for the x-axis and `scaleLinear` for temperature on the y-axis. Axes are rendered through custom tick components, while the line and points are drawn using D3’s `line` generator within a React marks component, with tooltips provided via native SVG `<title>` elements.

Apr 29, 2021

Working with Time

This visualization displays temperature readings from San Francisco over one week, plotted as circles on a time-based x-axis and linear temperature y-axis. Built with React and D3 v5, it uses `scaleTime` and `scaleLinear` to map the dataset, with SVG circles rendered through reusable axis and mark components. Time formatting via `timeFormat('%a')` labels the weekday ticks, while tooltips show the exact timestamp for each data point. The chart loads CSV data using `d3.csv`, with margins and labeled axes for clear temporal and temperature context.

Apr 29, 2021

Fork of Pathetic Bar Chart

This example renders the top 10 most populous countries as a pathetic bar chart with no axes, using React to manage state and D3 v5’s `scaleBand` and `scaleLinear` for positioning and sizing. Each country’s population from the United Nations World Population Prospects 2019 dataset is represented as a horizontal bar, loaded via `d3.csv`. The SVG rectangles are generated through React’s JSX, with height determined by `yScale.bandwidth()` and width scaled to the maximum population value.

Fork of style Bar Chart

This example displays the top 10 most populous countries as a horizontal bar chart, using React for rendering SVG elements and D3 v5 for scales and data loading. The chart utilizes `scaleBand` for the y-axis categories and `scaleLinear` for population values, with a custom `format` function converting large numbers to abbreviations. Population data comes from the United Nations World Population Prospects 2019 dataset, loaded via `d3.csv`. The bars are styled with orange fills, and tick lines and labels appear in muted grays.

style Bar Chart

This horizontal bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019. The visualization renders with React and D3 v5, using D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. SVG rectangles represent each country’s population, with styled tick marks and labels, and a Roboto Mono font applied throughout. The chart includes axis lines with a gray stroke, orange bars, and a clear "Population" label, all constructed programmatically via separate React components for axes and marks.

Refactored Bar Chart

This example shows the top 10 most populous countries as horizontal bars, with country names on the left axis and population values on the bottom axis. The chart is built with React and D3 v5, using `scaleBand` and `scaleLinear` for positioning, and renders SVG rectangles via the `Marks` component. Data comes from the United Nations World Population Prospects 2019, loaded with `d3.csv`. Axes are drawn using custom components that leverage D3’s tick methods.

Fork of Fork of Pathetic Bar Chart

This example renders a bar chart of the top 10 most populous countries using React, with data from the United Nations World Population Prospects 2019. It uses React hooks (`useState`, `useEffect`) to load and parse the CSV via `d3.csv`, then maps the data to SVG rectangles with `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the numeric x-axis. Gridlines and tick labels are generated from `xScale.ticks()`, though the chart lacks axes, reinforcing its "pathetic" label.

Apr 27, 2021

Fork of Axes with React & D3

This example displays a horizontal bar chart of the top 10 most populous countries, with labeled y-axis categories and a numerical x-axis scale. It uses React to manage the data state and render the SVG, while D3 v5 provides the `scaleBand`, `scaleLinear`, `max`, and `csv` loading functions. The axes and bars are constructed from D3 scales, with tick marks and labels positioned using SVG transforms. Population data comes from the United Nations World Population Prospects 2019 dataset, loaded via a CSV URL.

Apr 27, 2021

Fork of Rendering Data with React & D3

This visualization renders the CSS named colors dataset as a radial burst of pie slices. Using React for component rendering and D3’s `pie` and `arc` generators, each color occupies a wedge whose fill matches its hex value. The data loads via `d3.csv` from a gist, while React’s `useState` and `useEffect` manage the asynchronous fetch. SVG paths are generated directly in JSX, with the pie centered on a 960×500 canvas.

Apr 26, 2021

Rendering Data with React & D3

This example displays a radial burst of CSS named colors, where each color is rendered as a slice of a pie chart. The visualization loads data from a CSV file using D3’s `csv` utility, then passes it to React, which uses `pie()` and `arc` from D3 to compute the angular geometry and draw SVG `<path>` elements. The color of each slice is derived from the `RGB hex value` column in the data, with the SVG output sized to a fixed 960 by 500 viewport.

Apr 26, 2021

Rendering Data with React & D3

This example visualizes CSS named colors as a radial burst, with each color represented by a slice of a pie chart centered on the screen. The code loads color data from a CSV file using D3’s `csv` utility, then renders the visualization with React components. D3’s `arc` and `pie` functions compute the slice geometries, while React handles the SVG path elements and fills each slice with its corresponding hex value. The visualization is framed within an SVG canvas of 960 by 500 pixels.

Vega-Lite API Template

This example demonstrates a scatter plot of automotive data, showing the relationship between miles per gallon and horsepower, with points colored by country of origin. Built with the Vega-Lite API wrapper for JavaScript, it composes visualizations programmatically using methods like `vl.markPoint()`, `vl.x()`, `vl.y()`, and `vl.color()`. The code loads CSV data via `d3.csv`, applies a custom configuration for axis styling, and renders an interactive SVG view with tooltips through vega-tooltip.

Loading Data with React & D3

This example demonstrates how React manages asynchronous data loading in a D3 visualization, showing file size, row count, and column count from a CSS named colors dataset. The app uses React’s `useState` and `useEffect` hooks to fetch the CSV via D3’s `d3.csv` utility and store the result in component state. While loading, it displays a “Loading...” message, then renders computed statistics using `d3.csvFormat` and `data.columns`. The visualization is a simple text output styled with large typography, combining D3’s data parsing with React’s declarative rendering.

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v6 and the Fetch API. It retrieves a dataset of CSS named colors from a GitHub Gist, parses it with `d3.csvParse`, and displays a summary of the file size in kilobytes, the number of rows, and the number of columns. The code highlights alternative approaches, including `d3.csv` and async/await with `fetch`, while presenting the results in a large-text HTML element.

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL, displaying the dataset’s size in kilobytes, row count, and column count in a large `pre` element. The code uses the JavaScript `fetch` API with async/await to retrieve the text, then parses it with `d3.csvParse`. Alternatively, it shows the simpler `d3.csv` method, which combines fetching and parsing in one step. The source data is CSS named colors from a GitHub gist.

Mouse Follower

An interactive SVG circle follows the mouse cursor across a fixed 960×500 viewport. The React app uses the `useState` hook to track pointer coordinates from the `onMouseMove` event, updating the circle’s `cx` and `cy` attributes in real time. Built with React 16.9 and ReactDOM, it renders directly to the DOM via `ReactDOM.render` without any external data or charting libraries.

Smiley Face Part III

This example shows a grid of eighteen procedurally generated smiley faces, each with randomized facial feature sizes and positions. The visualization is built using React components that compose SVG elements, including circles for the face and eyes, an arc path for the mouth created with `d3.arc`, and a line for the nose. Rendering uses SVG within a React app, with each face’s properties like eye offset, mouth radius, and stroke width determined by `Math.random()` calls in the `App` component.

Smiley Face Part II

This example shows a yellow smiley face rendered as a scalable vector graphic, with two black eyes and a circular head, all drawn using React and ReactDOM to create SVG elements. The code calculates the head radius, eye positions, and offsets based on the current browser window dimensions, centering the face dynamically. It uses React’s declarative JSX syntax to instantiate the SVG circles, relying on the react and react-dom production libraries to mount the visualization into the page’s root div. The face is static, presenting a simple geometric composition without animation or interaction.

Let's Make a Face Part I

This example draws a simple SVG smiley face, showing the first step of a project where the face is built incrementally. The visualization displays a yellow circle for the head and two smaller circles for the eyes, all rendered directly in JSX within the `index.html` file using React. The code loads React and ReactDOM from CDNs and uses the `bundle.js` script to run the app, though the main visual is hand-coded SVG markup rather than generated through React components. The example serves as a static, non-interactive starting point for the face-making process.

Hello HTML

This example is a minimal interactive-free SVG graphic that introduces basic HTML embedding. It displays a yellow circle with a black outline as a face, featuring two smaller unfilled circles for eyes, centered on a 960 by 500 canvas. The page uses inline SVG within an HTML document, with CSS to remove margins and hide overflow, demonstrating fundamental shape and styling capabilities without JavaScript. The rendered output is a static vector illustration, highlighting the simplicity of direct SVG markup for web graphics.