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