31:T50d,twitter_icon = svg``32:[{"id":"17d7423725a6765f8684f25334b7262b1009f918f5f9bea41f953a772e0526ccd9aed92d36f7462b784754d2e80a6cfaaa804c063f6edfa572cd0d3f2a15e8eb","href":"https://static.observableusercontent.com/files/17d7423725a6765f8684f25334b7262b1009f918f5f9bea41f953a772e0526ccd9aed92d36f7462b784754d2e80a6cfaaa804c063f6edfa572cd0d3f2a15e8eb","name":"counties_formatted.csv","type":"text/csv","lastModified":1625676973663.972,"size":2062460},{"id":"835f82738290b7c0c4a673cbecf5d293d271b5b119f5e45ffa5673cf669a06e36f4640a799f35076dffc74f07debdecdea123d7841abb5ff86866248f674ceee","href":"https://static.observableusercontent.com/files/835f82738290b7c0c4a673cbecf5d293d271b5b119f5e45ffa5673cf669a06e36f4640a799f35076dffc74f07debdecdea123d7841abb5ff86866248f674ceee","name":"info.png","type":"image/png","lastModified":1625676070110.097,"size":242181}] 2f:{"title":"USGS CDI Data Viz Series","cells":[{"id":0,"value":"# USGS CDI Data Viz Series","pinned":false,"hidden":false,"mode":"md"},{"id":137,"value":"

","pinned":false,"hidden":false,"mode":"md"},{"id":121,"value":"

Data Wrangling +
Visualization
on Observable

Mike Freeman, Developer Advocate
${twitter_icon}@mf_viz

${chart}

","pinned":false,"hidden":false,"mode":"html"},{"id":133,"value":"

","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"## Introduction","pinned":false,"hidden":false,"mode":"md"},{"id":47,"value":"### About me","pinned":false,"hidden":false,"mode":"md"},{"id":16,"value":"FileAttachment(\"info.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"### About Observable\nObservable is a platform for **writing code to work with data** and do other things edit edit.\n- **Reactive**: Code changes propegate throughout a notebook\n- **Collaborative**: Multiple people can collaborate in real time other edits here\n- **Transparent**: Combines code + output\n- **Reusable**: Import functions from your notebooks or the community's\n- **Free**: work in public or private for free","pinned":false,"hidden":false,"mode":"md"},{"id":25,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":66,"value":"## Dataset\nWater consumption at the county level from 1985 - 2015","pinned":false,"hidden":false,"mode":"md"},{"id":149,"value":"raw_data = FileAttachment(\"counties_formatted.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":153,"value":"Inputs.table(raw_data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":155,"value":"SummaryTable(raw_data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":157,"value":"data = aq\n .from(raw_data)\n .rename({ ps_gallons_person_day: \"consump\" })\n .derive({ location: (d) => d.county_nm + \", \" + d.state_name })\n// .view()","pinned":true,"hidden":false,"mode":"ojs"},{"id":71,"value":"

","pinned":false,"hidden":false,"mode":"md"},{"id":4,"value":"## Where is water consumption the highest (in 2015)?","pinned":false,"hidden":false,"mode":"md"},{"id":166,"value":"top_consumers = data\n .filter((d) => d.year === 2015)\n .orderby(aq.desc(\"consump\"))\n .slice(0, 10)\n\n// .view()","pinned":true,"hidden":false,"mode":"ojs"},{"id":174,"value":"Plot.barX(top_consumers, {\n x: \"consump\",\n y: \"location\",\n fill: \"lightblue\"\n}).plot({\n marginLeft: 150,\n y: {\n domain: top_consumers.column(\"location\").data,\n label: \"\"\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":190,"value":"Plot.plot({\n marks: [\n Plot.barX(top_consumers, {\n x: \"consump\",\n y: \"location\",\n fill: \"lightblue\"\n }),\n Plot.text(top_consumers, {\n x: \"consump\",\n y: \"location\",\n text: \"consump\",\n dx: 15\n })\n ],\n marginLeft: 150,\n y: {\n domain: top_consumers.column(\"location\").data,\n label: \"\"\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":83,"value":"

","pinned":false,"hidden":false,"mode":"md"},{"id":80,"value":"## How have consumption trends changed over time for counties in a selected state?","pinned":false,"hidden":false,"mode":"md"},{"id":200,"value":"states = data\n .dedupe(\"state_name\")\n .objects()\n .map((d) => d.state_name)","pinned":true,"hidden":false,"mode":"ojs"},{"id":208,"value":"chart_data = data\n .filter(aq.escape((d) => d.state_name === state))\n .filter((d) => d.consump)","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"viewof state = Inputs.select(states, { label: \"Choose a state:\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"line_chart = addTooltips(\n Plot.line(chart_data, {\n x: \"year\",\n y: \"consump\",\n stroke: \"county_nm\",\n title: d => d.location\n }).plot({\n x: {\n tickFormat: \"\"\n }\n }),\n { stroke: \"black\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"

","pinned":false,"hidden":false,"mode":"md"},{"id":76,"value":"## What is the distribution of water consumption across counties in each state (in 2015)?","pinned":false,"hidden":false,"mode":"md"},{"id":229,"value":"data_2015 = data.filter((d) => d.year === 2015)","pinned":true,"hidden":false,"mode":"ojs"},{"id":239,"value":"data_2015.view()","pinned":true,"hidden":false,"mode":"ojs"},{"id":236,"value":"state_averages = data_2015\n .groupby(\"state_name\")\n .rollup({ consump_avg: (d) => op.mean(d.consump) })\n .orderby(aq.desc(\"consump_avg\"))\n .reify()","pinned":true,"hidden":false,"mode":"ojs"},{"id":231,"value":"treeplot = Plot.plot({\n marks: [\n Plot.dot(data_2015, { x: \"consump\", y: \"state_name\" }),\n Plot.tickX(state_averages, {\n x: \"consump_avg\",\n y: \"state_name\",\n stroke: \"red\",\n strokeWidth: 3\n })\n ],\n marginLeft: 100,\n x: {\n type: \"log\"\n },\n y: {\n domain: state_averages.column(\"state_name\").data\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":257,"value":"d3","pinned":true,"hidden":false,"mode":"ojs"},{"id":93,"value":"

","pinned":false,"hidden":false,"mode":"md"},{"id":97,"value":"## Where is the water coming from in each state (ground water, or surface water)?","pinned":false,"hidden":false,"mode":"md"},{"id":269,"value":"map_data = state_averages.rename({ consump_avg: \"value\" }).objects()","pinned":true,"hidden":false,"mode":"ojs"},{"id":273,"value":"drawStateMap(map_data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":101,"value":"

","pinned":false,"hidden":false,"mode":"md"},{"id":61,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":261,"value":"gsap = require(\"gsap\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":264,"value":"gsap.Back.easeIn()","pinned":true,"hidden":false,"mode":"ojs"},{"id":112,"value":"import { SummaryTable } from \"@observablehq/summary-table\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":114,"value":"import { addTooltips } from \"@mkfreeman/plot-tooltip\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":116,"value":"import { aq, op } from \"@uwdata/arquero\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":118,"value":"import { drawStateMap } from \"@mkfreeman/state-map\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":124,"value":"import { chart, color } with {\n collision_width as width,\n collision_height as height\n} from \"@d3/collision-detection/2\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":126,"value":"collision_width = 300","pinned":true,"hidden":false,"mode":"ojs"},{"id":128,"value":"collision_height = 300","pinned":true,"hidden":false,"mode":"ojs"},{"id":130,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}

Data Wrangling + Visualization on Observable

Data Wrangling +
Visualization
on Observable