The avatar for @kpivert
Kurtis Pivert
Interested in communicating data-driven insights. Director of Data Science at @ASNDataAnalytics.
Public
Edited
Sep 26, 2023
Fork of Introduction to D3 Course: Lesson 2
2
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// Write JS here
myLinearScale = d3.scaleLinear().domain([0, 1]).range([0, 100])
Insert cell
myLinearScale(0.5)
Insert cell
// Using JS Shorthand
myLinearScale1 = d3.scaleLinear([0, 1], [0, 100])
Insert cell
myLinearScale1(0.5)
Insert cell
iris
Insert cell
myIrisScale = d3
.scaleLinear()
.domain(iris.map((d) => d.sepalLength))
.range([0, 1])
Insert cell
// His Version
myValues = iris.map((d) => d.sepalLength)
Insert cell
minValue = d3.min(myValues)
Insert cell
maxValue = d3.max(myValues)
Insert cell
hisIrisScale = d3.scaleLinear().domain([minValue, maxValue]).range([0, 1])
Insert cell
// mine is wrong
myIrisScale(0)
Insert cell
hisIrisScale(5)
Insert cell
extentValues = d3.extent(myValues)
Insert cell
extentValues1 = d3.extent(iris, (d) => d.sepalLength)
Insert cell
d3.scaleLinear().domain(extentValues).range([0, 1])(5)
Insert cell
d3
.scaleLinear()
.domain(d3.extent(iris.map((d) => d.sepalLength)))
.range([0, 1])(5)
Insert cell
extract = (value, data) => {
return data.map((d) => d[value]);
}
Insert cell
extract('sepalLength', iris)
Insert cell
d3
.scaleLinear()
.domain(d3.extent(extract("sepalLength", iris)))
.range([0, 1])(5)
Insert cell
Insert cell
Insert cell
// Write JS here
myOrdinalScale = d3
.scaleOrdinal()
.domain(["apple", "orange", "banana"])
.range(["red", "orange", "yellow"])
Insert cell
htl.html`<div style='background-color: ${myOrdinalScale(
"banana"
)}'>${"banana"}</div>`
Insert cell
myOrdinalScale("apple")
Insert cell
iris
Insert cell
// mine wrong
d3
.scaleOrdinal()
.domain(iris.map((d) => d.species))
.range(["red", "orange", "yellow"])("setosa")
Insert cell
myDataOrdinalScale = d3
.scaleOrdinal()
.domain(Array.from(new Set(iris.map((d) => d.species))))
.range(["red", "orange", "yellow"])
Insert cell
myDataOrdinalScale("versicolor")
Insert cell
Array.from(new Set(iris.map((d) => d.species)))
Insert cell
Insert cell
Insert cell
Insert cell
{
const width = 600;
const height = 400;
const margin = { top: 20, bottom: 20, left: 50, right: 50 };
const svg = d3
.create("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.style("border", "1px dotted #000");

const g = svg
.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);

//svg.append("rect").attr("width", width).attr("height", height); Goes to origin
g.append("rect").attr("width", width).attr("height", height);

return svg.node();
}
Insert cell
iris.map((d) => d.sepalWidth)
Insert cell
Insert cell
Insert cell
Insert cell
{
const width = 600;
const height = 400;
const margin = { top: 20, bottom: 20, left: 50, right: 50 };
const svg = d3
.create("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.style("border", "1px dotted #000");

const g = svg
.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);

//svg.append("rect").attr("width", width).attr("height", height); Goes to origin

// g.append("rect")
// .attr("width", width)
// .attr("height", height)
// .style("fill", "#ccc");

const x = d3
.scaleLinear()
.domain(d3.extent(iris.map((d) => d.sepalLength)))
.range([0, width]);

const y = d3
.scaleLinear()
.domain(d3.extent(iris.map((d) => d.sepalWidth)))
.range([height, 0]);

const colorScale = d3
.scaleOrdinal()
.domain(Array.from(new Set(iris.map((d) => d.species))))
.range(["red", "orange", "yellow"]);

g.append("g")
.selectAll("circle")
.data(iris)
.join("circle")
.attr("r", 3)
.attr("cx", (d) => x(d.sepalLength))
.attr("cy", (d) => y(d.sepalWidth))
.style("fill", (d) => colorScale(d.species));

return svg.node();
}
Insert cell
d3.extent(iris.map((d) => d.sepalWidth))
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
iris.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

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