Skip to main content
Log in
K

Kai Stewart

@kseuro·26 public vizzes

Loading thumbnail…

Sol LeWitt Reproduction

A reproduction of a Sol LeWitt art piece generates an abstract composition of alternating horizontal and vertical stripes. The rendering uses SVG elements created via the `createElementNS` API, with a circular mask applied to the horizontal stripes to reveal only a central circle. The code computes stripe positions dynamically based on window dimensions, using a fixed stripe width of 10 pixels. No external libraries are used; the visualization relies entirely on native SVG and JavaScript.

Mar 1, 2022
Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes—circles, rectangles, and lines—positioned on a 960×500 canvas. It shows how fill, stroke, stroke-width, and fill-opacity attributes control appearance, with overlapping translucent rectangles creating color blends. The code uses native SVG markup directly embedded in the HTML, without any JavaScript libraries or D3 APIs. A set of navy lines and white circles forms a simple geometric pattern, while the README references “Get it Right in Black & White: Episode 1” as the source video tutorial.

Feb 7, 2022
Loading thumbnail…

Organization Force Chart

An interactive force-directed network represents an organizational structure, grouping member organizations under four main entities. The visualization uses color-coded clusters to distinguish each parent group and its children, with small blank nodes creating visual spacing. Nodes and links are rendered as SVG circles and lines, positioned by a d3.forceSimulation with forceManyBody, forceLink, and forceCenter. The code uses d3.drag to let users move nodes, and the simulation updates positions on each tick. The data is defined in a JavaScript module with the organization hierarchy.

Jan 25, 2022
Loading thumbnail…

Force Directed Graph Starter

A force-directed graph starter example renders three nodes and two links as SVG circles and lines. The simulation uses `d3.forceSimulation` with `forceManyBody` for repulsion, `forceLink` for connections, and `forceCenter` to keep the layout centered. On each tick, node and link positions update directly via the `simulation.on('tick')` handler, assigning `cx`, `cy`, and line endpoints from the simulation's coordinates. The data is hardcoded as three objects and two link pairs in D3 v7.

Jan 25, 2022
Loading thumbnail…

HIV/AIDS Choropleth Map

This choropleth map visualizes the global prevalence of HIV/AIDS among adults aged 15-49 in 2017, using a sequential yellow-to-red color scale to indicate infection rates. The map, rendered as an SVG with D3’s geoNaturalEarth1 projection and geoPath, uses the world-atlas TopoJSON dataset for country boundaries. Country fill colors are derived from CSV data on HIV prevalence, joined to map features via ISO country codes. The map includes graticules and interior borders, with missing data rendered in gray.

Jan 20, 2022
Loading thumbnail…

Missing Migrants Scatter Plot - Log Scale

This scatter plot visualizes the Missing Migrants Dataset, with each circle representing a single event. The x-axis encodes the reported date on a time scale, while the y-axis uses a logarithmic scale to display the total dead and missing, compressing the wide range of values. The visualization is built with React and D3 v5, using `scaleTime` for dates, `scaleLog` for the logarithmic y-axis, and SVG circles rendered via React components.

Jan 18, 2022
Loading thumbnail…

Multiple Views with Brushing

This example combines a world map and a time-series histogram to visualize migrant deaths. The map uses a natural Earth projection with graticules and land outlines, while circles sized by square-root scaling represent the dead and missing. The histogram bins the same data by date, and its interactive brush selection filters the map's circles, demonstrating linked views. The visualization uses React components, D3’s `geoNaturalEarth1`, `geoPath`, `scaleSqrt`, `bin`, and `brushX` for the interaction, with data sourced from a CSV of missing migrants.

Jan 10, 2022
Loading thumbnail…

Multiple Views

This interactive visualization combines a world map and a time-series histogram to display missing migrant incidents. The top view uses a natural Earth projection with proportional circles sized by the square root of the reported deaths, while the bottom histogram aggregates the same data by month. Built with React and D3 v7, the example employs d3.geoPath for map rendering, d3.bin for histogram binning, and d3.scaleSqrt for circle sizing. Data comes from a CSV of global missing migrants.

Jan 6, 2022
Loading thumbnail…

Missing Migrants on a Map

