Public
Edited
Aug 20, 2023
footprint_svg_node = {
const dpi = dims.dpi;
const width = Math.round(dims.width_in_inches * dpi);
const height = Math.round(dims.height_in_inches * dpi);
const scale = v => Math.round(v * dpi/8);
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 => scale(d.x))
.attr('y', d => scale(d.y))
.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)},${scale(y)}`).join(' ')});
});
console.log(polyline_points)
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
upstairs_svg_node = {
const dpi = dims.dpi;
const width = Math.round(dims.width_in_inches * dpi);
const height = Math.round(dims.height_in_inches * dpi);
const scale = v => Math.round(v * dpi/8);
const svg = d3
.select(DOM.svg(width, height))
.style('display', 'block')
.style('background', 'ivory');
const rect_elems = svg
.selectAll('rect')
.data(design_elems.upstairs.rects)
.join('rect')
.attr('fill', d => d.f ? d.f : 'none')
.attr('stroke', d => d.c ? d.c : 'blue')
.attr('x', d => scale(d.x))
.attr('y', d => scale(d.y))
.attr('width', d => scale(d.w))
.attr('height', d => scale(d.h));
const polyline_points = design_elems.upstairs.polylines.map(({name, points, c}) => {
return ({name, c, points: points.map(([x,y]) => `${scale(x)},${scale(y)}`).join(' ')});
});
console.log(polyline_points)
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.upstairs.rects
design_elems = {
const topMargin = 50;
const leftMargin = 50;
const footprint = ({
rects: [
{ name: 'stair_landing', x: 1, y: 1, w: 6, h: 6.2 },
{ name: 'stair_hall', x: 1+ 3, y: 1+ 6.2, w: 3, h: 11.8 },
{ name: 'stairs', x: 1, y: 1 + 6.2, w: 3, h: 1*(11.8/14) },
{ name: 'stairs', x: 1, y: 1 + 6.2, w: 3, h: 2*(11.8/14) },
{ name: 'stairs', x: 1, y: 1 + 6.2, w: 3, h: 3*(11.8/14) },
{ name: 'stairs', x: 1, y: 1 + 6.2, w: 3, h: 4*(11.8/14) },
{ name: 'stairs', x: 1, y: 1 + 6.2, w: 3, h: 5*(11.8/14) },
{ name: 'stairs', x: 1, y: 1 + 6.2, w: 3, h: 6*(11.8/14) },
{ name: 'stairs', x: 1, y: 1 + 6.2, w: 3, h: 7*(11.8/14) },
{ name: 'stairs', x: 1, y: 1 + 6.2, w: 3, h: 8*(11.8/14) },
{ name: 'stairs', x: 1, y: 1 + 6.2, w: 3, h: 9*(11.8/14) },
{ name: 'stairs', x: 1, y: 1 + 6.2, w: 3, h: 10*(11.8/14) },
{ name: 'stairs', x: 1, y: 1 + 6.2, w: 3, h: 11*(11.8/14) },
{ name: 'stairs', x: 1, y: 1 + 6.2, w: 3, h: 12*(11.8/14) },
{ name: 'stairs', x: 1, y: 1 + 6.2, w: 3, h: 13*(11.8/14) },
{ name: 'stairs', x: 1, y: 1 + 6.2, w: 3, h: 14*(11.8/14) },
{ name: 'new_const', x: 1+ 6, y: 1, w: 12.5, h: 23 },
{ name: 'front_closet', x: 1+ 5, y: 19, w: 2, h: 5, c: 'green' },
{ name: 'front_entry', x: 1+ 7, y: 19, w: 6, h: 5, c: 'red' },
],
polylines: [
{ name: 'east_addition',
points: [[19.5,1], [24.5,4],
[24.5,16], [25,17.5],
[25,20.5], [24.5,22],
[24.5,24], [19.5,24]],
c: 'green' },
],
});
const upstairs = ({
rects: [
{ name: 'stair_landing', x: 1, y: 1, w: 6, h: 6.2 },
{ name: 'stair_hall', x: 4, y: 1+ 6.2, w: 3, h: 11.8 },
{ name: 'stairs', x: 1, y: 1 + 6.2, w: 3, h: 1*(11.8/14) },
{ name: 'stairs', x: 1, y: 1 + 6.2, w: 3, h: 2*(11.8/14) },
{ name: 'stairs', x: 1, y: 1 + 6.2, w: 3, h: 3*(11.8/14) },
{ name: 'stairs', x: 1, y: 1 + 6.2, w: 3, h: 4*(11.8/14) },
{ name: 'stairs', x: 1, y: 1 + 6.2, w: 3, h: 5*(11.8/14) },
{ name: 'stairs', x: 1, y: 1 + 6.2, w: 3, h: 6*(11.8/14) },
{ name: 'stairs', x: 1, y: 1 + 6.2, w: 3, h: 7*(11.8/14) },
{ name: 'stairs', x: 1, y: 1 + 6.2, w: 3, h: 8*(11.8/14) },
{ name: 'stairs', x: 1, y: 1 + 6.2, w: 3, h: 9*(11.8/14) },
{ name: 'stairs', x: 1, y: 1 + 6.2, w: 3, h: 10*(11.8/14) },
{ name: 'stairs', x: 1, y: 1 + 6.2, w: 3, h: 11*(11.8/14) },
{ name: 'stairs', x: 1, y: 1 + 6.2, w: 3, h: 12*(11.8/14) },
{ name: 'stairs', x: 1, y: 1 + 6.2, w: 3, h: 13*(11.8/14) },
{ name: 'stairs', x: 1, y: 1 + 6.2, w: 3, h: 14*(11.8/14) },
{ name: 'storage', x: 1+ 6, y: 1, w: 10.5, h: 7, c: 'black', f: 'lightgray' },
{ name: 'office', x: 1+ 16.5, y: 1, w: 7, h: 7, c: 'green' },
{ name: 'bath', x: 1+ 6, y: 11, w: 6, h: 9, c: 'red' },
],
polylines: [
{ name: 'porch_window1',
points: [[22,1.5],[23.5,1.5]],
c: 'black' },
{ name: 'porch_window2',
points: [[24,1.5],[24,7.5]],
c: 'black' },
{ name: 'east_addition',
points: [[24.5,8], [24.5,16],
[25,17.5],[25,20.5], [24.5,22],
[24.5,24], [7,24], [7,18.8]],
c: 'green' },
],
});
return ({footprint, upstairs});
}
dims = ({
...design_metadata,
...{ filename: "adu.svg", width_in_inches: 4.5, height_in_inches: 3.5, }
})
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.
