2a:null 2b:["$","title",null,{"children":"UK GE2010 spiral graphic | Josh Rayman | Observable"}] 30: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(); }31:[{"id":"2ab899960c5e36e58c414bedccceeaada01590287fe5194b7b0f7142e54ac76a334476573e88bf961623c566c17959665ba277511330401769779104fef3716c","href":"https://static.observableusercontent.com/files/2ab899960c5e36e58c414bedccceeaada01590287fe5194b7b0f7142e54ac76a334476573e88bf961623c566c17959665ba277511330401769779104fef3716c","name":"ge2010@1.csv","type":"text/csv","lastModified":1588931366538.377,"size":23079}] 2e:{"id":"bf487f0a900d9369","slug":"uk-ge2010-spiral-graphic","title":"UK GE2010 spiral graphic","thumbnail":"8acef2162b1c9fcad7b7bbb44df9a8cd1454575b3c65bb4cff495cb60edd94fd","access_level":"public","create_time":"$D2020-05-08T08:29:16.595Z","update_time":"$D2020-05-09T12:19:53.338Z","view_time":null,"first_public_time":"$D2020-05-08T09:51:26.678Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"19543e2cf230a71a","login":"joshrayman","name":"Josh Rayman","avatar_url":"https://avatars-next.observableusercontent.com/ef0b6751eab5ae27c42cd52f2664ff0481384a0c9b69a9a2a28c882c36e8485f","tier":"starter_2024"},"version":268,"publish_version":268,"role":null,"authored":false,"authors":[{"type":"individual","id":"9b7415f63e80632e","login":"joshrayman","name":"Josh Rayman","avatar_url":"https://avatars-next.observableusercontent.com/ef0b6751eab5ae27c42cd52f2664ff0481384a0c9b69a9a2a28c882c36e8485f","tier":null}],"members":[{"type":"individual","id":"9b7415f63e80632e","login":"joshrayman","name":"Josh Rayman","avatar_url":"https://avatars-next.observableusercontent.com/ef0b6751eab5ae27c42cd52f2664ff0481384a0c9b69a9a2a28c882c36e8485f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"UK GE2010 spiral graphic","cells":[{"id":0,"value":"md`# UK GE2010 spiral graphic`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"md`Seats in order of estimated call time (PA data)`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"viewof selectedView = radio({\n title: \"Results data:\",\n options: [\"2010\", \"2005\", \"Change\"],\n value: \"2010\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"url = document.referrer","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"customTime = url.split('?')[1] ? \n url.split('?')[1].split('=')[1] :\n \"\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"order = [1, 3, 2, 312, 4, 510, 16]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"timeSplit = time.split(\":\").map(d => +d)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"time = customTime === \"\" ? d3.timeFormat(\"%H:%M\")(currentTime) : customTime","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"currentTime = {\n return new Date(new Date().getTime() + (12 * 60 * 60 * 1000))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"colors = [{ \"color\": \"#0087DC\", \"name\": \"Con\"},\n{ \"color\": \"#DC241f\", \"name\": \"Lab\"},\n{ \"color\": \"#FAA61A\", \"name\": \"LD\"},]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"import {geData} from \"@joshrayman/uk-ge2010-data\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"import {radio} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1"}} 2f:"$2e:body"