2d:null 2e:["$","title",null,{"children":"Exploring d3 with Michigan Covid Data | E. Kerney | Observable"}] 33:T57c,md `The Covid-19 global Pandemic has been a worldwide crisis like none other seen in modern times. The toll on health and lives is beyond measure, and the ensuing disruption has created an emotional strain for everyone. The feeling of suffering and powerlessness can be overwhelming, and one way that I hope to contribute is through understanding, analyzing, and sharing the underlying data. Earlier in the crisis I created a Covid [Dashboard](https://bit.ly/38MFK02) using [ESRI](https://www.esri.com/en-us/home) to help with the frontend layout. It employed node.js, chart.js, and Firebase, along with the ArcGIS JavaScript API for mapping. While it was a great start, the end result is a bit lacking in visual impact (it does still work after 9 months...though badly needs updating). I've decided to explore d3 and Observable to get some new inspirations for how to better understand and display this information. If you are not familiar with ObservableHQ, start with this tutorial: [Observable Intro](https://observablehq.com/@observablehq/five-minute-introduction) Observable Notebooks are similar to the Jupyter interface for Python, though with some key differences: automatic cell execution, topological order, and much faster execution speed! Observable is a great method for prototyping with d3, and also for testing our other visualizations and JavaScript snippets.
`34:T4c2, data = { let allRegData = []; //define functions, get current cases for each region const getRegionCases = (countyNames,regLabel) => { let regCases = {'region':regLabel,'type':'cases','label':regLabel,'val':0,'color':'orange'}; for (const county of michigan) { const matchName = (item, index) => regCases.val=item==county.county?(regCases.val+county.cases): regCases.val; countyNames.forEach(matchName); }; return (regCases); } //get current dths for each regions const getRegionDths = (countyNames,regLabel) => { let regDths = {'region':regLabel,'type':'deaths','label':'','val':0,'color':'red'}; for (const county of michigan) { const matchName = (item, index) => regDths.val=item==county.county?(regDths.val+county.deaths): regDths.val; countyNames.forEach(matchName); }; return (regDths); } //forEach function to iterate over each region in state object const getRegions = (item,index) => { allRegData.push(getRegionCases(item[1],item[0])); allRegData.push(getRegionDths(item[1],item[0])); } //calls the getRegions function for each of the state regions Object.entries(stateRegions).forEach(getRegions); return allRegData }35:T534,md`Finally we are ready to draw some circles from the data! If this is your first time working with d3, you may want to [start here](https://observablehq.com/@uvizlab/d3-tutorial-2-introduction-to-d3-with-observable?collection=@uvizlab/d3-tutorial) The x & y locations are a way to space out the symbols, and can be shifted by just changing the value once. There are also more complex transformations in d3, but we can leave that for the next Notebook! We first create our drawing space, and then specify height & width: \`\`\`javascript const svg = d3.create("svg") \`\`\` Next we will create circles using our 'data' cell, which is an array of objects. Arrow functions are a standard convention in d3, so you should be comfortale with them. 'd' represents each record in the data array, and 'i' is an index that increases by one for each record. Next we add some attributes for our circle: \`\`\`javascript .attr('r', d => d.val/1000) \`\`\` .attr is for attribute, 'r' is radius, 'd' is each record, and 'd.val' could be any key/value pair named for that record. So 'd.region' or 'd.type' in this cases would also be valid, though we couldn't divide a string by a number ;) Since the 'd.val' values are in the 10's or 100's of thousands, we need to perform division by 1000 to fit the circles on screen. ` 36:T4f9,chart2 = { const radValCases = d3.scaleSqrt().domain(getMinMax('cases')).range([10, 160]); const radValDths = d3.scaleSqrt().domain([getMinMax('deaths')[0],getMinMax('cases')[1]]).range([2, 160]); const caseScale = d3.scaleSqrt().domain(getMinMax('cases')).range([.5, .9]); const x = 150, y = 150; const xLoc = [x,x,x*2,x*2,x*3,x*3,x*4,x*4,x,x,x*2,x*2,x*3,x*3,x*4,x*4]; const yLoc = [y,y,y,y,y,y,y,y,y*2,y*2,y*2,y*2,y*2,y*2,y*2,y*2,]; const svg = d3.create("svg") .attr("width",700) .attr("height",380); const circles = svg.selectAll("circle") .data(data) .enter() .append("circle") .attr("cx", (d,i) => xLoc[i]) .attr("cy", (d,i) => yLoc[i]) .transition() .duration(3000); const circleAttributes = circles .attr("cx", (d,i) => xLoc[i]) .attr("cy", (d,i) => yLoc[i]) .attr("r", d => (d.type == 'cases' ? radValCases(d.val):radValDths(d.val))) .style('opacity', d => d.type=='cases'? 0.6:0.8) .attr('stroke', d => d.type=='cases'?'#520691':'black') .attr('stroke-width', d => d.type=='cases'? 5 : 0) .style("stroke-dasharray", d => d.type=='cases'?("10,10"):'') .attr('fill', d => (d.type == 'cases' ? d3.interpolateTurbo(caseScale(d.val)):'#5c5c5c')) return svg.node(); }37:Tb4b,function miCovidChart() { const radValCases = d3.scaleSqrt().domain(getMinMax('cases')).range([10, 160]); const radValDths = d3.scaleSqrt().domain([getMinMax('deaths')[0],getMinMax('cases')[1]]).range([2, 160]); const caseScale = d3.scaleSqrt().domain(getMinMax('cases')).range([.5, .9]); const x = 150, y = 150; const xLoc = [x,x,x*2,x*2,x*3,x*3,x*4,x*4,x,x,x*2,x*2,x*3,x*3,x*4,x*4]; const yLoc = [y,y,y,y,y,y,y,y,y*2,y*2,y*2,y*2,y*2,y*2,y*2,y*2,]; const svg = d3.create("svg") .attr("width",700) .attr("height",400); const circles = svg.selectAll("circle") .data(data) .enter() .append("circle") .attr("cx", (d,i) => xLoc[i]) .attr("cy", (d,i) => yLoc[i]) .transition() .duration(6000) const circleAttributes = circles .attr("cx", (d,i) => xLoc[i]) .attr("cy", (d,i) => yLoc[i]) .attr("r", d => (d.type == 'cases' ? radValCases(d.val):radValDths(d.val))) .style('opacity', d => d.type=='cases'? 0.6:0.7) .attr('stroke', d => d.type=='cases'?'#520691':'black') .attr('stroke-width', d => d.type=='cases'? 4 : 0) .style("stroke-dasharray", d => d.type=='cases'?("10,10"):'') .attr('fill', d => (d.type == 'cases' ? d3.interpolateTurbo(caseScale(d.val)):'#5c5c5c')) const text = svg.selectAll("text") .data(data) .enter() .append("text") .attr("x", (d,i) => (xLoc[i]-23)) .attr("y", (d,i) => (yLoc[i]+60)) .attr("font-size", "3px") .transition() .duration(3000) const textLabels = text .attr("x", (d,i) => (xLoc[i]-50)) .attr("y", (d,i) => (yLoc[i]+70)) .text(d => (`${d.label}`)) .attr("font-family", "palatino linotype") .attr("font-size", "15px") svg.append("text") .attr("x", (width / 2)) .attr("y", 35) .style("font-size", "10px") .transition() .duration(2000) .attr("text-anchor", "middle") .style("font-size", "22px") .attr("font-family", "palatino linotype") .text("Michigan Regions Covid Data") svg.append("text") .attr("x", (width / 2)) .attr("y", 55) .style("font-size", "5px") .transition() .duration(2000) .attr("x", (width / 2)) .attr("y", 60) .attr("text-anchor", "middle") .style("font-size", "15px") .attr("font-family", "palatino linotype") .text("Cases = Outer Circle - Deaths = Inner Circle"); svg.append("text") .attr("x", (width / 2)) .attr("y", 72) .style("font-size", "3px") .transition() .duration(2000) .attr("x", (width / 2)) .attr("y", 77) .attr("text-anchor", "middle") .style("font-size", "11px") .attr("font-family", "palatino linotype") .text("(Data NOT Normalized for Population)"); return svg.node(); }38:T426,stateRegions = { const regions = {'Detroit Region':['Genesee','Lapeer','Livingston','Macomb','Monroe','Oakland','St. Clair','Washtenaw','Wayne'],'Grand Rapids Reg':['Clare','Ionia','Isabella','Kent','Lake','Mason','Mecosta','Montcalm','Muskegon','Newaygo','Oceana','Ottawa','Osceola'],'Kalamazoo Region':['Allegan','Barry','Berrien','Branch','Calhoun','Cass','Kalamazoo','St. Joseph','Van Buren'], 'Saginaw Region':['Alcona','Arenac','Bay','Gladwin','Huron','Iosco','Midland','Ogemaw','Oscoda','Saginaw','Sanilac','Tuscola'], 'Lansing Region':['Clinton','Eaton','Gratiot','Ingham','Shiawassee'],'Traverse City Reg':['Antrim','Alpena','Benzie','Charlevoix','Cheboygan','Crawford','Emmet','Grand Traverse','Kalkaska','Leelanau','Manistee','Missaukee','Montmorency','Otsego','Presque Isle','Roscommon','Wexford'], 'Jackson Region':['Hillsdale','Jackson','Lenawee'],'Upper Peninsula Reg':['Alger','Baraga','Chippewa','Delta','Dickinson','Gogebic','Houghton','Iron','Keweenaw','Luce','Mackinac','Marquette','Menominee','Ontonagon','Schoolcraft']}; return regions; }39:[] 31:{"id":"14760eb18c2aa7cd","slug":"michigan-covid-d3","title":"Exploring d3 with Michigan Covid Data","thumbnail":"60857384f4064391ece4c505682990b3616c0f30dc1524358bdaa2bcb4f22185","access_level":"public","create_time":"$D2020-10-23T13:06:41.373Z","update_time":"$D2025-01-13T18:44:56.187Z","view_time":null,"first_public_time":"$D2020-11-16T21:13:23.112Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"6773b9d940faa10e","login":"location-artistry","name":"E. Kerney","avatar_url":"https://avatars-next.observableusercontent.com/6a41b9491e318e4761cdb6210d6adb0880ed593495f2090cabed95169e3165f2","tier":"starter_2024"},"version":1164,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"06ed914427a4c051","login":"location-artistry","name":"E. Kerney","avatar_url":"https://avatars-next.observableusercontent.com/6a41b9491e318e4761cdb6210d6adb0880ed593495f2090cabed95169e3165f2","tier":null}],"members":[{"type":"individual","id":"06ed914427a4c051","login":"location-artistry","name":"E. Kerney","avatar_url":"https://avatars-next.observableusercontent.com/6a41b9491e318e4761cdb6210d6adb0880ed593495f2090cabed95169e3165f2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Exploring d3 with Michigan Covid Data","cells":[{"id":0,"value":"md`# Exploring d3 with Michigan Covid Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"md`### Getting started with d3 custom visualizations in ObservableHQ\n### #locationVisualization - December 2020`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":800,"value":"{\n b2;\n return miCovidChart()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":804,"value":"viewof b2 = button({value: \"REPLAY\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":714,"value":"md`The final concept is shown above. Each set of circles represents one of the eight Michigan Regions, which have been **pre-determined** by the state. The large circles represent *total cases*, while the smaller inner circles show *deaths*. The colors for the outer circle also shift from green to red as the count gets higher. The Regions are not normalized for population, and do **NOT** contain the same number of counties, which is important to keep in mind. \n\nClick on the three dots to the left of any cell to view the source code. \n
\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1058,"value":"md`## The Visualization`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"md`### Let's start with a simple SVG circle`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"html`` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":851,"value":"md`\n\\`\\`\\`html\n\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"md`We've created an svg canvas sized 100 x 100 pixels, and have our friendly circle. \nLet's add a thicker stroke and change the color to blue-violet. You can use named CSS colors for svg drawings. Try here to learn more about -> [SVG Basics](https://observablehq.com/@mkfreeman/part-2-observable-svg-basics)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"html`` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":868,"value":"md`\n\\`\\`\\`html\n\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"md`Now let's see if we can get our SVG to accept a JavaScript variable as the path... \nNote the alternating single(') and double(\"quotes) in the path string.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"circleData = \"cx='60' cy='60' r='40' stroke='darkturquoise' stroke-width='8' fill='mediumspringgreen'\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"//To render HTML in Observable, type html with the code enclosed in backticks\n//Preceeding the curly brackets with a $ allows access to the circleData binding from the previous cell\nhtml``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"md`
\nOK... now we've got our circle, and can also access the path from a separate cell. \nIt's **DATA TIME** \nLet's pull the CSV data for US Counties from the New York Times [gitHub repo](https://raw.githubusercontent.com/nytimes/covid-19-data/master/live/us-counties.csv), which is one source of authoritative Covid Data sources, and is updated daily. \nThe link takes you to the raw .csv data.\n\nFirst we will require d3, which contains fantastic libraries for parsing, sorting, and visualizing your data.\nd3 can quickly fetch the csv data from a url, determine the binding types using autoType, and transform the information into a usable array of objects! Click the arrow to the right of the **getData** cell to see over 3000 county records for the US.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"d3=require('d3');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"getData = {\n const dataUrl = 'https://raw.githubusercontent.com/nytimes/covid-19-data/master/live/us-counties.csv';\n const dataFetch = d3.csv(dataUrl, d3.autoType);\n return dataFetch;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"md`Let's examine one of these records to see what keys/attributes they contain. Also notice how d3.autoType has differentiated our value types. We see that each object contains the date, county and state name, county fips code, total cases and dths`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"getData[1280]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"md`Next we want to create a new array with only the Michigan counties. \nThis was my first shot at filtering the records:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"michiganData = {\n let michArray = [], x;\n for (x = 0; x < getData.length; x++){\n getData[x].state == 'Michigan' ? michArray.push(getData[x]) : '';\n };\n return michArray;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"md`Yes it works. \nBut this method is not very readable or efficient. \nAlso, whenever you write multi-line statements in Observable, they need to be enclosed in brackets and then given a name, here we are using 'michiganData' which seems to be a decent description.\n\nWhat about using the higher order array function filter() to refactor this operation...\n\n**BRILLIANT!** \n`\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"// using the d parameter convention from d3, though it could be anything i.e. sandwich or penguin...\nmichigan = getData.filter(d => d.state == 'Michigan');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1115,"value":"md`We have now reduced these county records from more than 3200 to the 84 counties of the Pleasant Peninsula's.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"md`Let's aggregate these 84 counties into the 8 state defined Covid Regions. See the appendicies below for a cell named stateRegions which contains an array of the counties in each region.\n\nNext we need a method for matching up the list of counties in each region with the data array of county objects. This will provide the case and dth count for each of the regions as a separate record. The count key will be 'val' and the 'type' key will specify which value we are working with. \n\nObject.entries() provides an efficient method to loop through the regions object, and executes a .forEach() to add up the values.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"md`A quick look at the data shows that we have succesfully aggregated the cases by region, this is the record for the cases in the Detroit Region. \n\nNow let's get working on that data Viz!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"data[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"md`Before we start drawing, we will need a minMax function, which is essential to create scales in d3. This clever little function uses the *array.filter()* higher order function which is passed the type as an argument, and returns an array of [min, max] using **d3.extent**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"getMinMax = (typeVal) => {\n const casesArray = data.filter(d => d.type == typeVal)\n const minMax = d3.extent(casesArray, d => +d.val);\n return minMax;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"chart1 = {\n const x = 120, y = 120;\n const xLoc = [x,x,x*2,x*2,x*3,x*3,x*4,x*4,x,x,x*2,x*2,x*3,x*3,x*4,x*4];\n const yLoc = [y,y,y,y,y,y,y,y,y*2,y*2,y*2,y*2,y*2,y*2,y*2,y*2,];\n \n const svg = d3.create(\"svg\")\n .attr(\"width\",600)\n .attr(\"height\",360);\n \n const circles = svg.selectAll(\"circle\")\n .data(data)\n .enter()\n .append(\"circle\")\n .attr(\"cx\", (d,i) => xLoc[i])\n .attr(\"cy\", (d,i) => yLoc[i]);\n \n const circleAttributes = circles\n .attr(\"cx\", (d,i) => xLoc[i])\n .attr(\"cy\", (d,i) => yLoc[i])\n .attr('r', d => d.val/1000)\n .attr('stroke',d => 'deepskyblue')\n .attr('fill', d => 'aquamarine')\n .attr('stroke-width', d => 2)\n .style('opacity', d => 0.8)\n \n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"md`OK, our circles are sized based on the values, but we should use a scale that better reflects the area of a circle based on it's values. \n\nScales are not the easiest thing to grapple with in d3. Essentially it's a method of transforming a range of values into something that can be classified, e.g. translating a range of 10 to 10,000 into a range of 0 to 1. This may sound familiar if you come from statistics background, or is also comprable to re-classifying a feature value to be displayed in a chloropleth map. \n\nIt took me some time to understand the parameters of the scale function, and to get something meaningful to be returned based on the measurement. Don't get deterred if you also find this confusing at first! \nHere are some [d3 Scale Resources](https://observablehq.com/@d3/learn-d3-scales) from [Mike Bostock](https://observablehq.com/@mbostock) \n
\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":391,"value":"md`Let's create a cell to test out the **scale**, and plug in some different values to see what is returned. The doman here is set as the getMinMax('cases'), which provides the range of values for the number of confirmed cases per region. The range defines the size of the symbol based on the value of this measurement. We start with a Linear. \nThe trailing portion of the statement: .range([10, 160]) gives the actual size of the circles. This is related tp the size of your svg canvas, and something you would want to tinker with on another project.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"radiusScaleLinear = d3.scaleLinear().domain(getMinMax('cases')).range([10, 160]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"radiusScaleLinear(50000)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"md`Exploring the data has shown that the max is around 100,000, with the min near 10,000, so plugging in a value of 50,000 returns a circle with a radius of about 82 pixels. This seems logical, except that the area of a circle does not follow a linear relationship. A = Pie(r)^2 which is better represented by a square root or exponential scale. You can take my word that I experimented with many scales before settling on the scaleSqrt() as both the most effective and visually representative of this scale. The radiusScaleSqrt() function returns us 106.4, which shows hows the scale is working a bit differently than the Linear.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"radiusScaleSqrt = d3.scaleSqrt().domain(getMinMax('cases')).range([10, 160]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"radiusScaleSqrt(50000)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"md`The final actually uses a subtle color scale, interpolateTurbo from d3 which ranges from blue = 'cold', red = 'hot'. This adds a little color splash to our Viz! Adjusting the color scale was rather tedious, so I setup this tester function to plug in my data values to see if I was returning valid rgb color values. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"colorReturn = {\n let colorValues = [];\n const colorScale = d3.scaleSqrt().domain(getMinMax('cases')).range([0, 1]);\n data.forEach((item,index) => colorValues.push(d3.interpolateTurbo(colorScale(item.val))));\n return colorValues;\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":422,"value":"md`After the d3. you can type in interpolate and wait for the pop-up menu in Observable to show the range of colorScales available in d3. I went with interpolateTurbo but there are so many schmes to choose from. The results of our colorReturn cell look to be valid, so that's another success...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"md`Let's specify which scale we will use depending on the value type i.e. \nval == 'cases' OR val == 'dths'\nIt looks like this: \n.attr(\"r\", d => (d.type == 'cases' ? radValCases(d.val):radValDths(d.val))) \nIf you haven't used this form of IF statement in JavaScript, it's a condensed way to say if our record.type = 'cases' then use the cases scale, otherwise use the scale for deaths. A similar statement is used to change the symbolization for either the inner or outer circle. I'm using a dashed line for the outer cases circle which is my poorly designed attempt to give a virus like appearance. And borrowing from some other Obervable examples, we'll add a transition duration to the drawing the SVG cirlces, which I think brings the visualization to life.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":449,"value":"md`This is starting to be a thing, nice work! So far we've visualized both the cases and dths with circles of semi-proportional area, and even set the color based on the number of cases. Not to mention that nice little spinning animation. By inserting the cx and cy .attr before the animation, the circles spring forth from their location, instead of the default of originating from the upper left. Now some text labels would be key to giving the user some sense of what they are looking at!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":510,"value":"md`## Adding Text!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"md`First thing is to create a svg selectAll element similar to what was done for the spinning circles. A transition and duration is added as well to match. The inital size can be specified here with the font-size attribute. The x, y locations allow the text to animate in place instead of flying in from the upper left. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"md`\n\\`\\`\\`javascript \n const text = svg.selectAll(\"text\")\n .data(data)\n .enter()\n .append(\"text\")\n .attr(\"x\", (d,i) => (xLoc[i]-23))\n .attr(\"y\", (d,i) => (yLoc[i]+60))\n .attr(\"font-size\", \"3px\")\n .transition()\n .duration(3000)\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"md`Without the next section the text labels would never appear. This specifies the final size and location for each region label. Only the Cases data record contain a label though, since we have a record for both cases and dths, only one is necessary.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"md`\n\\`\\`\\`javascript\n const textLabels = text \n .attr(\"x\", (d,i) => (xLoc[i]-50))\n .attr(\"y\", (d,i) => (yLoc[i]+70))\n .text(d => (\\`\\${d.label}\\`))\n .attr(\"font-family\", \"palatino linotype\")\n .attr(\"font-size\", \"15px\")\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"md`We are getting so close to the finish line! Just need to add a Title and description. The easiest method that I found for this was append additional text elements to our svg canvas. No need to pull in the text from data, just specify the x, y locations and enter your copy into the .text() section below.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":530,"value":"md`\n\\`\\`\\`javascript \nsvg.append(\"text\")\n .attr(\"x\", (width / 2)) \n .attr(\"y\", 35)\n .style(\"font-size\", \"10px\") \n .transition()\n .duration(2000)\n .attr(\"text-anchor\", \"middle\") \n .style(\"font-size\", \"22px\") \n .attr(\"font-family\", \"palatino linotype\") \n .text(\"Michigan Regions Covid Data\")\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":816,"value":"md`I'll do the same for the subheadings as well, manually add the text using svg.append(\"text\"). \nWhile I'm using three separate statements to format and add this copy, if you know a more element method for adding nicely formatted text to an svg graphic let me know!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":815,"value":"md`And that wraps up our Michigan Covid-19 visualization project! \nClick the replay button below to see the final version with the animation. \nThe code is shown below.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":814,"value":"md`## Many Thanks\nInspired by Shirley Wu's [Film Flowers](https://observablehq.com/@sxywu/introduction-to-svg-and-d3-js) \nHelpful Lessons from [Anjana Vakil](https://observablehq.com/@anjana) & [Ian Johnson](https://observablehq.com/@enjalot) \n \n## So glad to learn d3, svg, and Observable together! \n[LocationArtistry@twitter](https://twitter.com/LocationArtist2) - #locationVisualization geoDataViz blog \n\n
\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":644,"value":"viewof b1 = button({value: \"REPLAY\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":646,"value":"{\n b1;\n return miCovidChart()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":557,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"md`## Appendicies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":636,"value":"import {button} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 32:"$31:body"