2f: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)}`)}

`; }30: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(); }31:[] 2d:{"title":"Exercise 2: Color your charts!","cells":[{"id":0,"value":"# Exercise 2: Color your charts!\nWe've left color out of these two charts. The purpose of this exercise is to get you to think about **how to use color to reveal patterns** in the data.\n\nThere might be other things we've missed — so remember that the point of a visualization is to help you answer the stated question.\n\nReview the [Color section over at Plot's documentation](https://github.com/observablehq/plot/blob/main/README.md#color-options) to see your available options.\n\n---","pinned":false,"hidden":false,"mode":"md"},{"id":206,"value":"toc({\n title: 'Problems',\n headers: 'h2'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"---\n## How did Spain's new infections compare to other countries?\n[Ooops! We did it again](https://www.youtube.com/watch?v=CduA0TULnow). We forgot to add color to this chart as well 🤷. We want to emphasize a country, but still see the rest. We want it all. How?","pinned":false,"hidden":false,"mode":"md"},{"id":224,"value":"Swatches(d3.scaleOrdinal([\"Spain\", \"Other Countries\"], [\"#E68700\",\"#E5E2D9\"]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"Plot.plot({\n color: {\n range: [\"#E5E2D9\",\"#E68700\"]\n },\n marks: [\n Plot.ruleY([0]),\n Plot.line(infections, {\n x: \"parsedDate\",\n y: \"new_cases_smoothed\",\n z: \"id\",\n stroke: (infection) => isSpain(infection.id),\n sort: (infection) => isSpain(infection.id),\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":187,"value":"---\n## Who's being left behind?\nWell ... missing color again 😬. In this case, we want to use redundancy (encode a variable visually more than once) to emphasize the correlation between a country's wealth and its access to vaccines. ","pinned":false,"hidden":false,"mode":"md"},{"id":264,"value":"Legend(d3.scaleSequential([0, 120], d3.interpolateGreens), {\n title: \"People fully vaccinated per hundred\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"Plot.plot({\n height: 640,\n x: {type: \"log\"},\n color:{\n scheme: \"greens\"\n },\n marks: [\n Plot.dot(vaccinated, {\n y: \"people_fully_vaccinated_per_hundred\", \n x: \"gdp_per_capita\", \n fill: \"people_fully_vaccinated_per_hundred\",\n r: \"population\"}),\n Plot.dot(vaccinated, {\n y: \"people_fully_vaccinated_per_hundred\", \n x: \"gdp_per_capita\", \n stroke: \"#808080\",\n strokeWidth: 0.75,\n r: \"population\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"---\n#### Addendum: data, libraries, other ...","pinned":false,"hidden":false,"mode":"md"},{"id":160,"value":"vaccinated = Object.entries(_vaccinated).map(([key, value]) => value);","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"_vaccinated = (await fetch(\"https://raw.githubusercontent.com/owid/covid-19-data/master/public/data/latest/owid-covid-latest.json\")).json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"import {data_ALL_flat as infections} from \"@xaquingv/mds-week02-basics-of-plot\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"import { toc } from \"@nebrius/indented-toc\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"function isSpain(id) {\n if (id === 'ESP'){\n return true\n }\n return false\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}