L

Laura Johnson

@jlauram11·29 public vizzes

Loading thumbnail…

Coronavirus Log Y Axis with Labels

A line chart displays global cumulative coronavirus deaths over time, with a logarithmic y-axis compressing the large range of values. The visualization uses a black, five-pixel-wide stroke for the single trend line, with labeled axes and tick marks shaded in gray. Built with React and D3 v5, the chart leverages `d3.scaleLog`, `d3.scaleTime`, and `d3.line` to generate the SVG path, while axis rendering is handled by `d3.axisBottom` and `d3.axisLeft`. Data comes from the Johns Hopkins Coronavirus dataset, loaded via `d3.csv`.

Loading thumbnail…

Coronavirus Log Y Axis

A log-scaled line chart tracks the cumulative global death toll from the Johns Hopkins COVID-19 dataset over time, highlighting exponential growth in cases across months. The visualization pairs D3 scaleTime and scaleLog to map dates and totals, with line generator creating the trend path. React components manage the X and Y axes via reusable axisBottom and axisLeft hooks, while SVG renders gridlines and plot marks.

Loading thumbnail…

Coronavirus Linear Y Axis

This chart displays the cumulative global death toll from COVID-19 over time, showing a steady increase from the first reported cases to early 2020. A single black line sharply rises across a grid of light gray ticks, with the x-axis showing dates and the y-axis showing deaths on a linear scale. The visualization uses React with D3 v5 functions including `scaleLinear`, `scaleTime`, and `line` to generate the SVG path, while `axisBottom` and `axisLeft` create the labeled axes. Data comes from the Johns Hopkins Coronavirus time-series dataset, with the chart filling the entire browser window.

Loading thumbnail…

Scatter Plot with Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, allowing users to compare different flower measurements by selecting X and Y axes from dropdown menus. The chart displays all data points as colored circles representing species, with an interactive color legend that highlights a selected species while fading others. The visualization is built with React and D3 utilities including scaleLinear and scaleOrdinal, rendered as SVG. Hovering over legend items filters the data, making it easy to explore relationships between sepal and petal dimensions across the three iris species.

Loading thumbnail…

COVID-19 Line Chart

This line chart visualizes the cumulative global death toll from COVID-19 over time, using a single black path that rises sharply as the pandemic progresses. A horizontal marker line at the 1,000,000 death threshold is labeled with the corresponding value. The visualization is built with React and D3 v6, using `scaleTime` and `scaleLinear` to map dates and death totals, and a `line` generator to create the path. Data comes from the CSSEGISandData COVID-19 time series CSV, loaded via `d3.csv`, and is rendered as SVG inside a `<g>` element with explicit margins.

Loading thumbnail…

Summarizing Coronavirus Data

This example summarizes the global COVID-19 death toll from the Johns Hopkins Coronavirus Dataset. It loads the CSV file with `d3.csv`, extracts the last date column, sums all reported deaths using `Array.reduce`, and formats the total with `d3.format`. The resulting number and date are displayed as large text in a `<pre>` element, offering a concise numeric snapshot of cumulative deaths.

Loading thumbnail…

Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris dataset, allowing users to compare sepal and petal measurements across three flower species through dropdown menus for the x and y axes. Each point is colored by species using a d3.scaleOrdinal color scale with an accompanying legend. Built with React and D3 v6, the visualization renders as an SVG and uses d3.scaleLinear for axes, d3.extent for domain calculation, and d3.csv for data loading.

Loading thumbnail…

Missing Migrants Project

A histogram displays monthly totals of dead and missing migrants from the Data Canvas Sense Your City Dataset. The visualization uses a time-based x-axis and a linear y-axis for aggregate counts, with bar heights representing monthly sums. Built with React and D3 v5, the code applies `d3.bin` with `timeMonths` thresholds, `d3.scaleTime`, `d3.scaleLinear`, and SVG rendering. Native `<title>` elements provide tooltips, while custom `AxisBottom` and `AxisLeft` components generate tick marks.

Loading thumbnail…

Weekly Temperature Line Chart

This line chart displays weekly temperature variations over time, with points connected by a smooth curve and circular markers showing individual readings. Temperature values appear on the y-axis and time along the x-axis, formatted by day of the week. Built with React and D3 v6, it uses `scaleTime`, `scaleLinear`, `line`, and `curveNatural` to generate the SVG visualization, pulling data from a CSV file containing San Francisco week temperatures.

Loading thumbnail…

Loading and Parsing Coronavirus Data

