billmccabeusa@hotmail.com

@spreadswings·49 public vizzes

Fork of Missing Migrants Scatter Plot Log Scale

This fork of the Missing Migrants scatter plot visualizes individual migration-related death events over time. Each circle represents one event, with the reported date on the x-axis and the total dead and missing on a log-scaled y-axis. Built with React and D3 v5, it uses `scaleTime` and `scaleLog` for axes and renders SVG circles. The code loads data via `csv` from a GitHub gist, with axes constructed from reusable components and tooltips provided by SVG `<title>` elements.

Dec 1, 2024

Loading thumbnail…

Fork of HIV/AIDS Choropleth Map

This choropleth map visualizes the global share of the population infected with HIV/AIDS among adults aged 15–49 in 2017, using a yellow-to-red sequential color scale. Country boundaries come from the World Atlas TopoJSON, while prevalence data is loaded from a CSV and joined to countries via ISO numeric codes. The visualization is built with React and D3 v5, using `geoNaturalEarth1` and `geoPath` for projection, `geoGraticule` for overlaying grid lines, and `scaleSequential` with `interpolateYlOrRd` to encode values. Countries without data appear gray.

Dec 1, 2024

Loading thumbnail…

Fork of Missing Migrants Multiple Views

This interactive data visualization combines a geographic bubble map with a time-series histogram, allowing users to explore migrant deaths by location and date. The map projects the world using the Natural Earth projection, with circle sizes proportional to the square-root-scaled death counts, while the histogram bins reported dates by month and supports brushing to filter the map's data. Built with React and D3 v5, the visualization uses `d3.geoPath`, `d3.scaleSqrt`, `d3.scaleTime`, and `d3.brushX` to render SVG marks. Data comes from the Missing Migrants Global 2019 subset, with country boundaries from the world-atlas TopoJSON.

Dec 1, 2024

Loading thumbnail…

Fork of Multiple Views with Brushing

A geographic bubble map and a time-series histogram display migrant fatalities worldwide. The map plots circles scaled by the square root of total dead and missing, using D3’s `geoNaturalEarth1` projection and `geoPath` for the sphere, graticules, and country landmasses. Brushing on the histogram, built with `d3.brushX`, filters the map’s points by date range. The React app uses `d3.csv` and `topojson` to load and process city and country boundary data.

Dec 1, 2024

Loading thumbnail…

Fork of Missing Migrants on a Map

This example visualizes the Missing Migrants Dataset as a bubble map, where each circle represents a single event and its radius encodes the total number of dead and missing individuals. The map uses a natural Earth projection, with country boundaries and graticules rendered via d3.geoPath. A second panel displays a date histogram of the same data, binned by month using d3.bin and scaled with d3.scaleTime and d3.scaleLinear. The visualization is built with React and D3 v5, rendering SVG elements, with data loaded from a CSV and world atlas TopoJSON.

Nov 30, 2024

Loading thumbnail…

Fork of Missing Migrants Scatter Plot

This fork of the Missing Migrants scatter plot visualizes the total number of dead and missing migrants over time. It bins the data by month and renders a histogram where each bar represents the sum of casualties for that period. The visualization is built with React and D3 v5, using SVG for rendering. It loads data from a CSV file via the `csv` API, employs `scaleTime` and `scaleLinear` for the axes, and uses the `histogram` function for binning.

Nov 29, 2024

Loading thumbnail…

Missing Migrants on a Map

This example uses D3’s `geoPath` and `geoNaturalEarth1` projection to render a world map from World Atlas TopoJSON data, with graticules and land interiors styled in gray. Overlaid on this are circles whose radii are scaled by the square root of “Total Dead and Missing” figures from a CSV of migrant deaths, plotted at their recorded coordinates. The visualization is built with React, using D3’s `csv` loader and `scaleSqrt` to encode magnitude, while each incident is a semi-transparent teal circle, revealing clusters of casualties.

Nov 28, 2024

Loading thumbnail…

Fork of Working with Time Migrant Deaths

This visualization shows monthly totals of dead and missing migrants from the Data Canvas Sense Your City dataset, aggregated into a bar chart over time. The chart displays the sum of "Total Dead and Missing" per month using a time-scaled x-axis and linear y-axis. Built with React and D3 v5, it uses `d3.scaleTime`, `d3.scaleLinear`, `d3.histogram` with monthly thresholds, and `d3.timeMonths` to bin data. SVG rectangles render the bars, with axes generated via custom React components and tooltips provided by SVG `<title>` elements.

