The avatar for @mahog
Marius Hogräfer
A ♥ for data visualization + interaction
Public
DAVI - D3 Tutorial
Edited
Sep 21, 2023
1 fork
3 stars
Insert cell
Insert cell
Insert cell
Insert cell
d3 = require("d3@5");
Insert cell
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 Bang Mikkelsen", age: 38}, {name: "Ditte Hæyer Rasmussen", age: 24}, {name: "Pernille Daal Pedersen", age: 47}];
Insert cell
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: 4, 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
Insert cell
carData = fetch("https://vega.github.io/editor/data/cars.json")
.then(result => result.json());
Insert cell
Insert cell
rangeHorsepower = carData.map(d => d[dimensionA]);
Insert cell
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 =
Insert cell
verticalScale = d3.scaleLinear()
// .domain()
// .range()
Insert cell
Insert cell
verticalScale(20)
Insert cell
verticalScale(0)
Insert cell
Insert cell
dimensionC = "Origin"
Insert cell
colorScale = d3.scaleOrdinal()
// ...
Insert cell
Insert cell
colorScale("Japan")
Insert cell
colorScale("USA")
Insert cell
Insert cell
Insert cell
Insert cell

d3.select("#exampleCanvas3").selectAll("circle").data(carData)
.join("circle")
//.attr("cx", ???) // add accessor to horizontal scale
//.attr("cy", ???) // add accessor function to vertical scale
.attr("r", 5)
.attr("fill", "steelblue") // replace with your color scale from above
.attr("fill-opacity", 0.7)

Insert cell
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