L

Lewis Ward

@Lewisjohnward·52 public vizzes

Loading thumbnail…

Fork of Polished World Map

This example shows a world map with country boundaries, rendered in dark landmasses with teal interior borders and subtle graticules. The visualization uses React to manage the component structure, while d3’s `geoNaturalEarth1` projection and `geoPath` draw the geographic shapes. TopoJSON data from the World Atlas (countries-50m.json) is loaded asynchronously, with `feature` and `mesh` extracting land polygons and country borders. The styling is handled through SVG classes defined in CSS, and the map updates once the data is fetched.

Loading thumbnail…

FOR HP?

This interactive bubble chart visualizes the hierarchical structure of the Flare dataset using a circular packing layout. Clicking any bubble smoothly zooms into that subtree, revealing nested categories and their leaf nodes as white circles. Built with React and D3 v4, the visualization uses `d3.pack` and `d3.hierarchy` to compute circle positions, while `d3.interpolateZoom` animates transitions between views. Node sizes encode data values, and color depth uses an HCL-interpolated linear scale for visual distinction.

Loading thumbnail…

Heatmap D3 random

This example shows a 50-by-50 heatmap with randomly generated values, where each cell’s color scales from light teal to dark green. It renders as an SVG using React, with d3.scaleBand for x and y positioning and d3.scaleLinear for the color range. The data is created in-memory via Math.random, and the chart fills the entire browser window.

Loading thumbnail…

Heatmap with D3 Overlay

This example displays a heatmap of 100 data points across 10 variables and 10 groups, with each cell colored on a teal-to-green gradient using d3.scaleLinear. A large white "D3" text overlay is positioned at the center of the SVG canvas, creating a visual watermark effect. The React component loads CSV data via d3.csv and renders the chart using d3.scaleBand for axes and SVG rect elements. The overlay text is drawn directly within the same SVG group, demonstrating how to combine data-driven visualizations with static annotations in a React-D3 workflow.

Loading thumbnail…

Fork of Missing migrants map / histogram BRUSHING

This interactive visualization combines a bubble map and a histogram to explore data on missing migrants. Brushing over the time-series histogram filters the map’s circles by date range, dynamically updating the displayed incidents. The map uses an SVG projection via `geoNaturalEarth1` and `geoPath`, with circle radii scaled by `scaleSqrt`. The histogram uses `brushX` and `event.selection` to set the filter, while data loads from a CSV and world atlas TopoJSON.

Loading thumbnail…

Missing migrants map / histogram

A world map displays circles sized by the total number of dead and missing migrants at each reported location, overlaid on a natural Earth projection rendered with d3.geoPath. A time histogram below aggregates the same data by reported date, using d3.bin and d3.timeMonths to sum deaths per month. Both visualizations use React state and D3 scales (d3.scaleSqrt, d3.scaleTime, d3.scaleLinear) to encode values, with data loaded from a CSV via d3.csv and world geography from a TopoJSON file.

Loading thumbnail…

Axes with React & D3

This example shows a horizontal bar chart of the top 15 countries by 2020 population, with axes drawn manually using SVG elements. React state loads the CSV data via `d3.csv`, while `d3.scaleBand` and `d3.scaleLinear` map countries and population values to pixel coordinates. The x-axis ticks are generated with `xScale.ticks()` and rendered as lines with labels, and the y-axis labels align with each bar’s midpoint. All marks and axes are SVG elements produced declaratively in JSX.

Loading thumbnail…

Heatmap with Tooltip in React

A heatmap displays a 10x10 matrix of values as colored squares, using a white-to-teal linear scale to represent the data range from 1 to 100. The visualization is rendered as an SVG chart using React components, D3.js scales (scaleBand, scaleLinear), and data loaded from a CSV file via d3.csv. Hovering over a square toggles its border and reveals the exact value in bold text, implemented through React's useState hook for interactive tooltips.

Loading thumbnail…

Example of Heatmap using D3 with React

