2d:null 2e:["$","title",null,{"children":"Cartocolor schemes | Matteo Abrate | Observable"}] 33:[] 31:{"id":"e99c55f1bc4e0325","slug":"cartocolor-schemes","title":"Cartocolor schemes","thumbnail":"29dcff91a07ef92a46b109314f97b4bddff7725d0cefd87a9b9d9ba5509f2b65","access_level":"public","create_time":"$D2021-03-11T09:34:11.755Z","update_time":"$D2021-03-12T16:25:36.520Z","view_time":null,"first_public_time":"$D2021-03-11T10:17:13.672Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"26c2ccc018e1ea02","login":"nitaku","name":"Matteo Abrate","avatar_url":"https://avatars-next.observableusercontent.com/568352e22522e05f4532b44f5546074bf3185b6cc765329aa211439f9cc2be4e","tier":"starter_2024"},"version":195,"publish_version":195,"role":null,"authored":false,"authors":[{"type":"individual","id":"aba92c35f7e903ce","login":"nitaku","name":"Matteo Abrate","avatar_url":"https://avatars-next.observableusercontent.com/568352e22522e05f4532b44f5546074bf3185b6cc765329aa211439f9cc2be4e","tier":null}],"members":[{"type":"individual","id":"aba92c35f7e903ce","login":"nitaku","name":"Matteo Abrate","avatar_url":"https://avatars-next.observableusercontent.com/568352e22522e05f4532b44f5546074bf3185b6cc765329aa211439f9cc2be4e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"a284502b7fc58ea4","slug":"colors","title":"Colors","owner":{"id":"26c2ccc018e1ea02","login":"nitaku","name":"Matteo Abrate"}},"type":"notebook","body":{"title":"Cartocolor schemes","cells":[{"id":0,"value":"md`# Cartocolor schemes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"md`A library of color schemes from https://carto.com/carto-colors/ (GitHub: https://github.com/CartoDB/cartocolor). Click on a scheme to copy its colors into the clipboard.\n\nOriginal license: [CCBY 3.0](https://creativecommons.org/licenses/by/3.0/us/)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"viewof steps = Range([2, 12], {value: 7, step: 1, label: \"Steps\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"viewof reversed = Toggle({label: \"Reversed\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"html`

\n${\nschemes_by_tag\n .filter(d => d.schemes.length > 0)\n .map(tag_group => `

${tag_group.tag}

\n ${\n tag_group.schemes.map(s => {\n let colors = [...s.scheme[steps]]\n if(reversed) {\n colors.reverse()\n }\n return swatch({library_name: 'cartocolor', name: s.name, colors, steps, reversed}).outerHTML\n }).join('')\n }\n

`\n)}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"md`These schemes are available as a npm package. You can require it into your notebook like this:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"cartocolor = require('https://bundle.run/cartocolor@4.0.2')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"md`The package includes schemes from [Colorbrewer](https://colorbrewer2.org/).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"tags = Array.from(new Set([].concat(...Object.keys(cartocolor).map(k => cartocolor[k].tags || [])) ) )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"schemes_by_tag = tags.map(tag => ({\n tag,\n schemes: Object.keys(cartocolor)\n .filter(k => cartocolor[k].tags && cartocolor[k].tags.includes(tag) && cartocolor[k][steps])\n .map(k => ({name: k, scheme: cartocolor[k]}))\n })\n).concat({\n tag: 'uncategorized',\n schemes: Object.keys(cartocolor)\n .filter(k => cartocolor[k].tags == undefined && cartocolor[k][steps])\n .map(k => ({name: k, scheme: cartocolor[k]}))\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"swatch = (scale) => Object.assign( svg``, {onclick: () => pbcopy(scale.colors.map(s => `'${s}'`).join(','))})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"import {Range, Toggle} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"import {pbcopy} from \"@mbostock/pbcopy\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"