Branching sparklines / line graphs / Olivia Vane

Olivia Vane

Data visualisation design + code. Interactive data journalist @TheEconomist

Workspace

Published

Edited

Jun 1, 2021

3 forks

41 stars

viewof demo_viz = {

let container = html`<div>`;

var gap_between_lines = 40, // vertical height between line graphs

branch_steepness = 15, // determines the steepness of the branch angle

shunt_to_right = 40; // horizontal position of the branch

let data = demo_data;

let demo_margin = { top: 15, bottom: 30 };

// determine chart height

let data_length = 0;

demo_data.forEach(function(d, i) {

if (d.connected_titles) {

data_length = data_length + d.connected_titles.length;

} else {

data_length++;

}

});

let demo_height =

data_length * gap_between_lines + demo_margin.top + demo_margin.bottom;

//////////////

/// Scales ///

//////////////

var x = d3

.scaleLinear()

.domain([earliest_date, latest_date])

.range([0, width]);

// vertical scale for full chart height

var y = d3

.scaleLinear()

.domain([0, 200])

.range([demo_height, 0]);

// little vertical scale for individual line graphs

var little_y = d3

.scaleLinear()

.domain([0, 5])

.range([40, 0]);

var svg = d3

.select(container)

.append("svg")

.attr("width", width)

.attr("height", demo_height);

// Add the X Axis

svg

.append("g")

.attr('id', 'axis_g')

.call(d3.axisBottom(x).tickFormat(d3.format("d")));

// Remove first axis tick as it is half over the chart boundary

svg

.select('#axis_g')

.selectAll('g.tick:first-of-type')

.remove();

// Remove axis line

svg

.select('#axis_g')

.select('path')

.remove();

// gridlines in x axis function

function make_x_gridlines() {

return d3.axisBottom(x).ticks(15);

}

// add the X gridlines

svg

.append("g")

.attr("class", "grid")

.attr("transform", "translate(0," + demo_height + ")")

.call(

make_x_gridlines()

.tickSize(-demo_height)

.tickFormat("")

);

// Add the group for line graphs

var svg_graphs = svg

.append("g")

.attr('id', 'graph_group')

.attr('transform', 'translate(0,' + demo_margin.top + ')');

// Create the line generator function

// To split the lines so that no line is drawn when there is no data, use 'defined'.

// "d3.line comes with a handy function called 'defined' that lets you specify whether there is data defined for a given data point. If defined returns false for a data point, d3.line will split the path it draws into multiple segments, all within a single <path> element." https://bocoup.com/blog/showing-missing-data-in-line-charts#solution1

var line = d3

.line()

.defined(d => d.count !== null)

.x(function(d) {

return x(d.date);

})

.y(function(d) {

return little_y(d.count);

})

.curve(d3.curveBasis);

var nested_count = 0;

////////////

/// Draw ///

////////////

data.forEach(function(d, i) {

/////////////////////

/// Nested Titles ///

/////////////////////

if ('connected_titles' in d) {

// To vertically position all the line graphs correctly, we use the variable nested_count to keep track of the number of branched line graphs drawn

nested_count = nested_count + d['connected_titles'].length - 1;

d['connected_titles'].forEach(function(nested_d, nested_i) {

var horizontal_offset = shunt_to_right + nested_i * branch_steepness;

var vertical_offset =

(i + nested_i + nested_count - d['connected_titles'].length + 1) *

gap_between_lines;

var title_wrapper = svg_graphs

.append('g')

.attr('class', 'title_wrapper')

.attr('transform', 'translate(0,' + vertical_offset + ')');

title_wrapper

.append("path")

.attr('class', 'mf_line')

.attr('d', line(nested_d.timeseries_mf_restructured));

title_wrapper

.append("path")

.attr('class', 'hc_line')

.attr('d', line(nested_d.timeseries_hc_restructured));

// Draw the angled line - connecting the nested titles together

if (nested_i != 0) {

var x1 = shunt_to_right + branch_steepness * (nested_i - 1),

x2 = shunt_to_right + branch_steepness * nested_i;

title_wrapper

.append('line')

.attr('class', 'connected_line')

.attr('x1', x1)

.attr('x2', x2)

.attr('y1', 0)

.attr('y2', gap_between_lines);

}

var title_nested_offset_wrapper = title_wrapper

.append('g')

.attr('class', 'title_nested_offset_wrapper')

.attr('transform', 'translate(' + horizontal_offset + ',0)');

// additional horizontal offset to titles so doesn't overlap with branching

var title_text = title_nested_offset_wrapper

.append('text')

.attr('class', 'title_name_wrapper')

.attr('transform', 'translate(8,53)');

title_text

.append('tspan')

.attr('class', 'title_name')

.text(" " + nested_d["Publication title"]);

// Draw the baselines for each sparkline

if (nested_i != 0) {

title_nested_offset_wrapper

.append('line')

.attr('class', 'connected_line')

.attr('x1', 0)

.attr('x2', width - horizontal_offset)

.attr('y1', 0)

.attr('y2', 0)

.attr('transform', 'translate(0,40)');

} else {

title_nested_offset_wrapper

.append('line')

.attr('class', 'connected_line')

.attr('x1', -shunt_to_right)

.attr('x2', width - horizontal_offset)

.attr('y1', 0)

.attr('y2', 0)

.attr('transform', 'translate(0,40)');

}

});

} else {

/////////////////////

/// Single Titles ///

/////////////////////

var title_wrapper = svg_graphs

.append('g')

.attr('class', 'title_wrapper')

.attr(

'transform',

'translate(0,' + (i + nested_count) * gap_between_lines + ')'

);

title_wrapper

.append("path")

.attr('class', 'mf_line')

.attr('d', line(d.timeseries_mf_restructured));

title_wrapper

.append("path")

.attr('class', 'hc_line')

.attr('d', line(d.timeseries_hc_restructured));

var title_text = title_wrapper

.append('text')

.attr('class', 'title_name_wrapper')

.attr('transform', 'translate(0,53)');

title_text

.append('tspan')

.attr('class', 'title_name')

.text(" " + d["Publication title"]);

// append line

title_wrapper

.append('line')

.attr('class', 'connected_line')

.attr('x1', 0)

.attr('x2', width)

.attr('y1', 0)

.attr('y2', 0)

.attr('transform', 'translate(0,40)');

}

});

return container;

}