This example visualizes missing migrant incidents on a world map, using yellow circles sized by the total number of dead and missing individuals. It renders a natural Earth projection with graticules, land masses, and country borders using d3.geoPath and topojson data. Circle radii are scaled with d3.scaleSqrt, while the map itself is drawn with SVG. The interactive React frontend loads both world atlas and CSV migrant data asynchronously.

Jan 6, 2022
Loading thumbnail…

Working with Time

This example visualizes the monthly totals of dead and missing migrants from a global dataset, using a bar chart where time is mapped to the x-axis and cumulative counts to the y-axis. The React app loads CSV data via d3.csv, parses dates and numbers, and computes bins with d3.bin and timeMonths. SVG marks are rendered through React components, with scales from d3.scaleTime and d3.scaleLinear, and axes built using custom React components that leverage d3’s tick generation.

Dec 13, 2021
Loading thumbnail…

Points on a Map

This example visualizes global population distribution by plotting circular marks for cities on a natural Earth projection. The city points are colored yellow with partial transparency, overlaid on a light gray landmass with graticules and country borders. Built with React and D3 v7, it uses `geoNaturalEarth1` and `geoPath` for the map, a square root scale to map population to circle radius, and loads world atlas TopoJSON and city CSV data via `useWorldAtlas` and `useCities` hooks.

Dec 13, 2021
Loading thumbnail…

Radial Tree as a Project-Personelle Map

A radial tree maps an organization’s projects to its personnel. The hierarchy shows top-level groups (CGA, IBM), their projects (e.g., SU2C 2018), and each project’s Champion(s) and Support Staff, with individual names as leaves. The code uses `d3.hierarchy` and `d3.cluster` to compute the layout, then renders it as SVG paths and circles. Links and node text are sized and colored by depth, with clickable labels for URLs, all built with the `d3` v4 library.

Dec 2, 2021
Loading thumbnail…

M.Bostock Radial Tidy Tree Example

This example shows a radial tidy tree visualization of the Flare software package’s class hierarchy, with leaves labeled by class name and internal nodes marked by darker circles. The code uses d3.stratify to convert CSV data into a hierarchy and d3.tree with a radial layout, rendering links as SVG paths via d3.linkRadial. Node positions are computed with trigonometric functions, and text labels are rotated and anchored based on their angular position. The visualization is drawn entirely in SVG using D3 v4.

Dec 2, 2021
Loading thumbnail…

Radial Tree as an Organizational Chart

A hierarchical organizational chart is depicted as a radial tidy tree, with the top node at the center and departments and roles radiating outward based on their depth level. The visualization uses a D3.js v4 framework, rendering to an SVG canvas. The code calls `d3.cluster()` and `d3.hierarchy()` to compute the layout, and `d3.zoom()` for interactive pan and zoom. Text labels for leaf nodes are rotated to follow the radial direction, while intermediate and root labels remain horizontal. The data is loaded from a local `data.json` file.

Nov 17, 2021
Loading thumbnail…

Improved Scatterplot with Interactive Color Legend

This interactive scatterplot visualizes Fisher’s Iris dataset, loaded via `d3.csv` from a GitHub Gist. The React app uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` for species colors, and custom SVG components for ticks and marks. Users select X and Y attributes from dropdowns, while hovering over the interactive color legend dims non-matching points via React state, highlighting each species’ distribution.

Nov 15, 2021
Loading thumbnail…

Improved Scatterplot with Color Legend

This interactive scatterplot displays the Iris dataset, with dropdown menus to select which numerical attribute maps to the x and y axes and a color legend distinguishing species. Built with React and D3 v5, it renders axes, tick marks, and circular marks as SVG elements. Color encoding uses a d3 ordinal scale, while numeric axes are scaled with d3’s linear scale and nice ticks.

Nov 15, 2021
Loading thumbnail…

Improved Scatterplot with Menus

This interactive scatterplot displays the Iris flower dataset, loaded via D3’s `csv` from a GitHub Gist, with React dropdown menus that let the user change which numeric attributes are mapped to the X and Y axes. The SVG visualization uses D3 scales (`scaleLinear`, `scaleOrdinal`) for positioning and species-based coloring, while custom React components `AxisBottom`, `AxisLeft`, and `Marks` render tick marks, labels, and circles. The axis labels update dynamically based on the selected menu values, and hovering over a circle reveals a tooltip via an SVG `<title>` element.

Nov 15, 2021
Loading thumbnail…

Scatterplot with Menus

This interactive scatterplot displays the Iris dataset, loaded via d3.csv from a GitHub Gist. React state manages two dropdown menus that select which of the four flower attributes (sepal length/width, petal length/width) are mapped to the x- and y-axes, updating the scales and axes dynamically. The SVG visualization uses d3.scaleLinear for positioning, custom React components for the axes and marks, and native SVG <title> elements for tooltips. A Poppins font and fixed styling give the chart a clean, button-driven interface.

Nov 15, 2021
Loading thumbnail…

Menu Example

This example demonstrates a simple dropdown menu for selecting a pet, with the chosen value displayed in the browser console. The interface uses React’s `useState` hook to manage the selected value, and the `Dropdown` component renders a native HTML `<select>` element with `<option>` tags. The pet options are hardcoded as an array of objects with value and label properties. The code leverages React 16.9 and ReactDOM to render the UI, with inline CSS controlling sizing and layout. The menu updates the selected state on change events, though no additional visualization is shown.

Nov 9, 2021
Loading thumbnail…

React Boilerplate

This React boilerplate demonstrates a minimal data-visualization setup, rendering a simple "Hello React!" message into a DOM root element. It uses React 16.9.0 via the production UMD builds from unpkg, along with ReactDOM for mounting. The example shows how to bootstrap a React application with a single functional component, all run inside an HTML page that suppresses body margins and overflow. The code relies on `ReactDOM.render()` to attach the component to the `#root` div, providing a starting point for building more complex visualizations in React.

