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
Others | Otros
Edited
Jan 2, 2022
8 stars
58
Others | Otros
Mobility in Europe prototype (desktop prototype, EN).
#659 Prototypes for Christmas landing page 2021-v01
Civio anniversary landing page - p5.js background#682 Backlog in asylum applications in the European Union as of December 2021#679a Percentage of prisoners in pretrial detention in 2021 (EU)#679d Suicide rates in preventive detention in the European Union#679b Tally mark counterLarge residential property holders in Spain (Prototype)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
viewof n = Inputs.range([3, 10], { label: "Cut by index", value: 10, step: 1 })
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function onClick() {
d3.selectAll(".portrait").classed("hovered", false);

//const isClicked = d3.select(this).classed("clicked"); // Not working with multiple classes
const isClicked = d3.select(this).attr("class").includes("clicked");

const pseudoElement = d3.select(this).select(".underline");

if (isClicked) {
d3.select(this).classed("clicked", false);

d3.selectAll(".portrait")
.selectAll(".underline")
.style("transform", "scale(0,1) skew(-15deg)");

d3.selectAll(".portrait")
.transition()
.duration(500)
.style("filter", "grayscale(0) opacity(1)");
} else {
d3.selectAll(".portrait").transition().style("opacity", 0.9);
d3.selectAll(".portrait")
.selectAll(".underline")
.style("transform", "scale(0,1) skew(-15deg)");
d3.selectAll(".portrait").classed("clicked", false);
d3.select(this).classed("clicked", true);
pseudoElement.transition().style("transform", "skew(-15deg)");

d3.selectAll(".portrait")
.filter(function () {
return !this.classList.contains("clicked");
})
.transition()
.duration(500)
.style("filter", "grayscale(0.5) opacity(0.3)");

d3.select(this)
.transition()
.duration(500)
.style("filter", "grayscale(0) opacity(1)");
}
}
Insert cell
function onMouseOver() {
d3.select(this).classed("hovered", true);
}
Insert cell
function onMouseOut() {
d3.selectAll(".portrait").classed("hovered", false);
}
Insert cell
Insert cell
Insert cell
Insert cell
isMobile = width < mediaQueryLimit
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
people = [
{
name: "Javi",
anchor: "javi",
img: URLjavi
},
{
name: "Miguel",
anchor: "miguel",
img: URLmiguel
},
{
name: "Eva",
anchor: "eva",
img: URLeva
},
{
name: "María",
anchor: "maria",
img: URLmaria3
},
{
name: "Antonio",
anchor: "antonio",
img: URLantonio
},
{
name: "Olalla",
anchor: "olalla",
img: URLolalla
},
{
name: "Ángela",
anchor: "angela",
img: URLangela
},
{
name: "Ana",
anchor: "ana",
img: URLana
},
{
name: "Carmen",
anchor: "carmen",
img: URLcarmen
},
{
name: "David",
anchor: "david",
img: URLdavid
}
]
Insert cell
extraEl = [
{
name: "¿Tú?",
anchor: "tu",
img: ""
}
]
Insert cell
peopleReduced = people.slice(0, n)
Insert cell
peopleReducedWithExtraEl = peopleReduced.concat(extraEl)
Insert cell
data = peopleReducedWithExtraEl
//data = peopleReduced
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

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