25:["$","title",null,{"children":"Exercise 4: Color & Aesthetics | Richard Fu | Observable"}] 49:T64c,{ const margin = {top: 10, right: 30, bottom: 20, left: 40}; const visWidth = width - margin.left - margin.right; const visHeight = 500 - margin.top - margin.bottom; const svg = d3.create('svg') .attr('width', visWidth + margin.left + margin.right) .attr('height', visHeight + margin.top + margin.bottom); const g = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); const x = d3.scaleTime() .domain([minStockDate, maxStockDate]) .range([0, visWidth]); const y = d3.scaleLinear() .domain([0, maxPrice]).nice() .range([visHeight, 0]); const xAxis = d3.axisBottom(x); const yAxis = d3.axisLeft(y); const color = d3.scaleOrdinal(companies, d3.schemeCategory10) g.append('g') .attr('transform', `translate(0,${visHeight})`) .call(xAxis.ticks(d3.timeYear)); g.append('g') .call(yAxis) .call(g => g.selectAll('.domain').remove()) .append('text') .attr('text-anchor', 'start') .attr('dominant-baseline', 'middle') .attr('fill', 'black') .attr('x', 5) .text('Stock Price ($)'); const line = d3.line() .x(d => x(d.date)) .y(d => y(d.price)); const series = g.selectAll('.series') .data(companyToPrices) .join('g') .attr('stroke', ([company, prices]) => color(company)) // this is where line color is set .attr('class', 'series') .append('path') .datum(([company, prices]) => prices) .attr('fill', 'none') .attr('stroke-width', 1.5) .attr('d', line); return svg.node(); }4a:T655,{ const margin = {top: 20, right: 10, bottom: 10, left: 30}; const visWidth = width - margin.left - margin.right; const x = d3.scaleBand() .domain(d3.range(53)) .range([0, visWidth]) .padding(0.05); const visHeight = x.step() * 7; const svg = d3.select(DOM.svg(visWidth + margin.left + margin.right, visHeight + margin.top + margin.bottom)); const g = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); const y = d3.scaleBand() .domain(['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']) .range([0, visHeight]) .padding(0.05) // day of week labels const yAxis = d3.axisLeft(y) .tickPadding(10) .tickSize(0); const color = d3.scaleSequential([0, maxPrecipitation], d3.interpolatePurples) g.append('g') .call(yAxis) .call(g => g.selectAll('.domain').remove()); // month labels const firstOfMonths = weather.filter(d => d.date.getDate() === 1); g.selectAll('.month') .data(firstOfMonths) .join('text') .attr('class', 'month') .attr('font-family', 'sans-serif') .attr('font-size', 10) .attr('x', d => x(d.week)) .attr('y', -5) .text(d => d3.timeFormat('%b')(d.date)) // squares g.selectAll('rect') .data(weather) .join('rect') .attr('x', d => x(d.week)) .attr('y', d => y(d.day)) .attr('width', x.bandwidth()) .attr('height', y.bandwidth()) .attr('fill', d => color(d.precipitation)) // this is where square color is set return svg.node(); }4b:T41f,{ const margin = {top: 0, right: 0, bottom: 0, left: 0}; const visWidth = 600 - margin.left - margin.right; const visHeight = 400 - margin.top - margin.bottom; const color = d3.scaleSequential(percentChangeExtent, d3.interpolateBlues) const getState = feature => feature.properties.NAME const svg = d3.create('svg') .attr('width', visWidth + margin.left + margin.right) .attr('height', visHeight + margin.top + margin.bottom); const g = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); // draw map const projection = d3.geoAlbersUsa() .fitSize([visWidth, visHeight], usaGeo); const path = d3.geoPath().projection(projection); g.selectAll('.border') .data(usaGeo.features.filter(d => d.properties.NAME !== 'Puerto Rico')) .join('path') .attr('class', 'border') .attr('d', path) .attr('fill', d => color(stateToPopulation[getState(d)].change)) // this is where the color of a state is set .attr('stroke', 'white') return svg.node(); }4c:T42d,{ const margin = {top: 0, right: 0, bottom: 0, left: 0}; const visWidth = 600 - margin.left - margin.right; const visHeight = 400 - margin.top - margin.bottom; const color = d3.scaleThreshold([-0.7, -0.24, 0.32, 0.88, 1.44, 2.1], d3.schemeSpectral[6]) const getState = feature => feature.properties.NAME const svg = d3.create('svg') .attr('width', visWidth + margin.left + margin.right) .attr('height', visHeight + margin.top + margin.bottom); const g = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); // draw map const projection = d3.geoAlbersUsa() .fitSize([visWidth, visHeight], usaGeo); const path = d3.geoPath().projection(projection); g.selectAll('.border') .data(usaGeo.features.filter(d => d.properties.NAME !== 'Puerto Rico')) .join('path') .attr('class', 'border') .attr('d', path) .attr('fill', d=>color(stateToPopulation[getState(d)].change)) // this is where the color of a state is set .attr('stroke', 'white') return svg.node(); }4d:T87e,{ const margin = {top: 10, right: 100, bottom: 20, left: 40}; const visWidth = width - margin.left - margin.right; const visHeight = 500 - margin.top - margin.bottom; const color = d3.scaleOrdinal(highlightCountries, d3.schemeTableau10) const svg = d3.create('svg') .attr('width', visWidth + margin.left + margin.right) .attr('height', visHeight + margin.top + margin.bottom); const g = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); const x = d3.scaleTime() .domain([minYear, maxYear]) .range([0, visWidth]); const y = d3.scaleLinear() .domain([0, maxLifeExpect]).nice() .range([visHeight, 0]); const xAxis = d3.axisBottom(x); const yAxis = d3.axisLeft(y); g.append('g') .attr('transform', `translate(0,${visHeight})`) .call(xAxis); g.append('g') .call(yAxis) .call(g => g.selectAll('.domain').remove()) .append('text') .attr('text-anchor', 'start') .attr('dominant-baseline', 'middle') .attr('fill', 'black') .attr('x', 5) .text('Life Expectancy'); const line = d3.line() .x(d => x(d.year)) .y(d => y(d.life_expect)); const series = g.selectAll('.series') .data(countryToLifeExpectancies) .join('g') .attr('class', 'series') .attr('stroke', ([country, info]) => {if(highlightCountries.includes(country)) {return color(country)} else {return 'black'}}) // this is where line color is set .attr('stroke-opacity', ([country, info]) => {if(highlightCountries.includes(country)) {return 1} else {return 0.1}}) // this is where line opacity is set .attr('stroke-width', 1) .append('path') .datum(([country, info]) => info) .attr('fill', 'none') .attr('d', line); g.selectAll('.country-label') .data(labelPoints) .join('text') .attr('class', 'country-label') .attr('x', d => x(d.year) + 2) .attr('y', d => y(d.life_expect)) .attr('font-size', 10) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text(d => d.country); return svg.node(); }4e:T93d,{ // margin convention const margin = {top: 10, right: 10, bottom: 50, left: 100}; const visWidth = 510 - margin.left - margin.right; const visHeight = 460 - margin.top - margin.bottom; const color = d3.scaleOrdinal(origins, d3.schemeTableau10) const svg = d3.create('svg') .attr('width', visWidth + margin.left + margin.right) .attr('height', visHeight + margin.top + margin.bottom); const g = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); // create scales const x = d3.scaleLinear() .domain(d3.extent(cars, d => d.horsepower)).nice() .range([0, visWidth]); const y = d3.scaleLinear() .domain(d3.extent(cars, d => d.weight)).nice() .range([visHeight, 0]); // create and add axes const xAxis = d3.axisBottom(x); g.append("g") .attr('transform', `translate(0, ${visHeight})`) .call(xAxis) .call(g => g.selectAll('.domain').remove()) .append('text') .attr('x', visWidth / 2) .attr('y', 40) .attr('fill', 'black') .attr('text-anchor', 'middle') .text('horsepower'); const yAxis = d3.axisLeft(y); g.append('g') .call(yAxis) .call(g => g.selectAll('.domain').remove()) .append('text') .attr('x', -40) .attr('y', visHeight / 2) .attr('fill', 'black') .attr('dominant-baseline', 'middle') .text('weight (lbs)'); // draw grid, based on https://observablehq.com/@d3/scatterplot const grid = g.append('g') .attr('class', 'grid'); grid.append('g') .selectAll('line') .data(y.ticks()) .join('line') .attr('stroke', lightgray) .attr('x1', 0) .attr('x2', visWidth) .attr('y1', d => 0.5 + y(d)) .attr('y2', d => 0.5 + y(d)); grid.append('g') .selectAll('line') .data(x.ticks()) .join('line') .attr('stroke', lightgray) .attr('x1', d => 0.5 + x(d)) .attr('x2', d => 0.5 + x(d)) .attr('y1', d => 0) .attr('y2', d => visHeight); // draw points g.selectAll('circle') .data(cars) .join('circle') .attr('cx', d => x(d.horsepower)) .attr('cy', d => y(d.weight)) .attr('fill', d => color(d.origin)) // this is where the dot color is set .attr('opacity', 1) .attr('r', 3); return svg.node(); }4f:T830,// Copyright 2021, Observable Inc. // Released under the ISC license. // https://observablehq.com/@d3/color-legend function Swatches(color, { columns = null, format, unknown: formatUnknown, swatchSize = 15, swatchWidth = swatchSize, swatchHeight = swatchSize, marginLeft = 0 } = {}) { const id = `-swatches-${Math.random().toString(16).slice(2)}`; const unknown = formatUnknown == null ? undefined : color.unknown(); const unknowns = unknown == null || unknown === d3.scaleImplicit ? [] : [unknown]; const domain = color.domain().concat(unknowns); if (format === undefined) format = x => x === unknown ? formatUnknown : x; function entity(character) { return `&#${character.charCodeAt(0).toString()};`; } if (columns !== null) return htl.html`

