31:T599,schemeReGrBu = [ ...new Array(3), [main.red["500"], main.grey["200"], main.blue["500"]], [main.red["500"], main.red["400"], main.blue["400"], main.blue["500"]], , [ main.red["500"], main.red["400"], main.grey["200"], main.blue["400"], main.blue["500"] ], [ main.red["600"], main.red["500"], main.red["400"], main.blue["400"], main.blue["500"], main.blue["600"] ], [ main.red["600"], main.red["500"], main.red["400"], main.grey["200"], main.blue["400"], main.blue["500"], main.blue["600"] ], [ main.red["700"], main.red["600"], main.red["500"], main.red["400"], main.blue["400"], main.blue["500"], main.blue["600"], main.blue["700"] ], [ main.red["700"], main.red["600"], main.red["500"], main.red["400"], main.grey["200"], main.blue["400"], main.blue["500"], main.blue["600"], main.blue["700"] ], [ main.red["800"], main.red["700"], main.red["600"], main.red["500"], main.red["400"], main.blue["400"], main.blue["500"], main.blue["600"], main.blue["700"], main.blue["800"] ], [ main.red["800"], main.red["700"], main.red["600"], main.red["500"], main.red["400"], main.grey["200"], main.blue["400"], main.blue["500"], main.blue["600"], main.blue["700"], main.blue["800"] ] ]32:Tc32,ccUrls = [ /* * Keep latest first */ // 2022-07-18: Tweaks hues of main colors, and rate of red "https://colorcolor.in/?s=eJyNksFSwjAQht8lve50krZpE46Cjl6U0aPjYYUUGEvbSVLBYXh3U2hLFZTeNpv99_-y2R0pMVPWqilqXBsy2hFjVekCFkB795DP1ZaMXMJs0M6WzTkGssbtY7V-SqfHQnNIlk2r1x1ZVurYErV1DcLYTzgQlc97BzSuhviMAQWfAyV754O2p4uiRiPYqZ4DA19IYASIRutyLKROmq0WPamUjZRfUu738JuRBdJvEdv4OmEoTw-TVyDZOaToLCM_GEoa8k7VhAMmyTqNvOjTYTJxhskobbTJQMSA9z-cJwMp69U7fsCP-V-ijP6hDP6c5Vtt6RZ2lS8OK198Kp3h17jIrUbjmqSYGQVt_r7edqsrl9EqHRdZoc0zblxX71byMLgBT0zGcXgHHqVSTgR4cZRE4t2BzurqlxJnNUTxsTSZ8_8GJWf4Ow", // 2022-07-18: Increased saturation to match ADB brand colors "https://colorcolor.in/?s=eJyNkk1PwzAMhv9LerWifDRtsyMdCC4wwRFxCFv2Ibp2SjI2NO2_49J2m2BsvTm2X_vJK-_IyhQ2BDsyziw9GeyID3aFARfQ1R7Kid2SASb8xoTxvH1LIEuzfVwvn6ajphFlSa1qRr3uyHxtm5HGBRwgFRBbTjBSDCPjsUoo58CAKmBkjxtMOFHEcSvI-LFfAQeaaeAEiDMBc1wylBaL2YlU61aqzin3e_hNx0WnaKLrdFLTtPuRvgLI_wJmtBPHVPSlPFgoVT8H-WGLPrvjkoecsVabNj_tQyhUcrRFqJT2A63vrXFf08ugPL4AKv618q1eiVe6KGc_d159WleYr7wqgzMeh0xN4S10-fv6xINbY8bZaV4VlfPPZoNTo1utpLiBKBvmibyDiDGthxlESZzG2TuCjuvul5UZ1xDVx9wXuP8btYL2Bw", // 2022-07-07: Made the darker shades lighter "https://colorcolor.in/?s=eJyVkk9vwjAMxb9LerWiJG1KwnGwabtsaDtOO3gQ_milRUkYTIjvPnelgCbG4OY6fu_9annDFli4GN0APc4D625YiG5BhVTQvj2UI7dmXQEsrDAOp7tvA2yO68fl_Gk8aAZJlteqxup1w6ZL11iij6yrUg3MlSOqNJk5DPTKuJQggGsQbEsJGI8UWbYTGHmY1yCBGwuSAfMYqSeFIGkxmxxJrd1J9Snldgu_6aRqFU31P11qeaf9I3s9oOGtOOPqUsr9ClN92QblPsWezDiHSL3rCZXOD2tRusMvA63vrdm-5edBZXYGVP0J-lZH0pXOysnPnVefzhf41avK6DGQyRiL4KDt39cnHv2SOt6Ne1VR-fCMK3JNbq1O1Q0kpt_L0ztIhLC2byDJs05m3gl0WE-_LHBYQ1Qf01BQ_jegyvX4", // 2022-07-07: Tweaked hues "https://colorcolor.in/?s=eJyNk01TgzAQhv9LuO4w-SBAerSV0Yt29Oh4iDT9GCl0ktTW6fS_u0gp1drKjWzy7PuwhB1Z6cJ4b8ba6qUjgx1x3qzwQUG7dV9OzJYMKBC30T6fH9YSyFJvH9bLx-m4OYhUXFNNp5cdma9N01FbTwZc8BAhU07qZxXyeqEdHiEhY0ABdynZY4z2J1jEw6TFUtYhEhiEqQJGgFjtscaoRLpYzE5opdrEuGlzRu_38NuU8fhAMcH6euIbHT3VP5703DPtZpP8iLxqKjpMiLDnQNmRUX_mXPPEWptH-2vyKO6Gw2XSd6acn2IXPuBRl0VXdHkaXrB9rWPx_i7K2fcPUH0YW-jPYVV6qx02merCGWjrd_Xl93aNFWumw6qorHvSG-wa3Cop-A0E6WgYiwwCSpUapRDEURKlbxBkLJOZgkCIiEmJ4nlNP690XktV73NXoM8Xe8P-MQ", // Reduced saturation of greens and reds "https://colorcolor.in/?s=eJyVkk9PwzAMxb9LerWiJG3aZkc2EFxggiPiYLbsj-jaKcnY0NTvjkvpNk3TKDfH8fP76cl7tsbChmDH6HDl2WDPfLBrKgx0Xw_l1O7YIAbmtxgmi-N7hbvHzeppNm4HSZU2qnbT654tNrbdiC6wgYo1MFtOqdKCKvT0y7iUIIBrEKwmBwwniiT5FeTyOK9BAs8NSAbMYaCeFIKkxXJ-IjWm80p5pi-p6xrOCaXqVG31N2Fs2u2NxvwfMueHSDKu-mIecox1vxjlwcZc9LjGSL3OTfRHVDo9BqN0xvuRStXlb_h1UplcIVX5ZXVdvzWWdKvLcv5z7NWndQV-DasyOPS0ZIaFt9D175tDD25DHWdnw6qonH_GLW2Nbo2O1Q1E-WiYxncQCWHMKIcoTbIkfyfQSTP9ssZJA1F9LHxB_t_NqPcD", // First draft "https://colorcolor.in/?s=eJylkt9PwjAQx_-X7vXStN26rTwKGn1Roo_GhxPKjzg20hbBkP3v3hgDYohgfLu197nvZ81t2RILG4IdosOFZ70t88EuqTDQXT2UY7thvRiYX2MYzfbfGtgCN4-rxdNk2DYSlTZUO-l1y2Yr205EF1hPxYTYckyVFlShp1vGpQQBXINgNSVgOCGSZA_k8tivQQLPDUgGzGGgMykEocV8eoIa02WlPNPn6LqGn4ZSdVRbXTbUup2-Y4T4s2XGD2-ScXWt5-EhY32dZfIvyxbZ5YnrJZVOj6lKt3962VWqTtTws1EHU5n8Yqry83RdvzWRtK7zcrrb9-rTugK_-lUZHHoaMsHCW-jO75tdD25FJ85O-lVROf-Ma5oa3RodqxuI8kE_je8gEsKYQQ5RmmRJ_k6io6b7ZYmjRqL6mPmC8r8BJeT3hw" ]33:[] 2f:{"title":"Style Guide for Data Visualizations","cells":[{"id":0,"value":"# Style Guide for Data Visualizations\n","pinned":false,"hidden":false,"mode":"md"},{"id":249,"value":"toc(\"h2,h3,h4\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":284,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":125,"value":"## Colors","pinned":false,"hidden":false,"mode":"md"},{"id":651,"value":"### Main colors","pinned":false,"hidden":false,"mode":"md"},{"id":130,"value":"main = ({\n blue: {\n \"400\": \"#a1d3f2\",\n \"500\": \"#73beeb\",\n \"600\": \"#47a5da\",\n \"700\": \"#298abd\",\n \"800\": \"#156e9a\",\n \"900\": \"#075376\"\n },\n green: {\n \"400\": \"#b0da83\",\n \"500\": \"#96c45f\",\n \"600\": \"#7daa42\",\n \"700\": \"#648e2c\",\n \"800\": \"#4d7117\",\n \"900\": \"#375601\"\n },\n red: {\n \"400\": \"#f1c2b5\",\n \"500\": \"#eda28e\",\n \"600\": \"#e67d62\",\n \"700\": \"#d25a3b\",\n \"800\": \"#b23f20\",\n \"900\": \"#8d290c\"\n },\n grey: {\n \"100\": \"#fbfbfc\",\n \"200\": \"#eff1f4\",\n \"300\": \"#dde1e7\",\n \"400\": \"#c5cdd7\",\n \"500\": \"#aab5c4\",\n \"600\": \"#8e9bad\",\n \"700\": \"#728093\",\n \"800\": \"#576476\",\n \"900\": \"#3e4959\",\n \"1000\": \"#28303c\",\n // \"1100\": \"#131921\",\n // \"1200\": \"#010203\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"{\n const start = 1; // \"100\"\n const end = 10; // \"1000\"\n const keys = d3.range(start, end + 1).map((i) => `${i}00`);\n return htl.html`\n

\n \n ${Object.entries(main).flatMap(([hue, colors], i) => {\n return keys\n .slice()\n .reverse()\n .map((k) => {\n const code = colors[k];\n return htl.html`

${\n code\n ? swatch(code, {\n label: `${hue}.${k}`\n })\n : \"\"\n }`;\n });\n })}\n

\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":654,"value":"### Accent colors\n\nOnly reach for accent colors to highlight a data point over main colors.","pinned":false,"hidden":false,"mode":"md"},{"id":134,"value":"accent = ({\n blue: mainColors[\"700\"],\n red: accentColors[\"300\"],\n green: accentColors[\"600\"],\n grey: \"#64748b\" // TW Slate 500\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":656,"value":"htl.html`\n

\n ${Object.entries(accent).map(\n ([name, code], i) =>\n htl.html`

\n${swatch(code, {\n label: name\n})}`\n )}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"### Schemes\n#### Categorical\n##### `schemeBuGnReGr`","pinned":false,"hidden":false,"mode":"md"},{"id":454,"value":"schemeBuGnReGr = [\n main.blue[\"600\"],\n main.green[\"600\"],\n main.red[\"600\"],\n main.grey[\"600\"],\n \n main.blue[\"800\"],\n main.green[\"800\"],\n main.red[\"800\"],\n main.grey[\"800\"],\n \n main.blue[\"400\"],\n main.green[\"400\"], \n // main.red[\"400\"],\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"schemeHtml(schemeBuGnReGr)","pinned":false,"hidden":false,"mode":"ojs"},{"id":948,"value":"##### `schemeBuReGnGr`","pinned":false,"hidden":false,"mode":"md"},{"id":952,"value":"schemeBuReGnGr = [\n main.blue[\"600\"],\n main.red[\"600\"],\n main.green[\"600\"],\n main.grey[\"600\"],\n \n main.blue[\"800\"],\n main.red[\"800\"],\n main.green[\"800\"],\n main.grey[\"800\"],\n \n main.blue[\"400\"],\n // main.green[\"400\"], \n main.red[\"400\"],\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":950,"value":"schemeHtml(schemeBuReGnGr)","pinned":false,"hidden":false,"mode":"ojs"},{"id":986,"value":"##### `schemeBuGnReGrPaired` ","pinned":false,"hidden":false,"mode":"md"},{"id":988,"value":"schemeBuGnReGrPaired = [\n main.blue[\"600\"],\n main.blue[\"400\"],\n main.green[\"600\"],\n main.green[\"400\"],\n main.red[\"600\"],\n main.red[\"400\"],\n main.grey[\"600\"],\n main.grey[\"400\"],\n main.blue[\"800\"],\n main.green[\"800\"],\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":459,"value":"schemeHtml(schemeBuGnReGrPaired)","pinned":false,"hidden":false,"mode":"ojs"},{"id":498,"value":"##### `schemeContrasting`","pinned":false,"hidden":false,"mode":"md"},{"id":493,"value":"schemeContrasting = [\n main.blue[\"600\"],\n main.blue[\"900\"],\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":496,"value":"schemeHtml(schemeContrasting)","pinned":false,"hidden":false,"mode":"ojs"},{"id":763,"value":"##### `schemeContrastingAlt`\n\n⚠️ Accessibility warning: not enough contrast between colors. Use sparingly in cases where you need to use mix-blend-modes.","pinned":false,"hidden":false,"mode":"md"},{"id":754,"value":"schemeContrastingAlt = [main.blue[\"600\"], main.red[\"600\"]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":758,"value":"schemeHtml(schemeContrastingAlt)","pinned":false,"hidden":false,"mode":"ojs"},{"id":943,"value":"##### `schemeCategory10` Deprecated. Use schemeBuGnReGr","pinned":false,"hidden":false,"mode":"md"},{"id":937,"value":"schemeCategory10 = {\n console.warn(\"schemeCategory10 is deprecated. Use schemeBuGnReGr\");\n\n return schemeBuGnReGr;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":456,"value":"##### `schemePaired` Deprecated. Use schemeBuGnReGrPaired\n","pinned":false,"hidden":false,"mode":"md"},{"id":222,"value":"schemePaired = {\n console.warn(\"schemePaired is deprecated. Use schemeBuGnReGrPaired\");\n return schemeBuGnReGrPaired\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":928,"value":"##### `schemeAltCategory10` Deprecated. Use schemeBuReGnGr\n","pinned":false,"hidden":false,"mode":"md"},{"id":915,"value":"schemeAltCategory10 = {\n console.warn(\"schemeAltCategory10 is deprecated. Use schemeBuReGnGr\");\n\n return schemeBuReGnGr;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1071,"value":"#### Diverging\n","pinned":false,"hidden":false,"mode":"md"},{"id":1070,"value":"##### `schemeReGrBu[k] / interpolateReGrBu(t)`\n","pinned":false,"hidden":false,"mode":"md"},{"id":1069,"value":"interpolateReGrBu = d3.interpolateRgbBasis(\n schemeReGrBu[schemeReGrBu.length - 1]\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1068,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1067,"value":"schemeArrayHtml(schemeReGrBu, 'schemeReGrBu')","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"#### Sequential (Single Hue)\n##### `schemeBlues[k] / interpolateBlues(t)`","pinned":false,"hidden":false,"mode":"md"},{"id":321,"value":"schemeBlues = generateSchemes(main.blue)","pinned":false,"hidden":false,"mode":"ojs"},{"id":661,"value":"interpolateBlues = d3.interpolateRgbBasis(schemeBlues[schemeBlues.length - 1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"schemeArrayHtml(schemeBlues, 'schemeBlues')","pinned":false,"hidden":false,"mode":"ojs"},{"id":389,"value":"##### `schemeReds[k] / interpolateReds(t)`","pinned":false,"hidden":false,"mode":"md"},{"id":393,"value":"schemeReds = generateSchemes(main.red)","pinned":false,"hidden":false,"mode":"ojs"},{"id":700,"value":"interpolateReds = d3.interpolateRgbBasis(schemeReds[schemeReds.length - 1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":401,"value":"schemeArrayHtml(schemeReds, 'schemeReds')","pinned":false,"hidden":false,"mode":"ojs"},{"id":406,"value":"##### `schemeGreens[k] / interpolateGreens(t)`","pinned":false,"hidden":false,"mode":"md"},{"id":416,"value":"schemeGreens = generateSchemes(main.green)","pinned":false,"hidden":false,"mode":"ojs"},{"id":705,"value":"interpolateGreens = d3.interpolateRgbBasis(schemeGreens[schemeGreens.length - 1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"schemeArrayHtml(schemeGreens, 'schemeGreens')","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"##### `schemeGreys[k] / interpolateGreys(t)`","pinned":false,"hidden":false,"mode":"md"},{"id":419,"value":"schemeGreys = generateSchemes(main.grey)","pinned":false,"hidden":false,"mode":"ojs"},{"id":707,"value":"interpolateGreys = d3.interpolateRgbBasis(schemeGreys[schemeGreys.length - 1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":424,"value":"schemeArrayHtml(schemeGreys, 'schemeGreys')","pinned":false,"hidden":false,"mode":"ojs"},{"id":572,"value":"#### Sequential (Multi-Hue)\n##### `schemeGrBu[k] / interpolateGrBu(t)`","pinned":false,"hidden":false,"mode":"md"},{"id":513,"value":"schemeGrBu = [\n ...new Array(3),\n [main.grey[\"200\"], main.blue[\"500\"], main.blue[\"800\"]],\n [main.grey[\"200\"], main.blue[\"400\"], main.blue[\"700\"], main.blue[\"900\"]],\n [\n main.grey[\"200\"],\n main.grey[\"300\"],\n main.blue[\"400\"],\n main.blue[\"700\"],\n main.blue[\"900\"]\n ],\n [\n main.grey[\"200\"],\n main.grey[\"300\"],\n main.blue[\"400\"],\n main.blue[\"600\"],\n main.blue[\"800\"],\n main.blue[\"900\"]\n ],\n [\n main.grey[\"200\"],\n main.grey[\"300\"],\n main.grey[\"400\"],\n main.blue[\"500\"],\n main.blue[\"600\"],\n main.blue[\"800\"],\n main.blue[\"900\"]\n ],\n [\n main.grey[\"200\"],\n main.grey[\"300\"],\n main.grey[\"400\"],\n main.blue[\"500\"],\n main.blue[\"600\"],\n main.blue[\"700\"],\n main.blue[\"800\"],\n main.blue[\"900\"]\n ],\n [\n main.grey[\"100\"],\n main.grey[\"200\"],\n main.grey[\"300\"],\n main.blue[\"400\"],\n main.blue[\"500\"],\n main.blue[\"600\"],\n main.blue[\"700\"],\n main.blue[\"800\"],\n main.blue[\"900\"]\n ]\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":710,"value":"interpolateGrBu = d3.interpolateRgbBasis(schemeGrBu[8])","pinned":false,"hidden":false,"mode":"ojs"},{"id":518,"value":"schemeArrayHtml(schemeGrBu, 'schemeGrBu')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1037,"value":"##### `schemeGrRe[k] / interpolateGrRe(t)`","pinned":false,"hidden":false,"mode":"md"},{"id":1043,"value":"schemeGrRe = [\n ...new Array(3),\n [main.grey[\"200\"], main.red[\"500\"], main.red[\"800\"]],\n [main.grey[\"200\"], main.red[\"400\"], main.red[\"700\"], main.red[\"900\"]],\n [\n main.grey[\"200\"],\n main.grey[\"300\"],\n main.red[\"400\"],\n main.red[\"700\"],\n main.red[\"900\"]\n ],\n [\n main.grey[\"200\"],\n main.grey[\"300\"],\n main.red[\"400\"],\n main.red[\"600\"],\n main.red[\"800\"],\n main.red[\"900\"]\n ],\n [\n main.grey[\"100\"],\n main.grey[\"200\"],\n main.grey[\"300\"],\n main.red[\"500\"],\n main.red[\"600\"],\n main.red[\"800\"],\n main.red[\"900\"]\n ],\n [\n main.grey[\"100\"],\n main.grey[\"200\"],\n main.grey[\"300\"],\n main.red[\"500\"],\n main.red[\"600\"],\n main.red[\"700\"],\n main.red[\"800\"],\n main.red[\"900\"]\n ],\n [\n main.grey[\"100\"],\n main.grey[\"200\"],\n main.grey[\"300\"],\n main.red[\"400\"],\n main.red[\"500\"],\n main.red[\"600\"],\n main.red[\"700\"],\n main.red[\"800\"],\n main.red[\"900\"]\n ]\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1049,"value":"interpolateGrRe = d3.interpolateRgbBasis(schemeGrRe[8])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1045,"value":"schemeArrayHtml(schemeGrRe, 'schemeGrRe')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1040,"value":"##### `schemeGrGn[k] / interpolateGrGn(t)`","pinned":false,"hidden":false,"mode":"md"},{"id":1054,"value":"schemeGrGn = [\n ...new Array(3),\n [main.grey[\"200\"], main.green[\"500\"], main.green[\"800\"]],\n [main.grey[\"200\"], main.green[\"400\"], main.green[\"700\"], main.green[\"900\"]],\n [\n main.grey[\"200\"],\n main.grey[\"300\"],\n main.green[\"400\"],\n main.green[\"700\"],\n main.green[\"900\"]\n ],\n [\n main.grey[\"200\"],\n main.grey[\"300\"],\n main.green[\"400\"],\n main.green[\"600\"],\n main.green[\"800\"],\n main.green[\"900\"]\n ],\n [\n main.grey[\"100\"],\n main.grey[\"200\"],\n main.grey[\"300\"],\n main.green[\"500\"],\n main.green[\"600\"],\n main.green[\"800\"],\n main.green[\"900\"]\n ],\n [\n main.grey[\"100\"],\n main.grey[\"200\"],\n main.grey[\"300\"],\n main.green[\"500\"],\n main.green[\"600\"],\n main.green[\"700\"],\n main.green[\"800\"],\n main.green[\"900\"]\n ],\n [\n main.grey[\"100\"],\n main.grey[\"200\"],\n main.grey[\"300\"],\n main.green[\"400\"],\n main.green[\"500\"],\n main.green[\"600\"],\n main.green[\"700\"],\n main.green[\"800\"],\n main.green[\"900\"]\n ]\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1059,"value":"interpolateGrGn = d3.interpolateRgbBasis(schemeGrGn[8])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1056,"value":"schemeArrayHtml(schemeGrGn, 'schemeGrGn')","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"### Reference colors\n\nThe colors are made based on these colors from [ADB branding toolkit](https://observablehq.com/@adb/brand).","pinned":false,"hidden":false,"mode":"md"},{"id":73,"value":"htl.html`

\n ${Object.entries(refColors).map(([k, v]) => swatch(v, { label: k }))}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"A suitable grey is picked.","pinned":false,"hidden":false,"mode":"md"},{"id":237,"value":"htl.html`\n

${swatch(\"#64748b\", {\n label: \"TW Slate 500\"\n})}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"refColors = ({\n \"main 700\": mainColors[\"700\"],\n \"accent 600\": accentColors[\"600\"],\n \"accent 300\": accentColors[\"300\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1075,"value":"## Typography\n","pinned":false,"hidden":false,"mode":"md"},{"id":905,"value":"### Font Family\n\nThe font stack is ‘SF Pro, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif.’","pinned":false,"hidden":false,"mode":"md"},{"id":906,"value":"// From adb.org\nfontFamily = `-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,sans-serif,apple c emoji,segoe ui emoji,segoe ui symbol`","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":43,"value":"## Helpers","pinned":false,"hidden":false,"mode":"md"},{"id":1100,"value":"mainColors = ({\n \"900\": \"#007DB7\", //rgb(0,125,183)\n \"800\": \"#0088C7\", //rgb(0,136,199)\n \"700\": \"#0099D8\", //rgb(0,153,216)\n \"600\": \"#00A1CB\", //rgb(0,161,203)\n \"500\": \"#009FD6\", //rgb(0,159,214)\n \"400\": \"#41BEE8\", //rgb(65,190,232)\n \"300\": \"#68C5EA\", //rgb(104,197,234)\n \"200\": \"#6DBCE3\", //rgb(109,188,227)\n \"100\": \"#6DCFF6\", //rgb(109,207,246)\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1102,"value":"accentColors = ({\n \"900\": \"#00A5D2\", // rgb(0,165,210)\n \"800\": \"#00B6C9\", // rgb(0,182,201)\n \"700\": \"#63CCEC\", // rgb(99,204,236)\n \"600\": \"#8DC63F\", // rgb(141,198,63)\n \"500\": \"#C8DA2B\", // rgb(200,218,43)\n \"400\": \"#F2E600\", // rgb(242,230,0)\n \"300\": \"#E9532B\", // rgb(233,83,43)\n \"200\": \"#F57F29\", // rgb(245,127,41)\n \"100\": \"#FDB515\", // rgb(253,181,21)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"function swatch(color, { label = color, width = '90px', element = 'div' } = {}) {\n return html`<${element} style=\"width: ${width}; padding-bottom: 0.5rem;\">\n

${label}

\n ${color !== label ? html`

${color}

`: \"\"}\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"swatch(\"#0099D8\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"swatch(\"#0099D8\", {label: \"main 700\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"function generateSchemes(colorObj) {\n return [\n ...new Array(3),\n [colorObj[\"400\"], colorObj[\"700\"], colorObj[\"900\"]],\n [colorObj[\"400\"], colorObj[\"600\"], colorObj[\"800\"], colorObj[\"900\"]],\n [\n colorObj[\"400\"],\n colorObj[\"500\"],\n colorObj[\"700\"],\n colorObj[\"800\"],\n colorObj[\"900\"]\n ],\n [\n colorObj[\"400\"],\n colorObj[\"500\"],\n colorObj[\"600\"],\n colorObj[\"700\"],\n colorObj[\"800\"],\n colorObj[\"900\"]\n ]\n ];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"schemeArrayHtml = (arr, variableName) =>\n htl.html`${arr.map((o, i) =>\n o !== undefined\n ? htl.html`

`${variableName}[${i}]`

${schemeHtml(o)}`\n : \"\"\n )}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"schemeHtml = (arr) => {\n if (arr === undefined) return;\n\n return htl.html`

${arr.map(\n swatch\n )}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":666,"value":"interpolateColorFn = (fn, n = 50) => d3.range(n).map(i => d3.rgb(fn(i / (n - 1))).hex())","pinned":false,"hidden":false,"mode":"ojs"},{"id":735,"value":"### All colors\n```\n${allColorCodes.map(x => `${x}\\n`)}\n```","pinned":false,"hidden":false,"mode":"md"},{"id":723,"value":"allColorCodes = [main, accent].flatMap(getStringsFromObject)","pinned":false,"hidden":false,"mode":"ojs"},{"id":725,"value":"function getStringsFromObject (x) {\n if (typeof x === 'string') return x;\n\n if (typeof x === 'object') {\n return Object.entries(x).flatMap(([k, v]) => getStringsFromObject(v))\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":893,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":245,"value":"import {toc} from \"@saneef/indented-toc\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"## Credits and references","pinned":false,"hidden":false,"mode":"md"},{"id":120,"value":"- Main colors are generated using [colorcolor.in](${ccUrls[0]})\n- [A detailed guide to colors in data vis style guides - Datawrapper Blog](https://blog.datawrapper.de/colors-for-data-vis-style-guides/)","pinned":false,"hidden":false,"mode":"md"},{"id":212,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1086,"value":"// To apply base styles when the notebook is downloaded/exported\nsubstratum({invalidation})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1081,"value":"import {substratum} from \"@categorise/substratum\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}