28:null 29:["$","title",null,{"children":"HW4 Lab - Maps and Grouping | UofU DataVis Course Lab | Observable"}] 2f:T92a,//DataSource: eMarketer, March 2018 marketingData = [ { year: 2016, media: "Digital", spending: 72.2 }, { year: 2017, media: "Digital", spending: 90.39 }, { year: 2018, media: "Digital", spending: 107.3 }, { year: 2019, media: "Digital", spending: 125.75 }, { year: 2020, media: "Digital", spending: 142.23 }, { year: 2021, media: "Digital", spending: 156.43 }, { year: 2022, media: "Digital", spending: 170.48 }, { year: 2016, media: "TV", spending: 71.29 }, { year: 2017, media: "TV", spending: 70.22 }, { year: 2018, media: "TV", spending: 69.87 }, { year: 2019, media: "TV", spending: 69.17 }, { year: 2020, media: "TV", spending: 69.52 }, { year: 2021, media: "TV", spending: 68.82 }, { year: 2022, media: "TV", spending: 68.13 }, { year: 2016, media: "Print", spending: 25.49 }, { year: 2017, media: "Print", spending: 22.81 }, { year: 2018, media: "Print", spending: 20.05 }, { year: 2019, media: "Print", spending: 17.29 }, { year: 2020, media: "Print", spending: 15.19 }, { year: 2021, media: "Print", spending: 13.56 }, { year: 2022, media: "Print", spending: 12.38 }, { year: 2016, media: "Radio", spending: 14.33 }, { year: 2017, media: "Radio", spending: 14.33 }, { year: 2018, media: "Radio", spending: 14.41 }, { year: 2019, media: "Radio", spending: 14.43 }, { year: 2020, media: "Radio", spending: 14.46 }, { year: 2021, media: "Radio", spending: 14.49 }, { year: 2022, media: "Radio", spending: 14.52 }, { year: 2016, media: "Out-of-home", spending: 7.6 }, { year: 2017, media: "Out-of-home", spending: 7.75 }, { year: 2018, media: "Out-of-home", spending: 7.87 }, { year: 2019, media: "Out-of-home", spending: 7.95 }, { year: 2020, media: "Out-of-home", spending: 8.03 }, { year: 2021, media: "Out-of-home", spending: 8.11 }, { year: 2022, media: "Out-of-home", spending: 8.19 }, { year: 2016, media: "Directories", spending: 2.35 }, { year: 2017, media: "Directories", spending: 1.83 }, { year: 2018, media: "Directories", spending: 1.47 }, { year: 2019, media: "Directories", spending: 1.19 }, { year: 2020, media: "Directories", spending: 0.99 }, { year: 2021, media: "Directories", spending: 0.84 }, { year: 2022, media: "Directories", spending: 0.74 } ];30:[{"id":"6b1776f5a0a0e76e6428805c0074a8f262e3f34b1b50944da27903e014b409958dc29b03a1c9cc331949d6a2a404c19dfd0d9d36d9c32274e6ffbc07c11350ee","href":"https://static.observableusercontent.com/files/6b1776f5a0a0e76e6428805c0074a8f262e3f34b1b50944da27903e014b409958dc29b03a1c9cc331949d6a2a404c19dfd0d9d36d9c32274e6ffbc07c11350ee","name":"counties-albers-10m.json","type":"application/octet-stream","lastModified":1663345165324.599,"size":795407},{"id":"f1b082b288d1ff68ce68d70a7c1462ed4eb6fe6690313449eabac107b66015a5730b1af7f7240a2e5c72d6f647ede863fdfbb90a6fa745a02352beec6ef0a7c9","href":"https://static.observableusercontent.com/files/f1b082b288d1ff68ce68d70a7c1462ed4eb6fe6690313449eabac107b66015a5730b1af7f7240a2e5c72d6f647ede863fdfbb90a6fa745a02352beec6ef0a7c9","name":"world.json","type":"application/json","lastModified":1663345494626.203,"size":3627951}] 2c:{"id":"50d98c3ec194aa73","slug":null,"title":"HW4 Lab - Maps and Grouping","thumbnail":"fd7245b46f8e39d10a786262f48e25bcfc9d654860f3504470ee39badf5c6b75","access_level":"public","create_time":"$D2022-09-16T16:19:25.324Z","update_time":"$D2022-09-19T23:44:46.640Z","view_time":null,"first_public_time":"$D2022-09-16T16:19:25.324Z","fork":{"id":"e6b14a27aef67561","slug":"d3-u-s-map","title":"D3 U.S. map","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"9de0004241b44d0b","login":"uofudatavis","name":"UofU DataVis Course Lab","avatar_url":"https://avatars-next.observableusercontent.com/7bf5931a1601de6ee744933197347953d832ea5290dc2d9ca685fca4e0ca1691","tier":"starter_2024"},"version":676,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9fad417e2f2243f2","login":"jackwilb","name":"Jack Wilburn","avatar_url":"https://avatars-next.observableusercontent.com/df4baccf921bebe84f2c6dcba2227d5aba86fb56b87c414c74f5788d194880bd","tier":null}],"members":[{"type":"individual","id":"9fad417e2f2243f2","login":"jackwilb","name":"Jack Wilburn","avatar_url":"https://avatars-next.observableusercontent.com/df4baccf921bebe84f2c6dcba2227d5aba86fb56b87c414c74f5788d194880bd","tier":null,"role":"editor"},{"type":"team","id":"9de0004241b44d0b","login":"uofudatavis","name":"UofU DataVis Course Lab","avatar_url":"https://avatars-next.observableusercontent.com/7bf5931a1601de6ee744933197347953d832ea5290dc2d9ca685fca4e0ca1691","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"HW4 Lab - Maps and Grouping","cells":[{"id":0,"value":"md`# HW4 Lab - Maps and Grouping`","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"## Libraries","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"d3 = require(\"d3\", \"d3-geo-projection@4\", \"d3-geo@2\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":196,"value":"topojson = require(\"topojson@3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":200,"value":"## Map Preparation","pinned":false,"hidden":false,"mode":"md"},{"id":135,"value":"usa = FileAttachment(\"counties-albers-10m.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":630,"value":"nation = topojson.feature(usa, usa.objects.nation)","pinned":true,"hidden":false,"mode":"ojs"},{"id":186,"value":"states = topojson.feature(usa, usa.objects.states)","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"projection = d3.geoAlbersUsa().scale(1300).translate([487.5, 305])","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"path = d3.geoPath()","pinned":true,"hidden":false,"mode":"ojs"},{"id":162,"value":"graticule = d3.geoGraticule();","pinned":true,"hidden":false,"mode":"ojs"},{"id":202,"value":"## Create Map","pinned":false,"hidden":false,"mode":"md"},{"id":160,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":204,"value":"svg = d3.select('#map')","pinned":true,"hidden":false,"mode":"ojs"},{"id":248,"value":"### Graticule","pinned":false,"hidden":false,"mode":"md"},{"id":229,"value":"// svg\n// .select('#graticule')\n// .append('path')\n// .attr('d', path(graticule()))\n// .attr('fill', 'none')\n// .attr('stroke', 'black')\n// .style('opacity', 0.2);","pinned":true,"hidden":false,"mode":"ojs"},{"id":250,"value":"### Countries","pinned":false,"hidden":false,"mode":"md"},{"id":260,"value":"colorScale = d3.scaleSequential(d3.interpolateReds).domain([0, 1])","pinned":true,"hidden":false,"mode":"ojs"},{"id":244,"value":"{\n svg\n .select('#nation')\n .append('path')\n .attr('d', path(nation))\n .attr('fill', 'none')\n .attr('stroke', 'lightgrey')\n\n const stateD3 = svg\n .select('#states')\n .selectAll('path')\n .data(states.features)\n .enter()\n .append('path')\n .attr('d', path)\n .attr('fill', (d) => colorScale(Math.random()))\n .attr('stroke', 'lightgrey')\n \n stateD3.on('click', (d) => {\n console.log('clicked', d)\n })\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":280,"value":"## Gradient Filled","pinned":false,"hidden":false,"mode":"md"},{"id":578,"value":"To make a gradient filled rectangle, we need to use ``. ","pinned":false,"hidden":false,"mode":"md"},{"id":285,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":290,"value":"legend = d3.select('#legend')\n .append('rect')\n .attr('width', innerWidth)\n .attr('y', 0)\n .attr('height', 50)\n .attr('fill', 'url(#color-gradient)');","pinned":true,"hidden":false,"mode":"ojs"},{"id":352,"value":"## Data Grouping","pinned":false,"hidden":false,"mode":"md"},{"id":356,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":359,"value":"groupedMarketingData = d3.group(marketingData, (d) => d.media)","pinned":true,"hidden":false,"mode":"ojs"},{"id":354,"value":"## Line Chart","pinned":false,"hidden":false,"mode":"md"},{"id":363,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":365,"value":"lineChart = d3.select('#line-chart-svg')","pinned":true,"hidden":false,"mode":"ojs"},{"id":367,"value":"### Scales and Axes","pinned":false,"hidden":false,"mode":"md"},{"id":393,"value":"padding = {\n return {left: 50, bottom: 50, right:40}\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":379,"value":"lineColorScale = d3.scaleOrdinal(d3.schemeTableau10).domain(groupedMarketingData.keys());","pinned":true,"hidden":false,"mode":"ojs"},{"id":382,"value":"// Add x axis --> it is a date format\nxAxis = {\n const xAxis = d3.scaleLinear()\n .domain([2016, 2022])\n .range([ padding.left, innerWidth - padding.right]);\n\n lineChart\n .select('#x-axis')\n .attr('transform', `translate(0, ${600 - padding.bottom})`)\n .call(d3.axisBottom(xAxis).ticks(7,'.2d'))\n\n // Append x axis text\n lineChart\n .select('#axes')\n .append('text')\n .text('Year')\n .attr('x', 550)\n .attr('y', 600);\n\n return xAxis\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":412,"value":"// Add x axis --> it is a date format\nyAxis = {\n // Add y axis\n const yAxis = d3.scaleLinear()\n .domain([0, Math.max(...marketingData.map((row) => row.spending))])\n .range([ 600 - padding.bottom, 10 ])\n .nice();\n\n lineChart.select('#axes')\n .append('g')\n .attr('transform', `translate(${padding.left},0)`)\n .call(d3.axisLeft(yAxis));\n\n // Append y axis text\n lineChart\n .select('#axes')\n .append('text')\n .text('Spending')\n .attr('x', -340)\n .attr('y', 20)\n .attr('transform', 'rotate(-90)');\n\n return yAxis\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":370,"value":"### Plotting","pinned":false,"hidden":false,"mode":"md"},{"id":455,"value":"lineChart\n .select('#lines')\n .selectAll('path')\n .data(groupedMarketingData)\n .join('path')\n .attr('fill', 'none')\n .attr('stroke', ([group, values]) => lineColorScale(group))\n .attr('stroke-width', 1)\n .attr('d', ([group, values]) => d3.line()\n .x((d) => xAxis(d.year))\n .y((d) => yAxis(d.spending))\n (values))","pinned":true,"hidden":false,"mode":"ojs"},{"id":475,"value":"### Interaction","pinned":false,"hidden":false,"mode":"md"},{"id":477,"value":"lineChart.on('mousemove', (event) => {\n if (event.clientX > padding.left && event.clientX < innerWidth - padding.right) {\n // Set the line position\n lineChart\n .select('#overlay')\n .select('line')\n .attr('stroke', 'black')\n .attr('x1', event.clientX)\n .attr('x2', event.clientX)\n .attr('y1', 600 - padding.bottom)\n .attr('y2', 0);\n\n // Find the relevant data (by date and location)\n const yearHovered = Math.floor( xAxis.invert(event.clientX))\n const filteredData = marketingData\n .filter((row) => row.year === yearHovered)\n .sort((rowA, rowB) => rowB.spending - rowA.spending)\n\n lineChart.select('#overlay')\n .selectAll('text')\n .data(filteredData)\n .join('text')\n .text(d=>`${d.media}, ${d3.format(d.spending, '.1d')}`)\n .attr('x', event.clientX)\n .attr('y',(d,i)=>20*i + 20)\n .attr('alignment-baseline', 'hanging')\n .attr('fill', (d) => lineColorScale(d.media));\n }\n});","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2d:"$2c:body"