Published
Edited
Nov 7, 2021
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
sdg_data = sdg_zip.file('sdg_hackathon_data.csv').csv({typed:true})
Insert cell
sup_data = sup_zip.file('supplementary_data.csv').csv({typed:true})
Insert cell
Insert cell
Inputs.table(sup_data, {
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
width: width,
x: {
domain: d3.sort(sdg_sdg_date_month_count, d => -d.count).map(d => d.sdg),
padding: 0
},
y: {
grid: true
},
color: {
range: ["#e15759", "#4e79a7"]
},
marks: [
Plot.barY(sdg_sdg_date_month_count, {x: "sdg", y: d => d.count*d.months, insetLeft: 0.5, insetRight: 0.5, fill:"start_date"}),
Plot.ruleY([0]),
]
})
Insert cell
Insert cell
myplot = Plot.dot(sdg_sdg_date_month_count, {x: "start_date", y: "count", stroke: "sdg"}).plot({color:{scheme: "turbo"}})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Inputs.table(country_data, {
})
Insert cell
Insert cell
Insert cell
Insert cell
// saves as json as it's slow
// project_sdgs = {
// let data = {}
// sup_data.map(d=>{
// let sdg_entries = sdg_data.filter(sd => sd.project_number==d.project_number)
// let te_sdgs=[]
// sdg_entries.map(sds=> te_sdgs.push(sds.sdg))
// data['p'+d.project_number]=_.uniq(te_sdgs)
// })
// return data}
Insert cell
project_sdgs = FileAttachment("project_sdgs.json").json()
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
---
Insert cell
project_numbers = _.uniq(sdg_data.map(d=>{
return d.project_number
}))
Insert cell
project_discipline = _.uniq(sdg_data.map(d=>{
return d.discipline_name
}))
Insert cell
project_titles = _.uniq(sdg_data.map(d=>{
return d.project_title
}))
Insert cell
start_date_range =d3.extent(_.uniq(sdg_data.map(d=>{
return d.start_date
})))
Insert cell
end_date_range = d3.extent(_.uniq(sdg_data.map(d=>{
return d.end_date
})))
Insert cell
inst_country = _.uniq(sup_data.map(d=>{
return d.institution_country
}))
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
area = d3.area()
.curve(curve)
.x(d => x(d.start_date))
.y0(d => y(sdgs.indexOf(d.sdg) * (maxmetric))) // the position of this SDG
.y1(d => y(sdgs.indexOf(d.sdg) * (maxmetric) + 2.5*d.count)); // the position of the sdg plus the metric we show
Insert cell
line = d3.line()
.x(d => x(d.start_date))
.y(d => y(sdgs.indexOf(d.sdg) * (maxmetric) + d.count))
.curve(curve)
Insert cell
## Formatting
Insert cell
maxmetric = d3.max(sdg_sdg_date_count, d => d.count)
Insert cell
y = d3.scaleLinear()
.domain([0, (sdgs.length * maxmetric) ]).nice()
.range([height - margin.bottom, margin.top]);
Insert cell
minyear = d3.min(sdg_sdg_date_count, d => new Date(d.start_date)).getFullYear()
Insert cell
maxyear = d3.max(sdg_sdg_date_count, d => new Date(d.start_date)).getFullYear()
Insert cell
x = d3.scaleUtc()
.domain(d3.extent(sdg_sdg_date_count, d => new Date(d.start_date)))
.range([0, width - margin.right]);
Insert cell
height =1000
Insert cell
Insert cell
month_color = d3.scaleLinear()
.domain(d3.extent(sdg_sdg_date_month_count.map(d=>d.months)))
.range([sdg_colours2["SDG-07"], sdg_colours2['SDG-17']])
Insert cell
Insert cell
sdg_colours = ['black','#EA2932','#D29D35','#34994B','#C11F36','#EC3F2F','#00AED8','#FCB42A','#8E1838',
'#F26C2D','#DE2484','#F89B31','#CD8A33','#4A773E','#017FB9','#45AD4E','#005888','#1A3866']
Insert cell
Insert cell
Insert cell
Insert cell
mergeById = (a1, a2) =>
a1.map(itm => ({
...a2.find((item) => (item.project_number === itm.project_number) && item),
...itm
}))
Insert cell
parser = d3.timeParse("%Y-%m-%d")
Insert cell
Insert cell
Insert cell

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.
Learn more