Skip to main content
Log in
R

rstrauss127

@rstrauss127·29 public vizzes

Loading thumbnail…

HIV/AIDS Choropleth Map

This choropleth map visualizes HIV/AIDS prevalence rates across countries for the year 2017, using a yellow-orange-red sequential color scale to indicate infection severity. Built with React and D3 v5, it renders a Natural Earth projection via d3.geoNaturalEarth1 and d3.geoPath, overlaid with graticules and country interiors. Data comes from a CSV of HIV infection rates, filtered to 2017, with the color scale domain set by maximum prevalence.

Aug 31, 2022
Loading thumbnail…

Optimizing Multiple Views

A world map displays missing migrant incidents as semi-transparent circles scaled by the square root of the death toll, with a linked date histogram below. Brushing the histogram filters the map’s circles to the selected time range. The visualization uses React, D3 v5’s `geoNaturalEarth1`, `geoPath`, and `scaleSqrt`, with brushed data filtered via `brushX` and `event.selection`. Data comes from the Missing Migrants Project CSV and world-atlas TopoJSON.

Jun 14, 2022
Loading thumbnail…

Multiple Views With Brushing

This example shows a world map with bubbles representing missing migrants, sized by the total number of dead and missing, alongside a date histogram of the same data. Brushing the histogram filters the map to show only incidents within the selected time range. The visualization uses React with D3 v5, including `d3.geoNaturalEarth1`, `d3.geoPath`, `d3.brushX`, `d3.histogram`, `d3.scaleSqrt`, and `d3.scaleTime`. Data comes from the Missing Migrants Project CSV, loaded via `d3.csv`, and renders as SVG.

Jun 14, 2022
Loading thumbnail…

Missing Migrants Multiple Views

This visualization combines a bubble map and a date histogram to explore missing migrant incidents worldwide. The map projects data points using d3.geoNaturalEarth1 and d3.geoPath, with circle radii scaled by d3.scaleSqrt based on the total number of dead and missing. The histogram aggregates incidents by month using d3.bin and d3.timeMonths, summing fatalities per bin. Both views render as SVG within a React framework, pulling data from the Missing Migrants Project CSV and world-atlas TopoJSON.

May 23, 2022
Loading thumbnail…

Missing Migrants Histogram

This histogram visualizes the monthly totals of dead and missing migrants from 2014 to 2022, with reported dates on the x-axis and the aggregated count on the y-axis. Built with React and D3 v5, it uses `d3.bin` to group records by month and `d3.sum` to calculate each bin’s total. The SVG rendering includes custom `AxisBottom` and `AxisLeft` components, with tooltips via SVG `<title>` elements. Data is loaded asynchronously from a CSV using `d3.csv`.

May 23, 2022
Loading thumbnail…

Points on a Map

This example displays a world map with points marking cities, rendered as an SVG using D3’s geoNaturalEarth1 projection and geoPath. The map shows landmasses, graticules, and country borders from the world-atlas TopoJSON, while city locations from a CSV file are plotted as semi-transparent circles. React manages the component state, fetching the data with useWorldAtlas and useCities hooks, and the d3.geoPath calculates the projected coordinates for each circle.

May 23, 2022
Loading thumbnail…

Missing Migrants Map

The Missing Migrants Map visualizes the global distribution of migrant deaths and disappearances by rendering proportional circles on a natural Earth projection. Each circle’s radius encodes the total number of dead or missing individuals at that location. The map is built with React and D3, using `geoNaturalEarth1`, `geoPath`, `geoGraticule`, and `scaleSqrt` to size the hotspots. In SVG output, the landmasses are drawn from the world-atlas TopoJSON data via the `topojson` feature and mesh APIs. Data comes from the Missing Migrants Project’s CSV file spanning 2014–2022.

May 20, 2022
Loading thumbnail…

Size Bubbles

A world map displays cities as semi-transparent bubbles, with bubble area scaled by population using a sqrt scale and a maximum radius of 15 pixels. The visualization uses d3.geoNaturalEarth1 projection and d3.geoPath to render landmasses, graticules, and interiors from TopoJSON world-atlas data, while city coordinates and populations come from a cleaned CSV. React manages the component state and rendering, with SVG circles positioned by projecting each city’s longitude and latitude. The map’s styling uses light gray fills for land and graticules, with teal, translucent circles for urban centers.

May 18, 2022
Loading thumbnail…

Colored Scatter Plot

This colored scatter plot visualizes the Iris dataset, showing sepal length versus sepal width for three flower species, each represented by a distinct color (orange, teal, and purple). The D3 scaleLinear functions map the data to x and y coordinates, while scaleOrdinal assigns categorical colors based on species. Built with React and rendered as SVG, the visualization includes custom axis components that display tick marks and labels, with hover tooltips revealing precise sepal length values.

