31:Tc51,viz = { const width = 1000 const height = width / 1.6 const svg = d3.select(this || DOM.svg(width, height)) const margin = { bottom: 80, left: 50, top: 80, right: 60 } const { view, sizeBy, colorBy, xVar, yVar } = config; const t = d3.transition() .delay(50) .duration(750) let rScale = r => sizeBy === '[equal]' ? view === 'Bubble' ? 40 : 20 : d3.scaleLinear() .domain(d3.extent(data, d => d[sizeBy])) .range([3, (view === 'Bubble' ? 100 : 50)])(r) let xScale = d3.scaleLinear() .domain(d3.extent(data, d => +d[xVar])) .range([margin.left, width - margin.right]) let yScale = d3.scaleLinear() .domain(d3.extent(data, d => +d[yVar])) .range([height - margin.bottom, margin.top]) let renderData = view === "Bubble" ? d3.packSiblings(data.map(d => ({ ...d, r: rScale(d[sizeBy]) }))) : data.map(d => ({ ...d, x: xScale(d[xVar]), y: yScale(d[yVar]), r: rScale(d[sizeBy]) })) const defs = createOnce(svg, 'g', 'clips') const clips = createMerge(defs, 'clipPath', '', renderData, d => slug(d)) .attr('id', d => slug(d).toLowerCase()); createMerge(clips, 'circle', 'clip-circle', d => [d], d => slug(d)) .transition(t) .attr('r', d => 0.9*d.r) createOnce(svg, 'g', 'axis x-axis') .attr('transform', `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(xScale)) .style('opacity', +(view === 'Scatter')) createOnce(svg, 'g', 'axis y-axis') .attr('transform', `translate(${margin.left}, 0)`) .call(d3.axisLeft(yScale)) .style('opacity', +(view === 'Scatter')) createMerge(svg, 'text', 'label x-label', [xVar]) .attr('transform', `translate(${width/2}, ${height - 0.5*margin.bottom})`) .text(d => d) .style('opacity', +(view === 'Scatter')) createMerge(svg, 'text', 'label y-label', [yVar]) .attr('transform', `rotate(-90 ${0.25*margin.left} ${height/2}) translate(${0.25*margin.left}, ${height/2})`) .text(d => d) .style('opacity', +(view === 'Scatter')) let nodes = createOnce(svg, 'g', 'nodes'); let node = createMerge(nodes, 'g', 'node', renderData, d => d.Last) .on('mouseenter', d => { mutable hover = d; }) .on('mouseleave', d => { mutable hover = {}; }); node.transition(t) .attr('transform', d => `translate(${d.x + (view === 'Bubble' ? 0.5*width : 0)},${d.y + (view === 'Bubble' ? 0.5*height : 0)})`) const circle = createMerge(node, 'circle', 'node-circle', d => [d]) circle.transition(t) .attr('r', d => 0.9*d.r) .attr('fill', d => colorScale(d[colorBy])) .attr('fill-opacity', 0.5) const image = createMerge(node, 'image', 'node-image', d => [d]) .attr('xlink:href', d => `https://gist.githubusercontent.com/anbnyc/e2f834bcab2eb14e1f52ab081517199a/raw/9b36423be4e46904fe8322c143a0944eefd7c16f/${slug(d)}.png`) .attr('clip-path', d => `url(#${slug(d).toLowerCase()})`) const q = 0.88; image.transition(t) .attr('width', d => 2*q*d.r) .attr('height', d => 2*q*d.r) .attr('x', d => -1*q*d.r) .attr('y', d => -1*q*d.r) return svg.node() }32:Ta03,data = d3.tsvParse(`First Last Gender Announced State Birthdate Age Avg Polling Endorsements Money/day Individual Contributions (M$) Total Spent (M$) Cash on Hand (M$) Born in Profession Amy Klobuchar F Y Minnesota 25-May-60 58 3 44 $104,000 5.2 1.8 7 Plymouth, Minnesota Senator from Minnesota Andrew Yang M Y New York 13-Jan-75 44 1 0 $18,888 2.4 1.3 1.2 Schenectady, New York Entrepreneur and founder of Venture for America Bernie Sanders M Y Vermont 8-Sep-41 77 22 21 $444,000 18.2 5 15.7 Brooklyn, New York Senator from Vermont Beto O'Rourke M Y Texas 26-Sep-72 46 7 14 $520,000 9.4 2.5 6.9 El Paso, Texas Former congressman from Texas Cory Booker M Y New Jersey 27-Apr-69 49 5 57 $84,745 5 1.8 6.1 Washington, D.C. Senator from New Jersey Elizabeth Warren F Y Massachusetts 22-Jun-49 69 7 17 6 5.3 11.2 Oklahoma City, Oklahoma Senator from Massachussetts Eric Swalwell M Y California 16-Nov-80 38 0 0 Sac City, Iowa Congressman from California Jay Inslee M Y Washington 9-Feb-51 68 0 5 2.3 0.8 1.4 Seattle, Washington Governor of Washington State Joe Biden M N Delaware 20-Nov-42 76 32 18 Scranton, Pennsylvania Former Vice President of the United States John Delaney M Y Maryland 16-Apr-63 56 1 6 1.7 7.8 10.6 Wood-Ridge, New Jersey Former congressman from Maryland John Hickenlooper M Y Colorado 7-Feb-52 67 1 3 2 0.7 1.3 Narberth, Pennsylvania Former governor of Colorado Julian Castro M Y Texas 16-Sep-74 44 2 12 1.3 0.6 0.7 San Antonio, Texas Former housing secretary Kamala Harris F Y California 20-Oct-64 54 10 55 $171,000 12 4.3 9 Oakland, California Senator from California Kirsten Gillibrand F Y New York 9-Dec-66 52 1 3 3 2.4 10.2 Albany, New York Senator from New York Marianne Williamson F Y California 8-Jul-52 66 0 0 1.5 1 0.5 Self-help author Mike Gravel M Y Alaska 13-May-30 88 0 Springfield, Massachusetts Former Senator from Alaska Pete Buttigieg M Y Indiana 19-Jan-82 37 1 5 $107,000 7.1 0.7 6.4 South Bend, Indiana Mayor of South Bend, Indiana Stacey Abrams F N Georgia 9-Dec-73 45 0 0 Madison, Wisconsin Former Minority Leader of Georgia House Tim Ryan M Y Ohio 16-Jul-73 45 1 0 Niles, Ohio Congressman from Ohio Tulsi Gabbard M Y Hawaii 12-Apr-81 38 1 0 1.9 1.2 2.8 Leloaloa, American Samoa Congresswoman from Hawaii Wayne Messam M Y Florida 7-Jun-74 44 0 0 South Bay, Florida Mayor of Miramar, Florida`, d => ({ ...d, Birthdate: d3.timeParse("%d-%b-%y")(d.Birthdate), Announced: d.Announced === "Y", ...(continuousVars.reduce((t,v) => ({ ...t, [v]: +(d[v].replace(/\$|\,/gi,'')) }), {})) }))33:[] 2f:{"title":"Election 2020 - candidate view 1","cells":[{"id":0,"value":"md`# Election 2020 - candidate view 1`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"onChange(html`\n View
\n
\n ${[\"sizeBy\", \"xVar\", \"yVar\"].map(v => `\n ${v}
\n
\n `).join('')}\n colorBy
\n \n`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"legend = {\n config.colorBy;\n const svg = d3.select(DOM.svg(1000, 90))\n createMerge(svg, 'text', 'title', d => [config.colorBy])\n .attr('x', 0)\n .attr('y', 30)\n .text(d => d)\n \n let entry = createMerge(svg, 'g', 'entry', colorScale.domain(), d => d)\n .attr('transform', (_,i) => `translate(${i*55}, 45)`)\n createMerge(entry, 'rect', 'entry-rect', d => [d])\n .attr('height', 20)\n .attr('width', 20)\n .attr('fill', d => colorScale(d))\n createMerge(entry, 'text', 'entry-text', d => [d])\n .attr('y', 40)\n .style('font-size', '12px')\n .text(d => d.length > 8 \n ? ~d.indexOf(' ')\n ? d.split(' ').map(e => e[0]+'.').join('')\n : d.slice(0,4)+'.' \n : d)\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"html`

\n${\nmd`${hover.Last ? `## ${hover.First} ${hover.Last}\n${config.sizeBy}: ${hover[config.sizeBy]}\\n\n${config.colorBy}: ${hover[config.colorBy]}\\n\n${config.xVar}: ${hover[config.xVar]}\\n\n${config.yVar}: ${hover[config.yVar]}`\n: ''}`\n}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"colorScale = d3.scaleOrdinal(d3.schemeCategory10)\n .domain(d3.extent(data, d => d[config.colorBy]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"function onChange(el){\n el.addEventListener('change', e => {\n const { name, value } = e.target;\n mutable config = {\n ...config,\n [name]: value\n }\n })\n return el;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"mutable hover = { return {} }","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"slug = e => `${e.First}-${e.Last.replace(/\\'/gi, '')}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"mutable config = {\n return {\n view: \"Scatter\",\n sizeBy: \"Endorsements\",\n colorBy: \"Announced\",\n xVar: \"Avg Polling\",\n yVar: \"Individual Contributions (M$)\",\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"categoricalVars = [\n \"Announced\",\n \"Gender\",\n \"State\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"continuousVars = [\n \"Age\",\n \"Avg Polling\",\n \"Endorsements\",\n \"Money/day\",\n \"Individual Contributions (M$)\",\n \"Total Spent (M$)\",\n \"Cash on Hand (M$)\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"import { createOnce, createMerge } from \"@anbnyc/utility-library\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"html`Created at

. Visit us online, @2nfo, and @2ngrams.`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}