${data.title[0]}${labels[j] && ` (${labels[j]})`} ${data.title[1]}${labels[i] && ` (${labels[i]})`}

29:null 2a:["$","title",null,{"children":"Urban population density and Air Quality in Florida in 2010 | Maryam Torkashvand | Observable"}] 2f:T5cb,md`## Spatial Pattern The map displays the relationship between the percentage of urban population and air quality (based on the average daily PM2.5) in Florida in 2010. It reveals that only in a small number of counties (six counties) does good air quality occur in areas with a high density of urban population. Furthermore, most of the counties with high air quality are located in the northern part of the state, where the percentage of urban population is generally low. In contrast, the southern portion of Florida shows poor air quality in counties with high urban populations and moderate air quality in areas with low urban populations. Interestingly, in some parts of the southern coast (such as Brevard, Lee, and Martin), there may be other factors influencing air quality apart from urban density, as both the urban population density and air quality are low in these areas. Also, a few counties on the northern coast (such as Levy, Taylor, and Gilchrist) exhibit moderate levels of both urban population percentage and air quality (medium-medium). Overall, although there are some exceptions, most counties demonstrate a positive correlation between poor air quality and a high percentage of urban population. We can also divide Florida into northern and southern regions: in most northern counties, the air quality is high, and the urban population is low. In contrast, in the majority of the southern region, the urban population is high, and the air quality is low. `30:T783,chart = { //making canvas with a predefined width and height const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); //append the legend, define the proper location for the legend. the legend colors based on the filling colors in the map are defined in "legend" function. svg.append(legend) //define the proper location for the legend based on the size of canvas. like finding the location of the center of the canvas and based on that find the bottom or top corner location for the legend .attr("transform", "translate(200,290)") //define the legend properties for NAN values .append(() => legend({ color: nullcolorforlegend, title: "No Data", width: 50, tickFormat: ".1f" }) ); //append the map and graphics to the canvas svg.append("g") .selectAll("path") //append the Florida map from polygons features, define the attribute for the map (stroke color and thickness) .data(topojson.feature(polygons, polygons.objects.Floda_WGS84).features) .join("path") .attr("stroke", "#636363") //join the counties with values of two variables using the data dictionary and fill in the colors of the counties based on the values. In the data dictionary, each county (key) has two values (air quality and % urban population); using the "get" function, the values for each county are extracted .attr("fill", d => color(data.get(d.properties[idAttribute]))) .attr("d", path) .append("title") //define the text for Hover over on the map. so from the data dictionary, the name of counties (idAttribute) and values and their classes are extracted and shown on the map .text(d => `${d.properties[idAttribute]}, ${format(data.get(d.properties[idAttribute]))}`); return svg.node(); }31:T59b,legend = () => { // defining the size, rotation, orientation, font, and properties of labels for the legend // K is the size of the legend and n is the number of classes for each variable (here=3) //This parts of the code also define the filling colors in the legend //Define the label for each variable in the legend based on variable's titles const k = 20; const arrow = DOM.uid(); return svg` ${d3.cross(d3.range(n), d3.range(n)).map(([i, j]) => svg` ${data.title[0]}${labels[j] && ` (${labels[j]})`} ${data.title[1]}${labels[i] && ` (${labels[i]})`} `)} ${data.title[0]} ${data.title[1]} `; }32:[{"id":"8eab3cf4742c5c6626796c9085a2b74b36a1b7a9e95d1e84367e3c688e5f3982beba0a16962c7d1a5a4742f5ee03415ae34720af4ccd145252d695ec9ba6d414","href":"https://static.observableusercontent.com/files/8eab3cf4742c5c6626796c9085a2b74b36a1b7a9e95d1e84367e3c688e5f3982beba0a16962c7d1a5a4742f5ee03415ae34720af4ccd145252d695ec9ba6d414","name":"Floda_WGS84.json","type":"application/json","lastModified":1680477771793.496,"size":55995},{"id":"2cad10489976ef993919fe2309354c6acde3ff0c92bc8f0da008b58fe001eda8f7ec9750c0d4cbb89cd7fb28186824640affb90737e9dede02ffe81df905b72b","href":"https://static.observableusercontent.com/files/2cad10489976ef993919fe2309354c6acde3ff0c92bc8f0da008b58fe001eda8f7ec9750c0d4cbb89cd7fb28186824640affb90737e9dede02ffe81df905b72b","name":"Floridadata@1.csv","type":"text/csv","lastModified":1680487300620.899,"size":3310}] 2d:{"id":"6867dbfcd5b125ec","slug":null,"title":"Urban population density and Air Quality in Florida in 2010","thumbnail":"6824ca66139c2abbcbeb142a515a9a30a1aacd860fa4433e361a5e8eee47672d","access_level":"public","create_time":"$D2023-04-02T16:15:24.287Z","update_time":"$D2023-04-10T00:03:20.345Z","view_time":null,"first_public_time":"$D2023-04-02T16:15:24.287Z","fork":{"id":"65c7f6ce9b65d583","slug":"bivariate-choropleth-mapping","title":"Bivariate Choropleth Mapping","owner":{"id":"22130e106df70095","login":"geoviz","name":"Geographic Visualization (GEOG 3540) - University of Iowa"}},"stars":1,"starred":false,"owner":{"type":"team","id":"3398a8428d5fb276","login":"maryamtd","name":"Maryam Torkashvand","avatar_url":"https://avatars-next.observableusercontent.com/05a584e3d1cc226fc7b63bc6db9ea3ec7381ff14daac543a9337b77b883a4e1a","tier":"starter_2024"},"version":660,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"94f7e9be56450899","login":"maryamtd","name":"Maryam Torkashvand","avatar_url":"https://avatars-next.observableusercontent.com/05a584e3d1cc226fc7b63bc6db9ea3ec7381ff14daac543a9337b77b883a4e1a","tier":null}],"members":[{"type":"individual","id":"94f7e9be56450899","login":"maryamtd","name":"Maryam Torkashvand","avatar_url":"https://avatars-next.observableusercontent.com/05a584e3d1cc226fc7b63bc6db9ea3ec7381ff14daac543a9337b77b883a4e1a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"97010e8400167154","slug":"geovisualization-course","title":"Geovisualization course","owner":{"id":"3398a8428d5fb276","login":"maryamtd","name":"Maryam Torkashvand"}},"type":"notebook","body":{"title":"Urban population density and Air Quality in Florida in 2010","cells":[{"id":0,"value":"md`# Urban population density and Air Quality in Florida in 2010\n## Bivariate Choropleth Map of Florida at the county level\n### Data Sources: NHGIS and County Health Rankings`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":643,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":194,"value":"// making a selective view for color schemes \n\nviewof colors = {\n const form = html`

color scheme`;\n form.i.selectedIndex = 1;\n form.oninput = () => form.value = schemes[form.i.selectedIndex].colors;\n form.oninput();\n return form;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":649,"value":"md`### color schems for sequantial-sequantial bivariate map\nBivariate color schemes are designed to show different levels of two values simultaneously. In this map, which both variables are sequential, the schemes employ a sequential color approach, where lighter colors represent lower values and darker colors represent higher values. Essentially, a bivariate color scheme combines two sequential color schemes (from light to dark) for each variable. In this way, the lightest color represents \"low-low\" values, and the darkest color represents \"high-high\" values. we can verlay two univariate choropleths and optimize the color of the center cell in the palette. \nBellow schemes are the most common and the schems that can be used in the sequantial-sequantial bivariate mapping. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":359,"value":"// http://www.joshuastevens.net/cartography/make-a-bivariate-choropleth-map/\n// defining four different color schemes for the map as a selective bar, so the users can choose different color schemes; each color scheme has nine colors as the number of classes for each variable is three and totally we have nine classes\n\nschemes = [\n {\n name: \"RdBu\", \n colors: [\n \"#e8e8e8\", \"#e4acac\", \"#c85a5a\",\n \"#b0d5df\", \"#ad9ea5\", \"#985356\",\n \"#64acbe\", \"#627f8c\", \"#574249\"\n ]\n },\n {\n name: \"BuPu\", \n colors: [\n \"#e8e8e8\", \"#ace4e4\", \"#5ac8c8\",\n \"#dfb0d6\", \"#a5add3\", \"#5698b9\", \n \"#be64ac\", \"#8c62aa\", \"#3b4994\"\n ]\n },\n {\n name: \"GnBu\", \n colors: [\n \"#e8e8e8\", \"#b5c0da\", \"#6c83b5\",\n \"#b8d6be\", \"#90b2b3\", \"#567994\",\n \"#73ae80\", \"#5a9178\", \"#2a5a5b\"\n ]\n },\n {\n name: \"PuOr\", \n colors: [\n \"#e8e8e8\", \"#e4d9ac\", \"#c8b35a\",\n \"#cbb8d7\", \"#c8ada0\", \"#af8e53\",\n \"#9972af\", \"#976b82\", \"#804d36\"\n ]\n }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":542,"value":"//The legend color for NAN values\nnullcolorforlegend = d3.scaleOrdinal()\n .domain([NaN])\n .range([nancolor])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":540,"value":"//color for NAN values\nnancolor = d3.color(\"white\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":216,"value":"// lables for each class\nlabels = [\"low\", \"\", \"high\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":207,"value":"//the number of classes for each variable\nn = Math.floor(Math.sqrt(colors.length))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":209,"value":"//classify variable x based on quantile classification method\nx = d3.scaleQuantile(Array.from(data.values(), d => d[0]), d3.range(n))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":204,"value":"//classify variable y based on quantile classification method\ny = d3.scaleQuantile(Array.from(data.values(), d => d[1]), d3.range(n))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":486,"value":"path = d3.geoPath().projection(projection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":462,"value":"//define the Projection: transverse Mercator projection is suggested for Florida [http://www.radicalcartography.net/projections/state%20planes.gif] \n//Rotate the map sets the longitude of origin for our UTM projection.\nprojection = d3.geoTransverseMercator().rotate([87,0]).fitExtent([[10, 10], [width, height]], polygon_features);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":467,"value":"// reading the data as .csv file and making a data dictionary that assigns each county to the values of two variables\n//Statrdatdize the urban population and use average value for the second variable\n\ndata = Object.assign(new Map(d3.csvParse(await FileAttachment(\"Floridadata@1.csv\").text(), ({County, AverageDailyPM, UrbanPop, TotalPop}) => [County, [+AverageDailyPM, (+UrbanPop/+TotalPop)*100]])), {title: [\"Air Quality\", \"%Urban population\"]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":483,"value":"// The join attribute \nidAttribute = \"COUNTY\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":430,"value":"//defining a variable that stores the features of polygons' objects in a nested array\n\npolygon_features = topojson.feature(polygons, polygons.objects.Floda_WGS84)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"//add the map of Florida as the polygons. This map should be in topojson format and in WGS84 coordinate system. In polygons, the geometry and attributes of each object are saved\n\npolygons = FileAttachment(\"Floda_WGS84.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":427,"value":"height = 410","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":424,"value":"width = 570","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":480,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":477,"value":"//defining color function that assigns color into unit based on values of the variable \ncolor = {\n return value => {\n if (!value) return \"#ccc\";\n let [a, b] = value;\n return colors[y(b) + x(a) * n];\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":513,"value":"//defining format for values shown on the map\n\nformatNum = d3.format(\".1f\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":474,"value":"//defining the format function that assigns data labels (x and y labels)\n// x and y represent the variables, and a and b are the values of each variable, respectively\n\nformat = (value) => {\n if (!value) return \"N/A\";\n let [a, b] = value;\n return `${a} ${data.title[0]}${labels[x(a)] && ` (${labels[x(a)]})`}\n${formatNum(b)} ${data.title[1]}${labels[y(b)] && ` (${labels[y(b)]})`}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2e:"$2d:body"