31:Tc28,graphic = { const div = d3.create("div").attr('class', 'container') .attr("style", `width: ${width}; height: {width}`); var height = width; var centerX = width/2, centerY = height/2, radius = (width - 10) / 2, sides = 700, coils = 42, rotation = .75; // How far to step away from center for each side. var awayStep = radius/sides; // How far to rotate around center for each side. var aroundStep = -coils/sides;// 0 to 1 based. // Convert aroundStep to radians. var aroundRadians = aroundStep * 1 * Math.PI; // Convert rotation to radians. rotation *= 2 * Math.PI; var new_time = []; // For every side, step around and away from center. for(var i=50; i<=sides; i++){ // How far away from center var away = i * awayStep; // How far around the center. var around = i * aroundRadians + rotation; // Convert 'around' and 'away' to X and Y. var x = centerX + Math.cos(around) * away; var y = centerY + Math.sin(around) * away; var idx = Math.abs(i - 700); if(selectedView === "Change") { var dotColor = declareTimes[idx] ? (declareTimes[idx]["Seat held by"] === declareTimes[idx].result2010.winner ? "#ccc" : "#000") : "#eee"; } else { var color = declareTimes[idx] ? colors.filter(d => d.name === (selectedView === "2005" ? declareTimes[idx]["Seat held by"] : declareTimes[idx].result2010.winner)) : null; var dotColor = !declareTimes[idx] ? "#eee" : (color && color[0] ? color[0].color : "#777"); } new_time.push({x: x, y: y, color: dotColor}); } var svg = div.append("svg") .attr("width", width) .attr("height", height) .append("g"); var lineFunction = d3.line() .curve(d3.curveCardinal) .x(function(d) { return d.x; }) .y(function(d) { return d.y; }); svg.append("path") .attr("d", lineFunction(new_time)) .attr("stroke", "gray") .attr("stroke-width", 0.5) .attr("fill", "none"); var circles = svg.selectAll("circle") .data(new_time) .enter() .append("circle") .attr("fill", function (d) { return d.color; }) .attr("cx", function (d) { return d.x; }) .attr("cy", function (d) { return d.y; }) .attr("r", width < 600 ? 3 : 5); var doorHeight = width * 0.05; var doorWidth = width * 0.025; svg.append("rect") .attr("x", width / 2 - doorWidth / 2) .attr("y", height / 2 - doorHeight / 2 - 5) .attr("width", doorWidth) .attr("height", doorHeight) svg.append("text") .attr("style", "font-family:serif; font-size: 0.6em") .attr("text-anchor", "middle") .attr("x", width / 2) .attr("y", height / 2 - doorHeight / 5) .attr("fill", "#fff") .text(10) svg.append("rect") .attr("fill", "gold") .attr("x", width / 2 - doorHeight / 10) .attr("y", height / 2) .attr("width", doorHeight / 5) .attr("height", doorHeight / 10) return div.node(); }32:[{"id":"2ab899960c5e36e58c414bedccceeaada01590287fe5194b7b0f7142e54ac76a334476573e88bf961623c566c17959665ba277511330401769779104fef3716c","href":"https://static.observableusercontent.com/files/2ab899960c5e36e58c414bedccceeaada01590287fe5194b7b0f7142e54ac76a334476573e88bf961623c566c17959665ba277511330401769779104fef3716c","name":"ge2010@1.csv","type":"text/csv","lastModified":1588931366538.377,"size":23079}] 2f:{"title":"UK GE2010 spiral graphic","cells":[{"id":0,"value":"md`# UK GE2010 spiral graphic`","pinned":false,"hidden":false,"mode":"ojs"},{"id":265,"value":"md`Seats in order of estimated call time (PA data)`","pinned":true,"hidden":false,"mode":"ojs"},{"id":80,"value":"html`

${selectedView === \"Change\" ? `\n - Change \n - Hold ` : `\n - Conservative \n - Labour \n - Liberal Democrats \n - Other \n`}\n${customTime !== \"\" ? ` - (Estimated) not called as of ${time}` : \"\"}\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"viewof selectedView = radio({\n title: \"Results data:\",\n options: [\"2010\", \"2005\", \"Change\"],\n value: \"2010\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"md`Source: \n* Estimated declaration times: [The Guardian/PA](https://www.theguardian.com/news/datablog/2010/apr/29/election-2010-constituency-declaration-times)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"url = document.referrer","pinned":true,"hidden":false,"mode":"ojs"},{"id":213,"value":"customTime = url.split('?')[1] ? \n url.split('?')[1].split('=')[1] :\n \"\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":154,"value":"order = [1, 3, 2, 312, 4, 510, 16]","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"declareTimes = liveFilter; //order.map(e => geData.filter(d => +d[\"Time order\"] === e)[0]); //.concat(liveFilter.filter((d, i) => order.indexOf(+d[\"Time order\"]) === -1)); //liveFilter","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"liveFilter = customTime === \"\" ? geData() : geData().map((d, i) => ({\n ...d,\n timeFilter: d[\"Declaration time..\"].replace(/[.]/g, \"\").split(\":\").map(d => +d)\n})).filter(d => {\n if(timeSplit[0] === 23) {\n return (timeSplit[0] === d.timeFilter[0])\n }\n if(d.timeFilter[0] === 23) {\n return true;\n }\n else {\n return (timeSplit[0] >= d.timeFilter[0] && timeSplit[1] >= d.timeFilter[1])\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"timeSplit = time.split(\":\").map(d => +d)","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"time = customTime === \"\" ? d3.timeFormat(\"%H:%M\")(currentTime) : customTime","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"currentTime = {\n return new Date(new Date().getTime() + (12 * 60 * 60 * 1000))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"colors = [{ \"color\": \"#0087DC\", \"name\": \"Con\"},\n{ \"color\": \"#DC241f\", \"name\": \"Lab\"},\n{ \"color\": \"#FAA61A\", \"name\": \"LD\"},]","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"import {geData} from \"@joshrayman/uk-ge2010-data\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"import {radio} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}