31:T1e42,// Copyright 2021, Observable Inc. // Released under the ISC license. // https://observablehq.com/@d3/color-legend function Legend(color, { title, tickSize = 8, width = 320, height = 100 + tickSize, width_full = 600, height_full = 400, marginTopheader = 25, marginTop = 70, marginRight = 0, marginBottom = 16 + tickSize, marginLeft = 25, ticks = width / 64, tickFormat, tickValues, tickLabels } = {}) { 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_full) .attr("height", height_full) .attr("viewBox", [0, 0, width_full, height_full]) .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(function(d,i){ return tickLabels[i] }) : undefined) .tickSize(tickSize) .tickValues(tickValues)) //.tickFormat(function(d,i){ return tickLabels[i] }) .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") .style("font-family", "Atkinson Hyperlegible") .style("font-size", "14px") .attr("class", "title") .text(title)); // add how to svg.append("text") // add text for dashed lines .attr("x", marginLeft) .attr("y", marginTopheader) .text("How to read this graph:") .style("font-family", "Atkinson Hyperlegible") .style("font-size", "14px") .style("font-weight", "bold"); // add NA svg.append('rect') .attr('x', width + 8) .attr('y', marginTop) .attr('width', 30) .attr('height', height - marginTop - marginBottom) .attr('stroke', 'grey') .attr('fill', 'grey'); svg.append("text") // add label NA .attr("x", width + 15) .attr("y", height - 6) .text("NA") .style("font-family", "Atkinson Hyperlegible") .style("font-size", "10px"); // add manual legend for dashed lines and constitutions svg.append("text") // add label for cc .attr("x", width + 88) .attr("y", marginTop - 6) .text("Constitutional Change") .style("font-family", "Atkinson Hyperlegible") .style("font-size", "14px"); svg.append("line") // dashed line for legend .attr("x1", width + 90) .attr("x2", width + 90) .attr("y1", marginTop) .attr("y2", height - 16) .style("stroke-width", 2) .style("stroke-dasharray","5,5") // dashed array for line .style("stroke", "#878787"); svg.append("text") // add text for dashed lines .attr("x", width + 100) .attr("y", marginTop + 13) .text("Amendment") .style("font-family", "Atkinson Hyperlegible") .style("font-size", "14px"); svg.append("line") .attr("x1", width + 200) .attr("x2", width + 200) .attr("y1", marginTop) .attr("y2", height -16) .style("stroke-width", 2) .style("stroke", "#878787"); svg.append("text") // dashed lines are amendments .attr("x", width + 210) .attr("y", marginTop + 13) .text("New") .style("font-family", "Atkinson Hyperlegible") .style("font-size", "14px"); svg.append("foreignObject") .attr("x", 10) .attr("y", height) .attr("width", 600) .attr("height", 200) .append("xhtml:body") .style("font", "14px 'Atkinson Hyperlegible'") .html("

The color represents how populist the country's government at the time was according to the V-Party populism score. We calculated the mean populism score per government without considering the strength per party. The score is continuuous and equals 0 if a government was not populist at all, and 1 if the party was very populist. The [V-Party dataset's](https://www.v-dem.net/data/v-party-dataset/) populism score is based on their anti-elite and people-centred items. Find out more in their [codebook](https://www.v-dem.net/documents/6/vparty_codebook_v2.pdf)!

"); return svg.node(); }32:T846,// Copyright 2021, Observable Inc. // Released under the ISC license. // https://observablehq.com/@d3/color-legend function Swatches(color, { columns = null, format, unknown: formatUnknown, swatchWidth = 25, swatchHeight = 2, 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)}`)}

`; }33:[] 2f:{"title":"Adapted Color Legend","cells":[{"id":0,"value":"md`# Adapted Color Legend\n\nAdapted [color legends from Mike Bostok](/@d3/color-schemes). Changed looks of swatched to lines to match the optics of a line-graph better and changed fonts to Atkinson Hyperlegible for accesibility.\n\n~~~js\nimport {Legend, Swatches} from \"@jasminsworkspace/color-legend\"\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"Legend(d3.scaleSequential([0, 100], d3.interpolateViridis), {\n title: \"Temperature (°F)\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":304,"value":"Legend(d3.scaleSequentialSqrt([0, 1], d3.interpolateTurbo), {\n title: \"Speed (kts)\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":96,"value":"Legend(d3.scaleDiverging([-0.1, 0, 0.1], d3.interpolatePiYG), {\n title: \"Daily change\",\n tickFormat: \"+%\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":306,"value":"Legend(d3.scaleDivergingSqrt([-0.1, 0, 0.1], d3.interpolateRdBu), {\n title: \"Daily change\",\n tickFormat: \"+%\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":64,"value":"Legend(d3.scaleSequentialLog([1, 100], d3.interpolateBlues), {\n title: \"Energy (joules)\",\n ticks: 10\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":275,"value":"Legend(d3.scaleSequentialQuantile(d3.range(100).map(() => Math.random() ** 2), d3.interpolateBlues), {\n title: \"Quantile\",\n tickFormat: \".2f\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":664,"value":"Legend(d3.scaleSqrt([-100, 0, 100], [\"blue\", \"white\", \"red\"]), {\n title: \"Temperature (°C)\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":207,"value":"Legend(d3.scaleQuantize([1, 10], d3.schemePurples[9]), {\n title: \"Unemployment rate (%)\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":267,"value":"Legend(d3.scaleQuantile(d3.range(1000).map(d3.randomNormal(100, 20)), d3.schemeSpectral[9]), {\n title: \"Height (cm)\",\n tickFormat: \".0f\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":240,"value":"Legend(d3.scaleThreshold([2.5, 3.1, 3.5, 3.9, 6, 7, 8, 9.5], d3.schemeRdBu[9]), {\n title: \"Unemployment rate (%)\",\n tickSize: 0\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":551,"value":"Legend(d3.scaleOrdinal([\"<10\", \"10-19\", \"20-29\", \"30-39\", \"40-49\", \"50-59\", \"60-69\", \"70-79\", \"≥80\"], d3.schemeSpectral[10]), {\n title: \"Age (years)\",\n tickSize: 0,\n tickLabels: [\"a\",\"b\",\"c\",\"d\",\"e\",\"f\",\"g\",\"h\",\"j\"]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":534,"value":"md`But wait, there’s more!\n\nHow about swatches for ordinal color scales? Both variable-width swatches and [column layout](https://developer.mozilla.org/en-US/docs/Web/CSS/columns) are supported.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":542,"value":"Swatches(d3.scaleOrdinal([\"blueberries\", \"oranges\", \"apples\"], d3.schemeCategory10))","pinned":true,"hidden":false,"mode":"ojs"},{"id":565,"value":"Swatches(d3.scaleOrdinal([\"Wholesale and Retail Trade\", \"Manufacturing\", \"Leisure and hospitality\", \"Business services\", \"Construction\", \"Education and Health\", \"Government\", \"Finance\", \"Self-employed\", \"Other\"], d3.schemeTableau10), {\n columns: \"180px\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":436,"value":"md`---\n\n## Implementation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":811,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":5,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":705,"value":"function legend({color, ...options}) {\n return Legend(color, options);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":538,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":706,"value":"function swatches({color, ...options}) {\n return Swatches(color, options);\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}