2e:null 2f:["$","title",null,{"children":"D3JS - Boilerplates - Interactive part | David B. | Observable"}] 34:[] 32:{"id":"b034e03a71b9465e","slug":"d3js-boilerplates-interactive-part","title":"D3JS - Boilerplates - Interactive part","thumbnail":"32a664d30d056d377a049ab6cfa2ad637b208126941a5e5e0da0f89eee31a6ad","access_level":"public","create_time":"$D2019-03-01T11:10:03.413Z","update_time":"$D2019-04-10T07:20:15.559Z","view_time":null,"first_public_time":"$D2019-04-10T07:21:26.063Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"fcd7e4188e1df970","login":"bumbeishvili","name":"David B.","avatar_url":"https://avatars-next.observableusercontent.com/038bfbb4eaa1c1217d83efed9948fd774126f3fa01dcce32e347fd0fd7c960d7","tier":"starter_2024"},"version":158,"publish_version":158,"role":null,"authored":false,"authors":[{"type":"individual","id":"5e0ddde49c696e13","login":"bumbeishvili","name":"David B.","avatar_url":"https://avatars-next.observableusercontent.com/038bfbb4eaa1c1217d83efed9948fd774126f3fa01dcce32e347fd0fd7c960d7","tier":null}],"members":[{"type":"individual","id":"5e0ddde49c696e13","login":"bumbeishvili","name":"David B.","avatar_url":"https://avatars-next.observableusercontent.com/038bfbb4eaa1c1217d83efed9948fd774126f3fa01dcce32e347fd0fd7c960d7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"beac97df7de1954a","slug":"work-components","title":"Work Utils","owner":{"id":"fcd7e4188e1df970","login":"bumbeishvili","name":"David B."}},"type":"notebook","body":{"title":"D3JS - Boilerplates - Interactive part","cells":[{"id":0,"value":"md`# D3JS - Boilerplates - Interactive part`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`This notebook will serve as interactive docs for https://github.com/bumbeishvili/d3js-boilerplates`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"md`## Additional content and helpers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"md`\n1. [Breadcrumbs](https://github.com/bumbeishvili/d3-breadcrumbs)\n2. [Tooltip](https://bumbeishvili.github.io/d3-tooltip/)\n3. [Conventions](https://github.com/bumbeishvili/d3-coding-conventions)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"md`### Other inner links and contens`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"md`\n### Colors\n1. [Metronic dark color palette](#metronic)\n1. [Multiple colors interpolation](#colorsInterpolation)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"md`## Colors`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"metronic = md`### Metronic Colors`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"METRONIC_DARK_COLORS = [\"#c5bf66\",\"#BF55EC\",\"#f36a5a\",\"#EF4836\",\"#9A12B3\",\"#c8d046\",\"#E26A6A\",\n \"#32c5d2\",\"#8877a9\",\"#ACB5C3\",\"#e35b5a\",\"#2f353b\",\"#e43a45\",\"#f2784b\",\n \"#796799\",\"#26C281\",\"#555555\",\"#525e64\",\"#8E44AD\",\"#4c87b9\",\"#bfcad1\",\n \"#67809F\",\"#578ebe\",\"#c5b96b\",\"#4DB3A2\",\"#e7505a\",\"#D91E18\",\"#1BBC9B\",\n \"#3faba4\",\"#d05454\",\"#8775a7\",\"#8775a7\",\"#8E44AD\",\"#f3c200\",\"#4B77BE\",\n \"#c49f47\",\"#44b6ae\",\"#36D7B7\",\"#94A0B2\",\"#9B59B6\",\"#E08283\",\"#3598dc\",\n \"#F4D03F\",\"#F7CA18\",\"#22313F\",\"#2ab4c0\",\"#5e738b\",\"#BFBFBF\",\"#2C3E50\",\n \"#5C9BD1\",\"#95A5A6\",\"#E87E04\",\"#29b4b6\",\"#1BA39C\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"html`\n

\n${METRONIC_DARK_COLORS.map(c=>{\n return `

${c}

`\n}).join('')}\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"colorsInterpolation = md`\n

\n### Multiple colors interpolation\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"color = d3.interpolateRgbBasis([\"red\", \"yellow\",\"green\"]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"color(0.5) // yellow","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"colorValues = d3.range(100)\n .map((d,i,arr)=>d/arr.length)\n .map(d=>color(d))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"html`\n

\n${colorValues.map(c=>{\n return `

`\n}).join('')}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"md`## Libs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"