This heatmap displays a 10-by-10 grid of values using a white-to-teal linear color scale (`d3.scaleLinear`) mapped from a CSV dataset loaded via `d3.csv`. The graphic uses React to render SVG rectangles for each cell, with `d3.scaleBand` positioning the rows and columns. Axis labels for groups (A–J) and variables (v1–v10) are drawn as SVG text elements. The full window is filled with the visualization, and the chart includes a title above the plot area.

Loading thumbnail…

Analysis of cost of Italian Lessons

This example visualizes the cumulative cost of Italian lessons over time, displaying a histogram of monthly spending with a total spend summary. It uses React to render an SVG graphic, with d3.csv for data loading, d3.bin and d3.timeMonths to create monthly bins, and d3.scaleTime and d3.scaleLinear for axes. The data comes from a CSV file containing purchase credits, with prices and dates parsed and aggregated using d3.sum.

Loading thumbnail…

Cumulative Missing migrants

This chart displays the cumulative number of dead and missing migrants over time, binned by month. A time scale maps reported dates to horizontal positions, while a linear scale maps summed monthly totals to bar heights. D3 utilities including `csv`, `scaleTime`, `scaleLinear`, `bin`, `timeMonths`, `sum`, and `max` handle data loading and aggregation, with React managing component state. The visualization renders as an SVG, using `rect` elements for bars and native `<title>` elements for tooltips. Data comes from a CSV subset of the Missing Migrants Project.

Loading thumbnail…

Heatmap with tooltip

This example shows a 10x10 heatmap with a custom tooltip that reveals the exact value of each cell on hover. The data is loaded from a CSV file and rendered as colored squares, with a linear color scale mapping values from white to teal. Built with D3 version 6, the visualization uses `d3.scaleBand` for axes, `d3.scaleLinear` for the color encoding, and event listeners for mouse interactions. The tooltip is a styled HTML div appended to the page, positioned using the event’s coordinates and updated on mousemove.

Loading thumbnail…

MouseOver SVG Color Change

This example displays a heatmap of categorical data, with groups (A-J) on the x-axis and variables (v1-v10) on the y-axis, colored by a linear scale from white to teal. The React component fetches CSV data via `d3.csv` and renders it using SVG, though it currently only draws a black background. The `d3.scaleBand` and `d3.scaleLinear` functions define the axes and color mapping, while a mouse enter handler attempts to change the background color, serving as a minimal interactive demonstration.

Loading thumbnail…

MouseOver Color change Heatmap??

This heatmap displays a 10x10 grid of values ranging from 1 to 100, colored on a white-to-teal scale using d3.scaleLinear. Each cell represents a combination of group (A-J) and variable (v1-v10) from a CSV dataset loaded via d3.csv. On mouse enter, individual rectangles change their fill color to black through React’s onMouseEnter event handler. The SVG rendering uses d3.scaleBand for x and y positioning, with React components managing the data fetching and mark generation.

Loading thumbnail…

JS in HTML

This example displays a large centered "Hello HTML" message using CSS styling and demonstrates how to integrate D3.js and modular JavaScript into a basic HTML page. The body text is styled with a 13em font size and centered alignment via CSS. The page loads D3 v7 from a CDN and executes an inline script that logs a greeting to the console, using the `console.log` API and an ES module export. The `index.js` imports a named export from `something.js`, which also logs the D3 object to demonstrate the library’s global availability.

Loading thumbnail…

Refactored Bar Chart

This horizontal bar chart displays the population of five countries using D3’s `scaleBand` and `scaleLinear` utilities within a React component. The SVG rendering separates axes and marks into reusable modules (`AxisBottom`, `AxisLeft`, `Marks`), while `useData` fetches a CSV via D3’s `csv` and formats values with `format(".2s")`. The visualization retrieves data from a GitHub gist, applying a Poppins font and a teal fill to the bars.

Loading thumbnail…

Sine wave with line

This example animates a smooth, natural sine wave that undulates across the screen, with a line drawn through its points using a black stroke. The wave is generated from 100 data points, each positioned along the x-axis with a y-coordinate determined by a sine function that shifts over time. Built with D3 v6 in a React framework, the visualization updates every frame using `setInterval` and renders via SVG. The code employs D3’s `line` generator with a `curveNatural` interpolation and animates the wave by incrementing the phase offset `t`.