Nov 28, 2024

Loading thumbnail…

Fork of Points on a Map

This visualization displays a world map plotting cities with populations over 50,000 as semi-transparent teal dots, sourced from the Simplemaps World Cities Database. Country boundaries and graticules are rendered using D3’s geoNaturalEarth1 projection and geoPath, with data loaded via useWorldAtlas and useCities hooks that fetch TopoJSON and CSV files. React manages the component structure, while SVG circles mark each city’s projected coordinates.

Nov 27, 2024

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, plotting petal length against sepal width with points colored by species. Hovering over a species name in the color legend highlights only the corresponding points while fading the rest. The visualization is built with React and D3 v5, using `d3.scaleOrdinal` for color mapping and D3 scales for positioning. SVG rendering with interactive mouse events on legend ticks enables the filtering behavior.

Nov 25, 2024

Loading thumbnail…

Fork of Scatter Plot with Color

This example visualizes the Iris Dataset as a scatter plot, showing the relationship between sepal length and petal length, with species encoded through color. The visualization includes axes, tick marks, and a color legend for the three species. Built with React and D3 v5, it uses D3 scales for positioning and color mapping, while React components render the circles, axes, and legend. The data is loaded asynchronously from a CSV file using D3’s `csv` function.

Nov 22, 2024

Loading thumbnail…

Fork of Scatter Plot with Color

This scatter plot visualizes the Iris Dataset, showing sepal length against petal length. Each point is colored by species using a categorical color scale from `d3.scaleOrdinal` with `d3.schemeCategory10`. The visualization includes labeled axes and a color legend for species identification. The implementation uses `d3.scaleLinear` for positioning, `d3.extent` for domain calculation, and the `d3.selection` API for declarative rendering. Data is loaded from a CSV file and parsed with `d3.csvParse`.

Nov 22, 2024

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

A scatter plot of the Iris dataset maps petal length against sepal width, with points colored by species using a d3.scaleOrdinal. The visualization is built in React with SVG rendering, using d3-scale for the axis scales and d3-format for tick labels. A custom useData hook loads and parses the CSV dataset, while AxisBottom, AxisLeft, and Marks components render the axes and circles. Each circle includes a native SVG title element for hover tooltips.

Nov 22, 2024

Loading thumbnail…

Fork of Scatter Plot with Menus

This example shows a scatter plot of the Iris Dataset, where dropdown menus let users independently select which measured attribute to display on the x- and y-axes. The visualization is built with React 16.9 and D3 v5, using d3.scaleLinear for axis scaling and d3.extent to compute domains. The React components AxisBottom, AxisLeft, and Marks render SVG elements, while the react-dropdown package provides the menu interface. Data loads asynchronously via d3.csv from a GitHub gist, and the plot includes axis labels, tick marks, and a title tooltip on each point.

Nov 21, 2024

Loading thumbnail…

Fork of Menus with React

This example shows a pet-selection interface rendered as interactive dropdown menus built with React. It displays six animal options—dog, cat, hamster, parrot, spider, and goldfish—with a default choice of hamster, and logs each selected value to the console. The code uses React’s `useState` hook for state management and a custom `Dropdown` component that wraps a native HTML `<select>` element. The page loads React and ReactDOM from CDN links, styles the menu with large font sizes, and mounts the app via `ReactDOM.render`.

Nov 20, 2024

Loading thumbnail…

Fork of Smiley Face Part III

This example demonstrates a React-based pet selector interface built with React 16.9.0 and ReactDOM, rendered as SVG within a hidden parent container. A dropdown menu offers six pet options, including dog, cat, and spider, while the page styling sets large font sizes for the label and select elements. The code uses the `ReactDOM.render` method to mount the App component to the `#root` div, and the provided D3 v5 library is loaded but not actively used in the displayed interaction.

Nov 20, 2024

Loading thumbnail…

Fork of Fork of Menus with React

This example shows a single interactive dropdown menu for selecting a pet, displaying the chosen value in the console log. The interface is built with React, using the `useState` hook to manage the selection and a reusable `Dropdown` component that renders a standard `<select>` element. The code uses ReactDOM to render the app into the root HTML element, with styling from inline CSS. The pet options are hardcoded in a JavaScript array.

Nov 20, 2024

Loading thumbnail…

Fork of Smiley Face Part II

