Data visualization designer. Now Digital Designer at the Financial Times. Before at UCB Biopharma, BBC News & the Senseable City Lab. I like making dots move on the screen
<style>
.wrapper {
max-width: 100%;
width: 100%;
background-color: ${colors.core.bkg};
padding: ${margin.padding * 2}px;
}
#treemap_css {
width: ${size.w * scale_s}px;
height: ${size.h * scale_s }px;
}
#treemap_css .background {
height: calc(100% - (35px * ${scale_s}));
width: calc(100% - (35px * ${scale_s}));
z-index: -1;
}
#treemap_css .categories {
width: inherit;
height: inherit;
position: absolute;
top: ${margin.padding}px;
left: ${margin.padding}px;
}
#treemap_css .background #sq1,
#treemap_css .categories div {
width: 100%;
height: 100%;
background-size: 286px;
}
.categories div {
position: absolute;
box-shadow: 0 0 0 calc(4px * ${scale_s}) ${colors.core.bkg};
}
#treemap_css .farmland_on, .categories .farmland.pattern_on {
border: solid ${colors.stroke.farmland_2};
background-image: url(${patterns.filter(d => d.name === "farmland")[0].bkg_url_on});
background-repeat: repeat;
}
#treemap_css .farmland_off, .categories .farmland.pattern_off {
border: solid ${colors.stroke.farmland_2};
background-image: url(${patterns.filter(d => d.name === "farmland")[0].bkg_url_off});
background-repeat: repeat;
}
.categories .woodland.pattern_on {
border: solid ${colors.stroke_2.woodland_2};
background-image: url(${patterns.filter(d => d.name === "woodland")[0].bkg_url_on});
background-repeat: repeat;
}
.categories .woodland.pattern_off {
border: solid ${colors.stroke_2.woodland};
background-image: url(${patterns.filter(d => d.name === "woodland")[0].bkg_url_off});
background-repeat: repeat;
}
.categories .agroecological.pattern_on {
border: solid ${colors.stroke_2.agroecological};
background-image: url(${patterns.filter(d => d.name === "agroecological")[0].bkg_url_on});
background-repeat: repeat;
}
.categories .agroecological.pattern_off {
border: solid ${colors.stroke_2.agroecological};
background-image: url(${patterns.filter(d => d.name === "agroecological")[0].bkg_url_off});
background-repeat: repeat;
}
.categories .peatland.pattern_on {
border: solid ${colors.stroke_2.peatland};
background-image: url(${patterns.filter(d => d.name === "peatland")[0].bkg_url_on});
background-repeat: repeat;
}
.categories .peatland.pattern_off {
border: solid ${colors.stroke_2.peatland};
background-image: url(${patterns.filter(d => d.name === "peatland")[0].bkg_url_off});
background-repeat: repeat;
}
.categories .housing.pattern_on {
border: solid ${colors.stroke_2.housing};
background-color: ${colors.core_2.housing};
background-repeat: repeat;
}
.categories .housing.pattern_off {
border: solid ${colors.stroke_2.housing};
background-color: ${colors.off_2.housing};
}
</style>
root.sum((d) => d.value).sort((a, b) => a.sort - b.sort || a.height - b.height)
treemap = d3
.treemap()
.tile(d3.treemapSquarify.ratio(1))
.size([size.w - margin.l - margin.r, size.h - margin.t - margin.b])
.padding(margin.padding)
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.
