md`# SVG scaling experiment
does line thickness scale with the viewPort?`
chart = {
const svg = d3.create("svg")
.attr("height", height)
.attr("width", width)
.attr('style', 'border: 1px solid lime')
const v1 = svg.append("svg")
.attr("viewBox", [0, 0, width, height])
v1.insert("line")
.attr("x1", 0).attr("x2", width)
.attr("y1", height*0.25).attr("y2", height*0.25)
.attr("stroke-width", "1px").attr("stroke", "red")
v1.insert("line")
.attr("x1", 0).attr("x2", width)
.attr("y1", height*0.75).attr("y2", height*0.75)
.attr("stroke-width", "1px").attr("stroke", "red")
v1.insert("line")
.attr("x1", width*0.25)
.attr("y1", height*0.25)
.attr("x2", width*0.25)
.attr("y2", height*0.75)
.attr("stroke-width", "10px")
.attr("stroke", "black")
.attr("stroke-linecap", "round")
const v2 = svg.append("svg")
.attr("viewBox", [0, 0, width/2, height/2])
v2.insert("line")
.attr("x1", width*0.375)
.attr("y1", height*0.125)
.attr("x2", width*0.375)
.attr("y2", height*0.375)
.attr("stroke-width", "10px")
.attr("stroke", "black")
.attr("stroke-linecap", "round")
return svg.node()
}
md`it does! :)`
d3 = require("d3@6")
height = 500
width
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.