Loading thumbnail…

Fork of Bouncy Wave

A smoothly animated sine wave bounces across the full screen, drawn as a single curved line whose height oscillates continuously. The wave is generated from 100 data points calculated per frame, with each point’s y-coordinate and circle radius varying by a time increment. Using D3’s `line` generator with `curveNatural` interpolation, the SVG path is updated every 16 milliseconds via `setInterval`. The visualization relies on D3 selections and the `visData` module, though React is included as a dependency but not actively used.

Loading thumbnail…

D3 Selections cleaned up

A line of blue circles moves in a sine wave across the viewport, created by mapping 200 points with an animated phase offset. The example uses the `select` and `range` functions from D3 v6 to build an SVG scene, where `setInterval` and `join` manage the creation and updating of circle elements at 60 frames per second, animating their horizontal and vertical positions.

Loading thumbnail…

D3 Selections

Two hundred blue circles form a sine wave that continuously animates across the screen, with each circle’s vertical position shifting based on a time-driven formula. The visualization demonstrates D3’s data join pattern using `selectAll`, `data`, and the `.join()` API to efficiently update existing SVG circle elements rather than recreating them. The example runs in a React framework with SVG rendering, updating every 16 milliseconds via a JavaScript `setInterval` timer, and pulls data from a procedurally generated range of 200 points.

Loading thumbnail…

Arrays

This example showcases JavaScript array manipulation techniques, including `forEach`, `filter`, `sort`, and `reduce`. The code logs a computed sum from a hardcoded array `[1, 3, 5, 10, 30]` using the `reduce` method, while commented-out lines demonstrate additional array operations. It renders no visual output; instead, it serves as a minimal HTML page with embedded JavaScript, illustrating functional programming concepts for educational purposes. The example relies solely on native JavaScript APIs without external libraries or data sources.

Loading thumbnail…

Javascript Arrays

This example demonstrates the JavaScript `range` function, which aims to produce an array of sequential integers, but currently contains incomplete logic—the `do...while` loop has an empty body and the `count` variable is never incremented. The visualization is a minimal HTML document that outputs the result of `range(5)` to the browser’s console using `console.log`. It relies solely on core JavaScript array construction and control flow, with no external libraries or data sources.

Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style drawing by layering two sets of thin, uniformly spaced rectangles—one horizontal and one vertical—across the full browser window. The rectangles are masked by overlapping circles, creating a bold geometric interplay of lines and negative space. Built with D3 v3 and React, the code uses `d3.range` to generate 100 elements per axis, `svg.append` for the SVG structure, and custom mask definitions (`circle-mask` and `circle-mask-2`) to alternate white and black circular cutouts. The result is a clean, minimalist pattern that responds to the viewport size.

Loading thumbnail…

Sol LeWitt with D3 episode 4

This example visualizes a generative geometric composition inspired by Sol LeWitt, using overlapping grids of horizontal and vertical rectangles that intersect within circular masks. It shows two sets of thin, evenly spaced bars—one horizontal and one vertical—drawn across the full screen, with the visible area confined to two offset circular regions defined by SVG masks. Built with D3.js’s `select`, `append`, `join`, and `range` functions, the code renders SVG `rect` elements using a React-free approach, combining black and white mask layers to reveal the intersection pattern in a minimalist, screen-filling design.

Loading thumbnail…

Circle and a line

This example visualizes temperature data over time as a line chart with circular markers, using a time-scaled x-axis and linear y-axis. The React-based code employs D3 utilities like `scaleTime`, `scaleLinear`, and `line` to position marks, while custom axis components render ticks and labels. The SVG rendering includes hover tooltips for each data point, and the data is loaded from a remote CSV file using `d3.csv`.

Loading thumbnail…

Line Chart

A line chart shows temperature over a week, using a smooth curve to connect daily data points from a CSV fetched via d3.csv. The chart uses d3.scaleTime and d3.scaleLinear to map timestamps and temperature values to SVG coordinates, with axes drawn from d3.ticks. React manages the loaded data through state in a custom hook, while the d3.line generator with curveNatural renders the path, and each data point is highlighted with a subtle circle.

