Software engineer, available for freelance work! • he/him/his
wikiLink = 'https://en.wikipedia.org/wiki/List_of_programs_broadcast_by_Nickelodeon'
d3 = require('d3')
page = d3.xml(`https://asg017-cors.herokuapp.com/${wikiLink}`)
tables = page.querySelectorAll('table')
data = {
const rows = Array.from(tables[15].querySelectorAll('tr')).map(row=>d3.select(row))
let prevPremiere = null;
return rows.map(row=>{
const tds = row.node().querySelectorAll('td')
if(tds.length < 1) return;
debugger;
const show = d3.select(tds[0]).text();
let prem = null;
let end = null;
const isCutoff = tds.length === 3;
if(isCutoff) {
prem = prevPremiere;
end = d3.select(tds[1]).text();
}
else {
prem = prevPremiere = d3.select(tds[1]).text();
end = d3.select(tds[2]).text();
}
end = end.replace(/\[note [0-9]*\]/, '').trim()
end = d3.timeParse('%B %e, %Y')(end);
prem = d3.timeParse('%B %e, %Y')(prem);
return {
show,prem, end
};
}).filter(d=>d&&d.end).sort( (a,b)=>a.prem-b.prem )
}
viz = function*() {
const margin = {
top: 40,
barsTop: 32,
bottom:10,
left:20,
right:60
}
const height = width/1.5;
const svg = d3.select(DOM.svg(width, height));
const titleG = svg.append('g')
.attr('transform', `translate(${width/2},30)`)
.append('text')
.text('Discontinued Nickelodeon TV Shows')
.attr('font-size', 22)
.attr('font-weight', 22)
.attr('text-anchor', 'middle')
const g = svg.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`)
const h = (height-margin.top-margin.bottom - margin.barsTop)/data.length;
const x = d3.scaleLinear()
.domain([d3.min(data, show=>show.prem), d3.max(data, show=>show.end)])
.range([0, width-margin.left-margin.right])
const years = d3.timeYears(d3.min(data,d=>d.prem), d3.max(data, d=>d.end), 2)
const yearsG = g.selectAll('.year').data(years).enter()
.append('g')
.attr('transform', y=>`translate(${x(y)},${0})`)
yearsG
.append('text')
.attr('font-size', 14)
.text(y=>d3.timeFormat('%Y')(y))
.attr('transform', `rotate(-60) translate(-20,20)`)
yearsG
.append('rect')
.attr('width', 1)
.attr('height', height)
.attr('fill', '#ccc')
const showG = g.selectAll('.g').data(data).enter().append('g')
.attr('transform', (d,i)=>`translate(${x(d.prem)},${i*h+ margin.barsTop})`)
showG.append('rect')
.attr('height', h-2)
.attr('width', (d,i,a)=>x(d.end) - x(d.prem))
.attr('fill', (d,i,a)=>d3.interpolateCool(1-i/a.length))
showG.append('text')
.attr('font-size', h)
.each( function(d,i,a){
const show = d.show.length > 20 ? `${d.show.substring(0,17)}...` : d.show
const length = `${d3.format('0.2')(moment.duration(moment(d.end).diff(d.prem)).asYears())} years`
const guestimateTextLength = (show.length+length.length>20?20:show.length+length.length )*(h/2)
const isFarLeft = (x(d.prem)-guestimateTextLength < 0)
const label = `(${length}) ${show}`
d3.select(this)
.text(label)
.attr('transform', `translate(${-4},0)`)
.attr('fill', '#333')
.attr('alignment-baseline',"hanging")
.attr('text-anchor', isFarLeft ? "start":"end")
})
showG.append('text')
.attr('font-size', h-2)
.attr('font-weight', 800)
.attr('alignment-baseline',"hanging")
yield svg.node()
}
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.
