rigt

@rigt·13 public vizzes

Melting Data for Multiple Lines

This visualization animates COVID-19 confirmed case counts for several countries, showing each country’s trajectory as a distinct colored line over days since the outbreak began. The chart uses D3 v5, with scales from `scaleLinear` and `scaleOrdinal`, and draws paths via `d3.line` with a basis curve. The data comes from a CSV file that was melted from a wider format. As the animation progresses, it redraws the lines and updates circles and labels at each line’s endpoint.

Jun 12, 2020

Loading thumbnail…

Hàlo

A smiling face rendered in yellow with black outlines, generated entirely through React components and D3's arc generator. The face is centered on an SVG canvas, with eyes positioned via offset coordinates and a mouth whose curvature varies randomly each render due to angular jitter in the arc's start and end angles. The code assembles the visualization from reusable parts like BackgroundCircle, Eyes, and Mouth, while FaceContainer handles the SVG wrapper and translation group. D3 v5 provides the arc path calculation for the mouth.

Apr 1, 2020

Loading thumbnail…

Selecting a Year on a Line Chart

This interactive line chart displays population over time by global region, compiled from UN population estimates and medium-variant projections. A vertical line marks the currently selected year, which the viewer can change by moving the mouse over the chart. The visualization uses `d3.line` with basis curves for each region’s series, colored via an ordinal scale. The `mouse` utility captures pointer position to update the selected year, triggering a re-render that redraws the selection line and axis. The SVG is rendered using D3’s selection API, with axes, labels, and a legend generated programmatically.

Jan 10, 2019

Loading thumbnail…

Understanding the zoom on d3.js

This example demonstrates an interactive zoom on a time-series area chart of S&P 500 monthly closing prices from 2000 to 2010. Initially, the view animates from a transformed scale to a default extent over two years, using `d3.zoom()` and `d3.zoomIdentity` to rescale the time axis. The chart is rendered as an SVG, with a clipped area path and axes updated during the zoom transition. Data is loaded from `sp500.csv`, and the zoom is implemented with a 1.5-second transition.

Dec 2, 2018

Loading thumbnail…

Melting Data for Multiple Lines

This example visualizes population over time by region, displaying multiple trend lines across a Cartesian coordinate system. The chart uses D3’s `nest` and `line` with `curveBasis` to structure and smooth the data, while `scaleTime`, `scaleLinear`, and `scaleOrdinal` manage the axes and color encoding. A color legend, generated by a custom `colorLegend` function, identifies each region. The data comes from UN population estimates and medium-variant projections, processed through a custom `melt` function that reshapes the dataset.

Oct 17, 2018

Loading thumbnail…

City Temperatures

This visualization displays one week of temperature data for multiple cities, using color-coded line paths to distinguish each city’s trends over time. The chart includes a dropdown selector to choose which data attribute to explore, alongside a color legend for city identification. Built with D3 v5, it uses `d3.csv` for data loading, `d3.line` with `curveBasis` for smooth paths, and `d3.scaleTime` and `d3.scaleLinear` for axes. A `nest()` operation groups measurements by city, and the SVG rendering includes styled grid lines and axis labels.

Oct 16, 2018

Loading thumbnail…

Legend

This example demonstrates a reusable categorical color legend with colored circles and matching text labels for fruit categories. Using D3 v5, the `colorLegend` function creates a group per domain value, binds circles and text, and positions them with a vertical spacing transform. A `scaleOrdinal` maps the domain to a color range, with the legend called via `selection.call()`. The SVG rendering applies styled ticks and circle strokes from an external stylesheet.

Oct 15, 2018

Loading thumbnail…

Circles!

A minimal SVG canvas displays a solid grey rounded rectangle and the text "hello" on a page styled with GoMono font. The code imports `select` from `d3` and `d3Force`, though the force simulation is disabled. A commented-out block shows intended data binding for circles, while the active script defines static attributes for width and height based on the viewport, rendering the background and text via D3 v5's DOM manipulation.

Oct 15, 2018

Loading thumbnail…

World

A choropleth map of world countries, colored by their economic classification using an ordinal red color scale. The visualization uses a Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, with zoom and pan enabled through `d3.zoom`. Country boundaries come from the world-atlas TopoJSON dataset, with economy data joined from a TSV file. An interactive legend built with `scaleOrdinal` allows filtering by clicking on economy categories, highlighting selected countries while dimming others.

Oct 11, 2018

Loading thumbnail…

Hello VizHub!

This example displays a large “Hello VizHub!” message in the center of a dark page, styled with the Ubuntu font. It demonstrates a minimal D3.js setup by using the `select` function to target a `div` and set its text content. The text comes from an ES6 module, `myMessage.js`, while the page structure is defined in `index.html` and styled with external CSS. The visualization uses D3 v5 loaded from a CDN and does not include any data or interactive elements.

Oct 9, 2018

Loading thumbnail…

Hello VizHub!

This example displays a static, large "Hello VizHub!" message centered on a dark background using the Ubuntu font. The page is built with a minimal HTML structure, where D3 v5’s `select` method targets a `div` and sets its text content to a string imported from a local ES6 module. Styling is handled entirely through CSS, including the background color, text alignment, and font size, while the D3 library is loaded via a CDN.

Oct 9, 2018

Loading thumbnail…

Temperature in San Francisco Line Chart

A line chart displays one week of temperature in San Francisco, with time on the x-axis and temperature in Celsius on the y-axis, using smooth curved lines generated with the D3 `line` generator and `curveBasis`. The SVG rendering includes labeled axes with gridlines, a title, and a maroon stroke line, styled via CSS. Data is loaded from a CSV file using D3's `csv` function, with timestamps parsed as dates and temperatures as numbers. The visualization incorporates `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `extent` from d3 v5.

Oct 9, 2018

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays one week of temperature in degrees Celsius for San Francisco, using data from the Data Canvas - Sense Your City project. The chart shows temperature (y-axis) against time (x-axis) as a smooth curved line, with a title and labeled axes. The visualization is built with D3 v5, using `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to generate the SVG path. Data is loaded via `csv` and rendered as a single maroon stroke on a white background.

Sep 20, 2018