Published
Edited
Jan 28, 2022
1 fork
6 stars
Sustainable AI
chart = {
/*** init svg plot ***/
const cp = chart_param,
svg = d3.select(DOM.svg(cp.width + cp.margin.left + cp.margin.right,
cp.height + cp.margin.top + cp.margin.bottom));
svg.append("g")
.attr("fill", "none")
.attr("stroke-linejoin", "round")
.selectAll("path")
.data(contours)
.enter().append("path")
.attr("stroke-width", (d, i) => i % 5 ? 0.1 : 1)
.attr("stroke", d => color(d.value))
.attr("d", d3.geoPath())
.attr("fill", d => color(d.value).replace(")", ", 0.1)"));
// plot the points
svg.selectAll("circle.CHIpaper")
.data(CHI).enter()
.append("circle")
//.classed("enao_genre_dot", true)
.attr("cx", d => cp.margin.left + x(d.left))
.attr("cy", d => cp.margin.top + y(d.top))
.attr("fill", d => colorScale(d.design))
.attr("r", width * .0025);
draw_axes(svg, cp);
return svg.node();
}
color = d3.scaleLinear().domain(d3.extent(contours, d => d.value)).range(["#06D6A0", "#EF476F"]);
contours = d3.contourDensity()
.x(d => chart_param.margin.left + x(d.left))
.y(d => chart_param.margin.top + y(d.top))
.size([chart_param.width, chart_param.height])
.bandwidth(bandwidth)
.thresholds(30)
(CHI)
colorScale = d3.scaleLinear().domain([0, 1]).range(["#06D6A0", "#EF476F"]);
CHI = {
const scale_AI = d3.scaleLinear().domain(d3.extent(CHIAI, d => d.top)).range([AIMAX, 0]);
return CHIdataRaw.map( d => {
return {
CC: +d['Candidate Collections'].replace("Proceedings_", "").replace("_CHI",""),
link: d.Documents,
left: +d.Sustain.replace("%", ""),
top: scale_AI(+d.AI.replace("%", "")),
design: +d.Design.replace("%", "") / 100
}});
}
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.