Loading thumbnail…

Missing Migrants on a Map

This map visualization displays the global distribution of missing migrants, with circles sized by the total number of dead and missing individuals per location. Using a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, it renders land masses, graticules, and country interiors as SVG paths. Circle radii are scaled with `d3.scaleSqrt` based on the data’s maximum value. The data is loaded asynchronously from a CSV using D3’s `csv` utility, while world map topology comes from a JSON file processed with TopoJSON’s `feature` and `mesh` functions. React hooks manage the loading state.

Loading thumbnail…

Missing migrants

This visualization displays the number of dead and missing migrants reported over time, plotting each report as a dot on a scatter plot with a time-based x-axis and a linear y-axis for the count. The chart uses a React component structure, with D3 utilities like `scaleTime`, `scaleLinear`, and `extent` from d3 to compute scales and domains, while SVG elements render the points and axes. Data is loaded asynchronously via d3's `csv` function from a remote source, and the graph includes axis labels, tick marks, and tooltip functionality on each circle.

Loading thumbnail…

Points on a map

This example displays a world map with cities plotted as semi-transparent circles, where circle size reflects each city’s population. It uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to render land, graticules, and country borders from TopoJSON data. City coordinates and populations come from a CSV loaded with `d3.csv`, and circle radii are scaled with `d3.scaleSqrt`. The visualization is built with React hooks for data fetching and renders as SVG.

Loading thumbnail…

Interactive color legend

This interactive scatterplot displays the Iris dataset, mapping sepal and petal measurements against each other. Users can select which attributes appear on the x- and y-axes via dropdown menus, while a color legend encodes species. Hovering over a legend item temporarily fades and isolates the corresponding species’ points. The visualization uses React for state management, D3’s scaleLinear, scaleOrdinal, and csv loader, and renders SVG circles and axes.

Loading thumbnail…

Fork of Scatter plot with color legend

This fork of a scatter plot visualizes the classic Iris dataset, allowing interactive exploration of relationships between sepal and petal measurements. The React-based graphic uses D3 scale functions (`scaleLinear`, `scaleOrdinal`) to map data attributes to x/y positions and categorical species to a color legend. Two dropdown menus let users select which numerical attributes to compare, while the SVG rendering updates immediately. The color legend encodes the three Iris species using distinct hues. The code demonstrates a modular approach with separate components for axes, marks, and the legend, using D3 utilities for data loading, scaling, and tick formatting.

Loading thumbnail…

Scatter plot with color

This interactive scatter plot displays the Iris flower dataset, allowing users to explore relationships between four measured attributes (sepal length, sepal width, petal length, and petal width) through dropdown menus that control the X and Y axes. Points are colored by species using d3.scaleOrdinal with three categorical colors. The visualization is built with React components managing state for axis selections, while d3.scaleLinear handles coordinate mapping and axis rendering uses custom SVG tick components. Data loading relies on d3.csv with type coercion for numeric fields.

Loading thumbnail…

Polished Scatter plot with menus

This interactive scatter plot displays the Iris flower dataset, allowing users to select which flower measurements appear on the x- and y-axes via the React dropdown menus. The visualization uses D3’s scaleLinear and extent functions to compute domains from the CSV data loaded with d3.csv. SVG circles represent individual flowers, with native `<title>` elements providing value-based tooltips. The chart features polished custom axes, a Poppins font, and a color-coded teal marker style, all rendered through React components that manage state for the currently selected attributes.

Loading thumbnail…

Test

This interactive visualization maps the global distribution of missing migrants, using bubble size to represent the total dead and missing per location. A linked time-series histogram below the map allows filtering by reported date, with the map’s bubbles updating in response to the brush selection. The map uses a natural Earth projection rendered with `d3.geoPath` and `d3.geoGraticule`, while the histogram applies `d3.histogram` with monthly bins. The React implementation leverages `useMemo` for performance, with data loaded from a CSV of the Missing Migrants Project.

Loading thumbnail…

Making a bar chart with React and D3

