30:T979,watecolor_globe = { const svg = DOM.svg(960,500); const defs = d3 .select(svg) .attr("class", "watercolor") .append("defs"); const splotch = DOM.uid("splotch"); const path = d3.geoPath().projection(projection); const sphere_bkg = d3.select(svg).append("path") .datum(sphere) .attr("class", ".state") .attr("d", path) .attr("fill", oceans) .attr("stroke", oceans) .attr("stroke-width", 1) .style("opacity", 0.1) .attr("filter", splotch) defs .append("filter") .attr("id", splotch.id) .html( `${ noise ? ` ` : `` }` ); // Generate Observable-friendly IDs land.features.forEach((d, i) => { d.filterUid = DOM.uid("filter" + i); }); const groups = d3 .select(svg) .selectAll(".state") .data(land.features) .enter() .append("g") .attr("class", "state") .attr("filter", splotch); const paths = groups .append("path") .attr("d", path) .attr("fill", landColor) .attr("stroke", outlines) .attr("stroke-width", strokeWidth) .attr("filter", d => d.filterUid) defs .selectAll(".state") .data(land.features) .enter() .append("filter") .attr("id", d => d.filterUid.id) .html( d => ` ` ); const sf_cirlce = d3.select(svg) .append("path") .datum(sanFrancisco) .attr("d", path) .attr("fill", "#dc0d7a") .attr("stroke", "#dc0d7a") .attr("stroke-width", 2.5) .style("opacity", 0.85) .attr("filter", splotch) return svg; }31:[] 2e:{"title":"Watercolor world","cells":[{"id":0,"value":"md`# Watercolor world`","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"viewof oceans = color({\n value: \"#19267C\",\n description: \"Color of the oceans\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"viewof outlines = color({\n value: \"#19267C\",\n description: \"Color of the outlines\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"viewof landColor = color({\n value: \"#CD7100\",\n description: \"Color of the land\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"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":156,"value":"viewof strokeWidth = slider({\n min: 0,\n max: 8,\n step: 0.1,\n value: 3.5,\n title: \"Stroke width\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"viewof blur = slider({\n min: 0,\n max: 5,\n step: 0.1,\n value: 0.8,\n title: \"Outer blur amount\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"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":177,"value":"viewof long = slider({\n min: 0,\n max: 360,\n step: 1,\n value: 110,\n title: \"Longitude\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"viewof lat = slider({\n min: -180,\n max: 180,\n step: 1,\n value: -35,\n title: \"Latitude\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"sanFrancisco = ({\n \"type\": \"Feature\", \n \"geometry\": {\n \"type\": \"Point\",\n \"coordinates\": [-122.419, 37.775]\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"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":18,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"sphere = ({type: \"Sphere\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"projection = d3.geoOrthographic()\n .rotate([long, lat])\n .scale(height / 2).translate([height / 2, height / 2])\n .precision(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"graticule = d3.geoGraticule10()","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"world = await d3.json(\"https://unpkg.com/world-atlas@1/world/110m.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"land = topojson.feature(world, world.objects.land)","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"world","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"import {color,slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}