31:T12de,map = { const zoom = d3.zoom() .scaleExtent([1, 16]) .on("zoom", zoomed) const container = d3.create("div") .classed("map-container", true) const tooltip = container.append("div") .classed("map-tooltip", true) .html(tooltipTemplate()) const svg = container.append("svg") .attr("viewBox", [0, 0, width, height]) svg.append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#fff"); /* TO FIX: zooming breaks the positioning of the tooltips */ // svg.call(zoom); ///////////////////////////////////////////////////////// /////// MAP LAYERS ////////////////////////////////////// ///////////////////////////////////////////////////////// const mapLayers = svg.append("g") .classed("map-layers", true) mapLayers.append("g") .attr("id", "counties") .append("path") .datum(countiesGeoJson) .attr("d", path) .attr("fill", "hsl(0, 0%, 95%)") .attr("stroke", "#999") .attr("stroke-width", 0.3) let sites = mapLayers.append("g") .attr("id", "sites") .selectAll("circle") .data(firstData.features, d => d.properties[datumKey]) .join("circle") .classed("site", true) .attr("cx", d => projection(d.geometry.coordinates)[0]) .attr("cy", d => projection(d.geometry.coordinates)[1]) .attr("r", d => radius(d.properties.POPULATION)) .attr("fill", d => color(d.properties.dirtyMonths)) .attr("stroke-width", strokeWidthDefault) .attr("stroke", "#333") .attr("fill-opacity", 0.8) sites .on("mouseover", handleMouseOver) .on("mouseout", handleMouseOut) .on("mousemove", handleMouseMove); ///////////////////////////////////////////////////////// /////// LEGENDS ///////////////////////////////////////// ///////////////////////////////////////////////////////// svg.call(legend) ///////////////////////////////////////////////////////// /////// EVENT HANDLERS ////////////////////////////////// ///////////////////////////////////////////////////////// function zoomed() { mapLayers.attr("transform", d3.event.transform) } function handleMouseOver({ properties: { CITY, COUNTY, POPULATION, REGULATING_AGENCY, VIOLATION_NUMBER, VIOLATION_TYPE_NAME, dirtyMonths } }) { const bgColor = color(dirtyMonths); tooltip.style("display", "inline-block"); tooltip.select(".city > .value").text(CITY) tooltip.select(".county > .value").text(COUNTY) tooltip.select(".population > .value").text(POPULATION.toLocaleString()) tooltip.select(".agency > .value").text(REGULATING_AGENCY) tooltip.select(".months > .value").text(dirtyMonths) tooltip.select(".violation_number > .value").text(VIOLATION_NUMBER) tooltip.select(".violation_type > .value").text(VIOLATION_TYPE_NAME) // adjust font color of "dirty months" for sufficient contrast with background color tooltip.select(".months > .value") .style("background", bgColor) .style("color", contrast("#333", bgColor) < 4.5 ? "#fff" : "#333") d3.select(this).attr("stroke-width", strokeWidthHighlight); } function handleMouseOut() { tooltip.style("display", "none"); d3.select(this).attr("stroke-width", strokeWidthDefault); } function handleMouseMove() { const [x, y] = d3.mouse(this); tooltip .style("top", y > height / 2 ? null : `${y + mouseOffset}px`) .style("bottom", y > height / 2 ? `${height - y + mouseOffset}px` : null) .style("left", x > width / 2 ? null : `${x + mouseOffset}px`) .style("right", x > width / 2 ? `${width - x + mouseOffset}px` : null) } // return container.node(); return Object.assign(container.node(), { update(_data) { try { sites = sites .data(_data.features, d => d.properties[datumKey]) .join( enter => enter.append("circle") .classed("site", true) .attr("cx", d => projection(d.geometry.coordinates)[0]) .attr("cy", d => projection(d.geometry.coordinates)[1]) .attr("r", d => radius(d.properties.POPULATION)) .attr("fill", d => color(d.properties.dirtyMonths)) .attr("stroke-width", strokeWidthDefault) .attr("stroke", "#333") .attr("fill-opacity", 0.8), update => update .attr("fill", d => color(d.properties.dirtyMonths)), exit => exit.remove() ) .sort((a, b) => d3.descending(a.properties.POPULATION, b.properties.POPULATION)) .on("mouseover", handleMouseOver) .on("mouseout", handleMouseOut) .on("mousemove", handleMouseMove); } catch (e) { console.error(e); } } }); }32:T5c3,legend = g => { const legend = g.append("g") .attr("id", "legend") .attr("transform", `translate(75, ${height - 80})`) const items = legend.selectAll("g.item") .data([5000, 35000, 100000]) .join("g") .classed("item", true); items.append("circle") .attr("r", d => radius(d)) .attr("fill", "none") .attr("stroke", "#ccc") .attr("stroke-width", 1) .attr("cy", d => -radius(d)); items.append("text") .attr("y", d => -2 * radius(d)) .attr("dy", "-0.4em") .text((d, i) => { d = d.toLocaleString(); return i === 2 ? `>= ${d}` : d; }) legend.append("text") .classed("title", true) .attr("y", 20) .attr("dy", "-0.4em") .text("Persons Affected") const colorLegend = g.append("g") .attr("id", "color-legend") .attr("transform", `translate(12, ${height - 45})`); colorLegend.append("image") .attr("width", 125) .attr("height", 10) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(color.interpolator()).toDataURL()); colorLegend.append("g") .attr("transform", `translate(0, 10)`) .call(d3.axisBottom(xScale) .tickValues(color.domain())) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").attr("y1", -10)) .call(g => g.append("text") .classed("title", true) .attr("x", 20) .attr("y", 18) .attr("text-anchor", "middle") .text("Months Unresolved")) }33:[{"id":"fdb6d8f6cb5c1058e33b349d58b0649fb61fb13934628a9298454b0a3c74ca8b622221c2926a73c43818161485e6774327feca09554b27408e59511dbca6a481","href":"https://static.observableusercontent.com/files/fdb6d8f6cb5c1058e33b349d58b0649fb61fb13934628a9298454b0a3c74ca8b622221c2926a73c43818161485e6774327feca09554b27408e59511dbca6a481","name":"cb_2014_06_us_county_500k_4326.json","type":"application/json","lastModified":1574297814412.573,"size":56390}] 2f:{"title":"California Chronic Drinking Water Safety Violations","cells":[{"id":0,"value":"md`# California Chronic Drinking Water Safety Violations\n\nData sourced from [Open Oakland](http://water.openoakland.org/chronic.html): \nCommunity, Schools, Daycares, Public Water Systems Who Have Current Exceedance/Compliance Issues, [Human Right to Water Portal](https://www.waterboards.ca.gov/water_issues/programs/hr2w/#data), State Water Resources Control Board.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"viewof curDate = Scrubber(dates, { \n autoplay: true, \n loop: false, \n delay: 350,\n format: d => {\n const [year, month] = d.split(\"-\");\n return new Date(+year, +month - 1)\n .toLocaleString(\"en\", {month: \"long\", year: \"numeric\"})\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"md`## To Do\n\n- [x] tool tips\n- [x] legend: circle size\n- [x] legend: color\n- [x] add animation using [scrubber](https://observablehq.com/@mbostock/scrubber) (see sample implementation via [this notebook](https://observablehq.com/@mbostock/the-wealth-health-of-nations))\n- [x] use chart update technique from @mbostock's [The Wealth & Health of Nations](https://observablehq.com/@mbostock/the-wealth-health-of-nations)\n- [ ] toggle geographic boundaries: counties & assembly districts\n- [ ] zoom & pan?\n- [ ] map tiles?\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":603,"value":"md`## Misc`","pinned":false,"hidden":false,"mode":"ojs"},{"id":548,"value":"update = map.update(curData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":536,"value":"height = Math.floor(width * 0.85)","pinned":false,"hidden":false,"mode":"ojs"},{"id":535,"value":"mouseOffset = 10;","pinned":false,"hidden":false,"mode":"ojs"},{"id":534,"value":"strokeWidthHighlight = 2;","pinned":false,"hidden":false,"mode":"ojs"},{"id":533,"value":"strokeWidthDefault = 0.5;","pinned":false,"hidden":false,"mode":"ojs"},{"id":532,"value":"datumKey = \"VIOLATION_NUMBER\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":531,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":213,"value":"tooltipTemplate = () => `

\n City: \n

\n County: \n

\n Agency: \n

\n Population: \n

\n Violation Number: \n

\n Violation Type: \n

\n Months Unresolved: \n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"styles = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"md`## Data\n\nData is stored in separate files with naming convention of \\`-.json\\`\n\nAfter being fetched, these JSON are stored in the \\`cache\\` cell below to save future fetches.\n\nCurrently, data displayed is for ${curDate}.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":485,"value":"cache = new Map()","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"dates = {\n const years = d3.range(2012, 2019, 1);\n const months = d3.range(1, 13, 1);\n return d3.cross(years, months).map(([year, month]) => `${year}-${month}`)\n .concat(d3.cross([2019], d3.range(1, 10, 1)).map(([year, month]) => `${year}-${month}`))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":544,"value":"firstData = dataAt(dates[0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":527,"value":"curData = dataAt(curDate)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"dataAt = async (yearMonth) => {\n if (cache.has(yearMonth)) {\n return cache.get(yearMonth);\n }\n const data = await d3.json(`https://water.openoakland.org/chronic-map/${yearMonth}.json`);\n const features = data.features\n .filter(d => d.geometry && d.geometry.coordinates)\n .map(({ properties, ...rest}) => {\n return {\n ...rest,\n properties: {\n ...properties,\n POPULATION: +properties.POPULATION,\n dirtyMonths: +properties.dirtyMonths\n }\n }\n })\n .sort((a, b) => d3.descending(a.properties.POPULATION, b.properties.POPULATION))\n \n cache.set(yearMonth, {...data, features })\n return cache.get(yearMonth);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"counties = FileAttachment(\"cb_2014_06_us_county_500k_4326.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"countiesGeoJson = topojson.feature(\n counties,\n counties.objects.cb_2014_06_us_county_500k_4326\n);","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"md`## Helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"radius = d3.scaleSqrt()\n .domain([10, 100000])\n .range([2.5, 35])\n .clamp(true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"color = d3.scaleSequential(d3.interpolateYlOrBr)\n .domain([0, 60])\n .clamp(true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":432,"value":"xScale = d3.scaleLinear()\n .domain(color.domain())\n .range([0, 125])","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"projection = d3.geoConicEqualArea()\n .parallels([34, 40.5])\n .rotate([120, 0])\n .fitExtent([[20, 20], [width - 20, height - 20]], countiesGeoJson)\n // California Albers","pinned":false,"hidden":false,"mode":"ojs"},{"id":383,"value":"// see: https://observablehq.com/@d3/color-legend\nfunction ramp(color, n = 256) {\n const canvas = DOM.canvas(n, 1);\n const context = canvas.getContext(\"2d\");\n for (let i = 0; i < n; ++i) {\n context.fillStyle = color(i / (n - 1));\n context.fillRect(i, 0, 1, 1);\n }\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":521,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":495,"value":"import {contrast} from \"@mbostock/wcag-contrast-ratio\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}