31:T88a,chart = { let filteredData if(sorting == "color") { filteredData = colorDataSortedColor } else if(sorting == "time") { filteredData = colorDataSortedTime } else { filteredData = colorDataSortedSpan } let parent = this; if (!parent) { parent = document.createElement("div"); const svg = d3.select(DOM.svg(width, height)); const g = svg.append("g").attr("transform", (d,i)=>`translate(${margin.left} ${margin.top})`); const groups = g .selectAll("g") .data(filteredData) .enter() .append("g") .attr("class", "lego") const tooltip = d3.select(document.createElement("div")).call(createTooltip); const line = svg.append("line").attr("y1", margin.top-10).attr("y2", height-margin.bottom).attr("stroke", "rgba(0,0,0,0.2)").style("pointer-events","none"); // moving line following mouse movement groups.attr("transform", (d,i)=>`translate(0 ${y(i)})`) // spread the bars groups .each(getRect) .on("mouseover", function(d) { d3.select(this).select("rect").attr("fill", (d => "#" + d.rgb3)) tooltip .style("opacity", 1) .html(getTooltipContent(d)) }) .on("mouseleave", function(d) { d3.select(this).select("rect").attr("fill", (d => "#" + d.rgb3)) tooltip.style("opacity", 0) }) // axes svg .append("g") .attr("transform", (d,i)=>`translate(${margin.left} ${margin.top-10})`) .call(axisTop) svg .append("g") .attr("transform", (d,i)=>`translate(${margin.left} ${height-margin.bottom})`) .call(axisBottom) svg.on("mousemove", function(d) { let [x,y] = d3.mouse(this); line.attr("transform", `translate(${x} 0)`); y +=20; if(x>width/2) x-= 100; tooltip .style("left", x + "px") .style("top", y + "px") }) parent.appendChild(svg.node()); parent.appendChild(tooltip.node()); parent.groups = groups; } else { const lego = d3.selectAll(".lego") lego.data(filteredData, d=>d.color_id) .transition() .ease(d3.easeCubic) .attr("transform", (d,i)=>`translate(0 ${y(i)})`) } return parent }32:T41a,function sortWithClusters(colorsToSort) { const assignedColors = new Set(); // Set to keep track of assigned colors colorsToSort.forEach((color) => { let minDistance; let minDistanceClusterIndex; clusters.forEach((cluster, clusterIndex) => { const colorRgbArr = [color.RGB[0], color.RGB[1], color.RGB[2]]; const distance = colorDistance(colorRgbArr, cluster.leadColor); if (typeof minDistance === 'undefined' || minDistance > distance) { minDistance = distance; minDistanceClusterIndex = clusterIndex; } }); // Check if color is already assigned to a cluster if (!assignedColors.has(color)) { clusters[minDistanceClusterIndex].colors.push(color); assignedColors.add(color); // Add color to set of assigned colors } }); clusters.forEach((cluster) => { const dim = ['white', 'grey', 'black'].includes(cluster.name) ? 'l' : 's'; cluster.colors = oneDimensionSorting(cluster.colors, dim); }); return clusters.flatMap(cluster => cluster.colors); }33:[{"id":"9a98d76ab49ae97e5e779fb65917e2f3ec610f0373804a5884e6ea96346c944af44ac5ad4624740ad6eaf8926b0be11f92da27905cb8d2424fcd195311799efa","href":"https://static.observableusercontent.com/files/9a98d76ab49ae97e5e779fb65917e2f3ec610f0373804a5884e6ea96346c944af44ac5ad4624740ad6eaf8926b0be11f92da27905cb8d2424fcd195311799efa","name":"LEGO color.csv","type":"text/csv","lastModified":1709191441858.234,"size":23841209}] 2f:{"title":"Bricks by Color","cells":[{"id":0,"value":"md`# Bricks by Color\nData adapted from [LEGO Database](https://www.kaggle.com/datasets/rtatman/lego-database/data)\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":412,"value":"Lego has become synonymous with endless possibilities and imagination. From its inception in a small carpenter's workshop in Denmark, the Lego Group has transformed into a global phenomenon, captivating audiences worldwide through movies, games, competitions, amusement parks, and last but not least, its the most beloved and best-selling toys of all time.","pinned":false,"hidden":false,"mode":"md"},{"id":449,"value":"Beyond the creative potential of Lego lies an intriguing story of evolution – the evolution of color. Over the decades, Lego has introduced a staggering variety of colors, each adding a new dimension to the creative process. However, as complexity rose and new colors were introduced, a curious pattern emerged: the lifespan of colors introduced later in the decade tended to be shorter than those introduced in the early years. This phenomenon reflects not only the dynamic nature of Lego's product development but also the evolving tastes and trends of its diverse audience.\n\nThis data visualization project aims to explore this trend by delving into the history of Lego's color palette.","pinned":false,"hidden":false,"mode":"md"},{"id":465,"value":"md`## Lego Color Release Years\n\n- **Sorted by time:** based of earliest year of release.\n- **Sorted by color:** based on color affinity groups.\n- **Sorted by span:** based on the timespan between earliest and latest years of release.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"viewof sorting = select({title: 'Sorted by', options:[\"time\",\"color\",\"span\"], value:\"time\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"colorData = filter(data).filter(d => ![47, 79, 1001].includes(d.color_id));","pinned":false,"hidden":false,"mode":"ojs"},{"id":370,"value":"clusters = [\n { name: 'red', leadColor: [255, 0, 0], colors: [] },\n { name: 'orange', leadColor: [255, 128, 0], colors: [] },\n { name: 'yellow', leadColor: [255, 255, 0], colors: [] },\n { name: 'chartreuse', leadColor: [128, 255, 0], colors: [] },\n { name: 'green', leadColor: [0, 255, 0], colors: [] },\n { name: 'spring green', leadColor: [0, 255, 128], colors: [] },\n { name: 'cyan', leadColor: [0, 255, 255], colors: [] },\n { name: 'azure', leadColor: [0, 127, 255], colors: [] },\n { name: 'blue', leadColor: [0, 0, 255], colors: [] },\n { name: 'violet', leadColor: [127, 0, 255], colors: [] },\n { name: 'magenta', leadColor: [255, 0, 255], colors: [] },\n { name: 'rose', leadColor: [255, 0, 128], colors: [] },\n { name: 'black', leadColor: [0, 0, 0], colors: [] },\n { name: 'grey', leadColor: [235, 235, 235], colors: [] },\n { name: 'white', leadColor: [255, 255, 255], colors: [] },\n];","pinned":false,"hidden":false,"mode":"ojs"},{"id":392,"value":"colorData.forEach(d => {\n var bigint = parseInt(d.rgb3, 16);\n var r = (bigint >> 16) & 255;\n var g = (bigint >> 8) & 255;\n var b = bigint & 255;\n d.RGB = [r, g, b];\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":396,"value":"colorDataSortedColor = Array.from(new Set(sortWithClusters(colorData)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":404,"value":"colorDataSortedTime = colorData.slice().sort((a,b)=> a.yearRelease-b.yearRelease);","pinned":false,"hidden":false,"mode":"ojs"},{"id":430,"value":"colorDataSortedSpan = colorData.slice().sort((a, b) => (b.yearEnd - b.yearRelease) - (a.yearEnd - a.yearRelease));\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"getRect = function(d){\n const el = d3.select(this);\n const sx = x(d.yearRelease) - 0.5;\n const w = x(d.yearEnd) - x(d.yearRelease) + 3;\n let colorValue = d.rgb3;\n\n el.style(\"cursor\", \"pointer\")\n\n el\n .append(\"rect\")\n .attr(\"x\", sx)\n .attr(\"height\", y.bandwidth())\n .attr(\"width\", w)\n .attr(\"fill\", d => \"#\" + d.rgb3)\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", 0.2);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"margin = ({top: 30, right: 30, bottom: 30, left: 30})","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"function filter(data) {\n let filter = {};\n data.forEach(item => {\n const colorId = item.color_id;\n if (!filter[colorId]) {\n filter[colorId] = {\n color_id: colorId,\n name2: item.name2,\n rgb3: item.rgb3,\n yearRelease: item.year,\n yearEnd: item.year\n };\n } else {\n if (item.year > filter[colorId].yearEnd) {\n filter[colorId].yearEnd = item.year;\n }\n if (item.year < filter[colorId].yearRelease) {\n filter[colorId].yearRelease = item.year;\n }\n }\n });\n\n return Object.values(filter);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"createTooltip = function(el) {\n el\n .style(\"position\", \"absolute\")\n .style(\"pointer-events\", \"none\")\n .style(\"top\", 0)\n .style(\"opacity\", 0)\n .style(\"background\", \"white\")\n .style(\"border-radius\", \"5px\")\n .style(\"box-shadow\", \"0 0 10px rgba(0,0,0,.25)\")\n .style(\"padding\", \"18px\")\n .style(\"line-height\", \"4\")\n .style(\"font\", \"20px sans-serif\")\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"getTooltipContent = function(d) {\nconst textColor = d.rgb3 === \"FFFFFF\" ? \"black\" : \"#\" + d.rgb3;\nreturn `Lego color Id: ${d.color_id}\n
\nRGB: ${d.RGB}\n
\n${d.name2}\n
\nEarliest release: ${formatDate(d.yearRelease)} - Latest release: ${formatDate(d.yearEnd)}\n`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"axisBottom = d3.axisBottom(x)\n .tickPadding(2)\n .tickFormat(formatDate)","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"axisTop = d3.axisTop(x)\n .tickPadding(2)\n .tickFormat(formatDate)","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"formatDate = d=>`${d}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"x = d3.scaleLinear()\n .domain([d3.min(colorData, d => d.yearRelease), d3.max(colorData, d => d.yearEnd)])\n .range([0, width - margin.left - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":" y= d3.scaleBand()\n .domain(d3.range(colorData.length))\n .range([0,height - margin.bottom - margin.top])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"height = 1000","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"import {checkbox, select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"function hexToRGB(hex) {\n var r = parseInt(hex.slice(1, 3), 16),\n g = parseInt(hex.slice(3, 5), 16),\n b = parseInt(hex.slice(5, 7), 16);\n // return \"rgb(\" + r + \", \" + g + \", \" + b + \")\"; \n return [r, g, b]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"function oneDimensionSorting(colors, dim) {\n return colors\n .sort((colorA, colorB) => {\n if (rgbToHsl(colorA.RGB[0],colorA.RGB[1],colorA.RGB[2])[dim] < rgbToHsl(colorB.RGB[0],colorB.RGB[1],colorB.RGB[2])[dim]) {\n return -1;\n } else if (rgbToHsl(colorA.RGB[0],colorA.RGB[1],colorA.RGB[2])[dim] > rgbToHsl(colorB.RGB[0],colorB.RGB[1],colorB.RGB[2])[dim]) {\n return 1;\n } else {\n return 0;\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":297,"value":"function colorDistance(color1, color2) {\n const x =\n Math.pow(color1[0] - color2[0], 2) +\n Math.pow(color1[1] - color2[1], 2) +\n Math.pow(color1[2] - color2[2], 2);\n return Math.sqrt(x);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":299,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":353,"value":"rgbToHsl = (r, g, b) => {\n r /= 255;\n g /= 255;\n b /= 255;\n const l = Math.max(r, g, b);\n const s = l - Math.min(r, g, b);\n const h = s\n ? l === r\n ? (g - b) / s\n : l === g\n ? 2 + (b - r) / s\n : 4 + (r - g) / s\n : 0;\n return [\n 60 * h < 0 ? 60 * h + 360 : 60 * h,\n 100 * (s ? (l <= 0.5 ? s / (2 * l - s) : s / (2 - (2 * l - s))) : 0),\n (100 * (2 * l - s)) / 2,\n ];\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"html`CSS`","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":224,"value":"data = await FileAttachment(\"LEGO color.csv\").csv({typed: true});","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}