3e:null 3f:["$","title",null,{"children":"Cartographic visualization: K-12 CS Enrollment in California interactive choropleth | Ayaan Kazerouni | Observable"}] 45:T554,// Code { // Make the hover selection param // the hover is activated on 'mouseover' // the hover is cleared on 'mouseout' const pointSelection = vl.selectPoint('selectedCounty') .on('mouseover') .clear('mouseout'); // Draw the map just like before, but add the hoverSelection as a param return vl.markGeoshape({ fill: 'white', stroke: 'lightgrey' }) // Add the param here .params(pointSelection) .data(vl.topojson(usa).feature('counties')) .transform( vl.filter('substring(datum.id, 0, 1) === "6"'), vl.lookup('id') .from( vl.data(data) .key('fips') .fields(['county', 'perCapitaEnrollment']) ), vl.calculate('round(datum.perCapitaEnrollment * 100) + "% of students in " + datum.county + " County were enrolled in CS courses."').as('summary') ) .project( vl.projection('albersUSA') ) .encode( vl.fill().fieldQ('perCapitaEnrollment') .title(['% students', 'enrolled in CS']) .legend({ format: '%' }), // Add an opacity encoding that is conditionalized on whether // the point (i.e., the county) is included in the hover selection. vl.opacity().if(pointSelection, vl.value(1)).value(0.1), vl.tooltip().fieldN('summary') ) .width(300) .height(400) .render() }46:T999,countyMedianIncome = aq.from([ { "county": "Alameda", "ami": 142800 }, { "county": "Alpine", "ami": 94900 }, { "county": "Amador", "ami": 86600 }, { "county": "Butte", "ami": 85000 }, { "county": "Calaveras", "ami": 90000 }, { "county": "Colusa", "ami": 80300 }, { "county": "Contra Costa", "ami": 142800 }, { "county": "Del Norte", "ami": 80300 }, { "county": "El Dorado", "ami": 102200 }, { "county": "Fresno", "ami": 80300 }, { "county": "Glenn", "ami": 80300 }, { "county": "Humboldt", "ami": 80300 }, { "county": "Imperial", "ami": 80300 }, { "county": "Inyo", "ami": 82700 }, { "county": "Kern", "ami": 80300 }, { "county": "Kings", "ami": 80300 }, { "county": "Lake", "ami": 80300 }, { "county": "Lassen", "ami": 80300 }, { "county": "Los Angeles", "ami": 91100 }, { "county": "Madera", "ami": 80300 }, { "county": "Marin", "ami": 166000 }, { "county": "Mariposa", "ami": 80300 }, { "county": "Mendocino", "ami": 80300 }, { "county": "Merced", "ami": 80300 }, { "county": "Modoc", "ami": 80300 }, { "county": "Mono", "ami": 81200 }, { "county": "Monterey", "ami": 90100 }, { "county": "Napa", "ami": 119400 }, { "county": "Nevada", "ami": 98400 }, { "county": "Orange", "ami": 119100 }, { "county": "Placer", "ami": 102200 }, { "county": "Plumas", "ami": 82400 }, { "county": "Riverside", "ami": 87400 }, { "county": "Sacramento", "ami": 102200 }, { "county": "San Benito", "ami": 105100 }, { "county": "San Bernardino", "ami": 87400 }, { "county": "San Diego", "ami": 106900 }, { "county": "San Francisco", "ami": 166000 }, { "county": "San Joaquin", "ami": 85000 }, { "county": "San Luis Obispo", "ami": 109200 }, { "county": "San Mateo", "ami": 166000 }, { "county": "Santa Barbara", "ami": 100100 }, { "county": "Santa Clara", "ami": 168500 }, { "county": "Santa Cruz", "ami": 119300 }, { "county": "Shasta", "ami": 89800 }, { "county": "Sierra", "ami": 90000 }, { "county": "Siskiyou", "ami": 80300 }, { "county": "Solano", "ami": 108700 }, { "county": "Sonoma", "ami": 112800 }, { "county": "Stanislaus", "ami": 80300 }, { "county": "Sutter", "ami": 80300 }, { "county": "Tehama", "ami": 80300 }, { "county": "Trinity", "ami": 80300 }, { "county": "Tulare", "ami": 80300 }, { "county": "Tuolumne", "ami": 84300 }, { "county": "Ventura", "ami": 115400 }, { "county": "Yolo", "ami": 106600 }, { "county": "Yuba", "ami": 80300 } ])47:T83b,// Code { // Brush selection (for selecting income intervals) const brush = vl.selectInterval() .encodings('x'); // Interactive histogram // Make a simple spec for a histogram of ami values const hist = vl.markBar() .encode( vl.x().fieldQ('ami').bin({ maxbins: 20 }), vl.y().count() ) const interactiveHist = vl.layer( hist.params(brush).encode(vl.fill().value('lightgrey')), hist.transform(vl.filter(brush)) ) // Point selection for the choropleth const pointSelection = vl.selectPoint() .on('mouseover') .clear('mouseout'); // Combine the point selection and the brush selection // This will be used in the choropleth to show counties that // are included in the histogram brush AND the hover const compositeSelection = vl.and( pointSelection, brush ); // Draw the map just like before, but add the pointSelection as a param const choropleth = vl.markGeoshape({ fill: 'white', stroke: 'lightgrey' }) // Add the param here .params(pointSelection) .project( vl.projection('albersUSA') ) .encode( vl.fill().fieldQ('perCapitaEnrollment') .title(['% students', 'enrolled in CS']) .legend({ format: '%' }), // Add an opacity encoding that is conditionalized on whether // the point (i.e., the county) is included in the composite selection. vl.opacity().if(compositeSelection, vl.value(1)).value(0.1), vl.tooltip().fieldN('summary') ) .width(300) .height(400) // Hconcat the two charts return vl.hconcat( choropleth, interactiveHist ) .resolve({ legend: { fill: 'independent' } }) .data(vl.topojson(usa).feature('counties')) .transform( vl.filter('substring(datum.id, 0, 1) === "6"'), vl.lookup('id') .from( vl.data(data) .key('fips') .fields(['county', 'perCapitaEnrollment', 'ami']) ), vl.calculate('round(datum.perCapitaEnrollment * 100) + "% of students in " + datum.county + " County were enrolled in CS courses."').as('summary') ) .render() }48:T8cb,## Postscript Directly creating and manipulating GeoJSON data can be daunting. Thankfully, you don't have to, since many services exist to help you manage these data. Here are some notes, tips and tricks. - If you're plotting US states and counties, or global countries, you could simply use the versions published by Vega (which we've been using [in this notebook](https://observablehq.com/@ayaankazerouni/csc477-interactive-chloropleth#usa) and [the previous one](https://observablehq.com/@ayaankazerouni/csc477-cartographic-visualization-intro)). - If you want more up-to-date data, or data about different geographical regions, like congressional districts, school districts, "neighbourhoods" in bigger cities, the [USGS](https://www.usgs.gov/the-national-map-data-delivery/gis-data-download) also publishes GIS data. - Similarly, most state and local governments or institutions will publish GIS data, including the [Cal Poly campus](https://afd.calpoly.edu/facilities/campus-maps/gis-data/) and [the city of SLO](https://www.slocounty.ca.gov/departments/public-works/services/maps/gis-of-survey-maps). (Sticking "GIS" into a DuckDuckGo search query is usually fruitful.) - Data you find online will usually be in GeoJSON format or something called "shapefiles". You can download these data files and drag them into [mapshaper.org](https://mapshaper.org) to convert to TopoJSON, which you can then feed to Vega-Lite. - You can also plot historical borders (though be aware that these are more disputed than contemporary borders). I recently came across this amazing site: [openhistoricalmap.org](https://www.openhistoricalmap.org), which you can use to verify border data that you may use from [this repository of historical borders](https://github.com/aourednik/historical-basemaps). - For choropleths, I recommend checking out [ColorBrewer](https://colorbrewer2.org/#type=sequential&scheme=YlOrRd&n=3) to help with choosing color schemes. The color schemes from there are available in Vega-Lite. Finally, the tutorial series [Command-Line Cartography](https://medium.com/@mbostock/command-line-cartography-part-1-897aa8f8ca2c) by Mike Bostock (one of the creators of D3.js and the TopoJSON format, and founder of Observable) is a great read.49:T991,viewof countyFipsCodes = aq.from([ { "fips": 6001, "county": "Alameda" }, { "fips": 6003, "county": "Alpine" }, { "fips": 6005, "county": "Amador" }, { "fips": 6007, "county": "Butte" }, { "fips": 6009, "county": "Calaveras" }, { "fips": 6011, "county": "Colusa" }, { "fips": 6013, "county": "Contra Costa" }, { "fips": 6015, "county": "Del Norte" }, { "fips": 6017, "county": "El Dorado" }, { "fips": 6019, "county": "Fresno" }, { "fips": 6021, "county": "Glenn" }, { "fips": 6023, "county": "Humboldt" }, { "fips": 6025, "county": "Imperial" }, { "fips": 6027, "county": "Inyo" }, { "fips": 6029, "county": "Kern" }, { "fips": 6031, "county": "Kings" }, { "fips": 6033, "county": "Lake" }, { "fips": 6035, "county": "Lassen" }, { "fips": 6037, "county": "Los Angeles" }, { "fips": 6039, "county": "Madera" }, { "fips": 6041, "county": "Marin" }, { "fips": 6043, "county": "Mariposa" }, { "fips": 6045, "county": "Mendocino" }, { "fips": 6047, "county": "Merced" }, { "fips": 6049, "county": "Modoc" }, { "fips": 6051, "county": "Mono" }, { "fips": 6053, "county": "Monterey" }, { "fips": 6055, "county": "Napa" }, { "fips": 6057, "county": "Nevada" }, { "fips": 6059, "county": "Orange" }, { "fips": 6061, "county": "Placer" }, { "fips": 6063, "county": "Plumas" }, { "fips": 6065, "county": "Riverside" }, { "fips": 6067, "county": "Sacramento" }, { "fips": 6069, "county": "San Benito" }, { "fips": 6071, "county": "San Bernardino" }, { "fips": 6073, "county": "San Diego" }, { "fips": 6075, "county": "San Francisco" }, { "fips": 6077, "county": "San Joaquin" }, { "fips": 6079, "county": "San Luis Obispo" }, { "fips": 6081, "county": "San Mateo" }, { "fips": 6083, "county": "Santa Barbara" }, { "fips": 6085, "county": "Santa Clara" }, { "fips": 6087, "county": "Santa Cruz" }, { "fips": 6089, "county": "Shasta" }, { "fips": 6091, "county": "Sierra" }, { "fips": 6093, "county": "Siskiyou" }, { "fips": 6095, "county": "Solano" }, { "fips": 6097, "county": "Sonoma" }, { "fips": 6099, "county": "Stanislaus" }, { "fips": 6101, "county": "Sutter" }, { "fips": 6103, "county": "Tehama" }, { "fips": 6105, "county": "Trinity" }, { "fips": 6107, "county": "Tulare" }, { "fips": 6109, "county": "Tuolumne" }, { "fips": 6111, "county": "Ventura" }, { "fips": 6113, "county": "Yolo" }, { "fips": 6115, "county": "Yuba" } ]).view(3)4a:[{"id":"81e3fddd2dba1c0c50b88fcb7c65ea104a73837421e605eb5731c86928c5351f58d82cb0fdeb992cdbdb7d71a1a4c05f60f8f55102f00d9919a6e636e84227bf","href":"https://static.observableusercontent.com/files/81e3fddd2dba1c0c50b88fcb7c65ea104a73837421e605eb5731c86928c5351f58d82cb0fdeb992cdbdb7d71a1a4c05f60f8f55102f00d9919a6e636e84227bf","name":"interactive-chloropleth.gif","type":"image/gif","lastModified":1746044696911.033,"size":247534}] 43:{"id":"60cd3881183310eb","slug":"csc477-interactive-choropleth","title":"Cartographic visualization: K-12 CS Enrollment in California interactive choropleth","thumbnail":"21f7ccdad43d5db2e2fe6583c822e4588301bee667de638f32b6edc69db8b3d7","access_level":"unlisted","create_time":"$D2025-04-29T23:21:41.863Z","update_time":"$D2026-05-27T22:56:12.101Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"1d83bfce92a9c574","login":"ayaankazerouni","name":"Ayaan Kazerouni","avatar_url":"https://avatars-next.observableusercontent.com/0e57571babb328d16b661fb3c0f94c9629fc275ae03e484ce19dbcf72fa1be0d","tier":"starter_2024","bio":"I like teaching, computing, and teaching computing"},"version":898,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7a2aaf0dcd8f4999","login":"ayaankazerouni","name":"Ayaan Kazerouni","avatar_url":"https://avatars-next.observableusercontent.com/d56bdf990c9be43beacbf55c7ca358b0aa7c36eb9211e9fc23f3b50bc80603bd","tier":null,"bio":"I like teaching, computing, and teaching computing."}],"members":[{"type":"team","id":"1d83bfce92a9c574","login":"ayaankazerouni","name":"Ayaan Kazerouni","avatar_url":"https://avatars-next.observableusercontent.com/0e57571babb328d16b661fb3c0f94c9629fc275ae03e484ce19dbcf72fa1be0d","tier":"starter_2024","role":"editor"},{"type":"individual","id":"7a2aaf0dcd8f4999","login":"ayaankazerouni","name":"Ayaan Kazerouni","avatar_url":"https://avatars-next.observableusercontent.com/d56bdf990c9be43beacbf55c7ca358b0aa7c36eb9211e9fc23f3b50bc80603bd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":46,"collection":{"id":"6c810503155b0a33","slug":"csc-477-cal-poly","title":"CSC 477","owner":{"id":"1d83bfce92a9c574","login":"ayaankazerouni","name":"Ayaan Kazerouni"}},"type":"notebook","body":{"titling":"auto","title":"Cartographic visualization: K-12 CS Enrollment in California interactive choropleth","cells":[{"id":0,"value":"# Cartographic visualization: K-12 CS Enrollment in California interactive choropleth","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":222,"value":"

