Document

2b:null 2c:["$","title",null,{"children":"Debugging Line Generator | smpa01 | Observable"}] 31:T32fe,{ 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') } ) }32:[] 2f:{"id":"5f14128a15af3585","slug":null,"title":"Debugging Line Generator","thumbnail":"92dc4f8003c156dc2b22dee6d9d94f1f16cc650344ac7561fbcb214945a6f778","access_level":"unlisted","create_time":"$D2022-06-10T14:29:26.989Z","update_time":"$D2022-06-15T04:06:22.043Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"f6f5bab201e9c602","login":"smpa01","name":"smpa01","avatar_url":"https://avatars-next.observableusercontent.com/11fbf12260309afb8ae5e8d35256587cc7ddb704fb72f854fb7ae442be86582a","tier":"starter_2024"},"version":26,"publish_version":26,"role":null,"authored":false,"authors":[{"type":"individual","id":"de9567210aaa8bfc","login":"smpa01","name":"smpa01","avatar_url":"https://avatars-next.observableusercontent.com/11fbf12260309afb8ae5e8d35256587cc7ddb704fb72f854fb7ae442be86582a","tier":null}],"members":[{"type":"individual","id":"de9567210aaa8bfc","login":"smpa01","name":"smpa01","avatar_url":"https://avatars-next.observableusercontent.com/11fbf12260309afb8ae5e8d35256587cc7ddb704fb72f854fb7ae442be86582a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Debugging Line Generator","cells":[{"id":0,"value":"# Debugging Line Generator","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"\n\n\n\n \n \n \n Document\n\n\n\n

\n \n \n \n\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"