This example displays a horizontal bar chart of the five most populous countries, using data from a CSV file that is loaded via D3’s `csv` utility. React’s `useState` and `useEffect` hooks manage the asynchronous data loading, while the chart itself is rendered as SVG rectangles. The scales are created with `d3.scaleBand` and `d3.scaleLinear`, and the bar widths are proportional to the population values. The visualization is built with React and D3 v7, with the graphic element rotated by a degree value, though the rotation animation is commented out.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris flower dataset, plotting sepal and petal measurements against one another. Two dropdown menus let a viewer select which attribute appears on the x- and y-axes, with the scales and axes updating accordingly. Built with React and D3 v7, the visualization uses `scaleLinear` for axes, `extent` to compute domains, and `csv` to load data from a remote URL. Circles are rendered as SVG elements, with native `<title>` tooltips showing formatted values. The chart reflects user selections through React state and the `Dropdown` component.

Loading thumbnail…

Menus with React

This example demonstrates a simple pet-selection interface built with React, featuring a dropdown menu that allows users to choose among several pet options. The main App component maintains the current selection’s state, and the reusable Dropdown component renders a native HTML `<select>` element, mapping over the provided options array to generate `<option>` elements. The code uses React’s `useState` hook for state management and `ReactDOM.render` to mount the app to the DOM, with the dropdown’s change events triggering state updates. The interaction is minimal, focusing on controlled component composition and state handling.

Loading thumbnail…

React Starter

This example demonstrates a minimal React application that renders a single paragraph of text onto a blank HTML page. The page loads React 17 and ReactDOM via CDN, with the `index.html` file setting up the root `<div>` and the `index.js` script depending on the `react` and `react-dom` libraries. The code defines an `App` component that returns a `<div>` containing a `<p>` tag, then uses `ReactDOM.render()` to mount it into the `#root` element.

Loading thumbnail…

Worldmap

This example displays a world map rendered with vector geometries, showing landmasses in teal, graticules in light gray, country borders, and a pale sphere background. It loads geographic data from the World Atlas TopoJSON dataset and uses D3’s `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` to generate SVG paths. React manages data loading through a custom `useData` hook, while the `Marks` component renders each layer. A commented-out rotation effect suggests potential interactivity, though the map remains static. The visualization relies on the `topojson` library to convert topology into GeoJSON features and meshes.

Loading thumbnail…

Scatter Plot

This scatter plot displays the relationship between petal length and sepal width from the Iris dataset, with each point representing a flower sample. The visualization is rendered as an SVG using React components that leverage D3 v7 utilities for data loading and scaling. The code uses `scaleLinear` from D3 for both axes, `extent` to compute the domain from the data, and `csv` to parse the remote data source. Axis labels and tick marks are generated programmatically through reusable React components.

Loading thumbnail…

The margin convention