\n${await FileAttachment(\"interactive-chloropleth.gif\").image({width: 700})}\n\n

\n \n In this code-along, we'll walk through the steps to make a choropleth map.\n \n This notebook assumes you've worked through and understood the materials in the [Introduction to Cartographic Visualization](https://observablehq.com/@ayaankazerouni/csc477-cartographic-visualization-intro) notebook.\n\n

The second part of this notebook makes the map interactive, like the GIF on the left. Feel free to work through it yourself, but we will come to it as a class next week when we talk about interaction in Vega-Lite.

\n\n

\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":504,"value":"## The Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":242,"value":"To make a map, we need data about geographical regions and boundaries. We'll use TopoJSON data about US county boundaries obtained from the [Vega Datasets](https://github.com/vega/vega-datasets/) collection.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"usa = (await import('https://cdn.jsdelivr.net/npm/vega-datasets@3.2.1/+esm')).default['us-10m.json']()\n// Alternatively,\n// usa = (await require('vega-datasets@3.2.1'))['us-10m.json']()\n// but vega-datasets appears to want to move toward the web JavaScript native import function","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"We'll use the choropleth to explore a dataset we've seen before: K-12 CS Enrollments in California, obtained from the authors of the [California CS Access Report](https://csforca.org/wp-content/uploads/2021/09/KC21007_CS-for-CA_9-28-21-1-1.pdf).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"viewof csEnrollment = (await aq.loadJSON(\n 'https://ayaankazerouni.org/courses/csc477/datasets/csforca-enrollment.json'\n)).derive({\n 'AP CS': d => d['AP CS'] === null ? 0 : d['AP CS'],\n 'Non-AP CS': d => d['Non-AP CS'] === null ? 0 : d['Non-AP CS'],\n 'Overall Enrollment': d => d['Overall Enrollment'] === null ? 0 : d['Overall Enrollment'],\n}).view(3)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"## Making a choropleth \n\nDraw a map of the USA counties using the `usa` TopoJSON data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":436,"value":"// Code\nvl.markGeoshape({ fill: 'white', stroke: 'lightgrey' })\n .data(vl.topojson(usa).feature('counties'))\n .project(\n vl.projection('albersUSA')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"Filter it down to California counties. We can do this by inspecting the properties present in the TopoJSON data we downloaded. For example, consider the first item.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":785,"value":"usa.objects.counties.geometries[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":793,"value":"A TopoJSON feature can contain, in addition to its geometry, additional fields pertaining to the object.\n\nThe `id` field on this county object is the [FIPS code](https://en.wikipedia.org/wiki/List_of_United_States_INCITS_codes_by_county) of the county. FIPS codes are numerical codes assigned to geographical regions (states, counties, census tracts, etc.) by the federal government.\n\nCounties in California all have FIPS codes starting with the number 6 (or sometimes \"006\", depending on where you downloaded the data from). We can use that information to filter this data. Vega-Lite will automatically scale and re-center our map of the USA according to the extents of the coordinates that are drawn.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":439,"value":"// Code\nvl.markGeoshape({ fill: 'white', stroke: 'lightgrey' })\n .data(vl.topojson(usa).feature('counties'))\n .transform(\n vl.filter('substring(datum.id, 0, 1) === \"6\"')\n )\n .project(\n vl.projection('albersUSA')\n )\n .width(300)\n .height(400)\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"Our next step is to **join** our county CS enrollment data with the geographical data. We can do that using the FIPS code as the join key. We've already got the FIPS data in our enrollment data table: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":803,"value":"data.view(3)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"We'll do the join in Vega-Lite itself.\nUse a **`vl.lookup`** transform to merge our TopoJSON data with our enrollment/income data.\n\n```js\n.transform(\n vl.lookup('id') // key in primary data source (geodata)\n .from(\n vl.data(data) // enrollment data that contains the fips codes\n .key('fips') // key in secondary data source\n .fields(['county', 'perCapitaEnrollment', 'perCapitaAp', 'ami']) // the fields to include \n )\n)\n```\n\nOnce the join is done, the fields `county`, `perCapitaEnrollment`, `perCapitaAp`, and `ami` all become available for us to use in encodings.\n\nTo finish the choropleth, set a **`fill`** encoding on the geoshape, mapped to the per-capita CS enrollment.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":445,"value":"// Code\nvl.markGeoshape({ fill: 'white', stroke: 'lightgrey' })\n .data(vl.topojson(usa).feature('counties'))\n .transform(\n vl.filter('substring(datum.id, 0, 1) === \"6\"'),\n vl.lookup('id')\n .from(\n vl.data(data)\n .key('fips')\n .fields(['county', 'perCapitaEnrollment'])\n ),\n vl.calculate('round(datum.perCapitaEnrollment * 100) + \"% of students in \" + datum.county + \" County were enrolled in CS courses.\"').as('summary')\n )\n .project(\n vl.projection('albersUSA')\n )\n .encode(\n vl.fill().fieldQ('perCapitaEnrollment')\n .title(['% students', 'enrolled in CS'])\n .legend({\n format: '%'\n }),\n vl.tooltip().fieldN('summary')\n )\n .width(300)\n .height(400)\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":705,"value":"## Making the map interactive\n\nWe can make the map \"pop\" a little by adding some basic interactivity. Let's start by making it so that we can hover over specific data points (counties) and grey out the others.\n\nWe can do this using Vega-Lite's facilities for _selections_. \nAdd point selection triggered by hovering over counties.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":457,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":722,"value":"## Coordinating multiple views\n\nTo add some context to our enrollment data, we'll also include data about median household incomes in California counties, obtained from the [California Open Data](https://data.ca.gov/dataset/income-limits-by-county/resource/49eb1f40-d50a-4dde-98ca-0450d69c4617) portal. The column is **`ami`**, for \"area median income\", where each \"area\" is a county.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":135,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"Merging our enrollment data with income and FIPS data yields a table that looks like this:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":64,"value":"viewof data = csEnrollment\n .groupby('county')\n .rollup({\n nonApCS: d => op.sum(d['Non-AP CS']),\n apCS: d => op.sum(d['AP CS']),\n overall: d => op.sum(d['Overall Enrollment']),\n })\n .derive({\n perCapitaEnrollment: d => d.nonApCS / d.overall,\n perCapitaAp: d => d.apCS / d.overall\n })\n .join(countyFipsCodes, 'county')\n .join(countyMedianIncome, 'county')\n .view(10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"Make the income histogram (**`ami`** field in the table) and `hconcat` the two views. Give it an interval selection limited to the `x` encoding. **You will need to move the `.data` and `.transform` to the `hconcat` result, since both views are now sharing them.**\n\nFinally, make the choropleth's opacity encoding dependent on the combination of its own point selection and the histogram's interval selection.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":850,"value":"### Taking it step-by-step\n\nWe already have an interactive choropleth, so let's put that aside for now. Let's work on making a histogram of `ami` values that accepts an interval selection.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":852,"value":"{\n\n // Make an interval selection, limited to the x encoding\n const brush = vl.selectInterval()\n .encodings('x');\n\n // Make a simple spec for a histogram of ami values\n const hist = vl.markBar()\n .data(data)\n .encode(\n vl.x().fieldQ('ami').bin({ maxbins: 20 }),\n vl.y().count()\n )\n\n // Layer two histograms on top of each other, using the\n // spec from the previous step\n // The first has bars coloured lightgrey, and has the\n // interval selection added param (i.e., it lets us do an interval selection)\n // The second (drawn on top) is coloured blue (which is the default)\n // and filters to only the items included in the \"brush\" selection.\n // The visual effect is that the data within the selection are drawn over\n // over the lightgrey bars, appearing \"selected\" while the other data\n // takes on a \"muted\" appearance.\n return vl.layer(\n hist.params(brush).encode(vl.fill().value('lightgrey')),\n hist.transform(vl.filter(brush))\n ).render()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"$47","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":535,"value":"$48","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":529,"value":"## Appendix ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":827,"value":"### FIPS codes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":57,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":830,"value":"### Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"import { vl } from '@vega/vega-lite-api-v6'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"import {aq, op} from '@uwdata/arquero'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":762,"value":"import {stylesheet} from '@ayaankazerouni/utils'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":841,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 44:"$43:body"