dataviz, R obsessed, learning D3 with #100daysofD3
Twitter: @W_R_Chase
Published
Edited
May 15, 2019
4 forks
2 stars
html `<div class="graph_${selectedYear}" style="width: 800px; height: 400px; overflow-y: scroll"></div>`
chart = {
const svg = d3.select(".graph_" + selectedYear).append("svg")
.attr("width", width)
.attr("height", height)
.style("font", "14px Montserrat");
svg
.append("rect")
.attr("width", "100%")
.attr("height", "100%")
.style("fill", "#F5F5F2");
const barwidth = 25
const corner = Math.floor((barwidth/2) + 5)
//bars
svg.append("g")
.selectAll("path")
.data(freedom_year)
.join("path")
.attr("fill", d => colorScale(d.region_simple))
.attr("d", (d, i) => roundedRect(
scaleX(0),
(i * 28) + margin.top,
1,
barwidth,
[0, 0, corner, 0]
))
.transition().duration(1000)
.attr("d", (d, i) => roundedRect(
scaleX(0),
(i * 28) + margin.top,
scaleX(d.population) - scaleX(0),
barwidth,
[0, 0, corner, 0]
));
//x axis
svg.append("g")
.call(xAxis)
.style("font-size", "14px");
//y axis
svg.append("g")
.call(yAxis)
.style("font-size", "14px");
svg.append("g")
.attr("class", "grid")
.attr("transform", "translate(0," + (height - margin.bottom) + ")")
.attr("stroke-opacity", 0.1)
.call(make_x_gridlines()
.tickSize(-height+margin.top+margin.bottom)
.tickFormat("")
)
svg.append("line")
.attr("x1", margin.left)
.attr("x2", margin.left)
.attr("y1", margin.top - 6)
.attr("y2", height)
.attr("stroke-width", "2px")
.style("stroke", "black")
.style("opacity", 1);
//x axis label
/*
svg.append("text")
.attr("transform", "translate(" + (width/2) + "," + (height - 20) + ")")
.style("text-anchor", "middle")
.style("font-size", "20px")
.text("Date");
//title
svg.append("text")
.attr("transform", "translate(0," + margin.top/3 + ")")
.style("text-anchor", "left")
.style("font-size", "25px")
.text("Worldwide average personal freedom score, 2008 - 2016")
*/
return svg.node();
}
scaleY = d3.scaleOrdinal()
.domain(freedom_year.map(d => d.countries))
.range(range);
scaleX = d3.scaleLinear()
.domain([0, d3.max(freedom_year.map(d => d.population))])
.range([margin.left, width - margin.right]);
colorScale = d3.scaleOrdinal()
.domain(d3.map(freedom_year, d => d.region_simple).keys())
.range(colors);
xAxis = g => g
.attr("transform", `translate(0, ${margin.top})`)
.call(d3.axisTop(scaleX).tickSizeOuter(0).ticks(3))
.call(g => g.select(".domain").remove());
yAxis = g => g
.attr("transform", `translate(${margin.left}, ${margin.top - 15})`)
.call(d3.axisLeft(scaleY).tickSizeOuter(0))
.call(g => g.select(".domain").remove());
html`<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">`
width = 800
height = (nbars * 28) + margin.top
nbars = freedom_year.length
range = d3.range(28, (nbars+1) * 28, 28)
margin = ({top: 100, right: 20, bottom: 70, left: 140})
colors = ["#596F7E", "#168B98", "#ED5B67", "#fd8f24","#919c4c"]
minYear = d3.min(freedom, d => d.year)
maxYear = d3.max(freedom, d => d.year)
bigFormat = d3.format(",.0f")
arc = (r, sign) => r ? `a${r * sign[0]},${r * sign[1]} 0 0 1 ${r * sign[2]},${r * sign[3]}` : ""
function roundedRect(x, y, width, height, r) {
r = [Math.min(r[0], height, width),
Math.min(r[1], height, width),
Math.min(r[2], height, width),
Math.min(r[3], height, width)];
return `M${x + r[0]},${y
}h${width - r[0] - r[1]}${arc(r[1], [1, 1, 1, 1])
}v${height - r[1] - r[2]}${arc(r[2], [1, 1, -1, 1])
}h${-width + r[2] + r[3]}${arc(r[3], [1, 1, -1, -1])
}v${-height + r[3] + r[0]}${arc(r[0], [1, 1, 1, -1])
}z`;
}
function make_x_gridlines() {
return d3.axisBottom(scaleX)
.ticks(3)
};
freedom = d3.csv("https://gist.githubusercontent.com/will-r-chase/16827fa79e02af9e3a0651fb0d79b426/raw/92b321a8bc4d98e463156ef03a5da5cf05065704/freedom_clean.csv", d3.autoType)
freedom_year = freedom.filter(obj => {return obj.year === selectedYear}).sort((a, b) => b.population - a.population)
d3 = require("d3")
import { slider, radio, text } from '@jashkenas/inputs'
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.
