Burberry = { const svg = d3.select(view); svg.call(red_striped_texture); //2 HORIZONTAL WHITE LINES svg.call((g) => { g.selectAll(".horizontal-white") .data(d3.range(2)) .join("rect") .attr("class", "horizontal-white") .attr("x", 0) .attr("width", w) .attr( "y", (d, i) => h / 2 - black_line_thickness / 2 - white_line_thickness + i * (white_line_thickness + black_line_thickness) ) // .attr("x", w / 2 - white_line_thickness - black_line_thickness / 2) // .attr("y", h / 2 - white_line_thickness - black_line_thickness / 2) .attr("height", white_line_thickness) .style("fill", color.white); //2 VERTICAL WHITE LINES g.selectAll(".vertical-white") .data(d3.range(2)) .join("rect") .attr("class", "vertical-white") .attr("y", 0) .attr("height", h) .attr( "x", (d, i) => w / 2 - black_line_thickness / 2 - white_line_thickness + i * (white_line_thickness + black_line_thickness) ) .attr("width", white_line_thickness) .style("fill", color.white); }); //RED LINES svg .call( (g) => g .selectAll(".four-red-lines") .data(["_"], (d) => d) .join("g") .selectAll("rect") .data(red_stripe_layout, (d) => d) .join("rect") .attr("class", "four-red-lines") .attr("x", (d, i) => d[0]) .attr("y", (d, i) => d[1]) .attr("width", (d, i) => d[2]) .attr("height", (d, i) => d[3]) .attr("stroke", color.red) .attr("stroke-width", 0) .style("fill", red_striped_texture.url()) //textures ) .call( (g) => g .selectAll(".black-red-overlap") .data(["_"], (d) => d) .join("g") .selectAll("rect") .data(red_stripe_layout, (d) => d) .join("rect") .attr("class", "four-red-lines") .attr("x", (d, i) => d[0]) .attr("y", (d, i) => d[1]) .attr("width", (d, i) => d[2]) .attr("height", (d, i) => d[3]) .attr("stroke", color.red) .attr("stroke-width", 0) .style("fill", red_striped_texture.url()) //textures ); { //BLACK LINES svg.call(black_striped_texture); svg .selectAll(".overlap") .data(["overlap"], (d, i) => i) .join("g") .attr("class", (d) => d) .html( `${d3.range(3).map((_) => { let y = center - black_line_thickness / 2 - white_line_thickness - black_line_thickness + _ * (white_line_thickness + black_line_thickness); let x = center - black_line_thickness / 2 - white_line_thickness - black_line_thickness + _ * (white_line_thickness + black_line_thickness); let it = ` `; return it; })} ` ); } svg.call((g) => { g.selectAll(".solid-black-squares") .data(d3.range(9)) .join("rect") .attr("class", "solid-black-squares") .attr("height", black_line_thickness) .attr("width", black_line_thickness) .attr("x", (d, i) => { let row = null; if (i % 3 === 1) row = 0; if (i % 3 === 2) row = 1; if (i % 3 === 0) row = 2; return black_pad + row * (white_line_thickness + black_line_thickness); }) .attr("y", (d, i) => { let row = 0; if (d < 3) row = 0; else if (d < 6) row = 1; else if (d < 9) row = 2; return black_pad + row * (white_line_thickness + black_line_thickness); }) .attr("fill", color.black); }); svg.call((g) => { g.selectAll(".red-corner") .data(d3.range(4), (d) => d) .join("rect") .attr("class", "red-corner") .attr("x", (d, i) => { return d >= 2 ? red_line_gap : h - red_line_gap - red_line_width * 0.75; }) .attr("y", (d, i) => { return d % 2 === 1 ? h - red_line_gap - red_line_width : red_line_gap; }) .attr("width", red_line_width * 0.75) .attr("height", red_line_width) .attr("fill", color.red) .attr("stroke-width", 0); }); }