This example demonstrates how to load and parse the Johns Hopkins Coronavirus global death time-series dataset using D3 v6 via the `d3.csv` method. It displays file size in kilobytes, row count, and column count as large text in a `<pre>` element. The code fetches the CSV from GitHub, formats it with `d3.csvFormat` to calculate data length, and reads columns from the parsed result. No chart is rendered; the visualization is purely textual summary metrics.

Loading thumbnail…

HIV/AIDS Choropleth Map

A choropleth map visualizes the share of the population aged 15-49 infected with HIV/AIDS in 2017, using a yellow-orange-red sequential color scale on a Natural Earth projection. The map renders countries as SVG paths via d3.geoPath, with gray fill for missing data, and includes graticules and interior borders. Data comes from the IHME HIV prevalence CSV and country codes from the ISO-3166 dataset, processed in React with d3-scale and topojson.

Loading thumbnail…

Missing Migrants on a Map

This visualization displays a world map of missing migrant incidents, with circle markers sized according to the total number of dead and missing individuals at each location. The map uses a natural Earth projection with graticules and country borders rendered as SVG paths, while circles are overlaid with square-root scaling for radius. Built with React and D3 v5, the example loads world atlas topology via the `topojson` library and pulls data from a CSV file. The `geoNaturalEarth1` projection and `geoPath` handle geographic mapping, while circles are positioned using the projection coordinates.

Loading thumbnail…

Missing Migrants on a Map Multiple Views

This example shows two linked views of missing migrant incidents: a world map with proportional circles marking the total dead and missing at each location, alongside a histogram of monthly totals over time. The map uses a natural Earth projection with graticules and country borders, while the histogram aggregates data into monthly bins. Both views render as SVG using React components and D3 v6 APIs, including `d3.geoNaturalEarth1`, `d3.geoPath`, `d3.scaleSqrt`, and `d3.bin`. Data comes from a CSV of missing migrants, loaded via `d3.csv`.

Loading thumbnail…

Missing Migrants Scatter Plot Log Scale

This scatter plot visualizes the Missing Migrants Dataset, where each point represents a single migrant incident positioned by reported date on the x-axis and total dead or missing count on the y-axis. The y-axis uses a logarithmic scale to accommodate extreme variations in incident severity. Built with React and D3 v5, the visualization employs d3.scaleTime, d3.scaleLog, d3.extent, and d3.max for scale construction, rendering SVG circles with tooltips that display formatted dates.

Loading thumbnail…

Multiple Views with Brushing

This example combines a world map and a time-series histogram to visualize migrant deaths. Brushing a time range in the histogram filters the map’s bubble markers, which use d3.scaleSqrt for sizing and d3.geoNaturalEarth1 projections via geoPath. The code uses React with useEffect for data loading and d3.brushX for interactive selection, rendering SVG elements.

Loading thumbnail…

Points on a Map

This example displays a world map with city points scaled by population, using a natural Earth projection. The visualization layers graticules, land masses, and country borders beneath translucent teal circles. React components manage the rendering, while D3 utilities handle geographic projections and data loading. The size of each circle is determined by a square root scale mapping population values to a maximum radius of 15 pixels, with city data sourced from a CSV of world cities and geographic features from a TopoJSON world atlas.

Loading thumbnail…

Scatter Plot with Colors

This scatter plot visualizes the Iris dataset, allowing users to explore relationships between four flower measurements. The plot displays data points colored by species, using a circle's position to represent the values of the selected x and y axes. Two interactive dropdown menus let users switch which measurement is on each axis. The visualization is built using React components that render SVG elements, leveraging D3 utilities for data loading (`d3.csv`), linear scaling (`d3.scaleLinear`), and color assignment (`d3.scaleOrdinal`).

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot uses React and D3 v6 to visualize the Iris dataset, displaying measurements of sepal and petal dimensions. Users select which attributes appear on the x and y axes via dropdown menus, enabling exploration of relationships between different floral characteristics. The visualization leverages D3 utilities like `scaleLinear`, `extent`, and `csv` for data processing, while React components render SVG circles, axis ticks, and labels. The styling uses the Montserrat font and a muted color palette, with tooltips providing formatted values for each data point.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between different flower measurements via dropdown menus. The chart displays data points as circles, with the x-axis and y-axis representing selected attributes like petal length or sepal width. Built with React and D3 utilities, the visualization uses d3.scaleLinear for axis scaling, d3.extent for domain calculation, and d3.csv for data loading. Users switch attributes through React state management, triggering real-time updates to the axes and marks rendered as SVG circles with tooltips.

