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; }