Published
Edited
Jan 30, 2022
1 star
Insert cell
Insert cell
Insert cell
Insert cell
simpleChart = {
const w = margin + width + margin,
h = margin + height + margin,
svg = d3
.create("svg")
.attr("width", w)
.attr("height", h)
.attr("viewBox", [0, 0, w, h]),
axis = d3.axisBottom(myScale),
chart = svg.append("g").attr("transform", `translate(${[margin, margin]})`);

chart
.append("g")
.attr("transform", `translate(${[0, height]})`)
.call(axis);

chart
.selectAll()
.data(myData)
.enter()
.each(function (d, i) {
d3.select(this)
.append("rect")
.attr("x", myScale(d.KmBegin))
.attr("y", rectHeight)
.attr("width", myScale(d.KmEnd - d.KmBegin))
.attr("height", rectHeight)
.attr("fill", i === 0 ? "#ccc" : "#888")
.attr("stroke", "blue")
.append("title")
.text(d.Type);
});

return svg.node();
}
Insert cell
margin = 16
Insert cell
width = 640
Insert cell
height = rectHeight + 50
Insert cell
rectHeight = 50 // px
Insert cell
myScale = d3
.scaleLinear()
.domain([0, 100]) // километры
.range([0, width]) // пиксели
Insert cell
myData = [
{
Type: "Асфальт",
KmBegin: 23.567,
KmEnd: 44.543
},
{
Type: "Гравий",
KmBegin: 13.76,
KmEnd: 17.593
}
]
Insert cell
d3 = require("d3@7")
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