31:T10d5,viewof selectedColorSpaceOutlet = { let value = 'Politico'; const margin = 27; const radius = 6; const svgWidth = width; const svgHeight = width < 500 ? width * 1.2 : width / 2; const pathGen = d3 .line() .x(d => d.x) .y(d => d.y) .curve(d3.curveNatural); const x = d3 .scaleLinear() .domain([0, 360]) .range([margin, svgWidth - margin]); const y = d3 .scaleLinear() .domain([85, width < 500 ? 20 : 25]) .range([0, svgHeight]); const colorsLayout = _(palettes) .map(row => { return { ...row, color: row.string, x: x(d3.hcl(row.string).h || 0), y: y(d3.hcl(row.string).l) }; }) .orderBy(['x', 'y'], ['asc', 'asc']) .value(); let voronoi = d3.Delaunay.from(colorsLayout, d => d.x, d => d.y).voronoi([ 0, -20, svgWidth, svgHeight + 60 ]); const chart = html`

${value}

${svg``}

`; let selectedGroup = d3.select(chart).select(".selected"); let outletName = d3.select(chart).select('.outletName'); function select(selected) { const node = chart; node.value = selected; outletName.node().innerText = selected; const selectedColorsLayout = colorsLayout.filter( d => d.outlet === selected ); const labels = selectedColorsLayout.map(d => ({ x: d.x, y: d.y + (radius + 2) * 2.4, label: d.candidate })); selectedGroup.select('g').remove(); selectedGroup.node().appendChild(svg` ${labels.map( d => svg` ${d.label} ${d.label} ` )} ${selectedColorsLayout.map( d => svg`` )} `); } d3.select(chart) .select('.voronoi') .selectAll('path') .data(colorsLayout) .enter() .append('path') .attr('class', 'voronoiCell') .attr('d', (d, i) => voronoi.renderCell(i)) .on('mouseover', d => select(d.outlet)); select(value); return Object.assign(chart, { value }); }32:T48f,showMap = (results, colors) => { const svg = d3 .create("svg") .attr('class', 'map') .attr("viewBox", [0, 0, 975, 610]); svg .append("path") .datum(topojson.feature(us, us.objects.nation)) .attr("fill", "#ccc") .attr("d", path); svg .append("g") .selectAll("path") .data( topojson .feature(us, us.objects.states) .features.filter(d => shownStates.indexOf(d.properties.name) !== -1) ) .enter() .append("path") .attr("fill", d => colors.has(results.get(d.properties.name)) ? colors.get(results.get(d.properties.name)) : '#666' ) .attr("d", path) .append('title') .text( d => `${d.properties.name}${ results.has(d.properties.name) ? `: ${results.get(d.properties.name)}` : '' }` ); svg .append("path") .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-width", "1.5px") .attr("stroke-linejoin", "round") .attr("pointer-events", "none") .attr("d", path); return svg.node(); }33:[{"id":"0d8fa65dce2397df03b75fb4fabbc7d79e2794ef64f018bdd1dd43460bc3795743e69dbf1d7456791cbef424e272d5cd33f49e3e445ce78f9a53ef5e5755e16e","href":"https://static.observableusercontent.com/files/0d8fa65dce2397df03b75fb4fabbc7d79e2794ef64f018bdd1dd43460bc3795743e69dbf1d7456791cbef424e272d5cd33f49e3e445ce78f9a53ef5e5755e16e","name":"states-albers-10m.json","type":"application/json","lastModified":1581814006059.619,"size":82031}] 2f:{"title":"Here are all the colors news sites use to show the Democrats running for president","cells":[{"id":0,"value":"md`# Here are all the colors news sites use to show the Democrats running for president`","pinned":false,"hidden":false,"mode":"ojs"},{"id":520,"value":"md`On Twitter, Joel Eastwood [rounded up the color palettes](https://twitter.com/JoelEastwood/status/1227645077750779904) used by major media outlets for presidential candidates (he followed it [later](https://twitter.com/JoelEastwood/status/1227710727840051201?s=20) with an expanded set):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"showPalettes(palettes)","pinned":false,"hidden":false,"mode":"ojs"},{"id":773,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":943,"value":"md`## Hue separation and lightness test`","pinned":false,"hidden":false,"mode":"ojs"},{"id":946,"value":"md`Where do the palettes fall on hue and lightness scales?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":908,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":728,"value":"md`## Super Tuesday forecast color test`","pinned":false,"hidden":false,"mode":"ojs"},{"id":735,"value":"md`Designers have to consider how the palette will hold up under varying conditions. What might a state map on a major news websites look like on Super Tuesday, March 3, if [FiveThirtyEight](https://projects.fivethirtyeight.com/2020-primary-forecast/)'s current delegate projections prove correct?\n\nThe \"winners\" of each state are randomized every ${seconds} seconds based on the forecasted probability they will win a plurality of delegates.\n\n_Note: This doesn't take into account other measures of uncertainty, national effects or how the candidates will split delegates. It's not a reliable predictor of the outcome. Some of these organizations do not make forecasts or use this type of map, for good reasons. This is a wildly unofficial experiment._\n\n(Candidates for which we have no colors are shown in dark gray — mostly Bloomberg.)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":837,"value":"viewof seconds = slider({\n min: 1,\n max: 60,\n step: 1,\n value: 10,\n title: \"Seconds\",\n description: \"Frequency with which to randomize the winners\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":688,"value":"html`

\n ${outlets.map(\n outlet =>\n html`

${outlet}

${showMap(\n new Map(winners.map(d => [d.state, d.candidate_last_name])),\n new Map(\n palettes\n .filter(d => d.outlet === outlet)\n .map(d => [d.candidate, d.string])\n )\n )}

`\n )}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":853,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":860,"value":"md`## Color blindness test`","pinned":false,"hidden":false,"mode":"ojs"},{"id":880,"value":"md`One consideration of graphics editors and mapmakers is how the palette will appear to people with color blindness. Here's a simulation of what this might look like for several types:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":891,"value":"viewof selectedColorBlindness = select({\n options: colorBlindnessTypes,\n value: \"deuteranomaly\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":871,"value":"showPalettes(\n palettes.map(color => ({\n ...color,\n string: blinder[selectedColorBlindness](color.string)\n }))\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":951,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":856,"value":"md`## Make your own test`","pinned":false,"hidden":false,"mode":"ojs"},{"id":536,"value":"md`\n\nTo include the data in a notebook:\n\n\\`\\`\\`js\nimport {palettes} from \"@chriszs/candidate-color-palettes\"\n\\`\\`\\`\n\nOr,\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":542,"value":"DOM.download(\n new Blob([JSON.stringify({ palettes })], {\n type: \"application/json\"\n }),\n 'palettes.json',\n 'Download JSON'\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":561,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1144,"value":"md`## Acknowledgments`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1150,"value":"md`- Original palette roundup by [Joel Eastwood](https://twitter.com/JoelEastwood/status/1227645077750779904).\n- Color palettes originally adapted from [@annabialas/color-palette](/@annabialas/color-palette).\n- Color extraction included from [@makio135/give-me-colors](/@makio135/give-me-colors).\n- Inputs included from [@jashkenas/inputs](/@jashkenas/inputs).\n- Hue/lightness chart adapted from [@jacomyma/the-shapes-of-all-colors](/@jacomyma/the-shapes-of-all-colors).\n- State maps adapted from [@mbostock/u-s-state-map](/@mbostock/u-s-state-map).\n- Forecasts from [FiveThirtyEight](https://projects.fivethirtyeight.com/2020-primary-forecast/).\n- Color blindness simulation from [color-blind](https://www.npmjs.com/package/color-blind).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1147,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":556,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":998,"value":"import { select, slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1067,"value":"htl = require(\"htl@0.0.9\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1068,"value":"svg = htl.svg","pinned":false,"hidden":false,"mode":"ojs"},{"id":1083,"value":"html = htl.html","pinned":false,"hidden":false,"mode":"ojs"},{"id":655,"value":"d3 = require('d3@5', \"d3-delaunay@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs"},{"id":632,"value":"md`### Extract news candidate colors`","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"outlets = [\n 'WSJ',\n 'NYT',\n 'WaPo',\n '538',\n 'LA Times',\n 'Bloomberg',\n 'CNN',\n 'Politico',\n 'Guardian',\n 'NBC',\n 'AP',\n 'Reuters'\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"candidates = [\n 'Sanders',\n 'Buttigieg',\n 'Warren',\n 'Biden',\n 'Klobuchar',\n 'Bloomberg'\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":626,"value":"imageUrl = 'https://pbs.twimg.com/media/EQm0PriXUAAJLJJ?format=png&name=small'","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"import { readPixels } from '@makio135/give-me-colors'","pinned":false,"hidden":false,"mode":"ojs"},{"id":605,"value":"colorNamer = require('https://unpkg.com/color-namer@1.3.0/dist/color-namer.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"imageData = readPixels(imageUrl)","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"rgbFormat = rgba => `rgb(${rgba.slice(0, 3).join(',')})`","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"pixels = imageData.pixels.map((pixel, i) => ({\n string: rgbFormat(pixel),\n value: pixel, \n x: i % imageData.width,\n y: Math.floor(i / imageData.width)\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"paletteColors = _(pixels)\n .filter(({ value }) => value.some(v => v <= 200))\n .countBy('string')\n .entries()\n .filter(color => color[1] > 800)\n .map(color => color[0])\n .value()","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"paletteWithCoords = paletteColors.map(\n color =>\n _(pixels)\n .filter(({ string }) => string === color)\n .groupBy('string')\n .map(pixels => ({\n ...pixels[0],\n x: Math.floor(_.sumBy(pixels, 'x') / pixels.length / 20) * 20,\n y: Math.floor(_.sumBy(pixels, 'y') / pixels.length / 15) * 15\n }))\n .value()[0]\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"paletteWithCoordsSorted = _.orderBy(\n paletteWithCoords,\n ['x', 'y'],\n ['asc', 'asc']\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":299,"value":"palettes = {\n let palette = [];\n let prevX = null;\n let prevY = 0;\n let column = 0;\n let row = 0;\n\n for (let color of paletteWithCoordsSorted) {\n if (prevX && prevX < color.x - 20) {\n column++;\n row = 0;\n }\n palette.push({\n ...color,\n name: colorNamer(color.string).ntc[0].name,\n outlet: outlets[column],\n candidate: candidates[row]\n });\n\n row++;\n prevX = color.x;\n prevY = color.y;\n }\n\n return palette;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":874,"value":"showPalettes = palettes => html`

\n\n ${outlets.map(\n outlet => html`

\n ${outlet}\n

`\n )}\n\n ${_(palettes)\n .groupBy('candidate')\n .toPairs()\n .map(\n candidate =>\n html`

${candidate[0]}

\n\n ${outlets.map(\n outlet => html`

`\n )}\n\n

`\n )\n .value()}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":442,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":750,"value":"md`### Super Tuesday forecast color test`","pinned":false,"hidden":false,"mode":"ojs"},{"id":713,"value":"shownStates = [\n 'Alabama',\n 'Arkansas',\n 'California',\n 'Colorado',\n 'Maine',\n 'Massachusetts',\n 'Minnesota',\n 'North Carolina',\n 'Oklahoma',\n 'Tennessee',\n 'Texas',\n 'Utah',\n 'Vermont',\n 'Virginia'\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":677,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":674,"value":"path = d3.geoPath()","pinned":false,"hidden":false,"mode":"ojs"},{"id":675,"value":"us = FileAttachment(\"states-albers-10m.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1280,"value":"fteForecastUrl = 'https://projects.fivethirtyeight.com/2020-primary-data/primary_forecast_2020_daily.csv'","pinned":false,"hidden":false,"mode":"ojs"},{"id":650,"value":"fteForecast = (await d3.csv(fteForecastUrl, d3.autoType)).map(row => ({\n ...row,\n candidate_last_name:\n candidates.find(name => row.candidate_name.indexOf(name) !== -1) ||\n row.candidate_name.split(' ')[1]\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":701,"value":"results = [\n { state: 'Iowa', candidate_name: 'Pete Buttigieg' },\n { state: 'New Hampshire', candidate_name: 'Bernie Sanders' }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":659,"value":"winners = {\n while (true) {\n yield _(fteForecast)\n .filter(\n row =>\n row.district === '(total)' && shownStates.indexOf(row.state) !== -1\n )\n .groupBy('state')\n .mapValues(cands => {\n const rand = Math.random();\n\n let winner = { candidate_last_name: 'none', state: cands[0].state };\n let cumulativePct = 0;\n for (let cand of cands) {\n if (\n rand > cumulativePct &&\n rand <= cand.delegate_plurality_chance + cumulativePct\n ) {\n winner = cand;\n break;\n }\n cumulativePct += cand.delegate_plurality_chance;\n }\n\n return winner;\n })\n .values()\n .value()\n .concat(results);\n await Promises.delay(1000 * seconds);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":672,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":716,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":863,"value":"md`### Color blindness test`","pinned":false,"hidden":false,"mode":"ojs"},{"id":868,"value":"blinder = require('https://bundle.run/color-blind@0.1.1')","pinned":false,"hidden":false,"mode":"ojs"},{"id":885,"value":"colorBlindnessTypes = Object.getOwnPropertyNames(blinder)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1076,"value":"md`### Hue separation and lightness test`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1080,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}