Public
Edited
Aug 20, 2023
1 fork
DOM.download(
serialize(walls_svg_node),
dims.filename,
`Download as ${dims.filename}`
)
walls_svg_node = {
const dpi = dims.dpi;
const scale = v => Math.round(v * dpi * 1/3);
const width = Math.round(dims.width_in_inches * dpi/2);
const height = Math.round(dims.height_in_inches * dpi/2);
const marginx = 1.00;
const marginy = 1.00;
const svg = d3
.select(DOM.svg(width, height))
.style('display', 'block')
.style('background', 'ivory');
const rect_elems = svg
.selectAll('rect')
.data(design_elems.footprint.rects)
.join('rect')
.attr('fill', 'none')
.attr('stroke', d => d.c ? d.c : 'blue')
.attr('x', d => d.name == 'fullsize' ? scale(d) : scale(d.x+marginx))
.attr('y', d => d.name == 'fullsize' ? scale(d) : scale(d.y+marginy))
.attr('width', d => scale(d.w))
.attr('height', d => scale(d.h));
const polyline_points = design_elems.footprint.polylines.map(({name, points, c}) => {
return ({name, c, points: points.map(([x,y]) => `${scale(x+marginx)},${scale(y+marginy)}`).join(' ')});
});
const polylines = svg
.selectAll('polyline')
.data(polyline_points)
.join('polyline')
.attr('fill', 'none')
.attr('stroke', d => d.c ? d.c : 'blue')
.attr('points', d => d.points);
return svg.node();
}
design_elems = ({
footprint: ({
rects: rects,
polylines: poly,
})
})
rects = [
]
stair_dims = ({
landing_length: 5+2/12,
flight_length: 12+10/12,
rail_height: 2+10/12,
num_stairs: 16,
stair_height: (10+2/12) / 16,
stair_width: (12+10/12) / 16 * 17/16,
})
poly = [
{name: 'stair_rail', points: [
[0,0], [stair_dims.landing_length,0], // Top rail
[stair_dims.flight_length + stair_dims.landing_length, 10],
[stair_dims.flight_length + stair_dims.landing_length, 13],
[0,13],[0,0] // Bottom corner
]},
{name: 'stairs', c: 'black', points: [
[0, stair_dims.rail_height],
[stair_dims.landing_length, stair_dims.rail_height],
...Array(stair_dims.num_stairs-1).fill(1).flatMap((_,i) => {
const stepx = stair_dims.landing_length + stair_dims.stair_width * (i);
const stepy = stair_dims.rail_height + stair_dims.stair_height * (i+1);
return [
[stepx, stepy],
[stepx + stair_dims.stair_width, stepy],
];
}),
]},
]
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.