A smiling face, drawn with yellow and black SVG circles, scales responsively to fill the entire browser window. The React application dynamically calculates the face's dimensions from the viewport size, positioning the eyes and mouth relative to the center. It uses React’s `ReactDOM.render` to mount the SVG element, with all geometry—including radii and offsets—derived from `window.innerWidth` and `window.innerHeight`. The face features a large yellow head, two black eyes, and a smile implicit in the circular layout.

Nov 20, 2024

Loading thumbnail…

Fork of Menus with React

Nov 20, 2024

Loading thumbnail…

Fork of Menus with React

Nov 20, 2024

Loading thumbnail…

Fork of Stylized Line Chart

This Polished World Map displays a natural Earth projection populated with landmasses and country boundaries, rendered through overlaid SVG paths. The visualization utilizes d3.geoPath and GeoJSON data from the world-atlas package to draw the sphere, graticules, and land features. React manages the plotting, integrating the TopoJSON mesh for interiors, while CSS styling applies a teal color scheme to land areas and thin gray strokes for the graticules.

Nov 20, 2024

Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This line chart displays one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City. The visualization uses d3.scaleTime and d3.scaleLinear for axes, with a line generated via d3.line and a curveBasis smoothing function. The SVG rendering includes gridlines and labeled axes for time and temperature. Data is loaded as CSV and parsed with Date and numeric conversion before being passed to the render function.

Nov 19, 2024

Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This line chart visualizes one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City, with time on the x-axis and degrees Celsius on the y-axis. The SVG rendering uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to draw a smooth maroon path. Grid lines are generated via tick sizes, and axis labels and a title are added as SVG text. The code loads CSV data asynchronously and converts timestamps to `Date` objects before rendering.

Nov 19, 2024

Loading thumbnail…

Fork of Stylized Scatter Plot

This stylized line chart visualizes temperature over time for San Francisco, using data from the Data Canvas Sense Your City Dataset. It renders a smooth curve through data points, with formatted x-axis labels showing abbreviated weekdays. Built with React and D3 v5, it uses `scaleTime`, `scaleLinear`, `extent`, and `line()` with `curveNatural` to create the path, while custom SVG axes are generated from scale ticks in the component code.

Nov 19, 2024

Loading thumbnail…

Fork of Working with Time

This scatter plot visualizes the week temperature readings from the Data Canvas Sense Your City Dataset, showing how temperature varies over time. The code uses d3.csv for data loading, d3.scaleTime and d3.scaleLinear for axes, and d3.timeFormat for tick labels. The React application with d3.v5 renders SVG circles for each data point, with native SVG `<title>` elements providing tooltip functionality when hovering over marks.

Nov 19, 2024

Loading thumbnail…

Fork of Stylized Bar Chart - Scatterplot

This scatter plot visualizes the Iris flower dataset, showing petal length on the x-axis and sepal width on the y-axis for individual samples. The React-based SVG visualization uses D3’s `scaleLinear`, `extent`, and `csv` parsing to load and map the data, with custom React components for axes and marks. Each circle includes a native `<title>` element for hover tooltips, while the clean Poppins-styled layout omits a legend to focus on data distribution.

Nov 18, 2024

Loading thumbnail…

Fork of Stylized Scatter Plot

This fork of a stylized scatter plot visualizes the classic Iris Dataset, plotting petal length against sepal width for individual flowers. The visualization is built with React and renders as SVG, using D3’s `scaleLinear` to map data values to coordinates. Axes are custom-rendered with React components that generate tick marks and labels, while circles represent each data point. The chart includes styled axis labels, tooltips on hover via the SVG `title` element, and a clean, minimalist design with a Poppins font.

Nov 18, 2024

Loading thumbnail…

Stylized in Process Bar Chart

This stylized in-process bar chart displays the top 10 most populous countries for 2020, using horizontal bars with a clean, minimal aesthetic. The chart renders as SVG through React components, with D3’s `scaleBand` and `scaleLinear` mapping countries to populations. Axis components generate ticks and labels, while `Marks` renders rectangles with tooltips. Population values are formatted using D3’s `format` with SI prefixes, converting billions to “B”. Data comes from the United Nations World Population Prospects 2019, loaded via `d3.csv` and filtered to the top ten entries.

Nov 17, 2024

Loading thumbnail…

Fork of Refactored Bar Chart