May 17, 2022
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot uses the classic Iris dataset to explore relationships between sepal length and width, with points colored by species. A custom color legend on the right allows users to hover over species labels, which fades non-matching points to 20% opacity while keeping the selected species fully visible. Built with React and D3 v5, the visualization uses `scaleOrdinal` for species coloring, `scaleLinear` for axes, and SVG rendering. The color legend reacts to mouse events via React's `onMouseEnter` and `onMouseOut` handlers.

May 17, 2022
Loading thumbnail…

Scatter Plot With Color Legend

This scatter plot uses the Iris Dataset to visualize sepal length against sepal width, with points colored by species according to a color legend. Built with React and rendered as an SVG, the visualization employs D3 scales for positioning, including a linear scale for the axes and an ordinal scale for categorical color mapping. Interactive tooltips display formatted values for each data point.

May 17, 2022
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping sepal length and width for individual flowers. The visualization uses React with D3 v5 scales and SVG rendering, with axes created by custom components. Data loads asynchronously via `d3.csv` and converts string values to numbers. Circles represent data points, and hovering reveals tooltips through SVG title elements, while axis tick formatting utilizes `d3.format` for compact notation.

May 16, 2022
Loading thumbnail…

Polish Scatter Plot With Menu

This interactive scatter plot displays the classic Iris dataset, allowing users to choose which four numerical attributes to plot on the X and Y axes via dropdown menus. The visualization is built with React and renders SVG circles using D3’s `scaleLinear`, while the menus are provided by the `react-dropdown` library. Axis ticks and labels are generated from D3’s scale API, and the data is loaded from a CSV file using `d3.csv`.

May 13, 2022
Loading thumbnail…

Stylized Scatter Plot

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements across flower species. Two dropdown menus let viewers select which attributes map to the x and y axes, with the chart updating dynamically via React state management. The visualization uses d3.scaleLinear for axis scaling, d3.extent to compute domains, and d3.csv for data loading. React components render SVG circles as marks, with axes generated by custom AxisBottom and AxisLeft components that leverage d3's tick generation.

May 12, 2022
Loading thumbnail…

Menus

This example demonstrates a React-based dropdown menu for selecting a pet, with the chosen value displayed via a label. It uses the `useState` hook to manage the selected option and a reusable `Dropdown` component that renders a native HTML `<select>` element, mapping over an array of pet options. The code relies on React and ReactDOM to render the interface, with the selected value logged to the console on each change. The initial selection is set to "hamster" from the predefined options list.

May 12, 2022
Loading thumbnail…

React Starter

This example demonstrates a minimal React application that renders a single yellow circle with a black border onto a blank page. The visualization uses a reusable `BackgroundCircle` component, which accepts `radius` and `strokeWidth` props to define the circle’s size and outline. The app is built with React 16.9 and ReactDOM, which mounts the component into a root div, with styling that hides page overflow. The code does not include any data or interactive features, focusing solely on the basic wiring of a React component for a fixed graphic.

May 12, 2022
Loading thumbnail…

Fork of Stylized Bar Chart

This stylized bar chart displays the population estimates for the top ten countries using horizontal bars. Built with React and D3 v5, the visualization employs `scaleBand` and `scaleLinear` for positioning, with bars rendered as SVG `rect` elements. The data is loaded from a CSV file of UN Population 2019 estimates, formatted with D3’s `format` function to abbreviate large numbers (e.g., “1.4B”). Axis components are custom React components, and hover tooltips show formatted population values.

May 12, 2022
Loading thumbnail…

World Map

This world map visualizes country boundaries and land masses using the Natural Earth projection. The D3 geoPath and geoNaturalEarth1 APIs render SVG paths for land features, a sphere outline, graticules, and interior borders. TopoJSON data from the world-atlas package supplies the geographic shapes, with the mesh function generating interiors. React manages the component state and rendering, while the marks use the teal color scheme defined in the stylesheet.

May 11, 2022
Loading thumbnail…

Line Chart

A line chart displays San Francisco temperatures over the course of a week, plotted with a smooth curved line and circular markers for each data point. Built with React and D3 v5, it uses `d3.csv` to load the data, `d3.scaleTime` and `d3.scaleLinear` for the axes, and the `d3.line` generator with `curveNatural` to create the path. SVG rendering includes reusable axis and mark components, with hover tooltips via nested `<title>` elements.

May 10, 2022
Loading thumbnail…

Working with Time

