29:null 2a:["$","title",null,{"children":"UK Parliament Party Totals | piecesofuk | Observable"}] 2f:T1a22,// this is based on the code at https://github.com/Teester/parliament-diagram-generator/blob/master/script.js which was based on https://github.com/juliuste/parliament-svg { const svg = d3.create("svg"); const radius = 20; const totalSeats = data.length; if (data.length == 0) return "No data to display"; const numberOfRings = findN(totalSeats, radius); const a0 = findA(totalSeats, numberOfRings, radius); // calculate seat distance let points = []; // calculate ring radii var rings = [] for(var i = 1; i <= numberOfRings; i++){ rings[i] = radius - (i-1) * a0 } // calculate seats per ring rings = distribute(rings, totalSeats) var resultsList = []; var r, a, point // build seats // loop rings var ring for(var j = 1; j <= numberOfRings; j++){ ring = [] // calculate ring-specific radius r = radius - (j-1)*a0 // calculate ring-specific distance a = (Math.PI*r) / ((rings[j]-1) || 1) // loop points for(let k=0; k<=rings[j]-1; k++){ point = getCoordinates(r, k*a) point[2] = 0.4*a0 ring.push(point) } points.push(ring) } // fill seats var ringProgress = Array(points.length).fill(0) // for(var party in partyTotals) { // let key = partyTotals[party].key; // for(var l=0; l d[6]) .attr("href", d => data[d[5]].mp.value) .attr("target", "_blank"); let count = 0; // svg.selectAll("circle") // .data(points) // .enter() // .append("circle") // .attr("cx", d => d[0]) // .attr("cy", d => d[1]) // .attr("r", d => d[2]) // .attr("fill", d => d[3]) // .append("title").text(d => d[4]) anchors.append("circle") .attr("cx", d => d[0]) .attr("cy", d => d[1]) .attr("r", d => d[2]) .attr("fill", d => d[3]) .style("opacity", function(d) { if (applyFilters(d)) { ++count; return 1; } return 0.1; }) // .append("title").text(d => `${d[5]} (${d[4]})`); // // add code to store the MPs' name and QID URL .append("title").text(d => `${data[d[5]].mpLabel.value} (${d[4]})`); // // add code to store the MPs' name and QID URL svg.append("text").text(count).style("font-size", "5px").style( "text-anchor", "middle"); return svg.node(); function filterByGender(d) { let dataItem = data[d[5]]; for (let i = 0; i < selectGender.length; i++) { // if (d[7] == selectGender[i]) return true; if (dataItem.genderLabel.value == selectGender[i]) return true; } return false; } function filterByParty(d) { for (let i = 0; i < selectParty.length; i++) { if (d[4] == selectParty[i]) return true; } return false; } function filterByAge(d) { let dataItem = data[d[5]]; if (dataItem.age.value >= selectAge[0] && dataItem.age.value <= selectAge[1]) return true; return false; } function applyFilters(d) { let filters = [ filterByGender, filterByParty, filterByAge] for (let f = 0; f < filters.length; f++) { if ( filters[f](d)) continue else return false; } return true } function findN(m, r) { var n = Math.floor(Math.log(m)/Math.log(2)) || 1; var distance = getScore(m, n, r); var direction = 0; if(getScore(m, n+1, r)1) direction = -1; while(getScore(m, n+direction, r)0){ distance = getScore(m, n+direction, r); n+=direction; } return n; } function findA(m, n, r) { var x = (Math.PI*n*r)/(m-n) var y = 1+(Math.PI*(n-1)*n/2)/(m-n) var a = x/y return a } function getScore(m, n, r) { return Math.abs(findA(m, n, r)*n/r-(5/7)) } function distribute(votes, seats) { // initial settings for divisor finding var voteSum = 0; for(var party in votes){ voteSum += votes[party] } var low = voteSum / (seats - 2) var high = voteSum / (seats + 2) var divisor = voteSum / seats var parliament = calculateSeats(votes, divisor) // find divisor while(parliament.seats != seats){ if(parliament.seats < seats) low = divisor if(parliament.seats > seats) high = divisor divisor = (low + high) / 2 parliament = calculateSeats(votes, divisor) } return parliament.distribution } function calculateSeats(votes, divisor) { var distribution = {} var seats = 0 for(var party in votes){ distribution[party] = Math.round(votes[party] / divisor) seats += distribution[party] } return {distribution, seats} } function getCoordinates(r, b) { var x = parseFloat(r * Math.cos(b/r - Math.PI)).toFixed(10); var y = parseFloat(r * Math.sin(b/r - Math.PI)).toFixed(10); return [x, y]; } function nextRing (rings, ringProgress) { var progressQuota, tQuota; for(var i in rings){ tQuota = parseFloat((ringProgress[i] || 0)/rings[i].length).toFixed(10); if(!progressQuota || tQuota d[1]; const yValue = d => d[0]; const margin = { top: 24, right: 20, bottom: 38, left: 240 }; const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; const svg = d3.create("svg").attr("height", height).attr("width", width); const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`); const xScale = d3.scaleLinear().domain([0, d3.max(partyTotals, xValue)]).range([0, innerWidth]); const xAxis = d3.axisBottom(xScale).tickSize(-innerHeight); const yScale = d3.scaleBand().domain(partyTotals.map(yValue)).range([0, innerHeight]).padding(0.1); const xAxisG = g.append("g").call(xAxis) // create new group element and add an X Axis to it .attr("transform", `translate(0, ${innerHeight})`); xAxisG.select(".domain") // NB if we're just selecting one thing then use select otherwise selectAll .remove(); xAxisG.append("text").attr("x", innerWidth / 2).attr("y", 35).attr("fill", "black").text("Number of seats"); g.append("g").call(d3.axisLeft(yScale)) // create new group element and add a Y Axis to it .selectAll(".domain, .tick line") // inspect the DOM to find elements we want to remove .remove() // and delete them g.selectAll("rect").data(partyTotals).enter().append("rect") .attr("y", d => yScale(yValue(d))) .attr("width", d => xScale(xValue(d))) .attr("height", yScale.bandwidth) // .attr("fill", d => partyColours[ yValue(d) ]) .attr("fill", d => d[2]) .append("title").text(d => xValue(d)); // g.selectAll("rect").data(partyTotals).enter().append("rect") // .attr("y", d => yScale(yValue(d[1]))) // .attr("width", d => xScale(xValue(d[1]))) // .attr("height", yScale.bandwidth) // // .attr("fill", d => partyColours[ yValue(d) ]) // .attr("fill", d => d[2]) // .append("title").text(d => xValue(d[1])); g.append("text").attr("y", -5).text("Total number of MPs per party"); return svg.node(); }31:T8b6,// html`

