31:T91d,viewof chart = { const svg = d3 .create("svg") .attr("width", mapWidth) .attr("height", mapHeight); //.attr("viewBox", [-margin, 0, mapWidth + margin, height + margin]); const element = svg.node(); element.value = []; // Country paths const map = svg.append("g").attr("id", "map"); map .selectAll("path") .data( topojson.feature(europeEurostat, europeEurostat.objects.nutsrg).features ) //? .join("path") .attr('data-name', d => d.properties.id) .attr("class", d => datasetPerCountry.find(e => e.country_code === d.properties.id) ? "dataset-country" : "na-country" ) .attr("d", path) //.attr("fill", colorProjectPrimary) .attr( 'fill', d => datasetPerCountry.find(e => e.country_code === d.properties.id) ? color( +datasetPerCountry.find(e => e.country_code === d.properties.id)[ "transparency_ratio" ] * 100 ) : "WhiteSmoke" // no info ); // Interactions just on dataset-country elements, not on empty ones map .selectAll('.dataset-country') // Make Malta more visible by adding more stroke to it .style('stroke', d => d.properties.id == "MT" ? color( datasetPerCountry.filter(d => d.country_code == "MT")[0][ "transparency_ratio" ] ) : "white" ) .style('stroke-width', d => (d.properties.id == "MT" ? "2px" : "0.4px")) // Interaction .style("cursor", "pointer") .on("mouseover", onMouseOver) //.on("mousemove", onMouseMove) // Don't need it if there's no tooltip .on("mouseout", onMouseOut); function onMouseOver(event, d, i) { const myCountryId = d.properties.id; // Highlight country d3.select(this) .raise() .style('stroke', colorProjectLight) .style('stroke-width', 3); // Update cell value!! element.value = myCountryId; element.dispatchEvent(new CustomEvent("input")); } // Legend // https://observablehq.com/@d3/color-legend#legend svg .append("g") .attr("transform", "translate(20,20)") .append(() => legend({ color, title: locale[languageSelector].legendTitle, width: 150 }) ); return svg.node(); }32:T4f0,countryDivResume = chart.length ? html`

${ locale[languageSelector].countries[selectedCountryData.country_code] }: ${selectedCountryData.meps} ${locale[languageSelector].meps}.

${locale[languageSelector].mepResumeA} ${formatPercentage(selectedCountryData.transparency_ratio)} ${locale[languageSelector].mapResumeB}.

` : html`

${ isMobile ? locale[languageSelector]["interactionNoteMobile"] : locale[languageSelector]["interactionNoteDesktop"] }

`33:T8e8,locale = ({ es: { meps: "MEPs", legendTitle: "MEPs que sí informan (%)", partyName: "Desglose por partidos", trueCases: "Sí informan", falseCases: "No informan", transparencyIndicator: "MEPs que sí informan (%)", mepResumeA: "El ", mapResumeB: " de MEPs de este país informa de reuniones", interactionNoteDesktop: "Pasa por encima de cualquier país para explorar sus datos en detalle.", interactionNoteMobile: "Toca un país para explorar sus datos en detalle.", countries: { AT: 'Austria', BE: 'Bélgica', BG: 'Bulgaria', HR: 'Croacia', CZ: 'Rep. Checa', DK: 'Dinamarca', EE: 'Estonia', FI: 'Finlandia', FR: 'Francia', DE: 'Alemania', EL: 'Grecia', HU: 'Hungría', IE: 'Irlanda', IT: 'Italia', LV: 'Letonia', LT: 'Lituania', LU: 'Luxemburgo', MT: 'Malta', NL: 'Países Bajos', PL: 'Polonia', PT: 'Portugal', RO: 'Rumanía', SK: 'Eslovaquia', SI: 'Eslovenia', ES: 'España', SE: 'Suecia', UK: 'Reino Unido', CY: 'Chipre' } }, en: { meps: "MEPs", legendTitle: "MEPs who do report meetings (%)", partyName: "Breakdown by party", trueCases: "Do report", falseCases: "Do not report", transparencyIndicator: "MEPs who do report meetings (%)", mepResumeA: "", mapResumeB: " of MEPs from this country report meetings", interactionNoteDesktop: "Hover over any country to explore their data in detail.", interactionNoteMobile: "Click a country to explore their data in detail.", countries: { AT: 'Austria', BE: 'Belgium', BG: 'Bulgaria', HR: 'Croatia', CZ: 'Czechia', DK: 'Denmark', EE: 'Estonia', FI: 'Finland', FR: 'France', DE: 'Germany', EL: 'Greece', HU: 'Hungary', IE: 'Ireland', IT: 'Italy', LV: 'Latvia', LT: 'Lithuania', LU: 'Luxembourg', MT: 'Malta', NL: 'Netherlands', PL: 'Poland', PT: 'Portugal', RO: 'Romania', SK: 'Slovakia', SI: 'Slovenia', ES: 'Spain', SE: 'Sweden', UK: 'United Kingdom', CY: 'Cyprus' } } })34:T7a9,styles = html` `35:[{"id":"7a065020990c7814727247c5867380d380ab33d5803888999d2f2ca5839427057e4e07cf9db6e14360cb1a73b09c624f13926133c0980026e0c4dfee1c821bbf","href":"https://static.observableusercontent.com/files/7a065020990c7814727247c5867380d380ab33d5803888999d2f2ca5839427057e4e07cf9db6e14360cb1a73b09c624f13926133c0980026e0c4dfee1c821bbf","name":"meps_transparency_per_country@2.csv","type":"text/csv","lastModified":1621360752200.241,"size":917},{"id":"028d5455051af0210197e03ecf86f0f5af4a77c865e89f74411fe86068e881b2e7cd9c8a0bf08108c932e0c7dd25e0c1628a5357919f62cc2cf00bfbf84fccd5","href":"https://static.observableusercontent.com/files/028d5455051af0210197e03ecf86f0f5af4a77c865e89f74411fe86068e881b2e7cd9c8a0bf08108c932e0c7dd25e0c1628a5357919f62cc2cf00bfbf84fccd5","name":"meps_transparency_per_party@6.csv","type":"text/csv","lastModified":1621360688657.614,"size":20454},{"id":"2b0832de390546c1413c5e06aadfa9ff95eba72c321f8c1bece0f6320f7bee5209d801d6379aec7a98b9f2c5625a9e32960c0563c9fabfa7a36b73b458a73ae0","href":"https://static.observableusercontent.com/files/2b0832de390546c1413c5e06aadfa9ff95eba72c321f8c1bece0f6320f7bee5209d801d6379aec7a98b9f2c5625a9e32960c0563c9fabfa7a36b73b458a73ae0","name":"0-3035.json","type":"application/json","lastModified":1705669423658.209,"size":257009}] 2f:{"title":"#604 Mapa transparencia Eurodiputados - SceMaps (ES/EN)","cells":[{"id":0,"value":"md`# #604 Mapa transparencia Eurodiputados - SceMaps (ES/EN)\n\n**Artículo completo** publicado en Civio: \n - [Half of all MEPs do not disclose any meeting with lobbies (EN)](https://civio.es/quien-manda/2021/05/20/half-of-all-MEPs-do-not-disclose-any-meeting-with-lobbies/)\n - [La mitad de los eurodiputados no da cuenta de reuniones con los lobbies (ES)](https://civio.es/quien-manda/2021/05/20/la-mitad-de-los-eurodiputados-no-da-cuenta-de-reuniones-con-los-lobbies/)\n\n\nReferences:\n- https://observablehq.com/@jgaffuri/coastal-margin-with-css-stroke-width\n- https://observablehq.com/@observablehq/inputs#Table\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":454,"value":"viewof scaleDetail = Inputs.radio(\n new Map([[\"Schematic\", '60M'], [\"Normal\", '20M'], [\"Detailed\", '10M']]),\n {\n label: \"Scale\",\n value: '20M',\n format: ([name, value]) => `${name} (${value})`\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":541,"value":"viewof languageSelector = Inputs.radio(Object.keys(locale), {\n label: \"Language\",\n value: \"es\" // 👈🏻 Default value\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1275,"value":"selectedCountryData = filterDataByCountry(datasetPerCountry, chart)[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1744,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1859,"value":"md`ES table`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1620,"value":"viewof datasetPerPartyTableInteractive = chart.length\n ? Inputs.table(filterDataByCountry(datasetPerPartyModif, chart), {\n columns: [\n \"Desglose por partidos\",\n \"No informan\",\n \"Sí informan\",\n \"MEPs que sí informan (%)\"\n ],\n format: {\n \"No informan\": sparkbar(maxTrueFalsePerParty, \"right\"),\n \"Sí informan\": sparkbar(maxTrueFalsePerParty, \"left\"),\n \"MEPs que sí informan (%)\": d => formatPercentage(+d)\n },\n align: {\n \"No informan\": \"right\",\n \"Sí informan\": \"left\",\n \"MEPs que sí informan (%)\": \"center\"\n },\n height: tableHeight,\n maxWidth: tableWidth,\n width: {\n \"Desglose por partidos\": widthTableColumnParty,\n \"No informan\": widthTableColumnFalseCases,\n \"Sí informan\": widthTableColumnTrueCases,\n \"MEPs que sí informan (%)\": widthTableColumnTransparencyIndicator\n },\n sort: \"No informan\",\n reverse: true\n })\n : html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1862,"value":"md`EN table`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1634,"value":"viewof datasetPerPartyTableInteractiveEN = chart.length\n ? Inputs.table(filterDataByCountry(datasetPerPartyModif, chart), {\n columns: [\n \"Breakdown by party\",\n \"Do not report\",\n \"Do report\",\n \"MEPs who do report meetings (%)\"\n ],\n format: {\n \"Do not report\": sparkbar(maxTrueFalsePerParty, \"right\"),\n \"Do report\": sparkbar(maxTrueFalsePerParty, \"left\"),\n \"MEPs who do report meetings (%)\": d => formatPercentage(+d)\n },\n align: {\n \"Do not report\": \"right\",\n \"Do report\": \"left\"\n },\n height: height,\n maxWidth: width,\n width: {\n \"Breakdown by party\": 200,\n \"Do not report\": 90,\n \"Do report\": 90,\n \"MEPs who do report meetings (%)\": 60\n },\n sort: \"Do not report\",\n reverse: true\n })\n : html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1929,"value":"// NOTE about tables:\n// I tried to access dinamically the column names in ES/EN depending on the language selector:\n// columns: [ partyNames, falseCases, trueCases ],\n// format: { \n// [falseCases]: sparkbar(maxTrueFalsePerParty, \"right\"), \n// [trueCases]: sparkbar(maxTrueFalsePerParty, \"left\"),\n// }\n// etc and did worked, but the sorting feature (\"sort\") didn't, so I ended up adding to different tables and\n// hardcoding all the names for this :/","pinned":true,"hidden":false,"mode":"ojs"},{"id":51,"value":"md`### Interaction`","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"function onMouseOut() {\n // Unhighlight country\n d3.select(this)\n // Make Malta more visible by adding more stroke to it\n .style('stroke', d =>\n d.properties.id == \"MT\"\n ? color(\n datasetPerCountry.filter(d => d.country_code == \"MT\")[0][\n \"transparency_ratio\"\n ]\n )\n : \"white\"\n )\n .style('stroke-width', d => (d.properties.id == \"MT\" ? \"2px\" : \"0.4px\"));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1211,"value":"md`### Sparkbars`","pinned":false,"hidden":false,"mode":"ojs"},{"id":783,"value":"function sparkbarOrig(max, aligned = \"right\") {\n return x => html`

${x}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1049,"value":"function sparkbar(max, aligned = \"right\") {\n const limit = 20;\n\n return x => html`\n

${x}

\n \n

\n ${x == 0 ? \"\" : x}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":692,"value":"md`### Formatting`","pinned":false,"hidden":false,"mode":"ojs"},{"id":663,"value":"formatPercentage = d3.format(\".1%\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":555,"value":"md`### Dataset to be mapped`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1690,"value":"partyName = locale[languageSelector][\"partyName\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1511,"value":"falseCases = locale[languageSelector][\"falseCases\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1512,"value":"trueCases = locale[languageSelector][\"trueCases\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1517,"value":"transparencyIndicator = locale[languageSelector][\"transparencyIndicator\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1253,"value":"datasetPerCountry = {\n const text = await FileAttachment(\n \"meps_transparency_per_country@2.csv\"\n ).text();\n\n return d3.csvParse(\n text,\n ({ country_code, meps, false_cases, true_cases, transparency_ratio }) => ({\n country_code: country_code,\n meps: +meps,\n false_cases: +false_cases,\n true_cases: +true_cases,\n transparency_ratio: +transparency_ratio\n })\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":560,"value":"viewof datasetperCountryTable = Inputs.table(datasetPerCountry)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1560,"value":"datasetPerPartyModif = datasetPerParty.map(\n ({\n country_code,\n national_party,\n false_cases,\n true_cases,\n transparency_ratio\n }) => ({\n country_code: country_code,\n [partyName]: national_party,\n [falseCases]: +false_cases,\n [trueCases]: +true_cases,\n [transparencyIndicator]: +transparency_ratio\n })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1566,"value":"viewof testModif = Inputs.table(datasetPerPartyModif)","pinned":true,"hidden":false,"mode":"ojs"},{"id":681,"value":"datasetPerParty = {\n const text = await FileAttachment(\"meps_transparency_per_party@6.csv\").text();\n\n return d3.csvParse(\n text,\n ({\n country_code,\n national_party,\n false_cases,\n true_cases,\n transparency_ratio\n }) => ({\n country_code: country_code,\n national_party: national_party,\n false_cases: +false_cases,\n true_cases: +true_cases,\n transparency_ratio: +transparency_ratio\n })\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1555,"value":"viewof test = Inputs.table(datasetPerParty)","pinned":false,"hidden":false,"mode":"ojs"},{"id":966,"value":"viewof datasetperPartyTable = Inputs.table(datasetPerParty)","pinned":false,"hidden":false,"mode":"ojs"},{"id":711,"value":"// By country\nfilterDataByCountry = function(myDataset, countryId) {\n return myDataset.filter(d => d.country_code == countryId);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":790,"value":"maxFalsePerParty = d3.max(datasetPerParty, d => +d[\"false_cases\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":803,"value":"maxTruePerParty = d3.max(datasetPerParty, d => +d[\"true_cases\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":809,"value":"maxTrueFalsePerParty = d3.max([maxFalsePerParty, maxTruePerParty]) + 7","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"md`### Geographic data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":491,"value":"projection = d3\n .geoIdentity()\n .reflectY(true)\n .fitSize([mapWidth * 1.2, height], countries)","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"viewof geographicDatasetTable = Inputs.table(\n countries.features.map(d => d.properties)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"// World example:\n// countries = topojson.feature(world, world.objects.countries)\n// nutsrg: Regions\ncountries = topojson.feature(europeEurostat, europeEurostat.objects.nutsrg)","pinned":true,"hidden":false,"mode":"ojs"},{"id":67,"value":"// Europe TopoJSON\n// http://www.naturalearthdata.com/downloads/110m-cultural-vectors/\n// https://github.com/deldersveld/topojson/blob/master/continents/europe.json\n//europe = FileAttachment(\"europe.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":500,"value":"// ERROR, the file has been deleted on the repository as deprecated\n// https://github.com/eurostat/Nuts2json/commits/master/\n/*\neuropeEurostat = (await fetch(\n `https://raw.githubusercontent.com/eurostat/Nuts2json/master/2016/3035/${scaleDetail}/0.json`\n)).json()\n*/\n\neuropeEurostat = FileAttachment(\"0-3035.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"md`### Dimensions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1645,"value":"widthTableColumnParty = 180","pinned":false,"hidden":false,"mode":"ojs"},{"id":1649,"value":"widthTableColumnFalseCases = 90","pinned":false,"hidden":false,"mode":"ojs"},{"id":1653,"value":"widthTableColumnTrueCases = 90","pinned":false,"hidden":false,"mode":"ojs"},{"id":1655,"value":"widthTableColumnTransparencyIndicator = 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":1776,"value":"isMobile = mapWidth < 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":1770,"value":"tableWidth = 550","pinned":false,"hidden":false,"mode":"ojs"},{"id":1427,"value":"mapWidth = +Math.min(width, 500)","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"// 01. Static global height:\nheight = 480","pinned":true,"hidden":false,"mode":"ojs"},{"id":1792,"value":"mapHeight = isMobile ? 450 : 480","pinned":false,"hidden":false,"mode":"ojs"},{"id":1790,"value":"tableHeight = isMobile ? 520 : 480","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"//margin = ({ top: 50, right: 50, bottom: 50, left: 50 })\nmargin = 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":552,"value":"md`### Languages`","pinned":false,"hidden":false,"mode":"ojs"},{"id":543,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":45,"value":"md`### Color & styles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1339,"value":"colorTrue = colorProjectPrimary","pinned":true,"hidden":false,"mode":"ojs"},{"id":1341,"value":"colorFalse = \"#333333\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":610,"value":"color = d3\n .scaleLinear()\n .domain([0, 100])\n .range([colorFalse, colorTrue])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1325,"value":"chartProject = \"quienmanda\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1949,"value":"colors","pinned":true,"hidden":false,"mode":"ojs"},{"id":204,"value":"colorProjectPrimary = colors.project.quienmanda.primary","pinned":true,"hidden":false,"mode":"ojs"},{"id":206,"value":"colorProjectSecondary = colors.project.quienmanda.secondary","pinned":true,"hidden":false,"mode":"ojs"},{"id":208,"value":"colorProjectLight = colors.project.quienmanda.light","pinned":true,"hidden":false,"mode":"ojs"},{"id":40,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"md`### Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":361,"value":"import { legend, swatches } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"// Civio main colors\nimport { colors } from \"@civio/utilities\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"import { projectionInput } from \"@d3/projection-comparison\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1887,"value":"Inputs","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"// Not necessary any more. We now access via Inputs.radio(), Inputs.table(), etc\n/*import {\n Button,\n Checkbox,\n Toggle,\n Radio,\n Range,\n Select,\n Text,\n Textarea,\n Search,\n Table\n} from \"@observablehq/inputs\"*/","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}