myLinearScale = d3.scaleLinear()
.domain([0, 1])
.range([0, 100])
myLinearScale(0.5)
iris
myValues = iris.map(d => d.sepalLength)
minValue = d3.min(myValues)
maxValue = d3.max(myValues)
d3.scaleLinear()
.domain([minValue, maxValue])
.range([0, 1])
(5)
// d3.extent takes in another parameter
extentValues = d3.extent(myValues)
d3.scaleLinear()
.domain(d3.extent(extract("sepalLength", iris)))
.range([0, 1])
(5)
extendValues1 = d3.extent(iris, (d) => d.sepalLength)
extract = (value, data) => {
return data.map((d) => d[value])
}
extract("sepalLength", iris)
myOrdinalScale = d3
.scaleOrdinal()
.domain(Array.from(new Set(iris.map((d) => d.species))))
.range(["red", "orange", "yellow"])
// not in domain -> loops thru background colors in
htl.html`<div style='background-color: ${myOrdinalScale(
"versicolor"
)}'>${"versicolor"}</div>`
iris
//no hard-coding <3
myDataOrdinalScale = d3
.scaleOrdinal()
.domain(Array.from(new Set(iris.map((d) => d.species))))
.range(["red", "orange", "yellow"])
iris.map((d) => d.species)
// get distinct categories as an array
Array.from(new Set(iris.map((d) => d.species)))
{
const width = 600;
const height = 400;
const margin = {top: 30, bottom: 20, left: 20, right: 20};
// declare svg
const svg = d3
.create("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.style("border", "1px dotted #000");
// container handling margins
const g = svg
.append("g")
// shifting things by x and y value
.attr("transform", `translate(${margin.left}, ${margin.top})`);
g.append("rect")
.attr("width", width)
.attr("height", height);
return svg.node();
}
{
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})`);
/*
g.append("rect")
.attr("width", width)
.attr("height", height)
.style("fill", "#ccc"); // hex code for light grey
*/
// x scale
const x = d3
.scaleLinear()
.domain(d3.extent(extract("sepalLength", iris)))
.range([0, width])
// y scale
const y = d3
.scaleLinear()
.domain(d3.extent(extract("sepalWidth", iris)))
.range([height, 0])
const colorScale = myDataOrdinalScale;
g.append("g")
.selectAll("circle") // no circles exist
.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();
}
iris.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
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.
