Public
Edited
Jan 19, 2024
3 stars
// 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"*/
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.