29:null 2a:["$","title",null,{"children":"LEGO Color Palettes! | Erik Escoffier | Observable"}] 2f:[{"id":"34e61295f782b8376aeeb0cdd1b83af5b0320c81e3024e490e583326fb9abe73a155344f4739b3c057c7cd261de6bef664604ea13d8ebf3d3fb9759a1570d7da","href":"https://static.observableusercontent.com/files/34e61295f782b8376aeeb0cdd1b83af5b0320c81e3024e490e583326fb9abe73a155344f4739b3c057c7cd261de6bef664604ea13d8ebf3d3fb9759a1570d7da","name":"colors.json","type":"application/json","lastModified":1738750797180.366,"size":118184}] 2d:{"id":"cfa4eecab03fd823","slug":null,"title":"LEGO Color Palettes!","thumbnail":"78e66f1750406f30564673ca8463c55d2a3c9e54d9b0a7a5e0c0af910846c45b","access_level":"public","create_time":"$D2025-02-05T10:04:38.624Z","update_time":"$D2025-03-19T15:21:14.777Z","view_time":null,"first_public_time":"$D2025-02-28T12:33:21.817Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"d78ef734124b1c67","login":"nerik","name":"Erik Escoffier","avatar_url":"https://avatars-next.observableusercontent.com/1b2d55c7609f4dec14a81aa7b0945626b05c3c89c6fbc32317adb11a8f1ff4ca","tier":"starter_2024"},"version":157,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b383700baf15626b","login":"nerik","name":"Erik Escoffier","avatar_url":"https://avatars-next.observableusercontent.com/1b2d55c7609f4dec14a81aa7b0945626b05c3c89c6fbc32317adb11a8f1ff4ca","tier":null}],"members":[{"type":"individual","id":"b383700baf15626b","login":"nerik","name":"Erik Escoffier","avatar_url":"https://avatars-next.observableusercontent.com/1b2d55c7609f4dec14a81aa7b0945626b05c3c89c6fbc32317adb11a8f1ff4ca","tier":null,"role":"editor"},{"type":"team","id":"d78ef734124b1c67","login":"nerik","name":"Erik Escoffier","avatar_url":"https://avatars-next.observableusercontent.com/1b2d55c7609f4dec14a81aa7b0945626b05c3c89c6fbc32317adb11a8f1ff4ca","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"1a6426fb80559c49","slug":"lego","title":"Lego!","owner":{"id":"d78ef734124b1c67","login":"nerik","name":"Erik Escoffier"}},"type":"notebook","body":{"title":"LEGO Color Palettes!","cells":[{"id":0,"value":"# LEGO Color Palettes!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":68,"value":"![a Lego brick](https://img.bricklink.com/ItemImage/PN/5/3001.png)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"I'm having this wild idea that I'm going to build Dataviz using lego bricks and pieces. This is a stab at building LEGO color palettes, with the one big constraint that **Lego is so god damn expensive, even second hand**! On Bricklink and similar platforms, Lego pieces are more or less expensive depending on the rarity, which applies to colors in general: a transparent glitter blue brick is very rare and will cost you at least 60€ (if available), while your basic red, black, white bricks can go for as low as 0.03€ second-hand. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"The first step is to list all the existing colors:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"colors = FileAttachment(\"colors.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"viewof filterOutZeroStock = Inputs.checkbox([\"filter out zero stock\"], {\n value: [\"filter out zero stock\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"Inputs.table(colorsWithHue, {\n columns: [\n \"name\",\n \"rgb\",\n \"h\",\n \"colorId\",\n \"last6MonthsUsed_avgPrice\",\n \"last6MonthsUsed_minPrice\",\n \"last6MonthsNew_avgPrice\",\n \"currentUsed_totalQty\",\n \"currentUsed_avgPrice\",\n \"currentUsed_minPrice\"\n ],\n header: {\n name: \"Name\",\n rgb: \"RGB\",\n h: \"h\",\n colorId: \"col#\",\n last6MonthsUsed_avgPrice: \"Used Avg €\",\n last6MonthsUsed_minPrice: \"Used Min €\",\n last6MonthsNew_avgPrice: \"New Avg €\",\n currentUsed_totalQty: \"Current Used Qty\",\n currentUsed_avgPrice: \"Current Used Avg €\",\n currentUsed_minPrice: \"Current Used Min €\"\n },\n format: {\n rgb: rgbCol,\n colorId: link,\n h: (d) => \"\"\n },\n sort: \"h\",\n rows: 35,\n maxWidth: 1500,\n layout: \"auto\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"I used the [BrickLink API](https://github.com/nerik/lego-scripts/blob/main/getColorPrices.js#L2) to start off with all the existing Lego colors, then scraped the [BrickLink prices page for brick #3001](https://www.bricklink.com/v2/catalog/catalogitem.page?P=3001#T=S&C=5&O=%7B%22color%22:%225%22,%22iconly%22:0%7D) (your standard 4x2 brick), in order to get average, min, max prices for the last 6 months and for the existing available stock. ([Scraping script](https://github.com/nerik/lego-scripts/blob/main/getColorPrices.js)). \nSorting this table by \"used avg €\" gives us a decent approximate order of prices for standard bricks by color (I'm not considering using Lego pieces beyond simple bricks, so not factoring rarity based on piece, just on color) ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":124,"value":"## Lego pieces IDs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":122,"value":"| size | plate | brick | tile |\n| ---- | ----- | ----- | ----- |\n| 1x1 | 3024 | 3005 | 3070 |\n| 1x2 | 3023 | 3004 | 3069 |\n| 1x3 | 3623 | 3622 | 63864 |\n| 1x4 | 3710 | 3010 | 2431 |\n| 2x2 | 3022 | 3003 | |\n| 2x3 | 3021 | 3002 | |\n| 2x4 | 3020 | **3001** | |\n| | | | |\n| | | | |","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":129,"value":"# Palettes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":89,"value":"## Climate Stripes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":73,"value":"getPalette(colorsWithHue, [/*89,*/ 63, 7, 153, 156, 1, 104, 220, 5, 88, 11])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"## Cold/Warm","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":95,"value":"getPalette(colors, [7, 153, 156, 1, /*103,*/ 3, 110, 4, 5, 88, 11])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"## Fuel type","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":99,"value":"getPalette(\n colors,\n [11, 4, 34, 3, 7, /*152*/ 156, 80, 88],\n [\"Coal\", \"Gas\", \"Nuclear\", \"Solar\", \"Hydro\", \"Wind\", \"Biomass\", \"Oil\"]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"## Home solar","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":103,"value":"// ['prodKWh', 'importKWh', 'exportKWh', 'autoConsumptionKWh', 'consumptionKWh']\ngetPalette(\n colors,\n [3, 156, 24, 4, 86, 5, 34],\n [\n \"Production\",\n \"Import\",\n \"Export\",\n \"Autoconsumption\",\n \"Consumption\",\n \"Battery charge\",\n \"Battery discharge\"\n ]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"## The hydrogen rainbow 🌈","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":108,"value":"getPalette(\n colors,\n [6, 156, 86, 11, 104, 3, 1],\n [\n \"Green (renewables)\",\n \"Blue (Gas + CCS)\",\n \"Grey (Gas sans CCS)\",\n \"Black and brown (Coal)\",\n \"Pink (Nuclear)\",\n \"Yellow (Solar)\",\n \"White (Geological)\"\n ]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"## EV vs ICE lifcycle CO2 emissions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":117,"value":"getPalette(\n colors,\n [5, 220, 156, 86],\n [\n \"Production, car\",\n \"Production, battery\",\n \"Energy production (well to tank)\",\n \"Fuel combustion (tank to wheel)\"\n ]\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"colorsWithHue = colors\n .map((color) => {\n const h = d3.hsl(`#${color.rgb}`).h;\n return { ...color, h };\n })\n .filter((d) =>\n filterOutZeroStock.length\n ? d.last6MonthsUsed_totalQty > 0 || d.last6MonthsNew_totalQty > 0\n : true\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"link = {\n const PART_ID = \"3001\";\n\n return (colorId) =>\n htl.html`${colorId}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"rgbCol = (rgb) => htl.html`

${rgb}

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"function getPalette(allLegoColors, paletteColorIds, paletteColorNames) {\n const legoColors = fromIds(allLegoColors, paletteColorIds, paletteColorNames);\n const columns = [\n \"name\",\n \"rgb\",\n \"colorId\",\n \"last6MonthsUsed_avgPrice\",\n \"currentUsed_minPrice\",\n \"currentUsed_maxPrice\",\n \"currentUsed_avgPrice\"\n ];\n if (paletteColorNames) {\n columns.unshift(\"paletteName\");\n }\n const table = Inputs.table(legoColors, {\n columns,\n header: {\n name: \"Name\",\n rgb: \"RGB\",\n colorId: \"col#\"\n },\n format: {\n rgb: rgbCol,\n colorId: link,\n paletteName: (name) => html`${name}`\n },\n maxWidth: 1500,\n layout: \"auto\"\n });\n\n return html`

\n ${table} Cost per 1000 (equal amount of each color, min, max, avg):\n ${getCostPer1000(legoColors)}\n

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"function getCostPer1000(legoColors) {\n return [\n Math.round(\n (1000 / legoColors.length) *\n legoColors.reduce((acc, c) => acc + c.currentUsed_minPrice, 0)\n ),\n Math.round(\n (1000 / legoColors.length) *\n legoColors.reduce((acc, c) => acc + c.currentUsed_maxPrice, 0)\n ),\n Math.round(\n (1000 / legoColors.length) *\n legoColors.reduce((acc, c) => acc + c.currentUsed_avgPrice, 0)\n )\n ]\n .map((d) => `${d}€`)\n .join(\", \");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"function fromIds(legoColors, legoColorIds, paletteColorNames) {\n return legoColorIds.map((id, i) =>\n paletteColorNames\n ? { paletteName: paletteColorNames[i], ...fromId(legoColors, id) }\n : fromId(legoColors, id)\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"function fromId(legoColors, legoColorId) {\n return legoColors.find((c) => c.colorId === legoColorId);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"function getColorsFromLegoIds(legoColorIds) {\n return fromIds(colors, legoColorIds);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"function getHexColorsFromLegoIds(legoColorIds) {\n return fromIds(colors, legoColorIds).map((c) => `#${c.rgb}`);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2e:"$2d:body"