Published
Edited
Jan 19, 2022
5 stars
Insert cell
Insert cell
Insert cell
{
const exampleScaleOrdinal = d3
.scaleOrdinal()
.domain(["cats", "frogs", "dogs"])
.range([0, 50, 200]);
const example = d3
.create("svg")
.attr("overflow", "visible")
.attr("height", 50);
example.call(d3.axisBottom(exampleScaleOrdinal));

return example.node();
}
Insert cell
Insert cell
{
const exampleScaleBand = d3
.scaleBand()
.domain(["cats", "frogs", "dogs"])
.range([0, 200])
.padding(0.2);
const example = d3
.create("svg")
.attr("overflow", "visible")
.attr("height", 50);
example.call(d3.axisBottom(exampleScaleBand));

return example.node();
}
Insert cell
Insert cell
{
const exampleScaleTime = d3
.scaleTime()
.domain([d3.timeParse("%Y")(2001), d3.timeParse("%Y")(2002)])
.nice()
.range([0, 600]);
const example = d3
.create("svg")
.attr("overflow", "visible")
.attr("height", 50);
example.call(d3.axisBottom(exampleScaleTime));

return example.node();
}
Insert cell
Insert cell
{
const exampleScaleLinear = d3
.scaleLinear()
.domain([0, 5000000])
.range([0, 800]);
const example = d3
.create("svg")
.attr("overflow", "visible")
.attr("height", 50);
example.call(d3.axisBottom(exampleScaleLinear));

return example.node();
}
Insert cell
Insert cell
{
const exampleScaleLog = d3.scaleLog().domain([1,5000000]).range([0,800]);
const example = d3
.create("svg")
.attr("overflow", "visible")
.attr("height", 50);
example.call(d3.axisBottom(exampleScaleLog));

return example.node();
}
Insert cell
colorScale = d3.scaleOrdinal().domain(categoryList).range(d3.schemeDark2) // schemeDark2
Insert cell
xScale = d3
.scaleLog()
.domain(d3.extent(useData.map((d) => d[dataStructure.xAxis])))
.range([margins.left, dimensions.width]) // ma
Insert cell
yScale = d3
.scaleLog()
.domain(d3.extent(useData.map((d) => d[dataStructure.yAxis])))
.nice()
.range([dimensions.height, margins.top])
Insert cell
rScale = d3
.scaleLinear()
.domain(d3.extent(useData.map((d) => d[dataStructure.sizeBy])))
.range([2, 10])
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

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