// control nDots in creating dd makeVoteDots = function(dd, leaveUncountedInBox = false) { var containerWidth = 320, SVGwidth = 225, SVGheight = 100 const container = d3.create('div') //.style("overflow", "scroll") .style('width',containerWidth + 'px') ; container.append("div").style("font-size", "19px").style("font-weight", "bold").text((dd.state + ' Results').toUpperCase()).style( "border-bottom" , "1px solid #DDDDDD") container.append("div").attr('id','annotate-outstanding').style("font-size", "14px") .style('width', containerWidth + 'px') .style('padding', '0px 0px 0px 0px') .style('text-align','center') .style('color', 'white') .html( '' + d3.format('.2s')(dd.fourWayOutstanding) + ' votes' + ' (' + d3.format('.0%')(dd.fourWayShare.outstanding) + ')
' + '' + 'OUTSTANDING ' ) container.append("div").attr('id','annotate-biden').style("font-size", "14px") .style('width', ((containerWidth - SVGwidth)/2 - 5) + 'px') .style('display', 'inline-block') .style('padding', '25px 0px 10px 2px') .style('text-align','left') .style('color', 'white') .html( '' + 'BIDEN
' + d3.format('.2s')(dd.biden) + ' votes' + '
(' + d3.format('.0%')(dd.fourWayShare.biden) + ')' + '' ) var svg = container.append('svg').attr('width',SVGwidth).attr('height',SVGheight).attr('viewBox','0 0 ' + SVGwidth + ' ' + SVGheight ).style('margin-botton', 0).style('vertical-align','top') container.append("div").attr('id','annotate-trump').style("font-size", "14px") .style('width', ((containerWidth - SVGwidth)/2 - 5 ) + 'px') .style('display', 'inline-block') .style('padding', '25px 2px 10px 0px') .style('text-align','right') .style('color', 'white') .html( '' + 'TRUMP
' + d3.format('.2s')(dd.trump) + ' votes' + '
(' + d3.format('.0%')(dd.fourWayShare.trump) + ')' + '' ) var velocityDecayValue = 0.3, forceManyBodyStrength = -.7, xForce = 0.035, yForce = 0.065 const center = { x: SVGwidth / 2, y: SVGheight / 2 }; let nodes = dd.voteDots.map(d => { return { radius: 2, voted: d, x: 0.25 * SVGwidth + Math.random() * 0.5 * SVGwidth, y: 0.05 * SVGheight + Math.random() * 0.2 * SVGheight, transDuration: 200 + Math.random() * 500 } }) if(leaveUncountedInBox) { svg.append('rect').attr('x', 0.25 * SVGwidth).attr('y', 0.05 * SVGheight).attr('width', 0.5 * SVGwidth).attr('height', 0.2 * SVGheight).attr('fill','none').attr('stroke-width',1).attr('stroke', colorScale('outstanding')) } // generate circles let bubbles = svg .selectAll('circle') .data(nodes, (d) => { return d; }) .enter() .append('circle') .attr('r', d => d.radius) .attr('cy', d => d.y) .attr('cx', d => d.x) .attr('fill','grey'); // nodes appear animation (circles size from zero to final size) bubbles .transition().duration(300).attr('r', (d) => { return d.radius; }); // define force layout let simulation = d3.forceSimulation() .velocityDecay(velocityDecayValue) .force('charge', d3.forceManyBody().strength(forceManyBodyStrength)) .on('tick', () => { bubbles.filter((d) => d.voted != (leaveUncountedInBox ? 'outstanding' : '')) .attr('cx', (d) => { return d.x; }) .attr('cy', (d) => { return d.y; }); }) .nodes(nodes) .stop(); // toggle layout functions function dropBubbles() { bubbles.filter((d) => d.voted != 'outstanding').transition().duration(d => d.transDuration) .attr('cy', d => {return d.y + 0.2*SVGheight}); } function updateColors() { bubbles.filter((d) => d.voted != 'outstanding').transition().duration(d => d.transDuration) .attr('fill', d => {return colorScale(d.voted)}); } let candPosition = {'biden':{x: 0.4, y: 0.6}, 'trump': {x: 0.6, y: 0.6}, 'outstanding':{x:0.5, y:0.45}} function splitBubbles() { simulation .force('x', d3.forceX().strength(xForce).x((d) => { return SVGwidth * candPosition[d.voted].x })) .force('y', d3.forceY().strength(yForce).y((d) => { return SVGheight * candPosition[d.voted].y })); simulation.alpha(2).restart(); } container.append("div").style("font-size", "12px").style( "border-top" , "1px solid #DDDDDD") .text("Last updated " + formatTimestamps(dd.lastUpdated)) container.append("div").style("font-size", "12px").html("Other candidates: " + d3.format('.2s')(dd.otherVotes) + ' votes (~' + d3.format('.0%')(dd.fourWayShare.other) + ' of total expected votes)') if(leaveUncountedInBox){ setTimeout(dropBubbles, 100)} setTimeout(updateColors, 100); setTimeout(splitBubbles, 300); // fade in text setTimeout( function() { ['biden','trump','outstanding'] .forEach( (d,i)=> d3.selectAll('#annotate-' + d).transition() .duration(700) .style('color', [colorScale('biden'), colorScale('trump'), '#777777'][i]) )}, 600) return container.node() }