Mobility in Europe prototype (desktop prototype, EN).#659 Prototypes for Christmas landing page 2021-v01Civio 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 counter
Large residential property holders in Spain (Prototype)
function angleType(type) {
if (type === "public") {
return `rotate(${angleFork}deg)`;
} else if (type === "private") {
return `rotate(-${angleFork}deg)`;
} else if (type === "other") {
return `rotate(0deg)`;
}
}
function forkType(type) {
if (type === "public") {
return urlStroke;
} else if (type === "private") {
return urlBlack;
} else if (type === "other") {
return urlGrey;
}
}
function flagEmoji(country) {
if (country === "España") {
return "🇪🇸";
} else if (country === "Estados Unidos") {
return "🇺🇸";
} else if (country === "Francia") {
return "🇫🇷";
} else if (country === "Alemania") {
return "🇩🇪";
} else if (country === "Países Bajos") {
return "🇳🇱";
} else if (country === "Israel") {
return "🇮🇱";
} else if (country === "Reino Unido") {
return "🇬🇧";
} else if (country === "Singapur") {
return "🇸🇬";
} else if (country === "Suiza") {
return "🇨🇭";
} else if (country === "Jersey") {
return "🇯🇪";
} else if (country === "Luxemburgo") {
return "🇱🇺";
} else if (country === "Islas Caiman") {
return "🇰🇾";
} else if (country === "Filipinas") {
return "🇵🇭";
} else {
//throw new Error("Flag no encontrada: " + country); // throw error
console.log("Categoría no encontrada: " + country);
}
}
countriesList = Array.from(new Set(data02.map((d) => d.origin)))
// Scaling forks depending on values
scaleArea = d3
.scaleSqrt()
.domain(rangeValues)
.range([6, 40])
function categorizeSociety(type) {
let category;
if (["Administración central", "Empresa pública"].includes(type)) {
return "public";
} else if (
["Empresa privada", "Cooperativa", "Socimi", "Soparfi"].includes(type)
) {
return "private";
} else if (
[
"Asociación",
"Comunidad de bienes, de propietarios y herencias yacentes",
"Entidades religiosas",
"Fundaciones"
].includes(type)
) {
return "other";
} else {
//throw new Error("Categoría no encontrada: " + type); // throw error
console.log("Categoría no encontrada: " + type);
}
}
dataModif01 = {
return dataRaw01.map((d) => ({
// Absolute numbers:
inmuebles_total: d.inmuebles_total,
inmuebles_grandesTenedores: d.inmuebles_grandesTenedores,
inmuebles_top10: d.inmuebles_top10,
// Percents:
percent_grandesTenedores: d.inmuebles_grandesTenedores / d.inmuebles_total,
percent_top10: d.inmuebles_top10 / d.inmuebles_total
}));
}
dataModif02 = {
return dataRaw02.map((d) => ({
name: d.Matriz,
value: d["TOTAL INMUEBLES"],
origin: d.Sede,
typeOriginal: d["Tipo de sociedad"],
type: categorizeSociety(d["Tipo de sociedad"])
}));
}
dataModif03 = {
return dataRaw03.map((d) => ({
name: d.Matriz,
value: d["TOTAL INMUEBLES"],
origin: d.Sede,
typeOriginal: d["Tipo de sociedad"],
type: categorizeSociety(d["Tipo de sociedad"]),
n: Math.round(d["TOTAL INMUEBLES"] / 50)
}));
}
formatPercent = d3.formatLocale(locale).format(",.1%")
formatIntegers = d3.formatLocale(locale).format(",d")
height = 500 // If we need 2 or more heights (for mobile, desktop, etc), we should create them in different cells (heightDesktop and hegihtMobile) and use one or the other depending on the flag variable isMobile
margin = ({ top: 50, right: 50, bottom: 50, left: 50 })
mediaQueryLimit = 500
//660 is Civio central column
maxWidth = 660
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.