Published
Edited
Apr 9, 2019
d3 = require("d3@5")
data = (await d3.csv("https://raw.githubusercontent.com/sw2279/data/b3ad3a358eabc4c40670d9ca5d83d762cd79e10b/migration_forbarchart.csv", (d, i, columns) => (d3.autoType(d), d.total = d3.sum(columns, c => d[c]), d))).sort((a, b) => b.total - a.total)
//format the x-axis
{
let yearArray = []
let scaledYears = []
//fill the yearArray
for (let i=0; i<data.length; i++){
yearArray.push(data[i].YEARS)
}
let findScale = d3.scaleBand()
.domain(yearArray)
.range([0,1])
.padding(0)
//fill the scaledBand array
for(var i in yearArray){
scaledYears.push(findScale(yearArray[i]))
}
return scaledYears
}
data.columns.slice(1) //slice everything to the right of YEARS (note that total is not included)
series = d3.stack().keys(data.columns.slice(1))(data) //create individual arrays for each variable;
//stack allows us to stack the objects on top of each other from "starting position" to "end position"
x = d3.scaleBand()
.domain(data.map(d => d.YEARS)) //map function onto iterable object; feed array of years into domain
.range([margin.left, width - margin.right])
.padding(0.05)
y = d3.scaleLinear()
//nested max: looping through series to find the max of the total
.domain([0, d3.max(series, d => d3.max(d, d => d[1]))]) //dynamic range
.rangeRound([height - margin.bottom, margin.top]) //height of svg - bottom margin
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).tickSizeOuter(0)) //feeding function 'x' as a function
.call(g => g.selectAll(".domain").remove())
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).ticks(null, "s"))
.call(g => g.selectAll(".domain").remove())
margin = ({top: 10, right: 10, bottom: 20, left: 40})
height = 600
color = d3.scaleOrdinal()
//not scaleLinear (map range of values --> range of values)
//not scaleBand (map discrete categeoires --> range of values)
//map discrete array of elements (5 series keys) to a second array of elements)
.domain(series.map(d => d.key)) //reassembling array of the categories (key is the type)
.range(d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), series.length).reverse()) //length gets 5 keys; interpolateSpectral defines the hex colors
//could also provide an array of hex codes in range
.unknown("#ccc") //return the corresponding hex code, but if there's an unmatched key, color it gray
legend = svg => {
const g = svg //creating SVG for the legend
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.attr("text-anchor", "end")
.attr("transform", `translate(${width - margin.right},${margin.top})`)
.selectAll("g")
.data(series.slice().reverse())
.join("g")
.attr("transform", (d, i) => `translate(0,${i * 20})`);
g.append("rect")
.attr("x", -19)
.attr("width", 19)
.attr("height", 19)
.attr("fill", d => color(d.key)); //put keys into color function
g.append("text")
.attr("x", -24)
.attr("y", 9.5)
.attr("dy", "0.35em")
.text(d => d.key.toLowerCase());
}
chart = {
const svg1 = d3.select(DOM.svg(width, height)); //pointing it to the DOM object
svg1.append("g")
.selectAll("g")
.data(series)
.join("g")
.attr("fill", d => color(d.key))
.selectAll("rect")
.data(d => d)
.join("rect")
.attr("x", (d, i) => x(d.data.YEARS))
.attr("y", d => y(d[1])) //feeding y the data at index [1]
.attr("height", d => y(d[0]) - y(d[1]))
.attr("width", x.bandwidth());
svg1.append("g")
.call(xAxis);
svg1.append("g")
.call(yAxis);
svg1.append("g")
.call(legend);
return svg1.node();
}
// your code here
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.