style = html`<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap" rel="stylesheet">

<style>

#viz_container {

height: 800px;

overflow-x: scroll;

max-width: 100%;

overflow-x: hidden;

}

.x_axis_wrapper {

background: white;

padding-top: 5px;

position: sticky;

top: 0;

}

.mf_line {

fill: none;

stroke: rgb(255, 0, 0);

stroke-width: 1.5;

}

.mf_sum {

fill: rgb(255, 0, 0);

}

.unknown_bar_mf {

fill: rgb(255, 0, 0);

}

.hc_line {

fill: none;

stroke: black;

stroke-width: 1.5;

stroke-dasharray: 2 2;

}

.arrow {

fill: rgb(193, 193, 193);

stroke: rgb(193, 193, 193);

stroke-width: 1;

}

.acetate_warning {

fill: rgb(255, 137, 0);

}

text {

font-family: 'Source Sans Pro', sans-serif;

font-size: 10.5pt;

}

.title_geographic_coverage {

font-style: italic;

}

.title_id {

fill: rgb(124, 124, 124);

text-decoration: underline;

}

.grid {

opacity: 0.2;

}

line {

stroke-dasharray: 7 3;

stroke-width: 0.5;

opacity: 0.65;

}

.mf_sum_bracket {

stroke-dasharray: 0;

stroke: red;

opacity: 0.5;

stroke-width: 3;

}

.connected_line {

stroke: black;

stroke-width: 0.5;

stroke-dasharray: 0;

}

.cover_up_line {

stroke: white;

stroke-width: 5;

stroke-dasharray: 0;

}

div.tooltip {

position: fixed;

text-align: left;

padding: 2px;

font-family: 'Source Sans Pro', sans-serif;

font-size: 10.5pt;

background: #c7defc;

border: 0px;

border-radius: 8px;

pointer-events: none;

}

.stop-left {