Published unlisted
Edited
Jun 10, 2022
Debugging Line Generator
{
const AfganisthanData =
[
{"Region": "South Asia","Name": "Afghanistan","Year": 1997,"Value": null},
{"Region": "South Asia","Name": "Afghanistan","Year": 1998,"Value": null},
{"Region": "South Asia","Name": "Afghanistan","Year": 1999,"Value": null},
{"Region": "South Asia","Name": "Afghanistan","Year": 2000,"Value": null},
{"Region": "South Asia","Name": "Afghanistan","Year": 2001,"Value": null},
{"Region": "South Asia","Name": "Afghanistan","Year": 2002,"Value": null},
{"Region": "South Asia","Name": "Afghanistan","Year": 2003,"Value": null},
{"Region": "South Asia","Name": "Afghanistan","Year": 2004,"Value": null},
{"Region": "South Asia","Name": "Afghanistan","Year": 2005,"Value": 0.273092369477912},
{"Region": "South Asia","Name": "Afghanistan","Year": 2006,"Value": 0.273092369477912},
{"Region": "South Asia","Name": "Afghanistan","Year": 2007,"Value": 0.276859504132231},
{"Region": "South Asia","Name": "Afghanistan","Year": 2008,"Value": 0.276859504132231},
{"Region": "South Asia","Name": "Afghanistan","Year": 2009,"Value": 0.273092369477912},
{"Region": "South Asia","Name": "Afghanistan","Year": 2010,"Value": 0.27710843373494},
{"Region": "South Asia","Name": "Afghanistan","Year": 2011,"Value": 0.27710843373494},
{"Region": "South Asia","Name": "Afghanistan","Year": 2012,"Value": 0.27710843373494},
{"Region": "South Asia","Name": "Afghanistan","Year": 2013,"Value": 0.27710843373494},
{"Region": "South Asia","Name": "Afghanistan","Year": 2014,"Value": 0.27710843373494},
{"Region": "South Asia","Name": "Afghanistan","Year": 2015,"Value": 0.27710843373494},
{"Region": "South Asia","Name": "Afghanistan","Year": 2016,"Value": 0.27710843373494},
{"Region": "South Asia","Name": "Afghanistan","Year": 2017,"Value": 0.27710843373494},
{"Region": "South Asia","Name": "Afghanistan","Year": 2018, "Value": null},
{"Region": "South Asia","Name": "Afghanistan","Year": 2019,"Value": 0.278688524590163},
{"Region": "South Asia","Name": "Afghanistan","Year": 2020,"Value": 0.270161290322581},
{"Region": "South Asia","Name": "Afghanistan","Year": 2021,"Value": 0.270161290322581}
]
const AfganisthanFilter = [
{"from":-1, "to": 8},
{"from":20, "to": 22}
]
const ComorosData =[
{"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 1997,"Value": 0},
{"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 1998,"Value": 0},
{"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 1999,"Value": null},
{"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2000,"Value": null},
{"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2001,"Value": null},
{"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2002,"Value": null},
{"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2003,"Value": null},
{"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2004,"Value": 0.0303030303030302},
{"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2005,"Value": 0.0303030303030302},
{"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2006,"Value": 0.0303030303030302},
{"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2007,"Value": 0.0303030303030302},
{"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2008,"Value": 0.0303030303030302},
{"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2009,"Value": 0},
{"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2010,"Value": 0.0303030303030302},
{"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2011,"Value": 0.0303030303030302},
{"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2012,"Value": 0.0303030303030302},
{"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2013,"Value": 0.0303030303030302},
{"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2014,"Value": 0.0303030303030302},
{"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2015,"Value": 0.0303030303030302},
{"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2016,"Value": 0.0303030303030302},
{"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2017,"Value": 0.0606060606060605},
{"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2018,"Value": 0.0606060606060605},
{"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2019,"Value": 0.0606060606060605},
{"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2020,"Value": 0.166666666666667},
{"Region": "Sub-Saharan Africa","Name": "Comoros","Year": 2021,"Value": 0.166666666666667}
]
const ComorosFilter = [
{"from":1, "to": 7}
]
const NarauData = [
{"Region": "East Asia & Pacific","Name": "Nauru","Year": 1997,"Value": null},
{"Region": "East Asia & Pacific","Name": "Nauru","Year": 1998,"Value": 0},
{"Region": "East Asia & Pacific","Name": "Nauru","Year": 1999,"Value": 0},
{"Region": "East Asia & Pacific","Name": "Nauru","Year": 2000,"Value": null},
{"Region": "East Asia & Pacific","Name": "Nauru","Year": 2001,"Value": 0},
{"Region": "East Asia & Pacific","Name": "Nauru","Year": 2002,"Value": 0},
{"Region": "East Asia & Pacific","Name": "Nauru","Year": 2003,"Value": null},
{"Region": "East Asia & Pacific","Name": "Nauru","Year": 2004,"Value": 0},
{"Region": "East Asia & Pacific","Name": "Nauru","Year": 2005,"Value": 0},
{"Region": "East Asia & Pacific","Name": "Nauru","Year": 2006,"Value": 0},
{"Region": "East Asia & Pacific","Name": "Nauru","Year": 2007,"Value": 0},
{"Region": "East Asia & Pacific","Name": "Nauru","Year": 2008,"Value": 0},
{"Region": "East Asia & Pacific","Name": "Nauru","Year": 2009,"Value": 0},
{"Region": "East Asia & Pacific","Name": "Nauru","Year": 2010,"Value": 0},
{"Region": "East Asia & Pacific","Name": "Nauru","Year": 2011,"Value": 0},
{"Region": "East Asia & Pacific","Name": "Nauru","Year": 2012,"Value": 0},
{"Region": "East Asia & Pacific","Name": "Nauru","Year": 2013,"Value": 0.0526315789473684},
{"Region": "East Asia & Pacific","Name": "Nauru","Year": 2014,"Value": 0.0526315789473684},
{"Region": "East Asia & Pacific","Name": "Nauru","Year": 2015,"Value": 0.0526315789473684},
{"Region": "East Asia & Pacific","Name": "Nauru","Year": 2016,"Value": 0.0526315789473684},
{"Region": "East Asia & Pacific","Name": "Nauru","Year": 2017,"Value": 0.105263157894736},
{"Region": "East Asia & Pacific","Name": "Nauru","Year": 2018,"Value": 0.105263157894736},
{"Region": "East Asia & Pacific","Name": "Nauru","Year": 2019,"Value": 0.105263157894736},
{"Region": "East Asia & Pacific","Name": "Nauru","Year": 2020,"Value": 0.105263157894736},
{"Region": "East Asia & Pacific","Name": "Nauru","Year": 2021,"Value": 0.105263157894736}
]
const NarauFilter = [
{"from":-1, "to": 1},
{"from":2, "to": 4},
{"from":5, "to": 7},
];
const SolomonData = [
{"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 1997,"Value": null},
{"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 1998,"Value": 0.0204081632653061},
{"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 1999,"Value": 0.0204081632653061},
{"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2000,"Value": 0.0204081632653061},
{"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2001,"Value": null},
{"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2002,"Value": 0},
{"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2003,"Value": 0},
{"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2004,"Value": 0},
{"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2005,"Value": 0},
{"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2006,"Value": 0},
{"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2007,"Value": 0},
{"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2008,"Value": 0},
{"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2009,"Value": 0},
{"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2010,"Value": 0},
{"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2011,"Value": 0},
{"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2012,"Value": 0.02},
{"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2013,"Value": 0.02},
{"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2014,"Value": 0.02},
{"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2015,"Value": 0.02},
{"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2016,"Value": 0.02},
{"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2017,"Value": 0.02},
{"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2018,"Value": 0.0204081632653061},
{"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2019,"Value": 0.0408163265306122},
{"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2020,"Value": 0.0638297872340425},
{"Region": "East Asia & Pacific","Name": "Solomon Islands","Year": 2021,"Value": 0.08}
]
const SolomonFilter = [
{"from":-1, "to": 1},
{"from":3, "to": 5}
]
const TongaData =[
{"Region": "East Asia & Pacific","Name": "Tonga","Year": 1997,"Value": 0},
{"Region": "East Asia & Pacific","Name": "Tonga","Year": 1998,"Value": 0},
{"Region": "East Asia & Pacific","Name": "Tonga","Year": 1999,"Value": null},
{"Region": "East Asia & Pacific","Name": "Tonga","Year": 2000,"Value": 0},
{"Region": "East Asia & Pacific","Name": "Tonga","Year": 2001,"Value": 0},
{"Region": "East Asia & Pacific","Name": "Tonga","Year": 2002,"Value": null},
{"Region": "East Asia & Pacific","Name": "Tonga","Year": 2003,"Value": 0},
{"Region": "East Asia & Pacific","Name": "Tonga","Year": 2004,"Value": 0},
{"Region": "East Asia & Pacific","Name": "Tonga","Year": 2005,"Value": 0.0344827586206897},
{"Region": "East Asia & Pacific","Name": "Tonga","Year": 2006,"Value": 0.0333333333333333},
{"Region": "East Asia & Pacific","Name": "Tonga","Year": 2007,"Value": 0.0333333333333333},
{"Region": "East Asia & Pacific","Name": "Tonga","Year": 2008,"Value": 0.03125},
{"Region": "East Asia & Pacific","Name": "Tonga","Year": 2009,"Value": 0.03125},
{"Region": "East Asia & Pacific","Name": "Tonga", "Year": 2010,"Value": 0},
{"Region": "East Asia & Pacific","Name": "Tonga","Year": 2011,"Value": 0.0357142857142857},
{"Region": "East Asia & Pacific","Name": "Tonga","Year": 2012,"Value": 0.0357142857142857},
{"Region": "East Asia & Pacific","Name": "Tonga","Year": 2013,"Value": 0.0357142857142857},
{"Region": "East Asia & Pacific","Name": "Tonga","Year": 2014,"Value": 0},
{"Region": "East Asia & Pacific","Name": "Tonga","Year": 2015,"Value": 0},
{"Region": "East Asia & Pacific","Name": "Tonga","Year": 2016,"Value": 0},
{"Region": "East Asia & Pacific","Name": "Tonga","Year": 2017,"Value": 0.0769230769230769},
{"Region": "East Asia & Pacific","Name": "Tonga","Year": 2018,"Value": 0.0740740740740741},
{"Region": "East Asia & Pacific","Name": "Tonga","Year": 2019,"Value": 0.0740740740740741},
{"Region": "East Asia & Pacific","Name": "Tonga","Year": 2020,"Value": 0.0740740740740741},
{"Region": "East Asia & Pacific","Name": "Tonga","Year": 2021,"Value": 0}
]
const TongaFilter = [
{"from":1, "to": 3},
{"from":4, "to": 6}
]
const height = 400;
const width = 720;
const padding = {
top: 70,
bottom: 50,
left: 70,
right: 70
}
const boundHeight = height - padding.top - padding.bottom;
const boundWidth = width - padding.right - padding.left;
////////////////////////////////////////////////////////////
//////////////////////// 2 CREATE SCALE ////////////////////
////////////////////////////////////////////////////////////
const data = AfganisthanData;
const filter = AfganisthanFilter;
const scaleX = d3.scaleLinear()
.range([0, boundWidth])
.domain(d3.extent(data, d => d.Year))
const scaleY = d3.scaleLinear()
.range([boundHeight, 0])
.domain(d3.extent(data, d => d.Value))
const bound = d3.select('.bound')
filter.forEach(
(a, j, r) => {
const dataX = data.filter(
(b, i) => i == r[j].from || i == r[j].to)
const val = d3.line()
.defined(d => d.Value)
.x(d => scaleX(d.Year))
.y(d => scaleY(d.Value))
(dataX.filter((a) => a.Value !== null))
//console.log(dataX)
// console.log(val);
bound.append('path')
.attr('class', `lineX${j}`)
.attr('d', val)
.attr('fill', 'none')
.attr('stroke', 'green')
}
)
}
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.
