29:null 2a:["$","title",null,{"children":"UK Parliament: Cabinet Ministers | piecesofuk | Observable"}] 2f:T763,{ 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", "#show_position") // with an internal anchor (will jump down to the position cell) .on("click", click); // binds a onclick handler to update the positionQID depending // on which image we clicked 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() }30:T460,cabinet_sparql = ` SELECT ?pm ?pmLabel ?pm_start $DATE ?pm_end ?position ?positionLabel (SAMPLE(?image) AS ?image) ?id WHERE { BIND ( "${searchDate}"^^xsd:dateTime AS $DATE ) ?pm wdt:P31 wd:Q5 . ?pm p:P39 ?ph_stmt . ?ph_stmt a wikibase:BestRank . ?ph_stmt ps:P39 ?position . ?position wdt:P361 wd:Q112014 . ?ph_stmt pq:P580 ?pm_start . OPTIONAL { ?ph_stmt pq:P582 ?pm_end } BIND(IF(!BOUND(?pm_end), NOW(), ?pm_end) AS ?pm_end) OPTIONAL { ?pm wdt:P18 ?img } BIND(IF(BOUND(?img),?img, ) as ?image) FILTER (?pm_start <= $DATE && ?pm_end >= $DATE) SERVICE wikibase:label { bd:serviceParam wikibase:language "[AUTO_LANGUAGE],en". } # trying to get some sort of logical ordering as seniority isn't stored on the cabinet mininster item # so items sorted by value of the cabinet post Qid BIND ( xsd:integer(STRAFTER(STR(?position), 'http://www.wikidata.org/entity/Q')) AS ?id ) } GROUP BY ?pm ?pmLabel ?pm_start $DATE ?pm_end ?position ?positionLabel ?id ORDER BY ASC (?id) #LIMIT 5 `31:T7d9,position_data = { console.log("Assigning Position Data"); for (let i = 0; i < position_json.results.bindings.length; i++) { // using the image on Wikidata (if it exists) we can request a small thumbnail from the Wikimedia API let d = position_json.results.bindings[i]; d.image_name = d.image.value.substring(d.image.value.match("FilePath").index + 9); d.lookup_url = `https://en.wikipedia.org/w/api.php?action=query` + `&iilimit=1&prop=imageinfo` + `&iiprop=extmetadata|url|size|canonicaltitle` + `&iiurlwidth=${imageWidth}&format=json` + `&origin=*` + `&titles=File:${d.image_name}`; fetch(d.lookup_url, {headers: { accept: "application/json"}}).then(response => response.json()).then( j => { var key = Object.keys(j.query.pages); // when we fetch the images we also want to insert it onto the dom that's why we pass the iamge's DOM ID // fetchImage(j.query.pages[key].imageinfo[0].thumburl, d, "position", i ); fetchImage(j.query.pages[key].imageinfo[0].thumburl, d, `position_image${i}` ); }); // format the start/end dates based on the Wikidata date precision (used in the image caption) let start_yyyy = d.pm_start.value.substr(0,4); let start_mm = d.pm_start.value.substr(5,2); let start_dd = d.pm_start.value.substr(8,2); let start = start_yyyy; if (d.pm_start_prec.value > 9) start = start_mm + "/" + start; if (d.pm_start_prec.value >= 10) start = start_dd + "/" + start; let end = ""; if (d.pm_end.value ==="current") end = "current"; else { let end_yyyy = d.pm_end.value.substr(0,4); let end_mm = d.pm_end.value.substr(5,2); let end_dd = d.pm_end.value.substr(8,2); end = end_yyyy; if (d.pm_end_prec.value > 9) end = end_mm + "/" + end; if (d.pm_end_prec.value > 10) end = end_dd + "/" + end; } d.position_date_text = start + " - " + end; } mutable dataLoaded = true; return position_json.results.bindings; }32:[] 2d:{"id":"e1e7975b36d8a668","slug":"uk-parliament-cabinet-ministers","title":"UK Parliament: Cabinet Ministers","thumbnail":"1cab78eec5660a582209228a68c78f2edf73eeffe277d4dffd35e1e9165de419","access_level":"public","create_time":"$D2020-07-18T14:25:29.964Z","update_time":"$D2020-07-26T18:48:36.575Z","view_time":null,"first_public_time":"$D2020-07-22T14:41:28.652Z","has_unpublished_edits":null,"fork":true,"stars":4,"starred":false,"owner":{"type":"team","id":"c8d5affa9ac0cb84","login":"piecesofuk","name":"","avatar_url":"https://avatars-next.observableusercontent.com/46bc1258d1469cc8902e817625dc1e6760314dd8358bc3c097ab0455f086958c","tier":"starter_2024"},"version":1334,"publish_version":1334,"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":3,"collection":null,"type":"notebook","body":{"title":"UK Parliament: Cabinet Ministers","cells":[{"id":88,"value":"md`# UK Parliament: Cabinet Ministers\ncreated with Observable, using d3.js for the DOM manipulation, live data from Wikidata using the Wikidata Query Service (WDQS) and images from Wikimedia Commons`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1291,"value":"md` Note: you can click to the left of any cell to view the code (HTML, Markup or Javascript) that generated that cell`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1306,"value":"md`### Select a parliament start date from the drop down\nor use the date picker`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1218,"value":"viewof searchDate = { // the contents of this dropdown are generated by a SPARQL query using the WDQS\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":660,"value":"md`### Members of the United Kingdom Cabinet on ${searchDate} according to Wikidata\nClick an image to load all the previous holders of that position`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":889,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":868,"value":"show_position = md`### ${positionName} \nEveryone who has held this position according to Wikidata`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":863,"value":"{ \n console.log(position_data.length);\n const ul = d3.create(\"ul\")\n .attr(\"class\", \"image-list-small\");\n \n const li = ul.selectAll(\"li\")\n .data(position_data)\n .join(\"li\");\n \n const a = li.append(\"a\")\n .attr(\"href\", d => d.pm.value)\n .attr(\"target\", \"_blank\")\n \n a.append(\"img\")\n .attr(\"width\", imageCellWidth)\n .attr(\"id\", (d,i) => `position_image${i}`)\n .attr(\"src\", d => d.local_image)\n .attr(\"title\", d => d.pmLabel.value + \" : \" + d.position_date_text);\n const div = li.append(\"div\")\n .attr(\"class\", \"details\");\n \n div.append(\"h3\")\n .text(d => d.pmLabel.value);\n div.append(\"p\")\n .attr(\"class\", \"position_dates\")\n .text(d => d.position_date_text);\n \n return ul.node()\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":625,"value":"md`# Appendix A\n## SPARQL queries to Load data from the WDQS`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1099,"value":"md`### SPARQL query to get the members of the current cabinet`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1101,"value":"md`### Call the WDQS and store the resulting JSON object`","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":1173,"value":"cabinet_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":1315,"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":962,"value":"md`### set an initial value for the positionID. \nThis is used by the second SPARQL query to load all politicians that have held this position`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":923,"value":"mutable positionQID = {\n if (!dataLoaded) return cabinet_data[0].position.value.substring(31);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":847,"value":"md`### SPARQL query the find all the politicians who held a particular cabinet post\nNote that the SPARQL code below has an Javascript template literal embedded within it (positionQID). The contents of positionQID will be used when calling the WDQS. Due to the reactive nature of Observable notebooks whenever positionQID is changed the SPARQL query will automatically re-run`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":856,"value":"position_sparql = `\n\nSELECT ?pm ?pmLabel ?pm_start ?pm_start_prec ?pm_end ?pm_end_prec ?position ?positionLabel (SAMPLE(?image) AS ?image) WHERE {\n VALUES ?position { wd:${positionQID} } # the QID is actually stored in the variable positionID\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 ?ph_stmt pq:P580 ?pm_start .\n ?ph_stmt pqv:P580/wikibase:timePrecision ?pm_start_prec .\n OPTIONAL { \n ?ph_stmt pq:P582 ?pm_end .\n ?ph_stmt pqv:P582/wikibase:timePrecision ?pm_end_prec .\n }\n BIND(IF(!BOUND(?pm_end), \"current\", ?pm_end) AS ?pm_end)\n\n OPTIONAL { ?pm wdt:P18 ?img }\n BIND(IF(BOUND(?img),?img, ) as ?image)\n SERVICE wikibase:label { bd:serviceParam wikibase:language \"[AUTO_LANGUAGE],en\". }\n}\nGROUP BY ?pm ?pmLabel ?pm_start ?pm_end ?position ?positionLabel ?pm_start_prec ?pm_end_prec\nORDER BY DESC (?pm_start) \n#LIMIT 5\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1109,"value":"md`Call the WDQS and store the resulting JSON object`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":859,"value":"position_json = fetch(`https://query.wikidata.org/sparql?query=${encodeURIComponent(position_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":1115,"value":"md`Iterate over the cabinet position data to store the start and end dates in a nicely formatted way based on the date precision value stored in Wikidata, ie 9 is year, 10 is month, 11 is day`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":861,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1111,"value":"md`This variable holds the currently selected cabinet position, it defaults to the first item returned from the WDQS`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":934,"value":"positionName = position_data[0].positionLabel.value;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1221,"value":"md`### SPARQL query to 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":1220,"value":"terms_sparql = \n` # put your SPARQL code between the backticks\nSELECT ?term ?termLabel ?start WHERE {\n VALUES $PARLIAMENTS {wd:Q16707842 wd:Q18015642 }\n ?term wdt:P31 wd:Q4164871 . \n ?term wdt:P279 $PARLIAMENTS .\n ?term wdt:P571 ?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":1226,"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":1227,"value":"terms_data = terms_json.results.bindings; ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1229,"value":"terms = terms_data.map(term => term.termLabel.value.substr(14) + \" (\" + term.start.value.substr(0, 10) +\")\").reverse();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1231,"value":"dates = 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":950,"value":"md`# Appendix B\n## Odds and ends`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1051,"value":"md`### function to assign new cabinet position\nsince Observable is reactive we only need to re-assign the variable which is used in the second SPARQL query for the SPARQL query to automatically re-run`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":891,"value":"function click(position) {\n mutable positionQID = position.position.value.substring(31); \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1287,"value":"md`### some variables`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1237,"value":"imageWidth = 75;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1245,"value":"imageCellWidth = imageWidth * 1.5;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1274,"value":"mutable dataLoaded = false;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"md`# Appendix C\n## import some useful libraries and code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1125,"value":"md`d3 is used to manipulate the DOM to add the images`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"d3 = require(\"d3@5\")","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":1158,"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":1163,"value":" function logResult(result) {\n console.log(result);\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1164,"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":1166,"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":1168,"value":" function readResponseAsBlob(response) {\n return response.blob();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1170,"value":"// function fetchImage(pathToResource, item, type, i) {\n// fetch(pathToResource)\n// .then(validateResponse)\n// .then(readResponseAsBlob)\n// .then(d => {\n// item.local_image = URL.createObjectURL(d);\n// var sel = d3.select(`#${type}_image${i}`);\n// sel.attr(\"src\", item.local_image);\n// })\n// .catch(logError);\n// }\n\nfunction 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":532,"value":"md`# Appendix D\n## the stylesheet used to format the HTML`","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":1070,"value":"md`# Appendix E\n## Attribution`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1084,"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":1071,"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":1074,"value":"html`

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