31:T9f5,chart = { const path = d3.geoPath() const height = width * 0.67 const svg = DOM.svg(width, height) // defs - for watercolor const defs = d3.select(svg) .attr("class", "watercolor") .append("defs") const splotch = DOM.uid("splotch") defs.append("filter") .attr("id", splotch.id) .html( `${noise ? ` ` : ``} { d.filterUid = DOM.uid("filter" + i) }) counties.forEach(function(article) { var result = dataset.filter(function(brand) { return brand.id === article.id; }); article.rate = (result[0] !== undefined) ? result[0].rate : null; article.name = (result[0] !== undefined) ? result[0].rate : null; }); const groups = d3.select(svg) .selectAll(".county") .data(counties) .enter() .append("g") .attr("class", "county") .attr("filter", splotch) const paths = groups.append("path") .attr("d", path) .attr("fill", d => colorScale(d.rate)) .attr("stroke", d => colorScale(d.rate)) .attr("stroke-width", 1) .attr("filter", d => d.filterUid) .append("title") .text(d => `${d.properties.name}, ${states.get(d.id.slice(0, 2)).name} ${format(data.get(d.id))}`); defs.selectAll(".county") .data(counties) .enter() .append("filter") .attr("id", d => d.filterUid.id) .html( d => ` ` ) const legend_on_chart = d3.select(svg).append("g") .attr("transform", "translate(600,40)") .call(legend); d3.select(svg).append("path") .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "#CD7100") .attr("stroke-width", 0.5) .attr("stroke-linejoin", "round") .attr("d", path) return svg }32:[] 2f:{"title":"Unemployment rate by county BUT IN WATERCOLOR","cells":[{"id":0,"value":"md`# Unemployment rate by county BUT IN WATERCOLOR`","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"md`Data: [Bureau of Labor Statistics](http://www.bls.gov/lau/#tables) (August 2016)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"md`A recreation of [Mike Bostock's Choropleth map](https://observablehq.com/@d3/choropleth) using [Noah Veltman's watercolors](https://observablehq.com/@veltman/watercolor)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"viewof deviation = slider({\n min: 0,\n max: 5,\n step: 0.5,\n value: 1,\n title: \"Shape deviation\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"viewof noise = slider({\n min: 0,\n max: 0.03,\n value: 0.01,\n precision: 3,\n title: \"Fractal noise\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"us = d3.json(\"https://cdn.jsdelivr.net/npm/us-atlas@2/us/10m.json\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"states = new Map(us.objects.states.geometries.map(d => [d.id, d.properties]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"format = d => `${d}%`","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"color = d3.scaleQuantize([1, 10], colorScale.range())","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"data = Object.assign(new Map(await d3.csv(\"https://gist.githubusercontent.com/mbostock/682b782da9e1448e6eaac00bb3d3cd9d/raw/0e0a145ded8b1672701dc8b2a702e51c648312d4/unemployment.csv\", ({id, rate}) => [id, +rate])), {title: \"Unemployment rate (%)\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":57,"value":"dataset = await d3.csv(\"https://gist.githubusercontent.com/mbostock/682b782da9e1448e6eaac00bb3d3cd9d/raw/0e0a145ded8b1672701dc8b2a702e51c648312d4/unemployment.csv\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":83,"value":"legend = g => {\n const x = d3.scaleLinear()\n .domain(d3.extent(color.domain()))\n .rangeRound([0, 260]);\n\n g.selectAll(\"rect\")\n .data(color.range().map(d => color.invertExtent(d)))\n .join(\"rect\")\n .attr(\"height\", 8)\n .attr(\"x\", d => x(d[0]))\n .attr(\"width\", d => x(d[1]) - x(d[0]))\n .attr(\"fill\", d => color(d[0]));\n\n g.append(\"text\")\n .attr(\"x\", x.range()[0])\n .attr(\"y\", -6)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(data.title);\n\n g.call(d3.axisBottom(x)\n .tickSize(13)\n .tickFormat(d => d)\n .tickValues(color.range().slice(1).map(d => color.invertExtent(d)[0])))\n .select(\".domain\")\n .remove();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"xAccessor = d => d.rate","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"colorScale = d3.scaleLinear()\n .domain([0, d3.max(d3.extent(dataset, xAccessor)) / 9])\n .range(d3.schemeOranges[9])","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":46,"value":"blurScale = d3\n .scaleLinear()\n .domain([0, 2000])\n .range([deviation, deviation * 3.5])\n .clamp(true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}