The avatar for @mahog
Marius Hogräfer
A ♥ for data visualization + interaction
Public
DAVI - D3 Tutorial
Edited
Sep 21, 2023
Fork of D3 Tutorial Part 2 - The Data Join
Insert cell
Insert cell
Insert cell
Insert cell
d3 = require("d3@5");
Insert cell
Insert cell
Insert cell
data_example1 = [5, 4, 7, 1, 5, 7, 0, 1, 4, 5, 6]
Insert cell
Insert cell
data_example2 = [[2.2, 11.5, 7], [7, 23, 1], [1, 1, 2], [0, 12, 11]];
Insert cell
Insert cell
data_example3 = [{name: "Gunnar Mikkelsen", age: 38}, {name: "Ditte Rasmussen", age: 24}, {name: "Pernille Pedersen", age: 47}];
Insert cell
Insert cell
Insert cell
Insert cell
width = 900
Insert cell
height = 250
Insert cell
svg`
<svg id="exampleCanvas" width=${width} height=50></svg>
`
Insert cell
testData = d3.range(10) // array of the first ten integer numbers, starting with 0
Insert cell
/*
d3.select("#exampleCanvas").selectAll("text.step1").data(testData)
.join("text")
.attr("class", "step1")
.attr("x", d => d * 25)
.attr("y", 20)
.attr("font-family", "sans-serif")
.attr("fill", "steelblue")
.text(d => d);
*/
Insert cell
Insert cell
testData2 = [{name: "a", value: 3, type: "YB"}, {name: "b", value: 2, type: "CC"}, {name: "c", value: 5, type: "DD"}, {name: "d", value: 1, type: "FE"}, {name: "e", value: 5, type: "GG"}]
Insert cell
svg`
<svg id="exampleCanvas2" width=${width} height=50></svg>
`
Insert cell
/*
d3.select("#exampleCanvas2").selectAll("text.step2").data(testData2)
.join("text")
.attr("class", "step2")
.attr("x", d => d.value * 25)
.attr("y", 30)
.attr("font-size", d => d.value ** 2 + 10)
.attr("fill", "steelblue")
.text(d => d.name);
*/
Insert cell
Insert cell
Insert cell
Insert cell
carData = fetch("https://vega.github.io/editor/data/cars.json")
.then(result => result.json());
Insert cell
dimensionA = "Horsepower"
Insert cell
rangeHorsepower = carData.map(d => d[dimensionA]);
Insert cell
maxHorsepower = d3.max(rangeHorsepower);
Insert cell
Insert cell
Insert cell
horizontalScale = d3.scaleLinear()
.domain([0, maxHorsepower])
.range([0, width])
Insert cell
Insert cell
// x1 = horizontalScale(100)
Insert cell
// x2 = horizontalScale(carData[0].Horsepower)
Insert cell
Insert cell
dimensionB = "Miles_per_Gallon"
Insert cell
rangeMpG = carData.map(d => d[dimensionB])
Insert cell
maxMpG = d3.max(rangeMpG)
Insert cell
verticalScale = d3.scaleLinear()
.domain([0, maxMpG])
.range([0, height])
Insert cell
Insert cell
verticalScale(20)
Insert cell
verticalScale(0)
Insert cell
Insert cell
dimensionC = "Origin"
Insert cell
colorScale = d3.scaleOrdinal(d3.schemeCategory10)
.domain(["USA", "Japan", "Europe"])
Insert cell
Insert cell
colorScale("Japan")
Insert cell
colorScale("USA")
Insert cell
Insert cell
svg`
<svg id="exampleCanvas3" width=${width} height=${height}></svg>
`
Insert cell

d3.select("#exampleCanvas3").selectAll("circle").data(carData)
.join("circle")
.attr("cx", d => horizontalScale(d[dimensionA])) // add accessor to horizontal scale
.attr("cy", d => verticalScale(d[dimensionB])) // add accessor function to vertical scale
.attr("r", 5)
.attr("fill", d => colorScale(d[dimensionC])) // replace with your color scale from above
.attr("fill-opacity", 0.7)
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more