2c:["$","title",null,{"children":"dicopal library | Nicolas Lambert | Observable"}] 31:[{"id":"23867eb9990855a2dc59a390a2182e7357ef682740b4028e1f0fefc089c55afd7468b15a57b39a1c40c161df2e170e642413ea5b0e4d2322848adc073fdcad1f","href":"https://static.observableusercontent.com/files/23867eb9990855a2dc59a390a2182e7357ef682740b4028e1f0fefc089c55afd7468b15a57b39a1c40c161df2e170e642413ea5b0e4d2322848adc073fdcad1f","name":"file-20170918-8245-fvelv2.webp","type":"image/webp","lastModified":1688729788588.059,"size":57596},{"id":"c67952fd5ccce42edcde2308ae868da716a8b9d378a5e1b97bb662f377b26fbc17add489d46c7c98e42766b369b93b6d01a713ef7b23106b747e65c5526b7dca","href":"https://static.observableusercontent.com/files/c67952fd5ccce42edcde2308ae868da716a8b9d378a5e1b97bb662f377b26fbc17add489d46c7c98e42766b369b93b6d01a713ef7b23106b747e65c5526b7dca","name":"countries.json","type":"application/json","lastModified":1688733331211.108,"size":276863}] 2f:{"id":"c58257f56f5be9e5","slug":"dicopal-library","title":"dicopal library","thumbnail":"baef6ba74831e15f80c79e8b6b07b939ca5224f89d4ad566deab196c5f9fba28","access_level":"public","create_time":"$D2023-07-07T07:26:23.265Z","update_time":"$D2026-04-16T08:02:38.577Z","view_time":null,"first_public_time":"$D2023-07-07T12:48:04.326Z","fork":false,"stars":17,"starred":false,"owner":{"type":"team","id":"6457aadd156df119","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":"starter_2024"},"version":1077,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"01f8081399df8778","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":null}],"members":[{"type":"individual","id":"01f8081399df8778","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"dicopal library","cells":[{"id":0,"value":"# `dicopal` library","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":815,"value":"file201709188245Fvelv2 = FileAttachment(\"file-20170918-8245-fvelv2.webp\").image(\n { width: 700 }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":813,"value":"**`dicopal`** is a new JavaScript library that provides hundreds of color palettes. It is based on Colorbrewer2, CARTOColors, cmocean, Matplotlib, MyCarta, Tableau, (CUD) palette and many others...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":809,"value":"- **`npm`** - https://npmjs.com/package/dicopal\n- **`github`** - https://github.com/riatelab/dicopal.js \n- **`notebook`** - https://observablehq.com/@mthh/hello-dicopal","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":821,"value":"To load the library","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5,"value":"dicopal = require(\"dicopal@0.8.1\")","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":824,"value":"## How it works?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":826,"value":"To find out how this library works, take a look at [this notebook](https://observablehq.com/@mthh/hello-dicopal). Here, I'm just suggesting a way of retrieving the colors from the various palettes. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":31,"value":"viewof nb = Inputs.range(\n d3.extent(dicopal.getPalettes().map((d) => d.number)),\n {\n label: \"Number of colors\",\n step: 1,\n value: 7\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":40,"value":"viewof type = Inputs.checkbox(\n Array.from(new Set(dicopal.getPalettes().map((d) => d.type))),\n {\n label: \"Type\",\n value: [\"sequential\"]\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":62,"value":"viewof provider = Inputs.checkbox(\n Array.from(new Set(dicopal.getPalettes().map((d) => d.provider))),\n {\n label: \"Providers\",\n value: Array.from(new Set(dicopal.getPalettes().map((d) => d.provider)))\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":75,"value":"viewof reverse = Inputs.toggle({ label: \"Reverse\", value: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":103,"value":"view = {\n const doc = [];\n dicopal\n .getPalettes({ number: nb })\n .filter((d) => type.includes(d.type) && provider.includes(d.provider))\n .forEach((d) => {\n let col = reverse ? [...d.colors].reverse() : d.colors;\n\n let str = JSON.stringify(JSON.stringify(col));\n doc.push(\n `${d.name} (${d.provider}) `\n );\n\n doc.push(`${drawpal(col)}`);\n });\n return html`${doc.join(\"
\")}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":878,"value":"## Use `dicopal` with [`bertin`](https://observablehq.com/@neocartocnrs/hello-bertin-js?collection=@neocartocnrs/bertin)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":880,"value":"viewof nbreaks = Inputs.range(\n d3.extent(dicopal.getPalettes().map((d) => d.number)),\n {\n label: \"Number of colors\",\n step: 1,\n value: 7\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":900,"value":"viewof palette = Inputs.select(\n new Map(\n dicopal\n .getPalettes({ number: nbreaks })\n .filter((d) => [\"diverging\", \"sequential\"].includes(d.type))\n .map((d) => [`${d.name} (${d.provider}) - ${d.type} `, d.colors])\n ),\n { label: \"Palette\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":908,"value":"world = FileAttachment(\"countries.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":912,"value":"choro = bertin.draw({\n params: { projection: \"Eckert3\" },\n layers: [\n { type: \"header\", text: \"A Choropleth Map\" },\n {\n type: \"layer\",\n geojson: world,\n fill: {\n type: \"choro\",\n values: \"gdppc\",\n nbreaks: nbreaks,\n method: \"quantile\",\n colors: palette,\n leg_round: -2,\n leg_title: `GDP per inh\n(in $)`,\n leg_x: 100,\n leg_y: 200\n },\n\n tooltip: [\"$name\", \"$gdppc\", \"(current US$)\"]\n },\n { type: \"graticule\" },\n { type: \"outline\" }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":942,"value":"viewof palettequali = Inputs.select(\n new Map(\n dicopal\n .getPalettes({\n number: new Set(world.features.map((d) => d.properties.region)).size\n })\n .filter((d) => d.type == \"qualitative\")\n .map((d) => [`${d.name} (${d.provider})`, d.colors])\n ),\n { label: \"Palette\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1074,"value":"dicopal\n .getPalettes({\n number: new Set(world.features.map((d) => d.properties.region)).size\n })\n .filter((d) => d.type == \"qualitative\")\n .map((d) => d.name)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":938,"value":"typo = bertin.draw({\n params: { projection: \"Eckert3\" },\n layers: [\n { type: \"header\", text: \"A Typology\" },\n {\n type: \"layer\",\n geojson: world,\n fill: {\n type: \"typo\",\n values: \"region\",\n strokeWidth: 0.3,\n colors: palettequali,\n leg_title: `The\n Continents`,\n leg_x: 55,\n leg_y: 180\n },\n\n tooltip: [\"$region\", \"$NAMEen\"]\n },\n { type: \"graticule\" },\n { type: \"outline\" }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":925,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":910,"value":"bertin = require(\"bertin\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":913,"value":"countries = FileAttachment(\"countries.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":540,"value":"boxsize = width / d3.max(dicopal.getPalettes().map((d) => d.number))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":459,"value":"drawpal = function (col) {\n let str = \"\";\n col.forEach((d) => {\n str += ``;\n });\n str += \"
\";\n col.forEach((d) => {\n str += `${d}`;\n });\n return str;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1016,"value":"[\n ...new Set(\n dicopal\n .getPalettes()\n .filter((d) => type.includes(d.type) && provider.includes(d.provider))\n .map((d) => d.name)\n )\n].join('\", \"')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1035,"value":"[\n ...new Set(\n dicopal\n .getPalettes({ number: 9 })\n .filter((d) => d.type == \"qualitative\")\n .map((d) => d.name)\n )\n].join('\", \"')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body" 2b:E{"digest":"NEXT_REDIRECT;replace;/@neocarto/dicopal-library;307;"}