A scatter plot displays one week of San Francisco temperatures, with time on the x-axis and temperature on the y-axis. The visualization uses a React and SVG structure with d3.scaleTime and d3.scaleLinear for scales, d3.extent for domain calculation, and d3.timeFormat for tick labels showing abbreviated weekdays. Circles are rendered and colored with a teal fill, and hovering reveals the exact timestamp via a `<title>` tooltip. The data is loaded asynchronously from a CSV using d3.csv.

May 10, 2022
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 countries by 2020 population, using horizontal bars with a teal fill against a clean, muted axis. The visualization is built with React and D3 v5, employing `scaleBand` for the categorical country axis and `scaleLinear` for the population values. An SVG renders the marks with tooltips, while axes are generated via reusable components, and the data originates from a UN Population CSV file.

May 6, 2022
Loading thumbnail…

Refactored Bar Chart

A horizontal bar chart displays the top ten most populous countries for 2020, based on UN population data loaded via `d3.csv`. Using React and SVG within a D3 v5 framework, the visualization separates concerns by organizing reusable components for rendering axes and marks. The chart applies `d3.scaleBand` for country categories on the y-axis and `d3.scaleLinear` for population on the x-axis, with the bottom axis presenting population values and left axis showing country names.

May 3, 2022
Loading thumbnail…

Axes with React & D3

A React component fetches United Nations population data for 2020 from a CSV file, displaying a horizontal bar chart for the top ten countries. The chart uses D3's `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. D3's `scaleLinear.ticks()` generates tick values for the x-axis, which are rendered as SVG line and text elements within React's declarative JSX structure. The visualization demonstrates a manual approach to constructing axes and bars, avoiding D3's axis generator components.

May 3, 2022
Loading thumbnail…

Margin Convention

This example displays a horizontal bar chart that contrasts the populations of ten countries. The bar lengths are proportional to each country’s 2020 population, with country names listed along the vertical axis. The code uses React’s `useState` and `useEffect` to asynchronously fetch CSV data from a remote URL, then leverages D3 utilities like `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. The SVG rendering applies a margin convention, translating a group element by the top and left margin values to position the chart within the 960x500 canvas.

Apr 29, 2022
Loading thumbnail…

UN Population 2019 Bar Chart

This bar chart displays the ten most populous countries in the UN’s 2019 population estimates, ranking them horizontally by their projected 2020 population in descending order. The visualization uses D3 v5’s `scaleBand` and `scaleLinear` for positioning and scaling bars, with React state managing the data fetched from a CSV. The data is loaded asynchronously via `d3.csv` and rendered as SVG rectangles.

Apr 29, 2022
Loading thumbnail…

Radial Burst

This radial bar chart visualizes all named CSS colors from a CSV dataset, rendering each color as an equal-width wedge in a circular burst. The visualization loads data from a GitHub gist using D3's `csv` utility, then maps each row to a pie slice with D3's `pie` and `arc` functions. React manages the asynchronous data loading state and renders the SVG paths, with each wedge filled using the color's RGB hex value from the dataset.

Apr 29, 2022
Loading thumbnail…

Fork of Loading Data with React & D3

This example displays the full set of CSS named colors as a color wheel, with each color occupying a slice of a circular pie chart. The code loads CSV data from a GitHub gist using `d3.csv` within a React component, managing the asynchronous data with `useState` and `useEffect`. It then uses `d3.pie` and `d3.arc` to compute the slice geometries, rendering each slice as an SVG `<path>` filled with its corresponding hex value. The original manual arc calculation is replaced by the D3 pie layout.

Apr 28, 2022
Loading thumbnail…

Mouse Follower

A single black circle follows the mouse cursor across an SVG canvas. The example demonstrates how React manages dynamic state alongside D3’s rendering environment. Using React’s `useState` and `useCallback` hooks, the component tracks mouse coordinates from the SVG’s `onMouseMove` event and updates the circle’s `cx` and `cy` attributes. The circle is rendered via React’s JSX, while D3 v5 is loaded but not directly used for interaction; the visualization relies entirely on React’s state updates to redraw the SVG element in real time.

Mar 28, 2022
Loading thumbnail…

Fork of Smiley Face Part III

This example shows a yellow smiley face rendered as an SVG graphic, with two eyes and a curved mouth positioned symmetrically around a central point. It demonstrates a React-based approach to SVG visualization using D3’s `arc` generator to create the mouth path. The `BackgroundCircle` component draws the face’s yellow circle with a black stroke, while the eyes are simple `<circle>` elements positioned via fixed offsets. Rendering uses React 16.9 and D3 v5, with all shapes placed inside a `<g>` transform to center the composition.

Mar 18, 2022