A horizontal bar chart displays the population of five countries from a CSV file. The chart uses a margin convention to offset the inner plotting area from the SVG canvas edges. React state manages the asynchronous loading of the data via `d3.csv`. The chart is rendered with SVG elements, using `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the continuous x-axis.

Loading thumbnail…

D3 arcs

A React app renders a pie chart using D3's `d3.pie` layout and `d3.arc` generator, with each slice filled by a CSS named color from a CSV dataset loaded via `d3.csv`. The graphic displays all named colors as equal-width arcs radiating from a central point, forming a full circular spectrum. The SVG output maps each data row to a path, with the arc's inner radius set to zero and outer radius matching the chart's width. A commented-out rotation effect in the parent component hints at potential interactivity but remains inactive.

Loading thumbnail…

Rendering data with React

This example displays a vertical sequence of 4-pixel-tall color bands, each representing a CSS named color from a CSV file, forming a full-width spectrum across the screen. The visualization loads the data from a remote CSV containing color names and their RGB hex values using D3’s `csv` function. React manages the asynchronous data loading through `useState` and `useEffect`, rendering each row as a styled `<div>` with its background color set to the hex value. The page uses React 16.9 and D3 v7, with the `Loading...` placeholder shown until the data arrives.

Loading thumbnail…

Vega Lite API lessons done on Italki

This visualization tracks the cumulative number of Italian lessons the author completed on Italki over a two-week period in June 2021, shown as a line chart. It uses the vega-lite-api to declare the mark and encodings, with d3.v5 for CSV parsing. The chart is rendered as SVG via vega and vega-lite, with vega-tooltip providing interactive hover details. A custom config adjusts axis and label styling for improved readability against a dark color scheme.

Loading thumbnail…

Vega-lite Stacked Bars

This example uses a circular mark to visualize the population of religious groups across countries, with the size of each circle encoding population magnitude. The x-axis positions countries sorted by total population, while the y-axis separates religious affiliations. The visualization is rendered using the vega-lite-api, which registers vega and vega-lite for declarative chart specification, and loads data from a CSV file containing religion-by-country statistics. The chart employs a custom config to style axes and labels, and tooltips are enabled through the vega-tooltip Handler.

Loading thumbnail…

Vega-lite barchart population

This example displays a bar chart of 2015 country populations, sorted in descending order, with interactive tooltips showing population values. It is built using the Vega-Lite API, which composes a specification for bar marks, nominal country fields, and quantitative population encodings. The visualization pulls data from a CSV file via `d3.csv`, and renders with SVG through `vega` and `vega-lite`. The chart fits the window and applies custom axis and label styling from a shared config object.

Loading thumbnail…

Vega-Lite temperature

This visualization presents a line chart of weekly temperature readings in San Francisco, using the Vega-Lite API with D3.js for data loading. The chart maps timestamps to the x-axis and temperature values to the y-axis, with a zero-suppressed scale to highlight variation. It renders as an SVG via Vega-Lite’s view, configurable through a custom config.js that adjusts axis and label styling for readability. The data is fetched as CSV from a remote gist URL using `d3.csv`.

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization plots automobile data from a CSV file, showing the relationship between horsepower, origin, and weight. Each point represents a vehicle, colored by weight and positioned by horsepower across different origin categories, with tooltips revealing car names. The example uses the Vega-Lite API, specifically `vl.markPoint`, `vl.x`, `vl.y`, `vl.color`, and `vl.tooltip`, to construct the specification. It loads data via d3’s `csv` function from a GitHub gist, then renders the chart as an SVG using Vega and Vega-Lite, with the final output generated through `import vega from 'vega'` and `import vegaLite from 'vega-lite'`.

Loading thumbnail…

Loading data with React and & D3

This example demonstrates loading a CSV dataset and displaying summary statistics using React state and D3 utilities. The app fetches CSS named colors from a remote URL via `d3.csv`, stores the parsed data in React state with the `useState` hook, and triggers the asynchronous load inside `useEffect`. Once loaded, the `d3.csvFormat` function calculates the data’s size in kilobytes, while the row and column counts come from `data.length` and `data.columns`, respectively, with the message rendered as large monospace text. The visualization shows the raw file’s footprint, row count, and column count as a simple text output.

Loading thumbnail…

Loading and parsing CSV data

This example demonstrates loading and parsing a CSV file of CSS named colors from a remote URL, then displaying a summary of the parsed data. It fetches the raw text using the browser’s `fetch` API, parses it with `d3.csvParse`, and reports the row count, column count, and file size in kilobytes within a `<pre>` element. The code uses D3 v7 and relies on JavaScript’s async/await for the network request.

Loading thumbnail…

Mouse Follower

A single circle follows the mouse cursor as it moves across an SVG canvas. The React application tracks mouse coordinates through the `onMouseMove` event, updating the circle's `cx` and `cy` attributes in real time. The visualization uses React's `useState` hook to manage the cursor position and ReactDOM to render the dynamic SVG element, creating a simple interactive follower effect.

Loading thumbnail…

Fork of HTML Starter

A React component renders a smiling face built from SVG primitives: a yellow circle with a black stroke for the head, two offset circles for the eyes, and a curved path for the mouth using d3.arc. The visualization demonstrates component composition and D3 integration within React, using d3.v7 and react-dom to construct reusable, parameterized visual elements.