Published unlisted
Edited
Nov 27, 2020
xStripsT_F = d3.scaleLinear()
.domain(d3.extent(dataF, d => +d.temp))
.range([0, width - margin.left - margin.right])
xStripsAxisT_F = g => g
.attr("transform", `translate(${margin.left}, ${height - margin.bottom})`)
.call(d3.axisBottom(xStripsT_F).tickSizeOuter(0))
.attr("font-size", 7)
.attr("stroke-opacity", 0.3)
chartT = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const stripsT_F = svg.append('g')
.attr("class", "strips")
.selectAll('rect')
.data(dataF)
.join('rect')
.attr('fill', '#000')
//.attr("stroke", "steelblue")
.attr('x', d => xStripsT_F(d.temp))
.attr('width', 1.5) // make it like a strip
.attr('height', 1.5) // make it like a strip
//.attr('r', 5)
//.attr("x", width/2) // adjust the location of bars
//.attr("y", height/2)
.attr("transform", `translate(${margin.left}, ${height - 2.5*margin.bottom})`)
svg.append("g")
.call(xStripsAxisT_F)
return svg.node()
}
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.
