myLinearScale = d3.scaleLinear().domain([0, 1]).range([0, 100])
myLinearScale2 = d3.scaleLinear().domain([0, 1]).range([0, 100])(5)
myLinearScale1 = d3.scaleLinear([0, 1], [0, 100])
myLinearScale1(0.5)
iris
myValues = iris.map((d) => d.sepalLength)
minValue = d3.min(myValues)
minValue1 = d3.min(iris.map((d) => d.sepalLength))
maxValue = d3.max(myValues)
//long way
d3.scaleLinear().domain([minValue, maxValue]).range(0,1)
//short way
extentValues = d3.extent(myValues)
extentValues1 = d3.extent(iris, (d) => d.sepalLength)
d3.scaleLinear().domain(extentValues).range([0, 1])(5)
d3.scaleLinear().domain(d3.extent(iris.map((d) => d.sepalLength))).range([0, 1])(5)
d3.scaleLinear().domain(d3.extent(iris, (d) => d.sepalLength)).range([0, 1])(5)
//we can create a function that can be used to extract a column of the data (and later use it to calculate min and max for the scale)
extract_data = (value, data) => {return data.map((d) => d[value]);}
//example using a custom function called extract
d3
.scaleLinear()
.domain(d3.extent(extract("sepalLength", iris)))
.range([0, 1])(5)
extract = (value, data) => {
return data.map((d) => d[value]);
}
myOrdinalScale = d3
.scaleOrdinal()
.domain(["apple", "orange", "banana"])
.range(["red", "orange", "yellow"])
myOrdinalScale ("apple")
htl.html`<div style='background-color: ${myOrdinalScale(
"banana"
)}'>${"banana"}</div>`
myOrdinalScale("apple")
myDataOrdinalScale = d3
.scaleOrdinal()
.domain(Array.from(new Set(iris.map((d) => d.species))))
.range(["red", "orange", "yellow"])
myDataOrdinalScale("setosa")
iris
iris.map((d) => d.species)
new Set(iris.map((d) => d.species))
//distinct array of values
Array.from(new Set(iris.map((d) => d.species)))
iris
{const svg = d3.create("svg")
return svg.node()}
{const svg = d3.create("svg")
.attr("width", 600).attr("height",400)
.style("border", "1px dotted #000");
return svg.node()}
//add margins
{ const width = 600;
const height = 400;
const margin = {top:20, bottom:20, left:20, right:20}
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 to group elements together
//transpose values, we move the container to the new margins of the origin, top left
const g = svg.append("g").attr("transform", `translate(${margin.left}, ${margin.top})`)
//add a black rectangle to see the container
g.append("rect").attr("width", width).attr("height", height);
return svg.node()}
//add margins
{ const width = 600;
const height = 400;
const margin = {top:20, bottom:20, left:20, right:20}
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 to group elements together
//transpose values, we move the container to the new margins of the origin, top left
const g = svg.append("g").attr("transform", `translate(${margin.left}, ${margin.top})`)
//add scales
const x = d3.scaleLinear().domain(d3.extent(extract_data("sepalLength", iris))).range([0,width])
//This is from height to 0, it goes from top to bottom
const y = d3.scaleLinear().domain(d3.extent(extract_data("sepalWidth", iris))).range([height,0])
const colorScale = d3.scaleOrdinal().domain(Array.from(new Set(iris.map((d) => d.species)))).range(["red","orange","yellow"])
//data join
g.append("g").selectAll("circle").data(iris).join("circle").attr("r",3).attr("cx",d => x(d.sepalLength)).attr("cy",d => y(d.sepalWidth))
return svg.node()}
//add margins
{ const width = 600;
const height = 400;
const margin = {top:20, bottom:20, left:20, right:20}
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 to group elements together
//transpose values, we move the container to the new margins of the origin, top left
const g = svg.append("g").attr("transform", `translate(${margin.left}, ${margin.top})`)
//add scales
const x = d3.scaleLinear().domain(d3.extent(extract_data("sepalLength", iris))).range([0,width])
//This is from height to 0, it goes from top to bottom
const y = d3.scaleLinear().domain(d3.extent(extract_data("sepalWidth", iris))).range([height,0])
const colorScale = d3.scaleOrdinal().domain(Array.from(new Set(iris.map((d) => d.species)))).range(["red","orange","yellow"])
//data join
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()}
{
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);
const x = d3
.scaleLinear()
.domain(d3.extent(iris, (d) => d["sepalLength"]))
.range([0, width]);
const y = d3
.scaleLinear()
.domain(d3.extent(iris, (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();
}
{
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");
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.
