Previous Version. This version is implemented using D3 Version 4.
A visualization of the mean nutrient contents of all 8789 foods in USDA's SR28 Nutrient Database.
Data processed with SQLite and Node.js.
Also see the Nutrient Explorer.
license: gpl-3.0 | |
height: 800 | |
border: none |
Previous Version. This version is implemented using D3 Version 4.
A visualization of the mean nutrient contents of all 8789 foods in USDA's SR28 Nutrient Database.
Data processed with SQLite and Node.js.
Also see the Nutrient Explorer.
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> | |
<title>Parallel Coordinates</title> | |
<style type="text/css"> | |
html { | |
margin: 0; | |
width: 100%; | |
height: 100%; |
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> | |
<title>Nutrient Database Explorer</title> | |
<link rel="stylesheet" type="text/css" href="parallel.css" /> | |
</head> | |
<body> | |
<div id="header"> | |
<h1>Nutrient Explorer</h1> |
license: gpl-3.0 | |
height: 800 | |
border: no |
An example of an SVG interaction layer over a canvas rendering layer. The SVG parallel coordinates starts to slow down significantly at 1000 data points. This version should scale better, and offer more opportunities for optimization.
Interactions done with the brush component
Based on d3.js Parallel Coordinates
license: gpl-3.0 | |
height: 560 | |
border: no |
A mashup of Map Projection Distortions and transitions using the D3.js extended geographic projections plugin.
A comparison of map projections by four different types of distortion:
Lower is better. Data transcribed from the Natural Earth Projection by @mbostock.
{ | |
"$schema": "https://vega.github.io/schema/vega-lite/v5.json", | |
"description": "Heatlane chart: https://www.smashingmagazine.com/2022/07/accessibility-first-approach-chart-visual-design/", | |
"data": {"url": "data/cars.json"}, | |
"height": 150, | |
"width": 400, | |
"title": "Heatlane", | |
"transform": [ | |
{"bin": true, "field": "Horsepower"}, | |
{ |
Use this WebGL-2d fork for HSL and transparency fixes