Public
Edited
Dec 14, 2023
left_width = 36
panel_width = 48
right_width = 40
tub_height = 19
side_canvas_width = side_width * pixel_per_inch
pattern_size = 20
grout_line = 1/8
function draw_tubside(color = tile_color, stroke_color = "white") {
function draw_tile(x, y, w, h) {
svg.append('rect')
.attr('x', pixel_per_inch * x)
.attr('y', pixel_per_inch * y)
.attr('width', pixel_per_inch * w)
.attr('height', pixel_per_inch * h)
.attr('stroke', stroke_color)
.attr('fill', color);
}
const svg = d3.select(DOM.svg(side_canvas_width, canvas_height));
const defs = svg.append("defs");
const artboard = svg.append("g");
var x, y;
// draw tiles
x = 0;
y = 0;
if (row_oriented) {
var row = 0;
while (y < height) {
var x = tile_width * offset * row;
while (x > 0) {
x -= tile_width;
}
while (x < side_width) {
draw_tile(x, y, tile_width, tile_height);
x += tile_width;
}
y += tile_height;
row += 1;
}
} else {
var col = 3;
while (x < side_width) {
y = tile_width * offset * col;
while (y > 0) {
y -= tile_width;
}
while (y < height) {
draw_tile(x, y, tile_height, tile_width);
y += tile_width;
}
x += tile_height;
col += 1;
}
}
// draw tub silhouette
svg.append('rect')
.attr('x', 0)
.attr('y', pixel_per_inch * (height - tub_height))
.attr('width', pixel_per_inch * side_width)
.attr('height', pixel_per_inch * tub_height)
.attr('stroke', 'black')
.attr('fill', 'white');
svg.append('rect')
.attr('x', 0)
.attr('y', pixel_per_inch * (height - tub_height))
.attr('width', pixel_per_inch * side_width)
.attr('height', pixel_per_inch)
.attr('stroke', 'black')
.attr('fill', '#977556');
return svg.node();
}
swatches([tile_color], "3em")
tile_color = "#EEE7E2"
mosaic_img.image()
mosaic_url = mosaic_img.url()
mosaic_img = FileAttachment("th.jpg")
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.