Nov 9, 2021
Loading thumbnail…

World Map

This example renders a world map using a natural Earth projection, displaying countries as filled polygons, along with graticules, interior borders, and a sphere outline. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON using the `feature` and `mesh` functions from topojson. The map is drawn with `d3.geoPath` and `d3.geoNaturalEarth1`, while React manages the component structure and SVG rendering. Styling is applied through CSS classes, including a teal fill for landmasses and gray graticules.

Nov 8, 2021
Loading thumbnail…

Stylized Linechart

A stylized linechart displays temperature readings over a week, with circular data points and a smooth curved path rendered as SVG. The visualization loads CSV data from a GitHub Gist, mapping timestamps to a time scale and temperatures to a linear scale using d3.scaleTime and d3.scaleLinear. React components handle axes and marks, while d3.line with curveNatural generates the path, and native SVG <title> elements provide tooltips on hover.

Nov 8, 2021
Loading thumbnail…

Scatterplot

This scatterplot visualizes the Iris dataset, plotting petal length against sepal width, loaded from a CSV file via GitHub Gist. Written in React and rendered as SVG with D3.v5, the code uses `scaleLinear` for axes, `extent` for domain calculation, and `format` for tick labels. The visualization includes styled axis tick marks, labels, and circular marks with tooltip titles showing the x-axis value. D3’s `csv` function handles data loading, while React components like `AxisBottom`, `AxisLeft`, and `Marks` structure the chart.

Nov 8, 2021
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart visualizes projected population figures for fifteen countries in 2060, sourced from UN population projection data. The chart uses a horizontal bar layout, making country names easy to read along the y-axis. Built with React and D3 v5, it employs `scaleBand` for the categorical y-axis, `scaleLinear` for the population x-axis, and custom components (`AxisBottom`, `AxisLeft`, `Marks`) to render SVG elements. Hovering over a bar reveals the precise value via a native SVG `<title>` tooltip.

Nov 2, 2021
Loading thumbnail…

Refactored Bar Chart

This example shows United Nations population projections for 2060 as a horizontal bar chart, with country names on the y-axis and population values on the x-axis. It uses React to render SVG elements, d3.scaleBand and d3.scaleLinear for scaling, and d3.csv to load the data, displaying the first 15 countries. The chart is built from modular components for axes and marks, with text labels for tick values and country names positioned directly in SVG.

Nov 2, 2021
Loading thumbnail…

Making a Bar Chart with React & D3

This example shows the projected population of 15 countries in 2060 as a horizontal bar chart, using data from the UN Population Projections CSV file. It loads the data with the `csv` function, then scales the bar lengths with `scaleLinear` and positions country labels with `scaleBand`. The chart renders as SVG elements—`rect` bars, `line` gridlines, and `text` labels—all coordinated through React state management with `useState` and `useEffect` for fetching, and the D3.js v5 library for layout and scaling.

Oct 28, 2021