myLinearScale = d3.scaleLinear().domain([0, 1]).range([0, 100])
myLinearScale(0.5)
iris
extentValues = d3.extent(iris.map(d => d.sepalLength))
myOrdinalScale = d3.scaleOrdinal().domain(["a", "b", "c"]).range("red yellow orange".split(" "))
myOrdinalScale("a")
myOrdinalScaleData = d3.scaleOrdinal()
.domain(Array.from(new Set(iris.map(d => d.species)))).range("red yellow orange".split(" "))
myOrdinalScaleData("setosa")
iris
{
const height = 400, width = 600;
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.bottom + margin.top)
.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);
return svg.node()
}
{
const height = 400, width = 600;
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.bottom + margin.top)
.style("border", "1px dotted #000");
const g = svg.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
const xScale = d3.scaleLinear()
.domain(d3.extent(iris.map(d => d.petalWidth)))
.range([margin.left, width - margin.right]);
const yScale = d3.scaleLinear()
.domain(d3.extent(iris.map(d => d.petalLength)))
.range([height - margin.bottom -10, margin.top])
const colorScale = d3.scaleOrdinal()
.domain(Array.from(new Set(iris.map(d => d.species)))).range("red yellow orange".split(" "))
g.append("g").selectAll("circle")
.data(iris).join("circle")
.attr("cx", d => xScale(d.petalWidth))
.attr("cy", d => yScale(d.petalLength))
.attr("fill", d => colorScale(d.species))
.attr("r", 3)
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.
