29:null 2a:["$","title",null,{"children":"Branching sparklines / line graphs | Olivia Vane | Observable"}] 2f:T42b,demo_data = { // use lodash to make sure this is a 'deep' copy (does not reference any of the objects in newspaper_titles_data_nestedConnectivity - to make sure these are unchanged after processing below). let demo_data = _.cloneDeep( newspaper_titles_data_nestedConnectivity.slice(5, 9) ); // remove data facets that aren't needed for the viz demo_data.forEach(function(d, i) { if (d.connected_titles) { d.connected_titles.forEach(function(k, j) { demo_data[i].connected_titles[j] = { 'Publication title': k['Publication title'], timeseries_mf_restructured: k['timeseries_mf_restructured'], timeseries_hc_restructured: k['timeseries_hc_restructured'] }; }); demo_data[i] = { connected_titles: d.connected_titles }; } else { demo_data[i] = { 'Publication title': d['Publication title'], timeseries_mf_restructured: d['timeseries_mf_restructured'], timeseries_hc_restructured: d['timeseries_hc_restructured'] }; } }); return demo_data; }30:T1ad6,viewof demo_viz = { let container = html`

`; 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 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; }31:T45c4,viewof selected_titles = { let container = html`

`; let data = newspaper_titles_data_nestedConnectivity; // set the ranges var x = d3 .scaleLinear() .domain([earliest_date, latest_date]) .range([0, viz_width]); var y = d3 .scaleLinear() .domain([0, 200]) .range([height, 0]); var little_y = d3 .scaleLinear() .domain([0, 5]) .range([40, 0]); // separate div for fixed xaxis var x_axis = d3 .select(container) .append("div") .attr('class', 'x_axis_wrapper') .append('svg') .attr("width", viz_width + margin.left + margin.right) .attr('height', 20) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var svg = d3 .select(container) .append("svg") .attr("width", viz_width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // Create the svg:defs element and the main gradient definition. var svgDefs = svg.append('defs'); var mainGradient = svgDefs .append('linearGradient') .attr('id', 'mainGradient'); var reverseGradient = svgDefs .append('linearGradient') .attr('id', 'reverseGradient'); // Create the stops of the main gradient. Each stop will be assigned // a class to style the stop using CSS. mainGradient .append('stop') .attr('class', 'stop-left') .attr('offset', '0'); mainGradient .append('stop') .attr('class', 'stop-middle') .attr('offset', '0.7'); mainGradient .append('stop') .attr('class', 'stop-right') .attr('offset', '1'); reverseGradient .append('stop') .attr('class', 'stop-left_reverse') .attr('offset', '0'); reverseGradient .append('stop') .attr('class', 'stop-middle_reverse') .attr('offset', '0.25'); reverseGradient .append('stop') .attr('class', 'stop-right_reverse') .attr('offset', '1'); // Add the X Axis x_axis.append("g").call(d3.axisTop(x).tickFormat(d3.format("d"))); // 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," + height + ")") .call( make_x_gridlines() .tickSize(-height) .tickFormat("") ); // Define the div for the tooltip var div = d3 .select(container) .append("div") .attr("class", "tooltip") .style("opacity", 0); 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 gap_between_lines = 40, branch_steepness = 15, shunt_to_right = 40; var nested_count = 0; data.forEach(function(d, i) { if ('connected_titles' in d) { 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 .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)); 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_geographic_coverage') .text(nested_d["General area of coverage"] + ":"); title_text .append('tspan') .attr('class', 'title_name') .text(" " + nested_d["Publication title"]); title_wrapper .append('a') .attr('xlink:href', nested_d["Explore link"]) .attr('target', '_blank') .append('text') .attr('class', 'title_id') .text(nested_d["Title.ID"]) .attr('transform', 'translate(-75,45)'); // Create background box for icons, and line if (nested_i != 0) { title_nested_offset_wrapper .append('polygon') .attr('class', 'icon_rect') .attr('points', '0,0 -5,-15 100,-15 105,0') .style('fill', 'rgba(217, 190, 190, 0.35)') .attr('transform', 'translate(0,40)'); title_nested_offset_wrapper .append('line') .attr('class', 'connected_line') .attr('x1', 0) .attr('x2', viz_width - horizontal_offset) .attr('y1', 0) .attr('y2', 0) .attr('transform', 'translate(0,40)'); } else { title_nested_offset_wrapper .append('polygon') .attr('class', 'icon_rect') .attr( 'points', -shunt_to_right + ',0 ' + -shunt_to_right + ',-15 100,-15 105,0' ) .classed('filled_reverse', true) .attr('transform', 'translate(0,40)'); title_nested_offset_wrapper .append('polygon') .attr('class', 'icon_rect') .attr( 'points', -shunt_to_right + ',0 ' + -shunt_to_right + ',-15 ' + 0 + ',-15 ' + 5 + ',0' ) .classed('filled', true) .attr('transform', 'translate(0,55)'); title_nested_offset_wrapper .append('line') .attr('class', 'connected_line') .attr('x1', -shunt_to_right) .attr('x2', viz_width - horizontal_offset) .attr('y1', 0) .attr('y2', 0) .attr('transform', 'translate(0,40)'); } title_nested_offset_wrapper .append('text') .attr('class', 'mf_sum') .text(nested_d["mf_sum"]) .attr('transform', 'translate(5,37)'); title_nested_offset_wrapper .append('text') .attr('class', 'hc_sum') .text(nested_d["hc_sum"]) .attr('transform', 'translate(42,37)'); // append arrows for preceeding, succeeding titles if (nested_d['Succeeding titles'] != null) { title_nested_offset_wrapper .append('polygon') .attr('class', 'arrow') .attr('points', "0,0 10,4 0,8") .attr('transform', 'translate(84,28)') .on("mouseover", function() { div .transition() .duration(200) .style("opacity", .98); div .html(nested_d['Succeeding titles']) .style('background', 'rgb(219, 232, 237)') .style("left", d3.event.pageX + 10 + "px") .style("top", d3.event.pageY - 28 + "px"); }) .on("mouseout", function() { div .transition() .duration(500) .style("opacity", 0); }); } if (nested_d['Preceding titles'] != null) { title_nested_offset_wrapper .append('polygon') .attr('class', 'arrow') .attr('points', "0,0 -10,4 0,8") .attr('transform', 'translate(78,28)') .on("mouseover", function() { div .transition() .duration(200) .style("opacity", .98); div .html(nested_d['Preceding titles']) .style('background', 'rgb(219, 232, 237)') .style("left", d3.event.pageX + 10 + "px") .style("top", d3.event.pageY - 28 + "px"); }) .on("mouseout", function() { div .transition() .duration(500) .style("opacity", 0); }); } // add Acetate warning if has canNos < 4000 if (nested_d['timeseries_mf'] != null) { if (nested_d.mf_canNo_count_below4000 > 1) { title_nested_offset_wrapper .append('svg:image') .attr("xlink:href", warning_icon) .attr('width', 11) .attr('transform', function() { var offset = 15 + (nested_d['mf_sum'].toString().length - 1) * 8; return 'translate(' + offset + ',26.5)'; }) .on("mouseover", function() { div .transition() .duration(200) .style("opacity", .95); div .html( Math.trunc(nested_d['mf_canNo_count_below4000']) + " records likely acetate" ) .style('background', '#ffb8b8') .style("left", d3.event.pageX + 10 + "px") .style("top", d3.event.pageY - 28 + "px"); }) .on("mouseout", function() { div .transition() .duration(500) .style("opacity", 0); }); } } // add checkboxes for IDs title_wrapper .append("foreignObject") .attr('transform', 'translate(-98,29)') .attr('width', 30) .attr('height', 20) .append("xhtml:tree") .html( " " ); }); // connected group of titles var connected_vertical_offset = (i + nested_count - d['connected_titles'].length + 1) * gap_between_lines; var connected_titles_wrapper = svg .append('g') .attr('class', 'connected_titles_wrapper') .attr('transform', 'translate(0,' + connected_vertical_offset + ')'); connected_titles_wrapper .append('text') .text(d['mf_sum']) .attr('fill', 'red') .attr('transform', 'translate(2,53)'); } else { // single title var title_wrapper = svg .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)); // additional horizontal offset to titles so doesn't overlap with branching var title_text = title_wrapper .append('text') .attr('class', 'title_name_wrapper') .attr('transform', 'translate(0,53)'); title_text .append('tspan') .attr('class', 'title_geographic_coverage') .text(d["General area of coverage"] + ":"); title_text .append('tspan') .attr('class', 'title_name') .text(" " + d["Publication title"]); title_wrapper .append('a') .attr('xlink:href', d["Explore link"]) .attr('target', '_blank') .append('text') .attr('class', 'title_id') .text(d["Title.ID"]) .attr('transform', 'translate(-75,45)'); // Create background box to icons title_wrapper .append('polygon') .attr('class', 'icon_rect') .attr('points', '0,0 0,-15 100,-15 105,0') .style('fill', 'rgba(217, 190, 190, 0.35)') .attr('transform', 'translate(0,40)'); // append line title_wrapper .append('line') .attr('class', 'connected_line') .attr('x1', 0) .attr('x2', viz_width) .attr('y1', 0) .attr('y2', 0) .attr('transform', 'translate(0,40)'); title_wrapper .append('text') .attr('class', 'mf_sum') .text(d["mf_sum"]) .attr('transform', 'translate(2,38)'); title_wrapper .append('text') .attr('class', 'hc_sum') .text(d["hc_sum"]) .attr('transform', 'translate(42,38)'); // append arrows for preceeding, succeeding titles if (d['Succeeding titles'] != null) { title_wrapper .append('polygon') .attr('class', 'arrow') .attr('points', "0,0 10,4 0,8") .attr('transform', 'translate(84,28)') .on("mouseover", function() { div .transition() .duration(200) .style("opacity", .98); div .html(d['Succeeding titles']) .style('background', 'rgb(219, 232, 237)') .style("left", d3.event.pageX + 10 + "px") .style("top", d3.event.pageY - 28 + "px"); }) .on("mouseout", function() { div .transition() .duration(500) .style("opacity", 0); }); } if (d['Preceding titles'] != null) { title_wrapper .append('polygon') .attr('class', 'arrow') .attr('points', "0,0 -10,4 0,8") .attr('transform', 'translate(78,28)') .on("mouseover", function() { div .transition() .duration(200) .style("opacity", .98); div .html(d['Preceding titles']) .style('background', 'rgb(219, 232, 237)') .style("left", d3.event.pageX + 10 + "px") .style("top", d3.event.pageY - 28 + "px"); }) .on("mouseout", function() { div .transition() .duration(500) .style("opacity", 0); }); } // add Acetate warning if has canNos < 4000 if (d['timeseries_mf'] != null) { if (d.mf_canNo_count_below4000 > 1) { title_wrapper .append('svg:image') .attr("xlink:href", warning_icon) .attr('width', 11) .attr('transform', function() { var offset = 12 + (d['mf_sum'].toString().length - 1) * 8; return 'translate(' + offset + ',27)'; }) .on("mouseover", function() { div .transition() .duration(200) .style("opacity", .95); div .html( Math.trunc(d['mf_canNo_count_below4000']) + " records likely acetate" ) .style('background', '#ffb8b8') .style("left", d3.event.pageX + 10 + "px") .style("top", d3.event.pageY - 28 + "px"); }) .on("mouseout", function() { div .transition() .duration(500) .style("opacity", 0); }); } } // add checkboxes for IDs title_wrapper .append("foreignObject") .attr('transform', 'translate(-98,29)') .attr('width', 30) .attr('height', 20) .append("xhtml:tree") .html( " " ); } }); let no_titles_selected_message = md`*No titles selected*`; container.value = no_titles_selected_message; svg.on('click', function() { let selected_titles = d3 .selectAll("input[type='checkbox']:checked") .nodes(); if (selected_titles.length > 0) { container.value = table( titles .filter(d => selected_titles .map(function(d) { return d.getAttribute('value'); }) .includes(d['Title.ID']) ) .map(function(d) { return { 'Title.ID': d['Title.ID'], 'Publication title': d['Publication title'], 'Preceding titles': d['Preceding titles'], 'Succeeding titles': d['Succeeding titles'], 'General area of coverage': d['General area of coverage'], 'First date held': d['First date held'], 'Last date held': d['Last date held'] }; }) ); } else { container.value = no_titles_selected_message; } }); return container; }32:Ta3f,style = html` `33:T1b57,newspaper_titles_data_nestedConnectivity = { // create new data array for newspaper titles organised into nested groups of connected titles // and list of ids already added to new array var newspaper_titles_data_nestedConnectivity = []; var newspaper_titles_data_nestedConnectivity_title_ids = []; newspaper_titles_data.forEach(function(d) { // check if d['Title.ID'] already in newspaper_titles_data_nestedConnectivity_title_ids var already_in_newspaper_titles_data_nestedConnectivity = newspaper_titles_data_nestedConnectivity_title_ids.includes( d['Title.ID'] ); if (!already_in_newspaper_titles_data_nestedConnectivity) { if (d.connectivity) { // place all connectivity ids in connected_newspaper_titles var connected_newspaper_titles = []; connected_newspaper_titles.push(d['Title.ID']); connected_newspaper_titles = connected_newspaper_titles.concat( d['connectivity'] ); // check the records in the array of connected to IDs for any additional IDs in connectivity // return new array of (original connected IDs + additional IDs in records' connectivity) function create_new_array_of_connected_ids(old_Array) { var connectivity_new_array = old_Array; old_Array.forEach(function(element) { // for each id in connected_newspaper_titles, find the corresponding record in newspaper_titles_data // if does not exist in connected_newspaper_titles, skip step var newspaper_record = newspaper_titles_data.find( o => o['Title.ID'] === element ); // if there is a matching record (some are out of date range) in newspaper_titles_data, concatenate the connectivity array if (newspaper_record) { if (newspaper_record.connectivity) { connectivity_new_array = connectivity_new_array.concat( newspaper_record.connectivity ); } } }); // ALSO check against other records in newspaper_titles_data, if any others connected to connectivity_new_array (sometimes crawling network will miss records with an assymetric connection) newspaper_titles_data.forEach(function(newspaper_title) { if (newspaper_title['connectivity']) { const found = newspaper_title['connectivity'].some( r => connectivity_new_array.indexOf(r) >= 0 ); if (found) { connectivity_new_array.push(newspaper_title['Title.ID']); } } }); // filter out duplicates let set = new Set(connectivity_new_array); connectivity_new_array = Array.from(set); return connectivity_new_array; } function all_connected_ids_in_Array(Array) { var connectivity_ids_array = create_new_array_of_connected_ids(Array); if (connectivity_ids_array.length > Array.length) { return false; } else { return true; } } function add_ids_to_Array(Array) { connected_newspaper_titles = create_new_array_of_connected_ids( connected_newspaper_titles ); } // check all connectivity data in connected_newspaper_titles // if not, add to connected_newspaper_titles. // Repeat until all connectivity data in connected_newspaper_titles do { add_ids_to_Array(connected_newspaper_titles); } while (!all_connected_ids_in_Array(connected_newspaper_titles)); // add nested data to newspaper_titles_data_nestedConnectivity var new_nested_newspaper_titles = newspaper_titles_data.filter(function( d ) { return connected_newspaper_titles.includes(d['Title.ID']); }); var new_nested_newspaper_titles_mf_sum = new_nested_newspaper_titles.reduce( (total, obj) => obj.mf_sum + total, 0 ); // check length nested data > 1 if (new_nested_newspaper_titles.length > 1) { // order new_nested_newspaper_titles by earliest held date new_nested_newspaper_titles = new_nested_newspaper_titles.sort( function(a, b) { let earliest_a, earliest_b; if ( a['timeseries_mf_restructured'].length > 0 && a['timeseries_hc_restructured'].length > 0 ) { earliest_a = Math.min( a['timeseries_mf_restructured'][1].date, a['timeseries_hc_restructured'][1].date ); } else if (a['timeseries_mf_restructured'].length > 0) { earliest_a = a['timeseries_mf_restructured'][1].date; } else if (a['timeseries_hc_restructured'].length > 0) { earliest_a = a['timeseries_hc_restructured'][1].date; } if ( b['timeseries_mf_restructured'].length > 0 && b['timeseries_hc_restructured'].length > 0 ) { earliest_b = Math.min( b['timeseries_mf_restructured'][1].date, b['timeseries_hc_restructured'][1].date ); } else if (b['timeseries_mf_restructured'].length > 0) { earliest_b = b['timeseries_mf_restructured'][1].date; } else if (b['timeseries_hc_restructured'].length > 0) { earliest_b = b['timeseries_hc_restructured'][1].date; } return earliest_a - earliest_b; } ); newspaper_titles_data_nestedConnectivity.push({ connected_titles: new_nested_newspaper_titles, mf_sum: new_nested_newspaper_titles_mf_sum }); newspaper_titles_data_nestedConnectivity_title_ids = newspaper_titles_data_nestedConnectivity_title_ids.concat( connected_newspaper_titles ); } else { newspaper_titles_data_nestedConnectivity_title_ids.push( d['Title.ID'] ); newspaper_titles_data_nestedConnectivity.push(d); } } else { newspaper_titles_data_nestedConnectivity_title_ids.push(d['Title.ID']); newspaper_titles_data_nestedConnectivity.push(d); } } }); // sort by mf count, then hc count newspaper_titles_data.sort(function(a, b) { return b.hc_sum - a.hc_sum; }); newspaper_titles_data_nestedConnectivity.sort(function(a, b) { return b.mf_sum - a.mf_sum; }); // check all records still in data var data_count = 0; newspaper_titles_data_nestedConnectivity.forEach(function(d) { if ('connected_titles' in d) { data_count = data_count + d['connected_titles'].length; } else { data_count = data_count + 1; } }); return newspaper_titles_data_nestedConnectivity; }34:T15b2,// Process data newspaper_titles_data = { // join item-level timeseries data to title-level data let newspaper_titles_data = titles.map(function(el) { var o = Object.assign({}, el); if (typeof timeseries_items_hc[el['Title.ID']] !== "undefined") { o.timeseries_hc = timeseries_items_hc[el['Title.ID']]; } else { o.timeseries_hc = null; } if (typeof timeseries_items_mf[el['Title.ID']] !== "undefined") { o.timeseries_mf = timeseries_items_mf[el['Title.ID']]; } else { o.timeseries_mf = null; } return o; }); // filter out with no hc or mf timeseries data newspaper_titles_data = newspaper_titles_data.filter(function(d) { return d.timeseries_hc != null || d.timeseries_mf != null; }); var years_list = []; for (var i = earliest_date; i <= latest_date; i++) { years_list.push(i); } function sum(obj) { var sum = 0; for (var el in obj) { if (obj.hasOwnProperty(el)) { sum += parseFloat(obj[el]); } } return sum; } newspaper_titles_data.forEach(function(d, i) { if (d.timeseries_mf != null) { d.mf_canNo_count_below4000 = d.timeseries_mf.Total_canNos_below_4000; delete d.timeseries_mf.Total_canNos_below_4000; } d.hc_sum = Math.round(sum(d.timeseries_hc)); d.mf_sum = Math.round(sum(d.timeseries_mf)); d.mf_hc_ratio = d.mf_sum / (d.hc_sum + d.mf_sum); if (d.connectivity) { d.connectivity = d.connectivity.split(","); } d.timeseries_mf_restructured = []; d.timeseries_hc_restructured = []; years_list.forEach(function(year) { var count_for_year_mf, count_for_year_hc; if (d.timeseries_mf != null) { if (d.timeseries_mf[year] != 0) { count_for_year_mf = d.timeseries_mf[year]; d.timeseries_mf_restructured.push({ date: year, count: count_for_year_mf }); } } if (d.timeseries_hc != null) { if (d.timeseries_hc[year] != 0) { count_for_year_hc = d.timeseries_hc[year]; d.timeseries_hc_restructured.push({ date: year, count: count_for_year_hc }); } } }); // so that the line graph always draws from the baseline, add explicit 0 count data for 1 year before and after stretches of years with non-zero counts if (d.timeseries_mf_restructured[0] != null) { var zero_date_earliest = d.timeseries_mf_restructured[0].date - 1; if (zero_date_earliest !== earliest_date - 1) { d.timeseries_mf_restructured.unshift({ date: zero_date_earliest, count: 0 }); } var zero_date_latest = d.timeseries_mf_restructured[d.timeseries_mf_restructured.length - 1] .date + 1; if (zero_date_latest !== latest_date + 1) { d.timeseries_mf_restructured.push({ date: zero_date_latest, count: 0 }); } for (i = zero_date_earliest + 1; i < zero_date_latest; i++) { if ( (d.timeseries_mf[i] == 0) & ((d.timeseries_mf[i - 1] != 0) | (d.timeseries_mf[i + 1] != 0)) ) { d.timeseries_mf_restructured.push({ date: i, count: 0 }); } else if (d.timeseries_mf[i] == 0) { d.timeseries_mf_restructured.push({ date: i, count: null }); } } // order d.timeseries_mf_restructured d.timeseries_mf_restructured.sort((a, b) => a.date > b.date ? 1 : b.date > a.date ? -1 : 0 ); } if (d.timeseries_hc_restructured[0] != null) { var zero_date_earliest = d.timeseries_hc_restructured[0].date - 1; if (zero_date_earliest !== earliest_date - 1) { d.timeseries_hc_restructured.unshift({ date: zero_date_earliest, count: 0 }); } var zero_date_latest = d.timeseries_hc_restructured[d.timeseries_hc_restructured.length - 1] .date + 1; if (zero_date_latest !== latest_date + 1) { d.timeseries_hc_restructured.push({ date: zero_date_latest, count: 0 }); } for (i = zero_date_earliest + 1; i < zero_date_latest; i++) { if ( (d.timeseries_hc[i] == 0) & ((d.timeseries_hc[i - 1] != 0) | (d.timeseries_hc[i + 1] != 0)) ) { d.timeseries_hc_restructured.push({ date: i, count: 0 }); } else if (d.timeseries_hc[i] == 0) { d.timeseries_hc_restructured.push({ date: i, count: null }); } } // order d.timeseries_hc_restructured d.timeseries_hc_restructured.sort((a, b) => a.date > b.date ? 1 : b.date > a.date ? -1 : 0 ); } }); // ************************* // NEST DATA BY CONNECTIVITY // ************************* // First order records, those with connectivity first newspaper_titles_data = newspaper_titles_data.sort(function(a, b) { // a is false if (typeof a.connectivity == "boolean") { if (typeof b.connectivity == "boolean") { // a is false and b is false return 0; } else { // a is false and b is array return 1; } } else { if (typeof b.connectivity == "boolean") { // a is array and b is false return -1; } else { // a is array and b is array return 0; } } }); return newspaper_titles_data; }35:[{"id":"e099c6a79d4b9fb778e06b148081e6fa20e81fa11144dcebcd8942e0e315ea353a63da59bbbbaebc44e3fc4d9058b6b6e01650bd2e4b0482cf53ac90790b0963","href":"https://static.observableusercontent.com/files/e099c6a79d4b9fb778e06b148081e6fa20e81fa11144dcebcd8942e0e315ea353a63da59bbbbaebc44e3fc4d9058b6b6e01650bd2e4b0482cf53ac90790b0963","name":"timeseries_items_mf.json","type":"application/json","lastModified":1614782180162.202,"size":1325745},{"id":"4e2cf9102d311b5b622b6705370e8a87e0ce96dc02845026d00fe4c89fcf6968deb30764fae90ac8d4e74f7ce2bc845f4aed2a0d7e2369f4a68e34e10f0841d8","href":"https://static.observableusercontent.com/files/4e2cf9102d311b5b622b6705370e8a87e0ce96dc02845026d00fe4c89fcf6968deb30764fae90ac8d4e74f7ce2bc845f4aed2a0d7e2369f4a68e34e10f0841d8","name":"presspicker.gif","type":"image/gif","lastModified":1614781201931.051,"size":686476},{"id":"79184caa77fa7183f34dfa58d4535d4b5697d63339f2e2ad14c49296c91faf40db73baca2b5c35844ff3a8f37b8bd1be84e3c754336f87c7be585c947842e206","href":"https://static.observableusercontent.com/files/79184caa77fa7183f34dfa58d4535d4b5697d63339f2e2ad14c49296c91faf40db73baca2b5c35844ff3a8f37b8bd1be84e3c754336f87c7be585c947842e206","name":"timeseries_items_hc.json","type":"application/json","lastModified":1614782121461.951,"size":2568259},{"id":"29e54241dabe4bc81109338e4cf26f10e064dc06146a085e9be19cdc24aea52f28589e60f05185272d30521eb5ff329e275f2d8abf2ea2ead164b1f79994fe03","href":"https://static.observableusercontent.com/files/29e54241dabe4bc81109338e4cf26f10e064dc06146a085e9be19cdc24aea52f28589e60f05185272d30521eb5ff329e275f2d8abf2ea2ead164b1f79994fe03","name":"titles.json","type":"application/json","lastModified":1614782001937.259,"size":1944216},{"id":"eb7cea90639a26e213718d8acea6319b50edb9a2d2ff14023e53bff92d21bc32186e83c108c683c706336ef78603159448c7299575e31250c934b3001e0aff75","href":"https://static.observableusercontent.com/files/eb7cea90639a26e213718d8acea6319b50edb9a2d2ff14023e53bff92d21bc32186e83c108c683c706336ef78603159448c7299575e31250c934b3001e0aff75","name":"PressPicker_key2.png","type":"image/png","lastModified":1614802848980.172,"size":182357},{"id":"428aa1885d400c5e51ad9152f631809fdf446d439425f0d7980415bf07fdc87be56e687c44e833baa3953630f4d317b68aa2645b6cc56905ed11792be039c5cb","href":"https://static.observableusercontent.com/files/428aa1885d400c5e51ad9152f631809fdf446d439425f0d7980415bf07fdc87be56e687c44e833baa3953630f4d317b68aa2645b6cc56905ed11792be039c5cb","name":"PressPicker_key.png","type":"image/png","lastModified":1614802833067.884,"size":132527},{"id":"12849ad171da853495988fcb247ae2345f2d450d9bb2d4e3113cea85a56f63276800b27d0d37ab617634411d623a9ffadaf2f939dda39dae28fb848959b7a57e","href":"https://static.observableusercontent.com/files/12849ad171da853495988fcb247ae2345f2d450d9bb2d4e3113cea85a56f63276800b27d0d37ab617634411d623a9ffadaf2f939dda39dae28fb848959b7a57e","name":"Screenshot 2021-03-05 at 13.25.44.png","type":"image/png","lastModified":1614950790955.422,"size":48868},{"id":"cccde59aa7509631428d08155a984ebac823ac989b4d41dd7449aa60d7e2a346d2bfc1022651b5cc1bb1f1aefb7b2469dbb32295a21e2e0764b55977b4a11efc","href":"https://static.observableusercontent.com/files/cccde59aa7509631428d08155a984ebac823ac989b4d41dd7449aa60d7e2a346d2bfc1022651b5cc1bb1f1aefb7b2469dbb32295a21e2e0764b55977b4a11efc","name":"warning-16.png","type":"image/png","lastModified":1614802584038.295,"size":7173}] 2d:{"id":"4ece0b6be5d8a910","slug":"branching-sparklines-line-graphs","title":"Branching sparklines / line graphs","thumbnail":"5800b917ef6ab425cf1aa6663e082b39151c0ed7bd14f410c8533b43d3eb2035","access_level":"public","create_time":"$D2021-03-03T14:15:15.972Z","update_time":"$D2021-11-01T14:29:06.900Z","view_time":null,"first_public_time":"$D2021-03-08T11:40:58.060Z","has_unpublished_edits":null,"fork":false,"stars":41,"starred":false,"owner":{"type":"team","id":"51a17a9a0cd3fee1","login":"oliviafvane","name":"Olivia Vane","avatar_url":"https://avatars-next.observableusercontent.com/1d95b23cf0db36d6edeb5a6e81b4f13e828c958c60e5999766ea1953e592b907","tier":"starter_2024"},"version":775,"publish_version":775,"role":null,"authored":false,"authors":[{"type":"individual","id":"ac5315ae69e3a5e3","login":"oliviafvane","name":"Olivia Vane","avatar_url":"https://avatars-next.observableusercontent.com/1d95b23cf0db36d6edeb5a6e81b4f13e828c958c60e5999766ea1953e592b907","tier":null}],"members":[{"type":"individual","id":"ac5315ae69e3a5e3","login":"oliviafvane","name":"Olivia Vane","avatar_url":"https://avatars-next.observableusercontent.com/1d95b23cf0db36d6edeb5a6e81b4f13e828c958c60e5999766ea1953e592b907","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"title":"Branching sparklines / line graphs","cells":[{"id":0,"value":"md`# Branching sparklines / line graphs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`Branching can be used to show groups or connections between entries in a table of [sparklines](https://en.wikipedia.org/wiki/Sparkline) or line graphs.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":606,"value":"FileAttachment(\"Screenshot 2021-03-05 at 13.25.44.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":602,"value":"md`This notebook demonstrates the branching design used in [Press Picker](https://github.com/Living-with-machines/PressPicker_public): an interactive visualisation tool for newspaper metadata at the [British Library](https://www.bl.uk/), created in the [Living with Machines](https://livingwithmachines.ac.uk/) project. \n\nPress Picker shows the holdings per-year of different UK newspapers at the library, and their different formats. We used branching to communicate newspapers changing their name. Through history, newspapers sometimes change their name multiple times—particularly local papers. For example, *The Athletic Reporter* in 1886 becomes *The Reporter*, which in 1888 becomes *The Midland Counties Reporter and General Advertiser*, which in 1889 becomes *The Reporter and General Advertiser*, and so on. In the British Library data, a new name is treated as a wholly separate record. Introducing this branching means we bring together data that, to some extent, is referring to the same thing.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"Promise.resolve(FileAttachment(\"presspicker.gif\").url()).then(\n d =>\n html`

^{Newspapers changing name: Pierce Egan's Life in London is succeeded in 1827 by Bell's Life in London and Sporting Chronicle which is succeeded in 1886 by The Sporting Life`\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"md`## How to make branching sparklines\n\nThis code uses D3.js to create a custom visualisation design.\n\nFirstly, the data is structured as an array of objects representing single, or nested groups of connected titles. Have a look at a stripped-down version of the data, \\`\\`demo_data\\`\\`, below to see the structure. \n\nDrawing a nested group of titles, the baseline for the second and onwards of these is shunted to the right. Angled lines, connecting the group together, are also drawn. \n\n(The timeseries data has been structured so that each stretch of years with non-zero counts is bracketed by data points with count 0 the year before and after. This is to ensure that the lines always begin and end on the baseline, and to differentiate from the years between these stretches where no line is drawn. The line generator function in the code uses [\\`\\`d3.line().defined()\\`\\`](https://github.com/d3/d3-shape#line_defined) so that no line is drawn where there is no data).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":497,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"md`# Press Picker\n\n> *The full [Press Picker tool](https://github.com/Living-with-machines/PressPicker_public) consists of two Python [Jupyter](https://jupyter.org/) notebooks, that also do filtering and processing of the data, with the JavaScript visualisation embedded in the second notebook. We've written a [blogpost](https://livingwithmachines.ac.uk/d3-javascript-visualisation-in-a-python-jupyter-notebook/) about how to embed a D3 JavaScript visualisation in a Python Jupyter notebook. The code featured here demonstrates the workings of the JavaScript visualisation. An example selection of counties' newspapers are shown.*\n\nIn Press Picker, more information (counts, icons, tooltips) is integrated into each sparkline. \n\nTitles can be selected using the checkboxes at the left. Some information about selected titles is shown in a table below the visualisation.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"viewof uncheck = Button(\"Uncheck all boxes\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"selected = {\n uncheck_function;\n\n return d3.selectAll(\"input[type='checkbox']:checked\").nodes().length > 0\n ? selected_titles\n : html`}

No titles selected`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"md`---\n\n### How to read Press Picker`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"key1 = Promise.resolve(FileAttachment(\"PressPicker_key.png\").url()).then(\n d => html``\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":450,"value":"key2 = Promise.resolve(FileAttachment(\"PressPicker_key2.png\").url()).then(\n d => html``\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":453,"value":"md`\n**Newspaper formats:** MF = microfilms (a kind of film reel), HC = hardcopies (bound volumes)\n\nA warning icon is used to signal microfilms made on acetate: a material used in early microfilming at the British Library, but that degrades and cannot be digitised off. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"md`---\n## Visualisation Setup`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"uncheck_function = {\n uncheck;\n let checkboxes = document.getElementsByClassName(\"title_checkBox\");\n for (var i = 0; i < checkboxes.length; i++) {\n if (checkboxes[i].type == 'checkbox') {\n checkboxes[i].checked = false;\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":"warning_icon = FileAttachment(\"warning-16.png\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"height = gap_between_lines * (newspaper_titles_data.length + 2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"gap_between_lines = 40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"margin = ({\n top: 20,\n right: 5,\n bottom: 30,\n left: 95\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"viz_width = width - margin.left - margin.right - 15 // -15 so no horizontal scroll","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"md`## Data import and processing`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"earliest_date = d3.extent(\n Object.keys(timeseries_items_hc[Object.keys(timeseries_items_hc)[0]])\n .filter(d => !isNaN(d))\n .map(d => Number(d))\n)[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"latest_date = d3.extent(\n Object.keys(timeseries_items_hc[Object.keys(timeseries_items_hc)[0]])\n .filter(d => !isNaN(d))\n .map(d => Number(d))\n)[1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"titles = FileAttachment(\"titles.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"timeseries_items_hc = FileAttachment(\"timeseries_items_hc.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"timeseries_items_mf = FileAttachment(\"timeseries_items_mf.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"md`## Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":729,"value":"_ = require(\"lodash@4\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"import { table } from \"@gampleman/table\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"import { Button } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 2e:"$2d:body"