$${cabinet_data[i].pmLabel.value +$ //
//
${cabinet_data[i].pmLabel.value}
//
${cabinet_data[i].positionLabel.value}
//
//

` { const ul = d3.create("ul") // we're using d3.js to generate an HTML unordered list .attr("class", "image-list-small"); // to hold the images const li = ul.selectAll("li") // generate a HTML list tag (li) .data(cabinet_data) // for every row in cabinet_data .join("li"); // and append it to the DOM (actually the cell above) const a = li.append("a") // within each of these li tags, add an HTML anchor tag (a) .attr("href", d => d.pm.value) .attr("target", "_blank") const img = a.append("img") // with the anchor tag add an image tag .attr("width", imageCellWidth) // set its width .attr("id", (d,i) => `cabinet_image${i}`) // add an ID so that it can be identified when the // actual image has been downloaded .attr("src", function(d) { return d.local_image; // store the image data }) .attr("title", d => d.pmLabel.value + " : " + d.positionLabel.value) // add a title for hovering .attr("class", function(d) { if (cabinet_duplicates[d.positionLabel.value].length > 1) return "duplicate"; }); const div = li.append("div") // now just add some HTML tags within the list element to add .attr("class", "details"); // a caption with the politician's name and their position. div.append("h3") .text(d => d.pmLabel.value); div.append("p") .attr("class", "position") .text(d => d.positionLabel.value); return ul.node() } 32:T81e,sparql = ` # put your SPARQL code between the backticks SELECT ?mp ?mpLabel ?constituency ?constituencyLabel ?partyTextLabel ?genderLabel ?rgb (SAMPLE(?age) AS ?age) WITH { # sample used as some people more than one date of birth/death SELECT ?parliament $DATE WHERE { VALUES $DATE { "${searchDate}"^^xsd:dateTime } VALUES $PARL_TERMS { wd:Q21094819 wd:Q21095053 } ?parliament wdt:P31 $PARL_TERMS . OPTIONAL { ?parliament wdt:P580 ?start_date } OPTIONAL { ?parliament wdt:P582 ?end_date } BIND(IF(!BOUND(?end_date), NOW(), ?end_date) AS ?end_date) FILTER (?start_date <= $DATE && ?end_date >= $DATE) }} AS %Parliament WHERE { INCLUDE %Parliament ?mp wdt:P31 wd:Q5 . ?mp p:P39 ?term_stmt . ?term_stmt ps:P39 ?term . ?term_stmt pq:P2937 ?parliament . OPTIONAL { ?term_stmt pq:P580 ?mp_start_date } OPTIONAL { ?term_stmt pq:P768 ?constituency } ?parliament wdt:P580 ?parliament_start . BIND(IF(!BOUND(?mp_start_date), ?parliament_start, ?mp_start_date) AS ?mp_start_date) OPTIONAL { ?term_stmt pq:P4100 ?party } OPTIONAL {?term_stmt pq:P582 ?mp_end_date } BIND(IF(!BOUND(?mp_end_date), NOW(), ?mp_end_date) AS ?mp_end_date) FILTER (?mp_start_date <= $DATE && ?mp_end_date >= $DATE) BIND(IF(BOUND(?party), ?party, wd:Q24238356) AS ?party) OPTIONAL { ?party wdt:P465 ?rgb } BIND(IF(BOUND(?rgb), ?rgb, "808080") AS ?rgb) OPTIONAL { ?mp wdt:P21 ?gender } BIND(IF(BOUND(?gender), ?gender, wd:Q24238356) AS ?gender) BIND ( IF (?party = wd:Q6467393 ,wd:Q9630, ?party) as ?partyText) # merge Labour Co-operative into Labour OPTIONAL { ?mp wdt:P569 ?dob } OPTIONAL { ?mp wdt:P570 ?dod } BIND(IF(BOUND(?dod), ?dod, NOW()) AS ?dod) BIND(?dod - ?dob AS ?ageInDays). BIND(?ageInDays/365.2425 AS ?ageInYears). BIND(FLOOR(?ageInYears) AS ?age). BIND(IF(BOUND(?age), ?age, 0) AS ?age) SERVICE wikibase:label { bd:serviceParam wikibase:language "[AUTO_LANGUAGE],${lang},en". } } GROUP BY ?mp ?mpLabel ?constituency ?constituencyLabel ?partyTextLabel ?genderLabel ?rgb `; // put your SPARQL code between the backticks33:[{"id":"24cb5836cee209374860bf61f00e00e89ebcf8e2323247ce67520c346bd29fe094d376da96f043388807bae194abe956910f4e4d8661d67f05337b423122ec45","href":"https://static.observableusercontent.com/files/24cb5836cee209374860bf61f00e00e89ebcf8e2323247ce67520c346bd29fe094d376da96f043388807bae194abe956910f4e4d8661d67f05337b423122ec45","name":"FireShot Capture 232 - UK Parliament Party Totals _ piecesofuk _ Observable - observablehq.com.png","type":"image/png","lastModified":1614628366146.344,"size":84763}] 2d:{"id":"603fe727deb9df89","slug":"uk-parliament-party-totals","title":"UK Parliament Party Totals","thumbnail":"5add0d65b24bb84d7db92c77fcb4bd1e756abd5521aa9bbe6318408c8bf17c60","access_level":"public","create_time":"$D2020-05-26T10:49:35.223Z","update_time":"$D2022-06-26T17:52:46.285Z","view_time":null,"first_public_time":"$D2020-07-21T11:40:16.826Z","has_unpublished_edits":null,"fork":true,"stars":5,"starred":false,"owner":{"type":"team","id":"c8d5affa9ac0cb84","login":"piecesofuk","name":"","avatar_url":"https://avatars-next.observableusercontent.com/46bc1258d1469cc8902e817625dc1e6760314dd8358bc3c097ab0455f086958c","tier":"starter_2024"},"version":1148,"publish_version":1148,"role":null,"authored":false,"authors":[{"type":"individual","id":"7e0a5c6b215192e0","login":"piecesofuk","name":"","avatar_url":"https://avatars-next.observableusercontent.com/46bc1258d1469cc8902e817625dc1e6760314dd8358bc3c097ab0455f086958c","tier":null}],"members":[{"type":"individual","id":"7e0a5c6b215192e0","login":"piecesofuk","name":"","avatar_url":"https://avatars-next.observableusercontent.com/46bc1258d1469cc8902e817625dc1e6760314dd8358bc3c097ab0455f086958c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":9,"collection":null,"type":"notebook","body":{"title":"UK Parliament Party Totals","cells":[{"id":88,"value":"md`# UK Parliament Party Totals \ncreated with Observable, using d3.js for the visualisations and DOM manipulation, with live data from Wikidata using the Wikidata Query Service (WDQS). Hemicycle Visualisation based on code at https://github.com/Teester/parliament-diagram-generator/blob/master/script.js, which is based on https://github.com/juliuste/parliament-svg`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"md`### Select a parliament start date from the drop down\nthe drop down is generated via a WDQS call (see Appendix A). The date can also be changed using the date picker.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":753,"value":"viewof searchDate = {\n const div = html` \n \n Date: \n \n`;\n const terms_drop = div.querySelector(\"#terms\");\n const date = div.querySelector(\"#date\");\n div.value\t = terms.value\t = date.value\t = dates[0];\n terms_drop.oninput = () => date.value = div.value = terms_drop.value\t;\n date.oninput = () => div.value = date.value\t;\n\nreturn div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"//md` A total of ${data.length} MPs was returned`\n{\n let comment = \"\";\n if (searchDate < \"1831-12-31\") comment = \"(Note: The data is very incomplete before about 1830, but gradually improving)\";\n if (data.length == 0) {\n return md`No MPs were found. This could be because: the date was during an election period and so there were \n no MPs; the data for the MPs has not been entered on Wikidata yet; the date entered is outside the valid range\n for UK parliaments; there was an error with the WDQS.`\n }\n else return md`${data.length} MPs were found on Wikidata for ${searchDate} ${comment}`\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":890,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":921,"value":"md`## Filters`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":924,"value":"viewof selectParty = select({\n title: \"Filter by party\",\n description: \"use SHIFT and/or CTRL to select multiple parties\",\n options: parties,\n multiple: true,\n value: parties\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":931,"value":"viewof selectGender = select({\n title: \"Filter by gender\",\n description: \"use SHIFT and/or CTRL to select multiple genders\",\n options: genders,\n multiple: true,\n value: genders\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":955,"value":"viewof selectAge = rangeSlider({\n min: 0,\n max: 120,\n // Note that values must be specified as array of length 2.\n value: this ? this.value : [0, 120],\n // Custom slider CSS, replaces all styles.\n theme: themes[theme],\n // Overrides the range color. Support for range colors is up to the theme.\n color,\n format: 'd',\n precision: 0,\n title: 'Filter by age',\n description: 'Approximate age now (if alive); approximate age at death.',\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":660,"value":"md`# Members of the Cabinet on ${searchDate}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":636,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":518,"value":"md`## Appendix A\n#### Generate data to construct the Parliamentary Terms drop down menu\nRun a SPARQL query via the WDQS to get all the parliamentary terms (I'm using position Member of Parliament); store the term label in the **terms** array and the corresponding start dates in the **dates** array These fields are used to generate the drop down at the top of the notebook`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"terms_sparql = \n` # put your SPARQL code between the backticks\nSELECT ?term ?termLabel ?start WHERE {\n VALUES $PARLIAMENTS {wd:Q21094819 wd:Q21095053 }\n ?term wdt:P31 $PARLIAMENTS .\n ?term wdt:P580 ?start .\n SERVICE wikibase:label { bd:serviceParam wikibase:language \"[AUTO_LANGUAGE],en\". }\n}\nORDER BY ?start \n`; // put your SPARQL code between the backticks","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"md`This is the object returned from the WDQS`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"terms_json = fetch(`https://query.wikidata.org/sparql?query=${encodeURIComponent(terms_sparql)}`, {headers: {accept: \"application/sparql-results+json\"}}).then(response => response.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":584,"value":"md`Store the array of ${terms_data.length} objects`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"terms_data = terms_json.results.bindings; ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":588,"value":"md`Extract the name of the parliaments from their Wikidata labels, reverse order, extract the name and add start date`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"terms = terms_data.map(term => term.termLabel.value + \" (\" + term.start.value.substr(0, 10) +\")\").reverse();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"md`Extract the corresponding start dates of the parliaments`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"//dates = terms_data.map(term => term.start.value).reverse();\ndates = terms_data.map(term => term.start.value.substr(0, 10)).reverse();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1006,"value":"//number_of_seats = terms_data.map(term => term.number_of_seats.value).reverse();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"md`# Appendix B\n#### Get everyone who was an MP on a particular date\nRun a SPARQL query via the WDQS to get everyone who was an MP on a particular date and store them in the **data** array. Note that **searchDate** is embedded in the SPARQL query below using a template literal; the query will automatically rerun whenever a new item it selected in the drop-down menu`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"json = fetch(`https://query.wikidata.org/sparql?query=${encodeURIComponent(sparql)}`, {headers: {accept: \"application/sparql-results+json\"}}).then(response => response.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"data = json.results.bindings;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":606,"value":"md` build an array of party totals with their party colour (if stored on Wikidata)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1091,"value":"partyTotals = {\n let t = d3.rollups(data, v => v.length, d => d.partyTextLabel.value);\n for (let i = 0; i < t.length; i++ ) {\n for (let j = 0; j < data.length; j++) {\n if (t[i][0] == data[j].partyTextLabel.value) {\n t[i][2] = \"#\" + data[j].rgb.value;\n break;\n }\n }\n \n }\n return t;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1114,"value":"md`Image below shows what the data should look like`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1111,"value":"md`${await FileAttachment(\"FireShot Capture 232 - UK Parliament Party Totals _ piecesofuk _ Observable - observablehq.com.png\").image()}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"// needs reworking as pretty inefficient\n// OldpartyTotals = {\n// let t = d3.nest().key(d => d.partyTextLabel.value).rollup(d => d.length).entries(data).sort( (a,b) => b.value-a.value);\n// for (let i = 0; i < t.length; i++ ) {\n// for (let j = 0; j < data.length; j++) {\n// if (t[i].key == data[j].partyTextLabel.value) {\n// t[i].rgb = \"#\" + data[j].rgb.value;\n// break;\n// }\n// }\n \n// }\n// return t;\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":625,"value":"md`# Appendix C\nGet the members of the cabinet`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":"cabinet_sparql = `\n\nSELECT ?pm ?pmLabel ?pm_start $DATE ?pm_end ?position ?positionLabel (SAMPLE(?image) AS ?image) WHERE {\n VALUES $DATE { \"${searchDate}\"^^xsd:dateTime } \n ?pm wdt:P31 wd:Q5 .\n ?pm p:P39 ?ph_stmt .\n ?ph_stmt a wikibase:BestRank .\n ?ph_stmt ps:P39 ?position .\n ?position wdt:P361 wd:Q112014 .\n ?ph_stmt pq:P580 ?pm_start .\n OPTIONAL { ?ph_stmt pq:P582 ?pm_end }\n BIND(IF(!BOUND(?pm_end), NOW(), ?pm_end) AS ?pm_end)\n OPTIONAL { ?pm wdt:P18 ?img }\n BIND(IF(BOUND(?img),?img, ) as ?image)\n FILTER (?pm_start <= $DATE && ?pm_end >= $DATE)\n SERVICE wikibase:label { bd:serviceParam wikibase:language \"[AUTO_LANGUAGE],${lang},en\". }\n} GROUP BY ?pm ?pmLabel ?pm_start $DATE ?pm_end ?position ?positionLabel\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":630,"value":"cabinet_json = fetch(`https://query.wikidata.org/sparql?query=${encodeURIComponent(cabinet_sparql)}`, {headers: {accept: \"application/sparql-results+json\"}}).then(response => response.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":634,"value":"//cabinet_data = cabinet_json.results.bindings;\n\ncabinet_data = {\n for (let i = 0; i < cabinet_json.results.bindings.length; i++) {\n let d = cabinet_json.results.bindings[i];\n // using the image on Wikidata (if it exists) we can request a small thumbnail from the Wikimedia API\n d.image_name = d.image.value.substring(d.image.value.match(\"FilePath\").index + 9);\n d.lookup_url = `https://en.wikipedia.org/w/api.php?action=query` +\n `&iilimit=1&prop=imageinfo` +\n `&iiprop=extmetadata|url|size|canonicaltitle` +\n `&iiurlwidth=${imageWidth}&format=json` +\n `&origin=*` +\n `&titles=File:${d.image_name}`; \n fetch(d.lookup_url, {headers: { accept: \"application/json\"}}).then(response => response.json()).then( j => {\n var key = Object.keys(j.query.pages);\n fetchImage(j.query.pages[key].imageinfo[0].thumburl, d, `cabinet_image${i}` ); \n\n });\n }\n return cabinet_json.results.bindings;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":830,"value":"cabinet_duplicates = {\n \n const check = {};\n for (let d of cabinet_data) {\n if (d.positionLabel.value in check) check[d.positionLabel.value].push(d);\n else check[d.positionLabel.value] = [d];\n }\n return check;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":846,"value":"md`# Appendix D\nsome variables and utiliy functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1132,"value":"lang = navigator.language||\"en\";\n//lang = \"fr\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":825,"value":"imageWidth = 75;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":827,"value":"imageCellWidth = imageWidth * 1.5;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":841,"value":"md`image fetch code from https://developers.google.com/web/ilt/pwa/working-with-the-fetch-api#example_fetching_images`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":839,"value":" function logResult(result) {\n console.log(result);\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":837,"value":" \nfunction logError(error) {\n console.log('Looks like there was a problem: \\n', error);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":835,"value":"function validateResponse(response) {\n if (!response.ok) {\n throw Error(response.statusText);\n }\n return response;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":833,"value":"function readResponseAsBlob(response) {\n return response.blob();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":832,"value":"function fetchImage(pathToResource, item, id) {\n fetch(pathToResource)\n .then(validateResponse)\n .then(readResponseAsBlob)\n .then(d => {\n// if (!do_not_load_images) {\n item.local_image = URL.createObjectURL(d);\n var sel = d3.select(`#${id}`);\n sel.attr(\"src\", item.local_image);\n// }\n })\n .catch(logError);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":926,"value":"//parties = partyTotals.map(( t,i) => t.key);\nparties = {\n let p = [];\n for (let i = 0; i < partyTotals.length; i++) {\n p.push(partyTotals[i][0]);\n }\n return p;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":932,"value":"genders = { \nlet aSet = new Set();\n\nfor (let i = 0; i < data.length; i++) {\n aSet.add(data[i].genderLabel.value);\n}\n return Array.from(aSet);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"md`# Appendix E\nimport the d3.js library and input utilities`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":699,"value":"import {date} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":928,"value":"import {select} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":952,"value":"import {rangeSlider, color, themes, theme} from \"@mootari/range-slider@1342\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"md`# Appendix F\nthe stylesheet used to format the visualisations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":459,"value":" html``\n\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":849,"value":"md`# Appendix G\n## Attribution`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":851,"value":"html`This Observable notebook was created by Chris Groves (piecesofuk): Twitter, Wikidata, Wikipedia )`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":853,"value":"md`All images are via Wikimedia Commons: you can check the attribution of any image via the politician's Wikidata item`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":885,"value":"md` Hemicycle Visualisation based on code at https://github.com/Teester/parliament-diagram-generator/blob/master/script.js, which is based on https://github.com/juliuste/parliament-svg`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":855,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2e:"$2d:body"

${cabinet_data[i].pmLabel.value}