Published
Edited
Nov 8, 2020
1 fork
md`Peoples under threat 2020 scatterplot with axis`
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 dots 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
}
})
peoples.map(function(d){
return d.Flight_of_refugees_and_IDPs
})
y_scale = d3.scaleLinear()
.domain([0, d3.max(countries, function(d){
return d.Flight_of_refugees_and_IDPs
})])
.range([chart_height - margin, margin])
x_axis = d3.axisBottom(x_scale).tickValues([])
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)`
//create bars
rects = {
svg.append('g')
.attr('id', 'manyDots')
.attr('clip-path', 'url(#scatterclip)')
.selectAll('circle')
.data(peoples)
.enter()
.append('circle')
.attr('cx', function(d, i){
//return x_scale(i)
return x_scale(d.Country)
})
.attr('cy', function(d){
return y_scale(d.Flight_of_refugees_and_IDPs)
})
.attr('r', 4)
.attr('fill', 'red')
/*.append('title')
.text(function(d){
return d.Country
})*/
.on('mouseenter', function(d){
d3.select(this)
.transition()
.duration(100)
.attr('fill', 'blue')
.attr('r', 10)
})
.on('mouseleave', function(d){
d3.select(this)
.transition()
.duration(100)
.attr('fill', 'red')
.attr('r', 4)
})
.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.