This fork of a refactored bar chart displays the top 10 most populous countries from United Nations World Population Prospects 2019 data, rendered as horizontal bars without axes. The React-based SVG visualization uses D3 v5’s `scaleBand` for the y-axis and `scaleLinear` for the x-axis, with dedicated components for left and bottom axes and marks. Data is loaded asynchronously from a CSV file using D3’s `csv` function, and the chart is drawn with SVG `<rect>` elements.

Nov 15, 2024

Loading thumbnail…

Fork of Axes with React & D3

This example uses React and D3 to render a bar chart of the top 10 most populous countries from the United Nations World Population Prospects 2019 dataset. It shows the population values as horizontal bars, with axes drawn manually using D3 scales and SVG elements. The code employs `d3.csv` for data loading, `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and React hooks like `useState` and `useEffect` to manage data fetching. All visuals are rendered as SVG within a React component.

Nov 15, 2024

Loading thumbnail…

Fork of Loading Data with React & D3

A fork of the "Loading Data with React & D3" example renders a bar chart of UN population data by country. It loads CSV data via D3's `csv` utility and uses React's `useState` and `useEffect` hooks to manage asynchronous data fetching. D3's `scaleBand` and `scaleLinear` position and size SVG `rect` elements, while ReactJS handles rendering. The visualization initially displays a loading message before drawing the bars.

Nov 15, 2024

Loading thumbnail…

Fork of The Margin Convention Outtake

This visualization displays the top 10 most populous countries as a simple bar chart without axes or labels, using United Nations World Population Prospects 2019 data. It loads the CSV via d3.csv, then uses React hooks to manage state and render SVG rectangles positioned with d3.scaleBand and scaled with d3.scaleLinear. The chart highlights the margin convention by reserving a large right-side space, leaving the bars to occupy only the left portion of the canvas.

Nov 14, 2024

Loading thumbnail…

Fork of Rendering Data with React & D3

This visualization displays CSS named colors as a radial burst, with each color represented as a wedge-shaped slice emanating from the center of an SVG canvas. The code loads color data from a CSV file using D3’s `csv` utility, then arranges the slices with the `pie` and `arc` generators from D3 v5. React manages the component state and renders the SVG paths, filling each slice with its corresponding hexadecimal color value from the dataset.

Nov 14, 2024

Loading thumbnail…

Fork of Rendering Data with React & D3

Nov 14, 2024

Loading thumbnail…

Fork of React & D3 Starter

This example shows a scatterplot of the Iris dataset, mapping sepal length on the x-axis and petal length on the y-axis with semi-transparent circles. It demonstrates a decoupled React and D3 integration pattern for scalable projects. The React component `App` loads CSV data via a custom `useData` hook, while `VizWrapper` manages the SVG container and delegates rendering to a pure D3 `viz` function. D3's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` are used to compute scales and draw axes with SVG.

Nov 14, 2024

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the top 20 countries by population, with each circle positioned along a country and religion axis and colored by religion. The code uses the Vega-Lite API to construct a scatter plot, reading CSV data from a GitHub gist via `d3.csv`. It renders to SVG through Vega and Vega-Lite, with the view sized to fit the window and includes a tooltip showing population values using vega-tooltip.

Nov 13, 2024

Loading thumbnail…

Fork of Vega-Lite API Template

This example renders a scatter plot of automobile data from the `auto-mpg` dataset, mapping acceleration on the x-axis and horsepower on the y-axis, with tooltips revealing vehicle names. It demonstrates programmatic chart construction using the Vega-Lite API (`vl.markPoint`, `vl.x().fieldQ`) within a D3 v5 async data-loading pipeline (`d3.csv`). The visualization is compiled through `vega-lite` and rendered as SVG via the `vega` view, with custom axis styling and tooltip handling from `vega-tooltip`.

Nov 13, 2024

Loading thumbnail…

Fork of Loading Data with React & D3

This example displays a text summary of a CSS named colors dataset, showing its size in kilobytes, row count, and column count. It loads the data from a CSV file using the `csv` function from D3 v5, then uses React's `useState` and `useEffect` hooks to fetch and store the data asynchronously. The rendered output updates from a "Loading..." message to the computed statistics via the `message.js` helper, which formats the data dimensions using `d3.csvFormat` on the raw CSV content.

Nov 11, 2024

Loading thumbnail…

Fork of Loading Data

This example demonstrates asynchronous data loading in D3, displaying the Iris Dataset as a raw JSON string in a `<pre>` element. The visualization initializes with a loading state, fetches the CSV file via `fetch`, and parses it using `d3.csvParse`. After conversion, numeric columns are cast to numbers before being rendered. The code uses `d3.select` and the `.join()` operation to update the displayed data, showcasing a minimal data-loading and state-management pattern with D3 v7.

