tim310579

@tim310579·6 public vizzes

Streamgraph of covid-19

This streamgraph visualizes COVID-19 case counts across Africa, Asia, Europe, America, and Oceania from January to December 2020, using a silhouette offset to show fluctuations relative to the mean. The chart renders with d3.svg.area, d3.layout.stack, and d3.time.scale, using cardinal interpolation for smooth curves. Daily data from `data_daily.csv` drives the main view, with hover interactions highlighting each region via mouseover and mousemove events, while tooltips display the date and case number. The visualization also includes axes rendered with d3.svg.axis and color scales from a predefined range.

Jan 13, 2021

Loading thumbnail…

Flight Map

This interactive visualization shows the flow of travelers between five global regions across a 12-month period. The main map uses a Mercator projection with curved paths connecting regions, where stroke width represents the volume of travel, and hovering reveals exact numbers. A range slider allows selection of individual months. The visualization also includes a stacked area chart depicting time-series data for these regions. The code uses `d3.geoPath`, `d3.geoMercator`, `d3.scaleOrdinal`, and `d3.stack` within a React framework, rendering via SVG with animation.

Jan 12, 2021

Loading thumbnail…

Untitled

This example shows an adjacency matrix visualization of a directed weighted graph, with nodes listed along the top and left axes and cells representing edge weights. The code loads two CSV files (`nodelist.csv` and `edgelist.csv`) using `d3.csv` and a custom Promise wrapper to build the matrix. It renders SVG `<rect>` elements for each grid cell, with fill opacity proportional to weight, and adds `<text>` labels for node names. Hovering over a cell highlights all cells in the same row and column by adjusting `stroke-width` via `d3.selectAll`. The visualization uses `d3-selection-multi` for attribute styling, though the primary logic relies on standard D3 v4 selections.

Nov 7, 2020

Loading thumbnail…

0616027.html

This example presents an interactive parallel coordinates plot of the Iris dataset, with each flower species (setosa, versicolor, virginica) colored distinctly in purple, green, or yellow. Users can drag dimension axes to reorder them and use brush controls on each axis to filter the displayed lines. The visualization uses D3.js v3 with SVG rendering, built on a React framework. The code employs d3.svg.axis, d3.behavior.drag, and d3.svg.brush to enable these interactions, while the foreground paths are colored via an ordinal scale mapping species to the viridis color palette.

Oct 22, 2020

Loading thumbnail…

0616027_iris.html

This interactive scatter plot visualizes the Iris flower dataset, displaying measurements of sepal length, sepal width, petal length, and petal width for three species. Users select which measurements to plot on the X and Y axes via dropdown menus, and the chart updates with colored circles representing each species. The visualization uses D3 v5 with `scaleLinear`, `axisBottom`, and `axisLeft` for scales and axes, along with SVG circles for data points. Data is loaded from a local CSV file, with colors assigned to Iris-setosa, Iris-versicolor, and Iris-virginica.

Oct 5, 2020

Loading thumbnail…

Cars Report

This example shows a text-based report of used cars, listing each vehicle’s year, make, model, and price after filtering for cars priced under $2,000. It demonstrates asynchronous data loading and modular JavaScript by using a Promise-based `getCars()` function with a two-second delay, plus ES6 modules for `formatCar` and `generateReport`. The page updates a `<pre>` element’s text content via `document.getElementById`, relying on JSON parsing and template literals to format output.

Sep 25, 2020