md`Peoples under threat 2020 line chart with axis total ranking by country (tooltip missing.....)`
md`Source: https://peoplesunderthreat.org/data/. I took the data, downloaded it into Google Sheets and then converted it into a CSV file. I am not sure this is a good graph. It is in fact not good at all, but it gives me a taste of what I can do using really interesting data and topics. I will continue to tinker with this data set and graph. In this case, you can hover over the little rectangles/lines and a tooltip mentioning each country and the corresponding data will appear. It is a bit slow. I need to figure out how to make this appear more quickly. Also, it is time to learn how to add legends.`
peoples = d3.csvParse(await FileAttachment("Peoplesunderthreat2020b.csv").text())
peoples[0].Flight_of_refugees_and_IDPs
chart_width = 800
chart_height = 400
margin = 50
//create the svg
svg = d3.create('svg')
.attr('width', chart_width)
.attr('height', chart_height)
x_scale = d3.scaleBand()
.domain(countries.map(function(d){
return d.Country
}))
.rangeRound([0, chart_width])
.paddingInner(0.05)
countries = peoples.map(function(d){
return {
Country: d.Country,
Flight_of_refugees_and_IDPs: + d.Flight_of_refugees_and_IDPs,
TOTAL: +d.TOTAL
}
})
peoples.map(function(d){
return d.TOTAL
})
y_scale = d3.scaleLinear()
.domain([0, d3.max(countries, function(d){
return d.TOTAL
})])
.range([chart_height - margin, margin])
x_axis = d3.axisBottom(x_scale).tickValues([])
//x_axis = d3.axisBottom(x_scale)
svg.append('g')
.attr('class', 'x-axis')
.attr('transform', `translate(${margin},${chart_height - margin})`)
//.attr('transform', `translate(0,${chart_height - margin})`)
.call(x_axis)
y_axis = d3.axisLeft(y_scale)
svg.append('g')
.attr('class', 'y-axis')
.attr('transform', `translate(${margin},0)`)
//.attr('transform', `translate(0,0)`)
.call(y_axis)
//clippath
svg.append('clipPath')
.attr('id', 'scatterclip')
.append('rect')
.attr('x', margin)
.attr('y', margin - 5)
.attr('width', chart_width - margin*2)
.attr('height', chart_height - margin*2 + 5)
md`x axis = Countries`
md`y axis = Flight of refugees and Internally Displaced Persons on a scale of 0 to 0.7591 (hightest score)`
line = d3.line()
.defined(function(d){
return d.TOTAL >= 0
})
.x(function(d){
return x_scale(d.Country)
})
.y(function(d){
return y_scale(d.TOTAL)
})
//create bars
rects = {
/*svg.append('g')
.attr('id', 'manyDots')
.attr('clip-path', 'url(#scatterclip)')*/
svg.append('path')
.datum(countries)
.attr('fill', 'none')
.attr('stroke', 'red')
.attr('stroke-width', 5)
.attr('d', line)
/*.selectAll('circle')
.data(countries)
.enter()
.append("line")
.attr("x1", function(d) {
return x_scale(d.Country);
})
.attr("x2", function(d) {
return x_scale(d.Country);
})
.attr("y1", chart_height - margin)
.attr("y2", function(d) {
return y_scale(d.Flight_of_refugees_and_IDPs);
})
.attr("stroke", "#ddd")
.attr("stroke", "blue")
.attr("stroke-width", 3)
.append('title')
.text(function(d){
return d.Country + " " + d.Flight_of_refugees_and_IDPs
});*/
return svg.node()
}
d3 = require("d3@5")
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.
