2d:null 2e:["$","title",null,{"children":"Watercolor world | chekos | Observable"}] 33: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; }34:[] 31:{"id":"4cbd782c35cf0505","slug":"watercolor-world","title":"Watercolor world","thumbnail":"aa76b7f1c4be825b0f6a64e45f88f5f24b4d145e916b3ee01a37b5b6bf88ee00","access_level":"public","create_time":"$D2019-08-06T17:59:22.645Z","update_time":"$D2019-08-06T23:13:49.481Z","view_time":null,"first_public_time":"$D2019-08-06T21:31:09.340Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"9b939657e9657184","login":"chekos","name":"chekos","avatar_url":"https://avatars-next.observableusercontent.com/02e1269ba639f9fd455195525e598362026456288bd4a14ddcdd18f2db7ab0dd","tier":"starter_2024"},"version":258,"publish_version":258,"role":null,"authored":false,"authors":[{"type":"individual","id":"78ce9538d2f7c9b0","login":"chekos","name":"chekos","avatar_url":"https://avatars-next.observableusercontent.com/02e1269ba639f9fd455195525e598362026456288bd4a14ddcdd18f2db7ab0dd","tier":null}],"members":[{"type":"individual","id":"78ce9538d2f7c9b0","login":"chekos","name":"chekos","avatar_url":"https://avatars-next.observableusercontent.com/02e1269ba639f9fd455195525e598362026456288bd4a14ddcdd18f2db7ab0dd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Watercolor world","cells":[{"id":0,"value":"md`# Watercolor world`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"viewof oceans = color({\n value: \"#19267C\",\n description: \"Color of the oceans\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"viewof outlines = color({\n value: \"#19267C\",\n description: \"Color of the outlines\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"viewof landColor = color({\n value: \"#CD7100\",\n description: \"Color of the land\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"sphere = ({type: \"Sphere\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"graticule = d3.geoGraticule10()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"world = await d3.json(\"https://unpkg.com/world-atlas@1/world/110m.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"land = topojson.feature(world, world.objects.land)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"world","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"import {color,slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"