Skip to main content
Log in
O

o-n-e

@o-n-e·15 public vizzes

Loading thumbnail…

Fork of Internet Users by World Region

This multi-line chart visualizes the growth of Internet users per 100 people across seven world regions from 1990 to 2015. It reveals that East Asia & Pacific has experienced dramatic growth, while North America shows a saturated trend. The visualization uses the MetricsGraphics library with D3.js v4 for data processing and rendering. Data is loaded from a CSV file, parsed by year, and nested by region using `d3.nest()`. The chart employs custom tick formatting with `d3.format` to display large numbers concisely. Data originates from World Bank and International Telecommunication Union records, sourced via Our World in Data.

Jun 9, 2021
Loading thumbnail…

Fork of Smiley Face Part II

This example renders a minimal React application that outputs the text “Hello” to the screen, while including commented-out SVG markup for a yellow smiley face with two eye circles. The React component uses `ReactDOM.render` to mount the app, and the code defines sample data arrays and a helper function (`getMaxOfKeysES6`) that calculates maximum values, though these are not used in the rendered output. The visualization relies on React 16.9 and renders as static SVG elements in the HTML.

Jun 9, 2021
Loading thumbnail…

Fork of Coronavirus Deaths Over Time by Country With Voronoi Overlay

This visualization displays global coronavirus deaths over time as a log-scale line chart, with each country’s cumulative death count traced as a separate path. A Voronoi overlay, built using `d3.Delaunay`, partitions the chart area into cells that trigger hover events, highlighting the nearest data point’s country line in black. The chart, rendered as an SVG with React and D3 v5, uses `d3.scaleTime` and `d3.scaleLog` for axes, and pulls data from the Johns Hopkins Coronavirus Dataset.

Jun 6, 2021
Loading thumbnail…

Fork of Hello HTML

This example displays a nearly empty HTML page with a minimal document structure and a JavaScript file that logs "hello" to the console. The page contains no visible data visualization, as the index.js includes only a malformed array literal with no complete data objects. The code uses basic DOM APIs through vanilla JavaScript and standard HTML elements, with no external libraries such as D3 or Three.js present. The rendering approach is a bare HTML document, and the data source remains undefined due to the incomplete array syntax.

Jun 5, 2021
Loading thumbnail…

Fork of Stylized Line Chart

This example shows a stylized line chart of weekly temperature data from San Francisco, plotted over time. A smooth curve connects the temperature readings, with labeled axes for time and temperature. The visualization uses React to render SVG components, including the AxisBottom, AxisLeft, and Marks components, while D3's scaleTime, scaleLinear, and line curve functions handle the data mapping and path generation. The chart is built from the Data Canvas Sense Your City Dataset via a CSV file.

Jun 3, 2021
Loading thumbnail…

Fork of Global Coronavirus Deaths

This line chart visualizes the cumulative global death toll from the COVID-19 pandemic over time, using data from the Johns Hopkins Coronavirus Dataset. A horizontal marker highlights when deaths reach 10,000, while a vertical marker labels the most recent date on the x-axis. Built with React and D3 v5, the visualization uses SVG rendering via `scaleTime`, `scaleLinear`, and `line` generators, with axes drawn using `axisBottom`. The chart pulls its data asynchronously from a CSV file fetched via D3’s `csv` function and transforms daily death counts into a date series.

Jun 2, 2021
Loading thumbnail…

Fork of Coronavirus Deaths Over Time by Country

This chart displays cumulative global coronavirus deaths over time for each country, using a log-scaled y-axis to handle the wide range of reported values. Each country’s time series is rendered as a randomly colored line, derived from the Johns Hopkins dataset. Built with React and D3 v5, it uses `d3.scaleLog`, `d3.scaleTime`, and `d3.line` to generate the SVG paths, with axes drawn via `d3.axisBottom` and `d3.axisLeft`.

Jun 2, 2021
Loading thumbnail…

Colours

This visualization displays a grid of color swatches sourced from a CSV file of named colors, with each cell rendering a distinct hue in a structured layout. The code uses React hooks (`useState`, `useEffect`) to asynchronously load the color data via `d3.csv`, then passes the parsed dataset to the rendering logic. It leverages React’s component-based architecture to map each color entry to a visual element, while D3’s CSV parser handles the remote data fetching from a GitHub gist. The example demonstrates a clean integration of React for UI state and D3 for data ingestion.

May 31, 2021
Loading thumbnail…

Smiley Refactored

This example displays a yellow smiley face with black-outlined circular eyes and a curved mouth, centered on a blank canvas. It demonstrates component-based visualization with React, breaking the face into separate modules like `BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`. The code uses d3’s `arc` API to generate the mouth path, while React components pass numeric props for positioning and sizing. The face is rendered as SVG elements within a translated `<g>` group, with fixed dimensions of 960 by 500 pixels.

May 31, 2021
Loading thumbnail…

Smiley d3

A smiling face is drawn as a yellow circle with a black outline, two eyes, and a curved mouth, all centered in an SVG. The visualization uses React to render the SVG elements, while D3’s `arc` function generates the mouth path based on inner and outer radii and start/end angles. Hard-coded dimensions and offsets position the facial features, with the face radius derived from the viewport height and stroke width. The example demonstrates combining React components with D3’s geometric utilities for declarative, static chart-like graphics.

May 30, 2021
Loading thumbnail…

SmileyReact

A yellow smiley face rendered as scalable vector graphics appears centered in an SVG canvas, with two black circular eyes positioned symmetrically on either side. The example demonstrates React’s component-based rendering, using the React and ReactDOM production builds to mount an `App` component that declaratively defines three `<circle>` elements. The face’s dimensions, offsets, and stroke widths are set as JavaScript constants, and the SVG output is embedded directly in the DOM via `ReactDOM.render`. No interaction or animation is implemented.

May 30, 2021
Loading thumbnail…

SmileyHTML

A simple smiley face rendered as a single SVG element. Three circles compose the face: a large yellow outline for the head and two smaller black circles for the eyes. The code defines the SVG directly in the HTML body, specifying each circle’s center coordinates and radius as attributes, with stroke and fill properties for styling. No external libraries or data sources are used; the visualization relies entirely on static SVG markup.

May 30, 2021
Loading thumbnail…

HTML Starter

This example shows a minimal HTML page that prints "Hello HTML" in large centered text and logs "Hello JavaScript!" to the browser console. It demonstrates the fundamental structure of a web page using inline CSS for styling and a script tag for JavaScript execution. The code relies on the native Document Object Model (DOM) and standard browser console API, with no external libraries. It serves as a starting point for more complex visualizations and provides a contrast to its companion React-based starter.

May 30, 2021
Loading thumbnail…

Global Coronavirus Deaths

This chart shows the cumulative global death toll from COVID-19 over time, with a horizontal marker line at the one-million-death milestone and a vertical marker at the most recent date. Built with React and D3 v5, it uses `scaleTime`, `scaleLinear`, and `line` to render an SVG path. Data comes from the CSSE COVID-19 time series, and the axes are drawn with `axisBottom` and custom marker components.

May 29, 2021
Loading thumbnail…

Fork of Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. Red semi-transparent circles encode each car, with axes labeled and a title. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` APIs to render an SVG chart. Data is loaded via D3’s `csv` method and parsed into numeric values before being mapped to scales.

May 27, 2021