30:T1501,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); }); }31:[] 2e:{"title":"Burberry","cells":[{"id":0,"value":"md`# Burberry`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2739,"value":"view = html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":369,"value":"viewof white_line_thickness = slider({\n min: 2,\n max: w / 8,\n value: 22.74,\n step: 0.01,\n precision: 2,\n description: \"Width of White Line | Space between Black Lines\",\n title: \"White Line Thickness\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"viewof red_line_width = slider({\n min: 5,\n max: w / 5,\n value: 12,\n step: 2,\n precision: 0,\n description: \"Width of Red Striped Lines\",\n title: \"Red Lines Width\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":357,"value":"viewof red_line_gap = slider({\n min: 2,\n max: w / 5,\n value: 15,\n step: 5,\n precision: 0,\n description: \"Space around Red Striped Lines\",\n title: \"Red Lines Padding\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":360,"value":"viewof black_line_thickness = slider({\n min: 2,\n max:\n (w - red_line_width * 2 - white_line_thickness * 3 - red_line_gap * 2) / 3,\n value: 22.74,\n step: 0.01,\n precision: 2,\n description:\n \"Size of Black Squares | Width of Black Lines | Space between White Lines\",\n title: \"Black Line Thickness\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1493,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1570,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"red_striped_texture = textures\n .lines()\n .size(4)\n .strokeWidth(1.5)\n .stroke(color.red)\n .orientation(Rotation)","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"black_striped_texture = {\n return textures\n .lines()\n .stroke(color.black)\n .background(color.beige)\n .size(4)\n .strokeWidth(1.5)\n .orientation(Rotation);\n // .orientation(`${rotation / 360}/2`)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":367,"value":"white_squares_layout = {\n let position_of_first_square = h / 3 + black_line_thickness / 2;\n\n return d3.cross(\n d3.ticks(position_of_first_square, 335, 2),\n d3.ticks(position_of_first_square, 335, 2)\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"red_stripe_layout = [\n //top\n [0, red_line_gap, w, red_line_width],\n //right\n [w - red_line_gap - red_line_width * 0.75, 0, red_line_width * 0.75, h],\n //bottom\n [0, h - red_line_gap - red_line_width, w, red_line_width],\n //left\n [red_line_gap, 0, red_line_width * 0.75, h]\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1083,"value":"md`## Layout Configs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"h = w","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"w = d3.min([600, width])","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"center = w / 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":1722,"value":"black_pad=(w - 3 * black_line_thickness - 2 * white_line_thickness) / 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":2232,"value":"viewof Rotation = //\"1/8\", \"3/8\", \"5/8\", \"6/8\", \"2/8\"\nScrubber([\"2/8\"], {\n loop: false,\n delay: 2000\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2450,"value":"viewof mode = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"md`## ANX`","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"import { color } from '@stroked/burberry-check'","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"textures = require('textures')","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"import { swatches } from '@d3/working-with-color'","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"import { slider } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":2229,"value":"import { Scrubber } from '@mbostock/scrubber'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}