2f:T563,--- ### Task 2: Water storage and hazard classification (interactive) In Observable Plot, create an interactive **bubble chart of dam water storage volume (acre-feet) versus surface area (acres)** (the variable names in `caDams` are `StorageAcreFeet` and `SurfaceAreaAcres`), with the **radius dependent on dam drainage area** (`DrainageAreaSqMiles`). Add tooltips that show each of the channels above, **plus the dam name.** Add a radio button Input that lets a user select a HazardPotentialClassification (Low, Significant, or High) such that only damns with the selected hazard classification are highlighted in a meaningful color, and others are in gray. **Task 2 minimum requirements (but feel free to do more!):** - An interactive bubble chart of dam water storage versus surface area, with radius based on drainage area, and with color indicating the hazard potential. From an Input, a user can select different hazard potential classifications, and dams with that classification are highlighted in the chart. - A custom color scale (with a legend in meaningful order, Low > Significant > High) - One (or both) axis updated to a log scale to compress values across orders of magnitudes - An interactive tooltip that shows the dam name, along with other channels you choose Create your Task 2 chart in a cell immediately below.30:T4cc,Plot.plot({ projection: { type: "mercator", domain: caCounties }, r: { domain: d3.extent(caDams.map((d) => d.DamLengthFt)), label: "Dam Length (Ft)" }, color: { legend: true, scheme: "Cividis", domain: d3.extent(caDams.map((d) => d.DamHeightFt)), label: "Dam Height (Ft)" }, marks: [ Plot.geo(caCounties, { fill: "#ccc" }), Plot.dot( caDams.filter( (d) => (counties.includes(d.County) || counties.includes("")) && d.OwnerTypes == ownerType && d.DamHeightFt >= minHeight && d.DamHeightFt <= maxHeight && d.DamLengthFt >= minLength && d.DamLengthFt <= maxLength ), { x: "Longitude", y: "Latitude", r: "DamLengthFt", fill: "DamHeightFt", opacity: 0.5 } ), Plot.tip( caDams, Plot.pointer({ x: "Longitude", y: "Latitude", title: (d) => [ "Name: " + d.DamName, "Location: " + (d.City != null ? d.City + ", " : "") + d.County, "Height: " + d.DamHeightFt + " ft", "Length: " + d.DamLengthFt + " ft" ].join("\n") }) ) ] })31:[{"id":"b1bbc6ad24ded1e336293e40ec279d5d81d22fba986ccd43f4251e96d5e8c02742de26be597aa0377fed25bb0801fa08d5dfc25d4797caca05e8003da702c781","href":"https://static.observableusercontent.com/files/b1bbc6ad24ded1e336293e40ec279d5d81d22fba986ccd43f4251e96d5e8c02742de26be597aa0377fed25bb0801fa08d5dfc25d4797caca05e8003da702c781","name":"californiaDams.csv","type":"text/csv","lastModified":1699176420114.335,"size":505612},{"id":"5443aa69344628c1768d1610c485534930d91e481db4b16c2a9287259cb7a033959c6c9af3965762f3fe500a0f5c699f7847caa653f32558c5edd3bbb41b3a0f","href":"https://static.observableusercontent.com/files/5443aa69344628c1768d1610c485534930d91e481db4b16c2a9287259cb7a033959c6c9af3965762f3fe500a0f5c699f7847caa653f32558c5edd3bbb41b3a0f","name":"california-counties.geojson","type":"application/geo+json","lastModified":1699176420114.335,"size":416370}] 2d:{"title":"Course Assignment","cells":[{"id":3,"value":"# Course Assignment\n## Introduction to data visualization with Observable Plot","pinned":false,"hidden":false,"mode":"md"},{"id":4,"value":"## Logistics\n\n- **Fork this notebook** to make your own copy. Complete tasks below in your fork.\n- When you are ready to submit, ensure that your fork visibility is **Public unlisted** so that we can see your work. To update the setting, go to the Share button, the under Access choose “Can view (unlisted)” for Public visibility. Make sure to Save changes.\n- Submit assignment by sharing your notebook URL in [this Google Form](https://forms.gle/JEKph2PVvow1cFJK7) by end of day **November 6, 2023**\n- Ask questions in the Observable Community Slack **#introduction-observable-plot** channel.","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"## Data: Dams on California waterways","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"For this assignment, you will use Observable Plot to visualize information about dams on California waterways from the [National Inventory of Dams](https://nid.sec.usace.army.mil/#/).\n\nAll the data you'll need is already attached and loaded in this notebook, named **caDams**. The `caDams` data is previewed below:\n","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"caDams","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"---\n## Assignment tasks","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"---\n### Task 1: Visualize condition assessment by decade-built\nThe `ConditionAssessment` variable contains an ordinal descriptor of each dam's condition (No data, Poor, Unsatisfactory, Satisfactory, or Fair). In Observable Plot, create a **bar chart** to visualize the **number of dams in each condition, binned by decade completed** (using the `YearCompleted` variable).\n\nTask 1 minimum requirements (but feel free to do more!): \n- Stacked bar chart of dam counts by decade completed (hint: `interval: 10`), with color indicating the condition\n- A meaningful, custom color scheme indicating the different conditions (e.g., \"Unsatisfactory\" might be red)\n- Updated x- and y-axis labels\n- Below your chart in a separate markdown cell, describe major takeaways from your chart in 1 - 2 sentences.\n\nCreate your Task 1 chart in a cell immediately below.","pinned":false,"hidden":false,"mode":"md"},{"id":48,"value":"Plot.plot({\n x: {\n label: \"Year completed\"\n },\n y: {\n label: \"Count of Dams\"\n },\n color: {\n legend: true,\n domain: [\"Satisfactory\", \"Fair\", \"No data\", \"Poor\", \"Unsatisfactory\"],\n scheme: \"BuRd\"\n },\n marks: [\n Plot.rectY(\n caDams,\n Plot.binX(\n { y: \"count\" },\n {\n x: \"YearCompleted\",\n fill: \"ConditionAssessment\",\n tip: true,\n order: conditions.order,\n offset: conditions.offset\n }\n )\n ),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"## Visualizing\nI decided to have an offseted bar graph, indicating the good (positives), the bad (negative ones) and the unknowns (on the middle) more clearly.\n\n## Key take-aways\n- a lot of them have been build between 1950 and 1970
-> a dominant peak, around twice as much as before and after\n- fortunately the majority of dams is in a good shape
-> roughly 80% by comparing the range of positive and negative scales\n- nevertheless, there is still quite a share of up to 30% lack of data
-> the gray area in between","pinned":false,"hidden":false,"mode":"md"},{"id":83,"value":"conditions = conditionsOffsets([\n [\"Unsatisfactory\", -1],\n [\"Poor\", -1],\n [\"No data\", 0],\n [\"Fair\", 1],\n [\"Satisfactory\", 1]\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"function conditionsOffsets(responses) {\n const map = new Map(responses);\n return {\n order: Array.from(map.keys()),\n offset(I, X1, X2, Z) {\n for (const stacks of I) {\n for (const stack of stacks) {\n const k =\n d3.sum(stack, (i) => (X2[i] - X1[i]) * (1 - map.get(Z[i]))) / 2;\n for (const i of stack) {\n X1[i] -= k;\n X2[i] -= k;\n }\n }\n }\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"$2f","pinned":false,"hidden":false,"mode":"md"},{"id":156,"value":"viewof classification = Inputs.checkbox([\"Low\", \"Significant\", \"High\"], {\n label: \"Highlight Classification\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"Plot.plot({\n marginRight: 50,\n color: {\n legend: true,\n domain: [\"Low\", \"Significant\", \"High\"],\n scheme: \"Reds\",\n label: \"Classification\"\n },\n x: { type: \"log\", ticks: 5, label: \"Surface Area (Acres)\" },\n y: { type: \"log\", ticks: 6, label: \"Storage Area (Acres)\" },\n r: { label: \"Drainage Area (SqMiles)\" },\n marks: [\n Plot.dot(caDams, {\n x: \"SurfaceAreaAcres\",\n y: \"StorageAcreFeet\",\n stroke: \"HazardPotentialClassification\",\n r: \"DrainageAreaSqMiles\",\n tip: true,\n channels: {\n Name: \"DamName\"\n }\n }),\n Plot.dot(\n caDams.filter((d) =>\n classification.includes(d.HazardPotentialClassification)\n ),\n {\n x: \"SurfaceAreaAcres\",\n y: \"StorageAcreFeet\",\n fill: \"lightblue\",\n r: \"DrainageAreaSqMiles\"\n }\n )\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"---\n### Task 3: An interactive map of California dams\nIn Observable Plot, create an interactive map of dams in California. The spatial data you need with California county boundaries (as a basemap) is already attached and loaded as `caCounties`, and `caDams` contains variables for Longitude and Latitude. **Hint:** to crop a map to only the area of this spatial data, you can set a domain option within the projection (e.g. `projection: {type: \"mercator\", domain: caCounties}`).\n\nFor this activity, you can choose which variable(s) you want to visualize! \n\n**Task 3 minimum requirements (but feel free to do more):**\n- A basemap of California\n- At least two Inputs (you choose the types) that allow a viewer to focus on different subset of dams (for example by dam type, size/storage, hazard potential, condition, or year completed)\n- A tooltip revealing the dam name (and any other channels you want to include)\n\nCreate your Task 3 map in a cell immediately below.","pinned":false,"hidden":false,"mode":"md"},{"id":218,"value":"viewof counties = Inputs.select(\n new Set(caDams.map((d) => d.County)).add(\"\"),\n {\n label: \"Counties\",\n value: \"\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"viewof ownerType = Inputs.radio(new Set(caDams.map((d) => d.OwnerTypes)), {\n label: \"Owner Type\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"viewof minHeight = Inputs.range(d3.extent(caDams.map((d) => d.DamHeightFt)), {\n label: \"Min. Height\",\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"viewof maxHeight = Inputs.range(d3.extent(caDams.map((d) => d.DamHeightFt)), {\n label: \"Max. Height\",\n value: d3.max(caDams.map((d) => d.DamHeightFt))\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"viewof minLength = Inputs.range(d3.extent(caDams.map((d) => d.DamLengthFt)), {\n label: \"Min. Length\",\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"viewof maxLength = Inputs.range(d3.extent(caDams.map((d) => d.DamLengthFt)), {\n label: \"Max. Length\",\n value: d3.max(caDams.map((d) => d.DamLengthFt))\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"---\n## Congratulations! Submit your assignment.\n\nOnce you’re done with the assignment, make sure to: \n\n- Update your notebook settings (click the Share button) so that Public access is “View (unlisted)”\n- Submit the URL to your notebook in [this Google form](https://forms.gle/JEKph2PVvow1cFJK7) by midnight on November 6, 2023\n- Keep an eye out for course certificates, which we'll send out via email by November 10, 2023 \n","pinned":false,"hidden":false,"mode":"md"},{"id":19,"value":"_**Thank you** for joining us for the **Introduction to Data Visualization in Observable Plot** course! We look forward to seeing you at our upcoming events, and in our Community Slack!_ ","pinned":false,"hidden":false,"mode":"md"},{"id":20,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":21,"value":"dams = FileAttachment(\"californiaDams.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"caDams = dams.map((d) => ({\n ...d,\n ConditionAssessment:\n d[\"ConditionAssessment\"] == \"\" ||\n d[\"ConditionAssessment\"] == \"Not Available\" ||\n d[\"ConditionAssessment\"] == \"Not Rated\" ||\n d[\"ConditionAssessment\"] == null\n ? \"No data\"\n : d[\"ConditionAssessment\"]\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"caCounties = FileAttachment(\"california-counties.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}