chart = {
const svg = d3.select(DOM.svg(width, height));
// Create a group to position the chart
let vis = svg.append('g')
.attr('transform', 'translate(' + [margin, margin] + ")");
// Add a marker that will contain a triangle as the line-cap for exits/transitions into leagues
// Note marker's are how you create custom line-cap's in SVG beyond butt, round, etc.
svg.append('marker')
.attr('id', 'arrowhead')
.attr('viewBox', '-.1 -5 10 10')
.attr('orient', 'auto')
.attr('markerWidth', 3)
.attr('markerHeight', 3)
.append('path')
.attr('d', 'M-.1,-4L3.9,0L-.1,4');
// Start to build out the substrate of the chart
// Append major and minor grid lines (major every 5)
vis.append('g')
.attr('class', 'y grid')
.selectAll('path')
.data(years).enter()
.append('path')
.attr('class', (t) => (t % 5 !== 0 ? 'minor' : 'major'))
.attr('d', (t) => ('M-12,'+yScale(new Date(t, 0, 1))+'h'+(width-margin*2+24)));
// Create a left & right aligned y axis for the time axis
vis.append('g')
.attr('class', 'y axis')
.attr('transform', 'translate(-12,0)')
.call(yAxisLeft);
vis.append('g')
.attr('class', 'y axis')
.attr('transform', 'translate(' + (width - margin * 2 + 12) + ',0)')
.call(yAxisRight);
// Create a z-level stack of groups for layering the graphics of the chart
let teamHaloG = vis.append('g')
.attr('class', 'team-group halo');
let teamPathG = vis.append('g')
.attr('class', 'team-group');
let teamEntryG = vis.append('g')
.attr('class', 'team-group entry');
let teamExitG = vis.append('g')
.attr('class', 'team-group exit');
// At the bottom-layer add a larger white path for each team
teamHaloG.selectAll('path')
.data(teamData).enter()
.append('path')
.attr('d', teamPath);
// At the 2nd-layer add a path for each team, this path will be highlighted later
// using the voronoi polygons we will place over top
teamPathG.selectAll('path')
.data(teamData).enter()
.append('path')
.attr('id', (d, i) => ('team-path-' + i))
.attr('d', teamPath);
// At the 3rd-layer add all paths that will show an incoming gradient into a conference
// These entries are only for when the team was previously independent
let entry = teamEntryG.selectAll('g')
.data(flattenSort(teamData.map((d,i) => flatten(Object.keys(d.entry).map(k => d.entry[k].map(y => ({'id': k, 'year': y, 'team': d, 'teamIndex': i}))))))) // convert the entries into usable data objects for our needs
.enter().append('g'); // Add a group element for each entry
// Add a path to the group
entry.append('path')
.attr('class', d => ('team-entry-'+d.teamIndex))
.attr('d', entryPath) // D attribute is straight line at year of entry
.style('stroke', (d) => ('url(#team-' + d.teamIndex + '-' + d.id + '-' + d.year +'-entry-gradient)')); // Reference to the stroke gradient we define below, need unique names
// Add a special gradient for each entry
let gradient = entry.append('linearGradient')
.attr('id', (d) => ('team-' + d.teamIndex + '-' + d.id + '-' + d.year +'-entry-gradient'))
.attr('gradientUnits','userSpaceOnUse')
.attr('x1', 0)
.attr('x2', 0)
.attr('y1', d => yScale(new Date(d.year, 0, 1)))
.attr('y2', d => yScale(new Date(d.year, 0, 1))+9);
// Gradient varies the opacity from 0 to 100% stops
gradient.selectAll('stop')
.data([0, 100]).enter()
.append('stop')
.attr('offset', s => (s + '%'))
.attr('stop-color', '#007ac3')
.attr('stop-opacity', s => s);
// At the 4th-layer add all paths that will show an exiting gradient from a conference
// These exits also signify switching to a new conference, or could be a team becoming independent
let exit = teamExitG.selectAll('g')
.data(flattenSort(teamData.map((d,i) => flatten(Object.keys(d.exit).map(k => d.exit[k].map(y => ({'id': k, 'year': y, 'team': d, 'teamIndex': i}))))))) // Reconfigure the data objects
.enter().append('g');
// Add a path for each exit
exit.append('path')
.attr('d', exitPath)
.attr('class', d => ('team-exit-'+d.teamIndex))
.style('stroke', d => ('url(#team-' + d.teamIndex + '-' + d.id + '-' + d.year + '-exit-gradient)')); // Same as before, need a unique name for the stroke gradient
// Add a stroke gradient for the exit path
gradient = exit.append('linearGradient')
.attr('id', d => ('team-' + d.teamIndex + '-' + d.id + '-' + d.year + '-exit-gradient'))
.attr('gradientUnits','userSpaceOnUse')
.attr('x1', 0)
.attr('x2', 0)
.attr('y1', d => yScale(new Date(d.year, 0, 1)))
.attr('y2', d => {
// Y Position could be next year for the new conference
if (d.team[d.year+1] && d.team[d.year+1] !== '' && d.team[d.year+1] !== 'independent') {
return yScale(new Date(d.year+1, 0, 1));
} else { // Or can be 9 pixels up if becoming independent
return yScale(new Date(d.year, 0, 1)) - 9;
}
});
// Same as before create stops from 0% to 100% opacity
gradient.selectAll('stop')
.data([0, 100]).enter()
.append('stop')
.attr('offset', s => (s + '%'))
.attr('stop-color', '#007ac3')
.attr('stop-opacity', s => s);
// Create a layer ontop of the graphic for positioning conference names across the years
let confNamesG = vis.append('g')
.attr('class','conference-names');
let confText = confNamesG.selectAll('text')
.data(annotations)
.enter().append('text')
// Use the info we have about conference to position them based on the desired year
.attr('transform', a => ('translate('+(cScale(conferenceData[a.id].index)+(2.125*conferenceData[a.id][a.year].length))+','+yScale(new Date(a.year, 0, 1))+')'));
// If a long conference name, split on white space and position descending tspans
confText.selectAll('tspan')
.data(a => (a.label.length > 9 ? a.label.split(/\s+/) : [a.label]))
.enter().append('tspan')
.text(t => t)
.attr('x', 0)
.attr('y', (t, i) => ((i - 2) * 1.1 + 'em'));
// Add title for the chart with explanation of path
let titleG = svg.append('g')
.attr('class', 'title')
.attr('transform', 'translate(30, 30)');
titleG.append('text')
.attr('class', 'main')
.text('Major college football programs since 1965');
titleG.append('text')
.attr('class', 'explained')
.attr('y', 20)
.text('Schools switching conferences are highlighted');
titleG.append('path')
.attr('d', 'M270,30 v-4 c0,-4 12,-8 12,-12 v-4')
.attr('stroke', 'url(#stroke-title-path)');
gradient = titleG.append('linearGradient')
.attr('id', 'stroke-title-path')
.attr('gradientUnits','userSpaceOnUse')
.attr('x1', 0)
.attr('x2', 0)
.attr('y1', 30)
.attr('y2', 10);
gradient.selectAll('stop')
.data(['#d7d7d7','#007ac3']).enter()
.append('stop')
.attr('offset', (s, i) => ((i * 100) + '%'))
.attr('stop-color', s => s);
// Ontop of the entire vis, place voronoi polygons that divide the entire graphic by
// each team's conference position by year
let voronoiG = vis.append('g')
.attr('class', 'voronoi-hover');
// Add a tooltip element ontop, the content will be filled in on mouseover of voronois
let tooltipG = vis.append('g')
.attr('id', 'tooltip')
tooltipG.append('path');
let textTooltip = tooltipG.append('text')
.attr('dy', '0.3em');
textTooltip.append('tspan')
.attr('id', 'tooltip-name');
textTooltip.append('tspan')
.attr('id', 'tooltip-team');
// Create each path for the voronoi polygons
voronoiG.selectAll('path')
.data(polygons)
.enter().append('path')
.attr('d', (d) => (d ? 'M' + d.join('L') + 'Z' : null))
.on('mouseover', (d) => {
let t = teamData[d.data.teamIndex];
let flip = d.data.x > 700;
// Set the team's name and team mascot to text elements
textTooltip.style('text-anchor', flip ? 'end' : 'start').attr('x', flip?-10:10);
textTooltip.select('#tooltip-name').text(t.name);
textTooltip.select('#tooltip-team').text(' ' + t.team);
// Compute the updated text's width
let length = textTooltip.node().getComputedTextLength() + 5;
// Use the width to compute 'd' attribute of background path for tooltip
// Width is needed so the background fits the text
tooltipG.select('path')
.attr('d', flip ? 'M0,0l-10,-10h'+-length+'v20h'+length+'z'
: 'M0,0l10,10h'+length+'v-20h'+-length+'z');
// Animate the position of the entire tooltip, have it spring-rotate into position
tooltipG.style('display', 'block')
.attr('transform', 'translate('+[d.data.x, d.data.y]+')rotate(0)')
.interrupt('tooltip')
.transition('tooltip')
.duration(650)
.ease(d3.easeElastic)
.attr('transform', 'translate('+[d.data.x, d.data.y]+')rotate('+(flip?15:-15)+')');
// Highlight the team path
teamPathG.select('#team-path-'+d.data.teamIndex).style('stroke', '#999');
teamEntryG.select('.team-entry-'+d.data.teamIndex).style('stroke-opacity', 1);
teamExitG.select('.team-exit-'+d.data.teamIndex).style('stroke-opacity', 1);
})
.on('mouseout', (d) => {
tooltipG.style('display', 'none');
teamPathG.select('#team-path-'+d.data.teamIndex).style('stroke', '#d7d7d7');
teamEntryG.select('.team-entry-'+d.data.teamIndex).style('stroke-opacity', 0.7);
teamExitG.select('.team-exit-'+d.data.teamIndex).style('stroke-opacity', 0.7);
});
return svg.node();
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.