Loading thumbnail…

Menus with React

This example displays a simple pet-selection form built with React, featuring a dropdown menu populated with hardcoded options for animals like dogs, cats, and hamsters. The `DropDown` component maps over an array of value-label pairs to render `<option>` elements, while `ReactDOM.render` mounts the app to the `#root` div. A goldenrod circle drawn with SVG serves as a decorative background, using the `BackgroundCircle` component. The page loads React and ReactDOM from CDN, and CSS centers the content on a clean white canvas.

Loading thumbnail…

React Starter Code

This example shows a minimal React application that renders static text, “React Starter Code,” centered on a goldenrod circle with a black stroke. It serves as a bare-bones template for building data visualizations in React, using the `react` and `react-dom` libraries. The code defines a `BackgroundCircle` component that draws the circle with SVG, while the main `App` component renders simple text via `ReactDOM.render()`. The page loads React from CDN and includes a separate `bundle.js` for the application logic.

Loading thumbnail…

World Map

This example presents a world map rendered as an SVG using a Natural Earth projection. Landmasses are filled in teal, country borders are drawn as interior mesh lines, and graticules overlay the sphere for geographic reference. The visualization loads topological data from the world-atlas package via `d3.json` and `topojson`, then converts it into GeoJSON features using `feature` and `mesh`. React manages the component lifecycle, while `d3.geoPath` and `geoNaturalEarth1` handle the projection and path generation for all map elements.

Loading thumbnail…

Iris Dataset Scatterplot

This scatterplot visualizes the Iris Dataset, plotting petal length against sepal width for 150 flower samples. The visualization displays data points as circles with a teal fill, using linear scales created with d3.scaleLinear and extent to map the data to SVG coordinates. React components structure the axis and mark rendering, while d3.csv loads and parses the remote dataset, converting numeric fields with unary plus operators. The code includes custom axis components that generate tick marks and labels, and a marks component that renders circles with native SVG title tooltips.

Loading thumbnail…

UN Population Data

A horizontal bar chart displays the populations of ten countries in 2020, sourced from UN data loaded via a CSV file. The visualization uses React to render SVG elements, with D3 v6 scales (scaleBand and scaleLinear) positioning bars and axes. Custom React components handle the axes and bars, with native SVG `<title>` elements providing tooltips. Population values are formatted using D3's `format` function, converting values like billions into abbreviated labels.

Loading thumbnail…

Rendering Data with React & D3

This example shows CSS named colors as a single circular pie chart, with each color’s name as a tooltip on its corresponding arc. React (via `useState`, `useEffect`, and `ReactDOM.render`) manages the loading state and SVG rendering, while D3’s `csv`, `pie`, and `arc` utilities fetch the dataset and compute the arc paths. A `<clipPath>` with a circle clips the chart into a ring shape, and the code uses `d.data['RGB hex value']` for fills and `d.data['Keyword']` for IDs and titles.

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting each car as a circle positioned by weight and horsepower, colored by origin, and sized by miles per gallon. Hovering reveals the car name via a tooltip. The visualization is built with the Vega-Lite API (vl), which generates a Vega-Lite specification that is registered with vega and vegaLite and rendered as SVG. Data is loaded asynchronously using d3.csv from a Gist, and the chart uses custom axis and label styling from a shared config file.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file from a remote URL using D3.js, displaying key dataset statistics in a large text format. It uses `d3.csv` to fetch and parse the data, then computes the formatted file size with `d3.csvFormat`, as well as the row and column counts. The dataset comes from a GitHub gist containing CSS named color values, and the results are shown as three lines of text in a `<pre>` element.

Loading thumbnail…

Mouse Follower

A black circle follows the mouse cursor across a blank SVG canvas, centering itself on the pointer's exact coordinates. The visualization demonstrates a simple interactive loop using React's `useState` and `useCallback` hooks to track `clientX` and `clientY` positions from a mouse move event, while D3 v6 handles SVG rendering. The circle has a fixed radius of 30 pixels and starts at the canvas center before responding to user movement.

Loading thumbnail…

Fork of HTML Starter

A grid of randomly parameterized cartoon faces is rendered using React, with each face composed of SVG circles and a custom mouth arc. The face components (overall container, background, eyes, and mouth) are modularized as React components, while the D3 library provides the arc path generator for the mouth and a range function to create the grid. The styling is applied via an HTML page with embedded CSS. The project is a fork of an HTML starter, utilizing React and D3 v6.