2d:null 2e:["$","title",null,{"children":"Sequential Color Scales and Fills | murph22 | Observable"}] 33:T403,createLegendCells = (colorScale, scaleTitle = "Legend") => { let colorRange = colorScale.range().map(function(d,i, array){ let currentRange = colorScale.invertExtent(d).map(d3.format('.2d')); let currentRangeText = `${currentRange[0]}% to ${currentRange[1]}%`; i == 0 ? currentRangeText = `less than ${currentRange[1]}%` : i == array.length - 1 ? currentRangeText = `greater than ${currentRange[0]}%` : currentRangeText = currentRangeText; return {color: d, range: currentRangeText}; }); let fontColor = "#4b4b4b"; return svg`${scaleTitle}${colorRange.map((d, i)=>`${d.range}`)}`; }34:[] 31:{"id":"49890ee80af5a4e0","slug":"sequential-color-scales-and-fills","title":"Sequential Color Scales and Fills","thumbnail":"720a96f5c99bcc093ea2c96a8af9ed2fbfd4df313b79a940d881d4b87527ee50","access_level":"public","create_time":"$D2019-04-26T17:46:13.094Z","update_time":"$D2019-04-26T18:34:35.820Z","view_time":null,"first_public_time":"$D2019-05-02T19:03:05.250Z","has_unpublished_edits":null,"fork":{"id":"588bdd97a4eb93c1","slug":"sequential-color-scales-and-fills","title":"Sequential Color Scales and Fills","owner":{"id":"f8d6f060b3846f60","login":"gallowayevan","name":"Evan Galloway"}},"stars":0,"starred":false,"owner":{"type":"team","id":"354b799ff9df33e9","login":"murph22","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3d39737c116c491cea7a2f730e89dca294c8c307f7cb3fe4951969cbc9588d00","tier":"starter_2024"},"version":584,"publish_version":584,"role":null,"authored":false,"authors":[{"type":"individual","id":"9245217c69f4d727","login":"murph22","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3d39737c116c491cea7a2f730e89dca294c8c307f7cb3fe4951969cbc9588d00","tier":null}],"members":[{"type":"individual","id":"9245217c69f4d727","login":"murph22","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3d39737c116c491cea7a2f730e89dca294c8c307f7cb3fe4951969cbc9588d00","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Sequential Color Scales and Fills","cells":[{"id":0,"value":"md`# Sequential Color Scales and Fills\n## North Carolina Map and Density Plot\nI've been curious about continuous, sequential color scales for maps and density plots, particularly the excellent pallettes by Stéfan van der Walt and Nathaniel Smith (e.g., viridis). \n\nIn any case, here is a simple map of North Carolina (data from https://nchealthworkforce.unc.edu/). The default color scale is viridis. Note that you can hover on a county to get more details about that county.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"map = {\n const width = 960;\n const height = 600;\n \n const rateFormat = d3.format('.2r');\n \n const projection = d3\n .geoAlbers()\n .rotate([0, 62, 0])\n .fitSize([width-40, height], nc);\n \n const path = d3.geoPath(projection);\n \n const svg = d3.select(DOM.svg(width, height))\n .style(\"width\", \"100%\")\n .style(\"height\", \"auto\"); \n \n svg.append(\"rect\")\n .attr(\"width\", \"100%\")\n .attr(\"height\", \"100%\")\n .attr(\"fill\", backgroundColor);\n \n \n svg.append(\"g\")\n .selectAll(\"path\")\n .data(nc.features)\n .enter()\n .append(\"path\")\n .attr(\"d\", path)\n \t\t.attr(\"transform\", \"translate(20, 0)\")\n \t\t.attr(\"class\", \"counties\")\n \t\t.style(\"fill\", d => {const rate = (dataMap.get(d.properties.county)|| {}).total || 0; \n \t\t\t\treturn rate == 0 ? \"#fff\" : color(rate)})\n \t\t.attr(\"stroke\", backgroundColor)\n \t.style(\"stroke-width\", 2);\n return svg.node();\n \n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"md `Select a different scale here:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"md `The color function is the color scale for the map.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"color = {\n\n \tconst interpolator = d3[\"interpolateOrRd\"];\n\tconst scale = d3.scaleSequentialSymlog(interpolator)\n \t\t\t\t\t\t\t\t.domain([0,Math.max(...data.map(d=>d.total))]);\n \n \t\t\t\t\t\treturn scale;\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"md `Play around with the background color here. I am avoiding white mostly to enable users to see the counties with zero physicians.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"viewof backgroundColor = html ``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"{\n const height = 50;\n const svg = d3.select(DOM.svg(width, height))\n .style(\"width\", \"100%\")\n .style(\"height\", \"auto\");\n\n svg.node().appendChild(gradientDef);\n \n svg.append(\"rect\")\n .attr(\"width\", \"100%\")\n .attr(\"height\", \"100%\")\n .attr(\"fill\", \"url(#linear-gradient)\");\n \n return svg.node();\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"md `And here you can play around with the number of stops for the gradients.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"viewof colorstops = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"colorstops","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"gradientDef = {\n //https://www.visualcinnamon.com/2016/05/smooth-color-legend-d3-svg-gradient.html \n const interpolator = d3[\"interpolate\" + colorScalePicker];\n const svg = d3.select(DOM.svg())\n .style(\"width\", \"100%\")\n .style(\"height\", \"auto\");\n\n const defs = svg.append(\"defs\");\n const linearGradient = defs.append(\"linearGradient\")\n .attr(\"id\", \"linear-gradient\")\n .attr(\"x1\", \"0%\")\n .attr(\"y1\", \"0%\")\n .attr(\"x2\", \"100%\")\n .attr(\"y2\", \"0%\");;\n\nlinearGradient.selectAll(\"stop\") \n .data(d3.range(colorstops).map(function(d) { return d/(colorstops-1); })) \n .enter().append(\"stop\")\n .attr(\"offset\", function(d,i) { return d; })\n .attr(\"stop-color\", function(d, i) { return interpolator(1 - d); });\n return svg.node().querySelector(\"defs\");\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"import {color as colorPicker} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"data = d3.csvParse(`county,total\nAlamance,7\nBladen,1\nBuncombe,1\nCabarrus,2\nCarteret,1\nCatawba,1\nChatham,2\nCraven,1\nCumberland,6\nDavidson,1\nDuplin,1\nDurham,26\nEdgecombe,2\nForsyth,6\nFranklin,1\nGaston,1\nGranville,1\nGuilford,20\nHarnett,2\nIredell,1\nJackson,2\nJohnston,10\nLee,2\nLincoln,1\nMartin,2\nMcDowell,1\nMecklenburg,8\nMoore,3\nNash,1\nNew Hanover,7\nOnslow,4\nOrange,17\nPasquotank,2\nPitt,7\nRandolph,1\nRichmond,1\nRobeson,1\nRowan,3\nStanly,2\nSurry,1\nVance,1\nWake,206\nWatauga,2\nWayne,3\nWilson,2\nNorth Carolina,394\n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"dataMap = new Map(data.map(d=> [d.county, {total:d.total}]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":522,"value":"nc.features.map(f=>f.properties.county)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"nc = d3.json(\"https://cdn.rawgit.com/gallowayevan/1b6056fdccb0aa0d860cbdee2bdf7597/raw/a7a6f4d80d077e74152e6c3196abdec9b899eb76/ncmap.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":562,"value":"import {rasterize} from \"@mbostock/saving-svg\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":565,"value":"DOM.download(() => rasterize(map), undefined, \"Save as PNG\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"