The avatar for @civio
Civio
Non-profit organization specialized in public data, investigative journalism and access to information | Organización independiente y sin ánimo de lucro especializada en datos públicos, periodismo de investigación y acceso a la información
Published
#307 Altos cargos
Edited
Nov 5, 2021
Fork of One chart a day - Adding Highlight and Interactive Hover Labels to a Bar Chart
2 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
dateLimit = "2021-06-30"
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
styles = html`
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap" rel="stylesheet">
<style>
*{
font-family: 'Lato', sans-serif;
}
#advice {
text-align: center;
margin: 10px auto;
}
#advice, form, .tooltip h3, #swatch-parent-container {
font-size: 14px;
}
form select {
width: auto !important;
}
.observablehq label {
width: 155px !important;
}
.women_percent rect {
opacity: 0.8;
}
.men_percent rect {
opacity: 0.3;
}
.women_percent rect.hover, #swatch-container span::before {
opacity: 1;
}
.men_percent rect.hover, #swatch-container span:nth-child(even)::before {
opacity: 0.5;
}
.axis {
pointer-events: none;
}
.tooltip {
width: ${isMobile ? "160px" : "200px;"};
}
.tooltip h3 {
line-height: 20px;
margin: 0 0 5px 0;
font-weight: normal;
}
.tooltip h3.ministerio {
font-weight: bold;
}
.tooltip h3, table th {
opacity: 0.9;
}
.domain, .axis.y .tick line {
display: none;
}
.axis.x line{
opacity: 0.1;
}
.axis.x .tick:nth-child(2) {
display: none;
}
.axis.x .tick:nth-child(4) line {
display: none;
}
.axis.x .tick:nth-child(5) line {
display: none;
}
.axis.x.bottom {
display: ${isMobile ? "" : "none"};
}
.axis.x.bottom line {
display: none;
}
.axis.y {
text-anchor: ${isMobile ? "start" : ""};
}
.axis.y .minister {
font-weight: bold;
}
.law-line {
stroke: black;
opacity: 0.7;
stroke-dasharray: 4;
}
#footer {
font-size: 12px;
text-align: center;
color: #383838;
}
#swatch-container, #footer, form {
margin: auto;
}
<style>
`
Insert cell

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.
Learn more