Nov 11, 2024

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v5 and asynchronous JavaScript. It fetches a dataset of CSS named colors from a GitHub gist and displays summary statistics, including file size in kilobytes, row count, and column count, in a large text format. The code uses `d3.csv` with promise-based `.then()` handling, as well as commented alternatives using `fetch`, `async`/`await`, and `d3.csvParse`. It also references older callback-based "pyramid of doom" patterns for comparison.

Nov 11, 2024

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL using D3 v5 and the Fetch API. It displays a summary of the dataset—the CSS Named Colors file—showing file size in kilobytes, row count, and column count in large text. The code uses `d3.csv` to fetch and parse the data, then formats it with `d3.csvFormat` to compute the size. It also includes commented-out alternatives using `fetch`, `async`/`await`, and `d3.csvParse` to highlight different parsing approaches.

Nov 11, 2024

Loading thumbnail…

Fork of Smiley Face Part II

A React and SVG application displays a single circle that follows the mouse cursor across a 960-by-500 viewport. The circle’s center coordinates update in real time via React’s `useState` and `useCallback` hooks, triggered by the SVG `onMouseMove` event. The initial mouse position is set to the center of the screen. The code renders only this interactive circle, with no additional shapes or data sources.

Nov 8, 2024

Loading thumbnail…

Fork of HTML Starter

This example demonstrates loading and parsing CSV data from a remote URL, displaying a static message ("Hello HTML!") centered on the page. The code fetches a CSV file containing CSS named colors from a GitHub Gist via the fetch API, then logs the response text to the console. It uses standard JavaScript fetch and `response.text()` for processing, without any external visualization libraries. The page relies on HTML and inline CSS for layout, but does not yet render the CSV content visually.

Nov 8, 2024

Loading thumbnail…

Fork of Loading and Parsing CSV Data

Nov 8, 2024

Loading thumbnail…

Fork of Smiley Face Part V

A React and D3 component splits a yellow smiley face into separate ES6 modules for the background circle, eyes, and mouth. The SVG renders with fixed dimensions, using a transformed group to center the face, while D3’s `arc` generator creates the mouth path with specified start and end angles. React fragments group the two eye circles without extra DOM elements. All styling comes from inline SVG attributes, and the code demonstrates modular component composition with imported React and D3 libraries.

Nov 6, 2024

Loading thumbnail…

Fork of Smiley Face Part IV

This example shows a smiling face composed of SVG shapes, centered in a yellow circle with black outlines, two eyes, and an arched mouth. It uses React components to render the static visualization, while D3’s `arc` generator calculates the mouth path geometry. The code relies on React 16.9 and D3 v5, with SVG elements drawn inside a fixed 960×500 viewport.

Nov 6, 2024

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a smiling face made from basic SVG shapes, with a yellow circle for the head, two dark eye circles, and a curved mouth drawn using an arc path. The visualization is rendered entirely through React components, using JSX to define the SVG elements. It leverages the `arc()` generator from D3 v5 to compute the mouth’s curved path, while all styling and positioning are set via inline attributes. The face is centered within a 960×500 viewport, with the head radius and stroke width derived from the canvas dimensions. No external data is used; the geometry is purely hardcoded.

Nov 6, 2024

Loading thumbnail…

Fork of Smiley Face Part II

This example renders a classic smiley face as a static SVG graphic using React and ReactDOM. The composition places a yellow circle with a thick black stroke on a 960×500 canvas, then adds two black eye circles offset symmetrically from the center. The code defines all geometric parameters—such as center coordinates, eye offsets, and radii—as constants, and constructs the SVG elements declaratively within a React component. The visualization highlights how simple mathematical relationships and React’s component model can produce clean, resolution-independent vector artwork without interaction or external data.

Nov 5, 2024

Loading thumbnail…

Test1

A yellow smiley face is drawn with SVG circles for the head and eyes, rectangles for eyebrows, and an arc-generated path for the mouth. The example demonstrates animated eyebrow movement using D3 transitions that lower and raise the rectangles over repeated two-second intervals. The scene is built with D3 selections to append and position elements, while the arc generator from the same library defines the mouth shape. The animation runs as an infinite loop, showcasing basic D3 transition chaining.

Nov 4, 2024