Public
Edited
Mar 19, 2023
Fork of Simple D3
Insert cell
Insert cell
Insert cell
xAxis = svg => svg
.attr("transform", `translate(0,${margin.top})`)
.call(d3.axisBottom(xScale)
.tickSize(height - margin.top - margin.bottom)
.ticks(2))
.call(g => g.select('.domain')
.remove())
.call(g => g.selectAll(".tick:not(:first-of-type) line")
.attr("stroke-opacity", 0.5)
.attr("stroke-dasharray", "2,2"))

Insert cell
yAxis = svg => svg
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisRight(yScale)
.tickSize(width - margin.left - margin.right)
.ticks(2))
.call(g => g.select('.domain')
.remove())
.call(g => g.selectAll(".tick:not(:first-of-type) line")
.attr("stroke-opacity", 0.5)
.attr("stroke-dasharray", "2,2"))
.call(g => g.selectAll(".tick text")
.attr("x", 4)
.attr("dy", -4))

Insert cell
xScale = d3.scaleLinear()
.domain([0, 1])
.range([margin.left, width - margin.right])
Insert cell
yScale = d3.scaleLinear()
.domain([0, 1])
.range([height - margin.bottom, margin.top])
Insert cell
Insert cell
nodeData
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
{
const width = 400
const height = 30
const svg = d3.select(DOM.svg(width, height))
const margin = { left: 30, top: 10, right: 10, bottom: 10 }

// 0 -> 1 with decimals in between
const xScale = d3.scaleLinear()
.domain([0, 1])
.range([margin.left, width - margin.right]);
// const xScale = d3.scaleBand()
// .domain([0, 1])
// .rangeRound([0, width]);

svg.append('g').call(d3.axisBottom(xScale))
return svg.node()
}
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