${domain.map(value => { const label = `${format(value)}`; return htl.html`

${label}

`; })}

`; return htl.html`

${domain.map(value => htl.html`${format(value)}`)}

`; }50:T120f,// Copyright 2021, Observable Inc. // Released under the ISC license. // https://observablehq.com/@d3/color-legend function Legend(color, { title, tickSize = 6, width = 320, height = 44 + tickSize, marginTop = 18, marginRight = 0, marginBottom = 16 + tickSize, marginLeft = 0, ticks = width / 64, tickFormat, tickValues } = {}) { function ramp(color, n = 256) { const canvas = document.createElement("canvas"); canvas.width = n; canvas.height = 1; const context = canvas.getContext("2d"); for (let i = 0; i < n; ++i) { context.fillStyle = color(i / (n - 1)); context.fillRect(i, 0, 1, 1); } return canvas; } const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("overflow", "visible") .style("display", "block"); let tickAdjust = g => g.selectAll(".tick line").attr("y1", marginTop + marginBottom - height); let x; // Continuous if (color.interpolate) { const n = Math.min(color.domain().length, color.range().length); x = color.copy().rangeRound(d3.quantize(d3.interpolate(marginLeft, width - marginRight), n)); svg.append("image") .attr("x", marginLeft) .attr("y", marginTop) .attr("width", width - marginLeft - marginRight) .attr("height", height - marginTop - marginBottom) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(color.copy().domain(d3.quantize(d3.interpolate(0, 1), n))).toDataURL()); } // Sequential else if (color.interpolator) { x = Object.assign(color.copy() .interpolator(d3.interpolateRound(marginLeft, width - marginRight)), {range() { return [marginLeft, width - marginRight]; }}); svg.append("image") .attr("x", marginLeft) .attr("y", marginTop) .attr("width", width - marginLeft - marginRight) .attr("height", height - marginTop - marginBottom) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(color.interpolator()).toDataURL()); // scaleSequentialQuantile doesn’t implement ticks or tickFormat. if (!x.ticks) { if (tickValues === undefined) { const n = Math.round(ticks + 1); tickValues = d3.range(n).map(i => d3.quantile(color.domain(), i / (n - 1))); } if (typeof tickFormat !== "function") { tickFormat = d3.format(tickFormat === undefined ? ",f" : tickFormat); } } } // Threshold else if (color.invertExtent) { const thresholds = color.thresholds ? color.thresholds() // scaleQuantize : color.quantiles ? color.quantiles() // scaleQuantile : color.domain(); // scaleThreshold const thresholdFormat = tickFormat === undefined ? d => d : typeof tickFormat === "string" ? d3.format(tickFormat) : tickFormat; x = d3.scaleLinear() .domain([-1, color.range().length - 1]) .rangeRound([marginLeft, width - marginRight]); svg.append("g") .selectAll("rect") .data(color.range()) .join("rect") .attr("x", (d, i) => x(i - 1)) .attr("y", marginTop) .attr("width", (d, i) => x(i) - x(i - 1)) .attr("height", height - marginTop - marginBottom) .attr("fill", d => d); tickValues = d3.range(thresholds.length); tickFormat = i => thresholdFormat(thresholds[i], i); } // Ordinal else { x = d3.scaleBand() .domain(color.domain()) .rangeRound([marginLeft, width - marginRight]); svg.append("g") .selectAll("rect") .data(color.domain()) .join("rect") .attr("x", x) .attr("y", marginTop) .attr("width", Math.max(0, x.bandwidth() - 1)) .attr("height", height - marginTop - marginBottom) .attr("fill", color); tickAdjust = () => {}; } svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x) .ticks(ticks, typeof tickFormat === "string" ? tickFormat : undefined) .tickFormat(typeof tickFormat === "function" ? tickFormat : undefined) .tickSize(tickSize) .tickValues(tickValues)) .call(tickAdjust) .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("x", marginLeft) .attr("y", marginTop + marginBottom - height - 6) .attr("fill", "currentColor") .attr("text-anchor", "start") .attr("font-weight", "bold") .attr("class", "title") .text(title)); return svg.node(); }51:[{"id":"18e58346b5d3a52c4e301e25fbe613316a9e21fd4c76d0c1eea3d5dc537322c3f8928fe0074754c3d6bff498f4bec3d2a32928aa1db8f138b18ce8a6c6034253","href":"https://static.observableusercontent.com/files/18e58346b5d3a52c4e301e25fbe613316a9e21fd4c76d0c1eea3d5dc537322c3f8928fe0074754c3d6bff498f4bec3d2a32928aa1db8f138b18ce8a6c6034253","name":"population-2018-2019.csv","type":"text/csv","lastModified":1679072736780.07,"size":1199},{"id":"5bffca711a2b45090494c77bab30bfa36859ecb5a0619c7d93e1da8f8089be61df96021c578b53cfbd2c3f6611e2567183fec5ed9a66876b50bb47123b2c56b9","href":"https://static.observableusercontent.com/files/5bffca711a2b45090494c77bab30bfa36859ecb5a0619c7d93e1da8f8089be61df96021c578b53cfbd2c3f6611e2567183fec5ed9a66876b50bb47123b2c56b9","name":"gz_2010_us_040_00_20m.json","type":"application/json","lastModified":1679072736780.07,"size":1426336}] 29:{"id":"7ae710c788ee8ebd","slug":null,"title":"Exercise 4: Color & Aesthetics","thumbnail":"1ff9136dd14e2c9780cdc07b4152fb6c16f61a961a6d3e3b56f29c01e128eb53","access_level":"public","create_time":"$D2023-03-17T17:05:36.780Z","update_time":"$D2023-04-10T13:52:33.310Z","view_time":null,"first_public_time":"$D2023-03-17T17:05:36.780Z","has_unpublished_edits":null,"fork":{"id":"902ea79d41562993","slug":"exercise-4-color-aesthetics","title":"Exercise 4: Color & Aesthetics","owner":{"id":"0bf1c981cc4de90c","login":"kroneml","name":"Michael Krone"}},"stars":0,"starred":false,"owner":{"type":"team","id":"f20a617e5ad34e39","login":"rjf9225","name":"Richard Fu","avatar_url":"https://avatars-next.observableusercontent.com/05cc71b64a7e2c70386d6fb495a12747ccfb51091e42b766225dec019241af59","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":682,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e1c56a8af8a5a3d1","login":"rjf9225","name":"Richard Fu","avatar_url":"https://avatars-next.observableusercontent.com/05cc71b64a7e2c70386d6fb495a12747ccfb51091e42b766225dec019241af59","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"e1c56a8af8a5a3d1","login":"rjf9225","name":"Richard Fu","avatar_url":"https://avatars-next.observableusercontent.com/05cc71b64a7e2c70386d6fb495a12747ccfb51091e42b766225dec019241af59","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Exercise 4: Color & Aesthetics","cells":[{"id":0,"value":"md`# Exercise 4: Color & Aesthetics\n\nIn this exercise, we have created visualizations that do not have any color. Your task is to add appropriate color to them.\n\nThe [Color Legend](/@d3/color-legend) notebook imported below contains examples of how to make various color scales and their legends. I recommend looking at that notebook and the links it gives.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"import {legend, swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`## Problem 1\n\nFirst, we have a line chart that shows the stock prices for ${companies.length} companies: ${companies.join(', ')}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"companyToPrices = {\n const stocks = (await datasets['stocks.csv']())\n .map(d => ({\n 'symbol': d.symbol,\n 'price': d.price,\n 'date': d3.timeParse('%b %e %Y')(d.date)\n }))\n .filter(d => d.date >= minStockDate)\n\n return d3.group(stocks, d => d.symbol);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"companies = Array.from(companyToPrices.keys())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"minStockDate = d3.timeParse('%b %e %Y')('Jan 1 2005')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"maxStockDate = d3.max(companyToPrices, ([company, prices]) => d3.max(prices, p => p.date))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":601,"value":"Swatches(d3.scaleOrdinal(companies, d3.schemeCategory10))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"maxPrice = d3.max(companyToPrices, ([company, prices]) => d3.max(prices, p => p.price))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"md`## Problem 2\n\nNext, we have a heat map that should show the daily precipitation amounts in millimeters for Seattle, WA in 2015.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":592,"value":"parseDate = d3.timeParse('%Y/%m/%d')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"minWeatherDate = d3.timeParse('%Y/%m/%d')(\"2015/01/01\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"maxWeatherDate = d3.timeParse('%Y/%m/%d')(\"2015/12/31\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"weather = (await datasets['seattle-weather.csv']())\n .map(d => {\n const date = parseDate(d.date);\n return {\n 'precipitation': d.precipitation,\n 'date': date,\n 'day': d3.timeFormat('%a')(date),\n 'week': +d3.timeFormat('%U')(date)\n };\n })\n .filter(d => d.date >= minWeatherDate && d.date <= maxWeatherDate)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"maxPrecipitation = d3.max(weather, d => d.precipitation)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":613,"value":"Legend(d3.scaleSequential([0, maxPrecipitation], d3.interpolatePurples), {\n title: \"Precipitation (mm)\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"md`## Problem 3\n\nThis dataset contains estimated percent changes in population for each state for 2018 to 2019. We want to show it in a choropleth map. The data is from the [U.S. Census Bureau, Population Division](https://www.census.gov/content/census/en/data/tables/time-series/demo/popest/2010s-state-total.html).\n\nYou can find it in the following table linked above: Annual Estimates of the Resident Population for the United States, Regions, States, and Puerto Rico: April 1, 2010 to July 1, 2019 (NST-EST2019-01)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"populations = d3.csvParse(await FileAttachment('population-2018-2019.csv').text(), d3.autoType)\n .map(d => ({\n state: d.state,\n change: d['percent-change'],\n population: d.population\n }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"stateToPopulation = {\n const map = new Map(populations.map(d => [\n d.state,\n { change: d.change, population: d.population }\n ]));\n \n return Object.fromEntries(map);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"percentChangeExtent = d3.extent(populations, d => d.change)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"md`The map data comes from [here](https://eric.clst.org/tech/usgeojson/) and is based on boundaries given by the U.S. Census Bureau.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"usaGeo = FileAttachment('gz_2010_us_040_00_20m.json').json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":619,"value":"Legend(d3.scaleSequential(percentChangeExtent, d3.interpolateBlues))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"md`## Problem 4\n\nNext, we want to have a choropleth map that shows the estimated 2019 population for each state. In this choropleth, we want you to bin the data into 5 bins. Rather than a continuous color range, we only want the map to contain 5 colors. These colors can have the same hue.\n\nWe can use the same population data as the previous problem.\n\n\nNote: The thresholding allows for percentage changes less than -0.7, but there are none in the dataset, so there are still 5 colors in the map, despite the legend showing 6 colors`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"populations","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"stateToPopulation","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":624,"value":"Legend(d3.scaleThreshold([-0.7, -0.24, 0.32, 0.88, 1.44, 2.1], d3.schemeSpectral[6]), {\n title: \"Age (years)\",\n tickSize: 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"md`## Problem 5\n\nThis dataset contains the life expectancy for ${countryToLifeExpectancies.size} different countries over a few decades. We have a line chart that shows every country, but we want to highlight a few specific countries, listed below.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"highlightCountries = ['Rwanda', 'Kenya', 'China', 'Japan']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"countryToLifeExpectancies = d3.rollup((await datasets['countries.json']()),\n g => g.map(d => ({year: d3.timeParse('%Y')(d.year),\n life_expect: d.life_expect})),\n d => d.country)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"labelPoints = highlightCountries.map(c => {\n const years = countryToLifeExpectancies.get(c);\n return {\n country: c,\n year: years[years.length - 1].year,\n life_expect: years[years.length - 1].life_expect\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"minYear = d3.min(countryToLifeExpectancies, ([country, info]) => d3.min(info, d => d.year))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"maxYear = d3.max(countryToLifeExpectancies, ([country, info]) => d3.max(info, d => d.year))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"maxLifeExpect = d3.max(countryToLifeExpectancies, ([country, info]) => d3.max(info, d => d.life_expect))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":673,"value":"Swatches(d3.scaleOrdinal(highlightCountries, d3.schemeTableau10))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"md`## Problem 6\n\nFinally, we have a scatter plot of cars that compares horsepower and weight. Each car has one of three origins: ${origins.join(', ')}. We want the plot to also show the origin of each car.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"cars = (await datasets['cars.json']()).map(d => ({\n horsepower: d['Horsepower'],\n weight: d['Weight_in_lbs'],\n origin: d['Origin']\n})).filter(d => d.horsepower !== null && d.weight !== null && d.origin !== null)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"value":"origins = Array.from(new Set(cars.map(d => d.origin)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":677,"value":"Swatches(d3.scaleOrdinal(origins, d3.schemeTableau10))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":479,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"md`---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"d3 = require('d3@7')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"datasets = require('vega-datasets@1')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"lightgray = '#dcdcdc'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":608,"value":"$4f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":615,"value":"$50","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W51","stdlib":"1"}} 24:null