Public
Edited
Jan 19, 2024
3 stars
#604 Mapa transparencia Eurodiputados - SceMaps (ES/EN)
Also listed in…
Power | Poder
// NOTE about tables:
// I tried to access dinamically the column names in ES/EN depending on the language selector:
// columns: [ partyNames, falseCases, trueCases ],
// format: {
// [falseCases]: sparkbar(maxTrueFalsePerParty, "right"),
// [trueCases]: sparkbar(maxTrueFalsePerParty, "left"),
// }
// etc and did worked, but the sorting feature ("sort") didn't, so I ended up adding to different tables and
// hardcoding all the names for this :/
viewof testModif = Inputs.table(datasetPerPartyModif)
// World example:
// countries = topojson.feature(world, world.objects.countries)
// nutsrg: Regions
countries = topojson.feature(europeEurostat, europeEurostat.objects.nutsrg)
// Europe TopoJSON
// http://www.naturalearthdata.com/downloads/110m-cultural-vectors/
// https://github.com/deldersveld/topojson/blob/master/continents/europe.json
//europe = FileAttachment("europe.json").json()
// 01. Static global height:
height = 480
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'
}
}
})
colorTrue = colorProjectPrimary
colorFalse = "#333333"
colors
colorProjectPrimary = colors.project.quienmanda.primary
colorProjectSecondary = colors.project.quienmanda.secondary
colorProjectLight = colors.project.quienmanda.light
styles = html`
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap" rel="stylesheet">
<style>
svg * {
font-family: 'Lato', sans-serif;
}
.observablehq * {
font-family: 'Lato', sans-serif;
}
.observablehq table {
table-layout: fixed;
margin: 0;
border-collpase: collapse;
font-size: 0.9rem;
font-family: 'Lato', sans-serif;
}
.observablehq table tr > th:first-child {
pointer-events: none;
}
.observablehq td, .observablehq tr, .observable th {
padding: 0!important;
padding: 0.1rem 0.2rem!important;
}
.observablehq table td {
border-bottom-color: transparent!important;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis:
}
.observablehq table tr>:nth-child(1) * {
pointer-events: none;
visibility: hidden;
width: 0px!important;
max-width: 0px!important;
}
.observablehq table tr>:nth-child(2) {
width: ${widthTableColumnParty}px!important;
max-width: ${widthTableColumnParty}px!important;
}
.observablehq table tr>:nth-child(3) {
width: ${widthTableColumnFalseCases}px!important;
max-width: ${widthTableColumnFalseCases}px!important;
}
.observablehq table tr>:nth-child(4) {
width: ${widthTableColumnTrueCases}px!important;
max-width: ${widthTableColumnTrueCases}px!important;
}
.observablehq table tr>:nth-child(5) {
width: ${widthTableColumnTransparencyIndicator}px!important;
max-width: ${widthTableColumnTransparencyIndicator}px!important;
}
.observablehq table th {
border-bottom-color: transparent!important;
}
.observablehq table thead th {
border-bottom: 4px solid ${colorProjectLight}!important;
box-shadow: none;
white-space: pre-wrap;
}
.observablehq table tr>:last-of-type {
padding-right: 0!important;
}
.observablehq table tr>:not(:first-of-type) {
padding-right: 0!important;
}
</style>
`
Inputs
// Not necessary any more. We now access via Inputs.radio(), Inputs.table(), etc
/*import {
Button,
Checkbox,
Toggle,
Radio,
Range,
Select,
Text,
Textarea,
Search,
Table
} from "@observablehq/inputs"*/
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
