Skip to main content
Log in
S

stevensmithj

@stevensmith44·15 public vizzes

Loading thumbnail…

Meaningless Graphs with D3

An interactive stacked area chart renders eight time series from a CSV file, displaying aggregate values across years with a color-coded palette. The visualization uses D3 v6 to parse the data, then applies `d3.stack()` to compute layer offsets and `d3.area()` to generate the SVG paths. Axes are created with `d3.axisBottom` and `d3.axisLeft`, while labels for "Year" and "Points??" are added as SVG text elements. The data source is a remote CSV hosted on GitHub, and the chart updates reactively when loaded.

May 6, 2022
Loading thumbnail…

Fork of D3 Selections

Two animated SVG panels demonstrate D3 selections and data joins. The top panel shows black circles on a white background, while the bottom panel renders the same dataset in white on black, driven by a 60fps interval. Each frame regenerates data via `makeData`, using trigonometric functions like `Math.tan` and `Math.cos` to animate circle positions and radii. The `vizDraw` function applies a D3 data join with `selectAll('circle').data().join('circle')` to update attributes, while `d3.range` generates the underlying sequence of values.

May 5, 2022
Loading thumbnail…

Temperature in SF

This visualization displays the temperature in San Francisco over time, using a line chart with points to show daily measurements. The data is loaded from a CSV file using D3’s `csv` utility, and the plot is rendered as an SVG via a React component. The x-axis represents time, formatted with `timeFormat(‘%a’)`, while the y-axis shows the temperature scale. The chart uses `scaleLinear` and `scaleTime` for scaling, and the line is drawn with `curveCardinal` smoothing.

Apr 3, 2022
Loading thumbnail…

Country population data

A horizontal bar chart displays the top 10 countries by population for 2020, sourced from a CSV of UN population data. The chart maps country names to a D3 band scale on the y-axis and population counts to a linear scale on the x-axis. Built with React and rendered as SVG, it uses D3 v5 utilities to load the CSV and format tick labels in compact notation, with each bar’s tooltip showing the population formatted in billions.

Apr 3, 2022
Loading thumbnail…

Missing Migrants Date Histogram

This histogram displays the monthly sum of dead and missing migrants, with each bar representing one month and its height indicating the total count. The visualization uses React to render SVG elements and relies on d3.bin to group the data into monthly bins, d3.sum to aggregate the values, and d3.scaleTime and d3.scaleLinear for axes. Data comes from the Missing Migrants Dataset, loaded via d3.csv, with tooltips showing the exact monthly totals on hover.

Apr 2, 2022
Loading thumbnail…

Missing Migrants Map

This map visualizes missing migrant incidents worldwide using a natural Earth projection. Circles sized proportionally to the total dead and missing per incident are placed at their recorded coordinates. The visualization uses React with d3.geoPath and d3.geoNaturalEarth1 for the map, d3.scaleSqrt for circle sizing, and renders as SVG. World atlas data comes from TopoJSON, while incident data is loaded via d3.csv from a public CSV.

Mar 26, 2022
Loading thumbnail…

Cities of the World

Cities of the World uses a natural Earth projection to display global population data as proportional circles. D3’s geoNaturalEarth1 and geoPath render landmasses, graticules, and sphere outlines, while a sqrt scale maps city populations to circle radii. The visualization loads world atlas topology from world-atlas and city CSV data, overlaying semi-transparent dots atop a muted map. React manages the SVG rendering, with d3.v5 providing the underlying geospatial and scaling utilities.

Mar 26, 2022
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements across three flower species. Two dropdown menus let viewers select which attributes appear on the X and Y axes, while a color legend enables hovering to highlight specific species by dimming others. The visualization uses React for component state management, d3.scaleLinear and d3.scaleOrdinal for coordinate and color mapping, and renders as an SVG with reusable axis, mark, and legend components.

Mar 11, 2022
Loading thumbnail…

Menus

A React-based menu interface displays a dropdown for selecting a pet from a fixed list of options (goldfish, dog, cat, hamster, parrot, spider, and b). The component uses React’s `useState` hook to manage the currently selected value and logs each selection to the console. The `Dropdown` component is created as a reusable function that renders a native HTML `<select>` element, mapping options to `<option>` tags and triggering a callback on change. ReactDOM renders the app into the `#root` div, with styling applied via embedded CSS that enlarges labels and selects.

Feb 27, 2022
Loading thumbnail…

World Map

A monochromatic world map renders landmasses in gray against a black sphere, with graticule lines and country interiors drawn as fine strokes. The visualization uses the `geoEqualEarth` projection and `geoPath` from D3 to generate SVG paths from the World Atlas TopoJSON dataset, which is loaded via `d3.json` and converted with `topojson.feature` and `topojson.mesh`. React manages the asynchronous data fetching and component rendering.

Feb 23, 2022
Loading thumbnail…

Iris Data Set

This scatterplot visualizes the Iris Data Set, comparing sepal length against sepal width for individual flowers. The visualization uses React to manage state and render the SVG, with D3.js v5 utilities like `csv`, `scaleLinear`, and `min`/`max` for data loading and axis scaling. Each flower is represented by a circle with a tooltip showing the sepal length value, styled with a teal fill and gray gridlines.

Feb 8, 2022
Loading thumbnail…

High Income countries total GDP data

A bar chart displays total GDP for high-income countries across time, with each bar representing a single year and height encoding the GDP value. The visualization uses the vega-lite-api library for chart specification, while d3.csv loads the dataset from a GitHub gist containing World Bank income-group GDP figures. Tooltips show precise GDP values formatted with SI prefixes when hovering over bars. The chart is styled with customized axis fonts and colors through a vega-lite config object, and rendered as a full-viewport SVG.

Feb 5, 2022
Loading thumbnail…

Fork of Vega-Lite API Template

A Vega-Lite API visualization displays country populations from a 2015 CSV dataset as black bars, sorted alphabetically by country name. The chart uses Vega-Lite’s `markBar` encoding for x-position and population on the y-axis, with tooltips showing exact population values. Built with the `vega-lite-api` library, D3’s `csv` loader fetches the data, while `vega-tooltip` provides interactive hover details. The visualization renders as an SVG, fitted to the full browser window with custom styling from the `config.js` file.

Feb 5, 2022
Loading thumbnail…

Fork of Loading Data with React & D3

This example displays a pie chart of CSS named colors, with each slice filled using the color’s own RGB hex value, creating a rainbow-like wheel. It loads the data from a CSV file via D3’s `csv` utility, then stores the result in React state using `useState` and `useEffect`. The SVG rendering uses D3’s `arc` generator to compute each path’s `d` attribute, with React mapping over the data array to produce the paths.

Feb 4, 2022
Loading thumbnail…

Hello HTML

This interactive, SVG-based example renders a smiling cartoon face composed of basic shapes: a yellow circle for the face, two black eyes, and a curved mouth created with an arc. The face is built modularly in React, with separate component files for each facial feature, and is anchored to the center of a 960x490 canvas. The code uses `d3.arc` to generate the mouth’s path, and the `FaceContainer` component logs mouse-move events to the console using `onMouseMove`.

Feb 1, 2022