31:T314d,{ // set the dimensions and margins of the graph const margin = {top: 50, right: 1, bottom: 10, left: 1}; const marginHeight = 347; // Distribution Charts margin, adjust to Text margin const height = (visData.length * 15) + marginHeight; const marginWidth = 90; const textMargin = 250; const fullWidth = width + 100; // Create svg to draw on const svg = d3.create("svg").attr("viewBox", [0, 0, fullWidth, height + margin.top + margin.bottom]); // sortData if (selectSort == 'Source' || selectSort == 'Theme') { visData.sort((a, b) => { return a[selectSort].localeCompare(b[selectSort]); }); } else if(selectSort == 'Year') { const idx = visData.findIndex(a => a.Year == 'n.d.'); const none = visData.splice(idx, 1); visData.sort((a, b) => { return +a[selectSort] - +b[selectSort]; }); visData.splice(0,0, none[0]); } else{ visData.sort((a, b) => { return +b[selectSort] - +a[selectSort]; }); } // Labels of row and columns -> unique identifier of the column called 'group' and 'variable' const myTitles = d3.map(visData, function(d){return d.Title;}); const g = svg.append('g'); const gTechniqueNames = svg.append("g"); const gDist = svg.append('g'); const gString = svg.append('g'); const gHoverFrames = svg.append('g'); // Build X scales and axis: const x = d3.scaleBand() .range([5, width-marginWidth]) // left side margin .domain(subMainCategories) .padding(0); const x2 = d3.scaleBand() .range([width-marginWidth, width]) .domain(storyInfoMain) .padding(0); // Build X scales and axis: const y = d3.scaleBand() .range([marginHeight-2, height-2]) .domain(myTitles); const y2 = d3.scaleLinear() .range([0, (marginHeight/4)]) .domain([1,100]); // Build color scale const myColor = d3.scaleLinear() .range(["white", "#69b3a2"]) .domain([1,100]) const mainIndex = []; for(let i = 0; i < mainCategories.length; i++) { for(let j = 0; j < subMainCategories.length; j++) { if(subMainCategories[j] == mainCategories[i]) mainIndex.push(j); } } // Plot Bars behind the Main Category Text g.selectAll(".main-category-text-bg") .data(mainIndex) .enter() .append("rect") .attr("class", "main-category-text-bg") .attr("opacity", "0.6") .attr("x", function(d) {return x(subMainCategories[d])}) .attr("y", 0) .attr("width", x.bandwidth() - 2 ) .attr("height", textMargin) .style("fill", function(d) { if(d == "0") { return "green"} else if(d == "4"){return "#66c2a4"} else if(d == "12"){return "#fc8d59"} else if(d == "16"){return "#8c96c6"} else if(d == "25"){return "#df65b0"} else{return "#969696";} }) .on('mouseover', function(event, datum) { // Update the hover frames updateHoverFrames(null, subMainCategories[datum]); }); // Create an axis for the technique names, abbreviated if necessary const techniqueNameAxis = d3.axisTop(x) .tickFormat(d => !!techniqueShorthandDict[d] ? techniqueShorthandDict[d] : d) .tickSizeOuter(0).tickSizeInner(0); // Append technique names as column names gTechniqueNames .attr("transform", "translate(0, " + textMargin + ")") .call(techniqueNameAxis) .selectAll("text") .style("text-anchor", "start") .attr('class', function() { return 'rects show'}) .attr('id', function(d,j) { return 'category' + j}) .attr("dx", ".6em") .attr("dy", ".3em") .style("font-size", "15px") .style("font-weight", "bold") .attr("transform", "rotate(-90)") .style("fill", function(d) { if (mainCategories.includes(d)) return "black"; else return fillScaleAll(d); }) .on('mouseover', function(d, datum) { // Update the hover frames updateHoverFrames(null, datum); }) gTechniqueNames.append('line') .attr("x1", x.range()[0]) .attr("x2", fullWidth - x.range()[0]) .attr("y1", 0) .attr("y2", 0) .attr("stroke", "black") .attr("strokeWidth", 2) // Create axis bottom line gDist.append('line') .attr("x1", x.range()[0]) .attr("x2", fullWidth - x.range()[0]) .attr("y1", 0) .attr("y2", 0) .attr("stroke", "black") .attr("strokeWidth", 2) gDist .attr('class', 'distribution') .attr("transform", "translate(0 " + (marginHeight - 5) + ")") ; // Create axis bottom line gDist.append('line') .attr("x1", x.range()[0]) .attr("x2", fullWidth - x.range()[0]) .attr("y1", 0) .attr("y2", 0) .attr("stroke", "black") .attr("strokeWidth", 2) let entryCountPercent = 0; // Append Distribution Bar Charts on the Top gDist.selectAll(".distribution-bar") .data(subMainCategories) .enter() .append("rect") .attr('class', 'distribution-bar') .attr("transform", function(d) { entryCountPercent = (100/visData.length)*countEntries(d); return "translate(" + x(d) + "," + (-3 - y2(entryCountPercent)) + ")" }) .attr("width", x.bandwidth() - 2 ) .attr("height", function(d){ entryCountPercent = (100/visData.length)*countEntries(d); return y2(entryCountPercent); }) .style("fill", function(d) { return fillScaleAll(d); }); // Append hover overlays for the distribution bar charts on the Top gDist.selectAll(".distribution-bar-hover-overlay") .data(subMainCategories) .enter() .append("rect") .attr("opacity", 0) .attr('class', 'distribution-bar-hover-overlay') .attr("transform", function(d) { return "translate(" + x(d) + "," + (-3 - y2(100)) + ")" }) .attr("width", x.bandwidth() - 2 ) .attr("height", function(d){ return y2(100); }) .on('mouseover', function(d, datum) { // Update the hover frames updateHoverFrames(null, datum); }) .append('title').text(function(d) { entryCountPercent = (100/visData.length)*countEntries(d); return entryCountPercent.toFixed(1) + "%"; }); // Append the technique usage cell rects for (let i = 0; i < subMainCategories.length; i++) { g.selectAll('.category-' + i + '-boxes') .data(visData) .enter() .append("rect") .attr('class', function(d) {return 'category-' + i + '-boxes rects rectsA'+ i + ' rectsA'+ Math.round(y(d.Title))}) .attr("x", function() { return x(subMainCategories[i]) - 1}) .attr("y", function(d) { return y(d.Title)}) .attr("width", x.bandwidth()) .attr("height", y.bandwidth()) .attr("stroke", "white") .attr("stroke-width", 2) .style("fill", function(d) { if(Object.values(d)[i] == "1"){ return fillScaleAll(subMainCategories[i]); } else { return "white";} }) .style("cursor", "pointer") .on('mouseover', function(d,k) { // Update the hover frames const title = k.Title; const technique = subMainCategories[i]; updateHoverFrames(title, technique); }) .on("click", function(d,k){ window.open(k.Link); mutable authors = k.Authors; mutable link = k.Link; mutable title = k.Title; }) .append('title') .html(function (d) { return "" + 'Title: '+ d.Title + "
" + "" + '. Authors: '+ d.Authors + ""; }) } // Append the three column headers for the additional story infos svg.append("g") .attr("transform", "translate(0, " + textMargin + ")") .call(d3.axisTop(x2).tickSizeOuter(0).tickSizeInner(0)) .selectAll("text") .style("text-anchor", "start") .attr("dx", ".6em") .attr("dy", ".3em") .style("font-size", "15px") .style("font-weight", "bold") .attr("transform", "rotate(-90)") .style("fill", "black") .on('mouseover', function(event, d) { updateHoverFrames(null, d); }); // Fill the three columns for the additional story infos for (let i = 0; i < storyInfoMain.length; i++) { if(storyInfoMain[i] == "Theme") { let themes = gString.selectAll(".theme-rects") .data(visData) .enter() .append("rect") .attr('class', 'theme-rects rects') .attr('id', function(d) {return 'rectsT'+ Math.round(y(d.Title))}) .attr("x", function() {return x2(storyInfoMain[i]) - 1}) .attr("y", function(d) {return y(d.Title)}) .attr("width", x.bandwidth()) .attr("height", y.bandwidth()) .attr("fill", function(d) { return cScale(d.Theme); }) .attr("stroke", "white") .attr("stroke-width", 2) .style("cursor", "pointer") .on('mouseover', function(event, d) { // Update the hover frames updateHoverFrames(d.Title, storyInfoMain[i]); }) .on("click", function(event, d){ window.open(d.Link); mutable authors = d.Authors; mutable link = d.Link; mutable title = d.Title; }) .append('title') .html(function (d) { return "" + 'Title: '+ d.Title + "
" + "" + '. Authors: '+ d.Authors + ""; }); } else { gString.selectAll("."+storyInfoMain[i]+"-rects") .data(visData) .enter() .append("text") .attr("class", storyInfoMain[i]+"-rects") .attr("opacity", "1") .attr('class', function(d) {return 'rects'+ ' ' +'rectsI'+ Math.round(y(d.Title))}) .attr("x", function() {return x2(storyInfoMain[i]) - 25}) .attr("y", function(d) {return y(d.Title) + (y.bandwidth()*3/4)}) .attr("text-anchor", "start") .attr("dx", "25px") .style("font-size", "11px") .style("cursor", "pointer") .text(function (d) {return d[storyInfoMain[i]]; }) .on('mouseover', function(event, d) { // Update the hover frames updateHoverFrames(d.Title, storyInfoMain[i]); }) .on("click", function(event, d){ window.open(d.Link); mutable authors = d.Authors; mutable link = d.Link; mutable title = d.Title; }) .append('title') .html(function (d) { return "" + 'Title: '+ d.Title + "
" + "" + '. Authors: '+ d.Authors + ""; }); } } const updateHoverFrames = function(title, col) { // Update the hover frames: pass the row and the column for that - if row is null, then the corresponding frame is not updated but instead removed // Row frame if (title === null) gHoverFrames.selectAll(".hoverframe-row ").remove(); else { gHoverFrames.selectAll(".hoverframe-row") .data([0]) .join(enter => enter.append('rect')) .attr("class", "hoverframe-row") .attr("x", x.range()[0]) .attr("width", fullWidth - x.range()[0] - 1) .attr("y", y(title)) .attr("height", y.bandwidth()) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 2) .style("pointer-events", "none") } // Column frame if (col === null) gHoverFrames.selectAll(".hoverframe-col").remove(); else { let xScale = x; if (x2.domain().includes(col)) xScale = x2; gHoverFrames.selectAll(".hoverframe-col") .data([0]) .join(enter => enter.append('rect')) .attr("class", "hoverframe-col") .attr("x", xScale(col) - 1) .attr("width", col=="Source" ? fullWidth - width + xScale.bandwidth() : xScale.bandwidth()) .attr("y", 1) .attr("height", height) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 2) .style("pointer-events", "none") } } // Return svg node return svg.node(); } 32:T6bd,{ const dataPlot = Plot.plot({ height: 200 + 170, width: width, grid: true, marginLeft: 50, marginRight: 80, marginBottom: 170, x: { axis: "bottom", className: 'testclass', label: "Techniques used", tickRotate: -45, domain: subMainCategories, padding: 0.2, }, y: { domain: [0, 1], label: "Usage %", tickFormat: d => Math.round(d * 100) + '%' }, marks: [ //Plot.axisX({tickRotate: -45, anchor: "top", class: 'testclass'}), Plot.barY(ratioCompareBarchartDataFixedSubgroup, { x: "row", y1: "x1", y2: "x2", fill: d => d.fill == 'blue' ? lightblue : lightred, }), Plot.tickY(ratioCompareBarchartDataFixedSubgroup, { y: "ratio", x: "row", stroke: d => d.fill == 'blue' ? deepblue : deepred, strokeWidth: 4, title: d => Math.round(d.ratio * 100) + '%', }), Plot.tickY(ratioCompareBarchartDataFixedSubgroup, { y: "avgRatio", x: "row", stroke: "black", strokeWidth: 2, strokeDasharray: 2, title: d => Math.round(d.avgRatio * 100) + '%', }), ] }) // Color the x-axis ticks correctly d3.select(dataPlot) .select('[aria-label="x-axis tick label"]') .selectAll("text") .call(function (t) { t.each(function (d) { var label = d3.select(this); label.attr('fill', fillScaleAll(label.text())); if (mainCategories.includes(label.text())) label.style('font-weight', 'bold'); }); }); //könnte alle text element selecten und dann nur auf denen etwas tun, die in den submaincategories vorkommen return dataPlot; }33:T673,{ const r = 15; const dataPlot = Plot.plot({ height: 320, width: width, x: { label: "Deviation of usage from overall average for theme " + ratioCompareDType + " in % →", tickFormat: (d) => (d >= 0 ? "+" : "") + d*100 + "%", grid: true }, y: {domain: [0, 1], axis: null}, marginLeft: 40, marginRight: 40, marginBottom: 35, marks: [ Plot.ruleY([0], {stroke: 'grey'}), Plot.ruleX([0], {stroke: 'grey'}), Plot.dot(ratioCompareBarchartDataFixedSubgroup, Plot.dodgeY({ x: d => d.ratio - d.avgRatio, r: r, fill: "white", stroke: d => fillScaleAll(d.row), strokeWidth: 2, opacity: 0.3, anchor: "bottom", title: d => d.row + ": " + (d.ratio >= d.avgRatio ? "+" : "") + Math.round((d.ratio - d.avgRatio)*100) + '%' }), ), Plot.text(ratioCompareBarchartDataFixedSubgroup, Plot.dodgeY({ x: d => d.ratio - d.avgRatio, r: r, fill: d => fillScaleAll(d.row), anchor: "bottom", textAnchor: 'middle', text: d => techniqueShorthandDict[d.row] ? techniqueShorthandDict[d.row] : d.row, lineWidth: 6, fontWeight: 'bold', title: d => d.row + ": " + (d.ratio >= d.avgRatio ? "+" : "") + Math.round((d.ratio - d.avgRatio)*1000)/10 + '%' }) ), ] }) return dataPlot; }34:Td43,{ const dataPlot = Plot.plot({ height: 200 + 180, width: width, grid: true, marginLeft: 60, marginRight: 80, marginBottom: 180, x: { axis: "bottom", className: 'testclass', label: "Techniques used", tickRotate: -45, domain: subMainCategories, padding: 0.2, }, y: { domain: [0, 1], label: "Usage %", tickFormat: d => Math.round(d * 100) + '%' }, marks: [ //Plot.axisX({tickRotate: -45, anchor: "top", class: 'testclass'}), Plot.barY(ratioCompareDataSelectorSubgroup, { x: "row", y1: "x1", y2: "x2", fill: d => d.fill == 'blue' ? fillScaleAll(d.row) : "rgba(222, 209, 209, 0.0)", title: d => d.row + ": " + Math.round(d.ratio * 100) + '%', }), Plot.barY(ratioCompareDataSelectorSubgroup, { x: "row", y1: 0, y2: "ratio", fill: d => fillScaleAll(d.row), opacity: 0.6, title: d => d.row + ": " + Math.round(d.ratio * 100) + '%', }), /* Plot.tickY(ratioCompareDataSelectorSubgroup, { y: "ratio", x: "row", stroke: d => d.fill == 'blue' ? deepblue : deepred, strokeWidth: 4, title: d => Math.round(d.ratio * 100) + '%', }), */ Plot.tickY(ratioCompareDataSelectorSubgroup, { y: "avgRatio", x: "row", stroke: "black", strokeWidth: 2, strokeDasharray: 2, }), ] }) // Color the x-axis ticks correctly const axisTickLabels = d3.select(dataPlot) .select('[aria-label="x-axis tick label"]') .selectAll("text"); axisTickLabels.call(function (t) { t.each(function (d) { const label = d3.select(this); const technique = label.text(); // Set fill color based on technique label.attr('fill', fillScaleAll(technique)); // Make main technique categories bold if (mainCategories.includes(technique)) label.style('font-weight', 'bold'); // Add checkbox symbols. Ceckbox options:◽◾▣ ■ □ ▢⬛ if (subgroupSelector.includes(technique)) { label.text(label.text() + " ⬛"); label.classed('tech-unselected', false); } else { label.text(label.text() + " ⬜"); label.classed('tech-unselected', true); } // Make cursor a pointer on hover label.style('cursor', 'pointer'); }); }); // Add/remove techniques to the filtering selector array axisTickLabels.on('click', function(e, d) { const label = d3.select(this); const labelText = label.text(); const technique = labelText.slice(0, labelText.length-2); if (label.classed('tech-unselected')) { // Select element // Adjust string box symbol label.text(technique + " ⬛"); // Add to subgroupSelectorArray mutable subgroupSelector = [...subgroupSelector, technique]; // Adjust class info label.classed('tech-unselected', false); } else { // Deselect element // Adjust string box symbol label.text(technique + " ⬜"); // Remove from subgroupSelectorArray mutable subgroupSelector = subgroupSelector.filter(tech => tech !== technique); // Adjust class info label.classed('tech-unselected', true); } }); return dataPlot; }35:T653,{ //const binwidth = 0.029; //const binwidth = 0.012; const binwidth = (d3.max(overallSimCounts, d => d.val) - d3.min(overallSimCounts, d => d.val)) / overallSimCounts.length; const dataPlot = Plot.plot({ width: 560, height: 200, y: { label: "Frequency ↑", domain: [d3.min(overallSimCounts, d => d.frequency), d3.max(overallSimCounts, d => d.frequency)], grid: true, }, x: { label: "Pairwise similarity →", domain: [d3.min(overallSimCounts, d => d.val), d3.max(overallSimCounts, d => d.val)], tickFormat: d => 100*d + '%' }, marks: [ //Plot.lineY(overallSimArray, Plot.binX({y: "proportion"}, {x: d => d, curve: "catmull-rom", stroke: "grey", strokeWidth: 3, strokeDasharray: 7})), // Plot.rect(overallSimCounts, { x1: d => d.val - binwidth/2, x2: d => d.val + binwidth/2, y1: 0, y2: "frequency", fill: 'rgb(200,200,200)', title: d => d.frequency }), Plot.ruleY([0], {stroke: 'grey'}), Plot.ruleX([d3.min(overallSimCounts, d => d.val)], {stroke: 'grey'}), Plot.ruleX([simOverall/100], {stroke: deepred, strokeWidth: 3}), Plot.text([simOverall/100], { x: d => d, dx: 4, y: d => (d3.min(overallSimCounts, e => e.frequency) + d3.max(overallSimCounts, e => e.frequency)) / 2, fill: deepred, fontWeight: "bold", textAnchor: "start", text: d => 'mean: '+Math.round(simOverall)+'%', }), ] }) return dataPlot; }36:Tad6,lassoSvg = { const height = width / 2.3; const w = height; const h = height; const padding = w * 0.1; const minVal = d3.min([d3.min(resultsAll, d => d.x), d3.min(resultsAll, d => d.y)]); const maxVal = d3.max([d3.max(resultsAll, d => d.x), d3.max(resultsAll, d => d.y)]); const xScale = d3.scaleLinear() .domain([minVal, maxVal]) .range([padding , w-padding]); const yScale = d3.scaleLinear() .domain([minVal, maxVal]) .range([h-padding , padding]); const svg = d3.select(DOM.svg(w, h)).attr('id', 'svg'); //svg.call(d3.zoom().on("zoom", function () {svg.attr("transform", d3.event.transform)})); const g = svg.append("g"); // create a tooltip var Tooltip = svg .append("text") .attr("x", 50) .attr("y", h - padding) .style("opacity", 0) .style("font-size", 17); let j = 0; const circles = g.selectAll('circle') .data(resultsAll.filter(d => {return groupSelection[d.Theme];})) .join('circle') .attr('cx', d => xScale(d.x)) .attr('cy', d => yScale(d.y)) .style("opacity", 0.5) .attr("class", "hide_rec") .attr("r", mds_circ_rad) //.attr("stroke", d => checkArray.includes(d.Title) ? "black" : "none") //d => cScale(d.Theme)) //.style("stroke-width", 5) .attr('fill', function(d){ return cScale(d.Theme)//'grey'; }) circles.append("title").text(function(d){ return d.Title +' (' + d.Source + ')'}) //hover(groups, invalidation); // ---------------- LASSO STUFF . ---------------- // From https://observablehq.com/@fil/lasso-selection svg.append("defs").append("style").text(` .selected {stroke-width: 4; stroke: #000;} .lasso { fill-rule: evenodd; fill-opacity: 0.1; stroke-width: 1.5; stroke: #000; } `); const l = svg.append("path").attr("class", "lasso"); const path = d3.geoPath(); const draw = function (polygon) { l.datum({ type: "LineString", coordinates: polygon }).attr("d", path); const selected = polygon.length > 2 ? [] : data; // note: d3.polygonContains uses the even-odd rule // which is reflected in the CSS for the lasso shape circles.classed( "selected", (d) => { if (polygon.length > 2) { return d3.polygonContains(polygon, [xScale(d.x), yScale(d.y)]) && selected.push([xScale(d.x), yScale(d.y)]); } else { return false; } } ); mutable lassoSelection = svg.selectAll('.selected'); // For extracting the current polygon //mutable poly = polygon; svg.node().value = { polygon, selected }; svg.node().dispatchEvent(new CustomEvent('input')); } svg.call(lasso().on("start lasso end", draw)); draw(defaultLasso); return svg.node(); }37:T44f,Plot.plot({ height: 30, marginTop: 20, marginBottom: 0, x: { label: null, ticks: null, }, marks: [ Plot.ruleX([0, 1]), Plot.barX(uniqueThemes, Plot.stackX({ x: theme => (lassoData.filter(d => d['Theme'] == theme).length / lassoData.length), fill: theme => cScale(theme), insetLeft: 1, title: theme => theme + ': ' + lassoData.filter(d => d['Theme'] == theme).length + (lassoData.filter(d => d['Theme'] == theme).length > 1 ? " stories" : " story") })), Plot.textX(uniqueThemes.filter(theme => lassoData.filter(d => d['Theme'] == theme).length > 0), Plot.stackX({ x: theme => (lassoData.filter(d => d['Theme'] == theme).length / lassoData.length), dy: -10, fill: theme => cScale(theme), text: theme => theme + ' (' + lassoData.filter(d => d['Theme'] == theme).length + ')', insetLeft: 1 })), //Plot.barX(alphabet, Plot.stackX({order: "letter", x: "frequency", fill: "#ccc", insetLeft: 1})), //Plot.textX(alphabet, Plot.stackX({order: "letter", x: "frequency", text: "letter", insetLeft: 1})) ] })38:T440,Plot.plot({ height: 30, marginTop: 20, marginBottom: 0, x: { label: null, ticks: null, }, marks: [ Plot.ruleX([0, 1]), Plot.barX(uniqueSource, Plot.stackX({ x: source => (lassoData.filter(d => d['Source'] == source).length / lassoData.length), fill: "grey", insetLeft: 1, title: source => source + ': ' + lassoData.filter(d => d['Source'] == source).length + (lassoData.filter(d => d['Source'] == source).length > 1 ? " stories" : " story") })), Plot.textX(uniqueSource.filter(source => lassoData.filter(d => d['Source'] == source).length > 0), Plot.stackX({ x: source => (lassoData.filter(d => d['Source'] == source).length / lassoData.length), dy: -10, fill: "grey", text: source => source + ' (' + lassoData.filter(d => d['Source'] == source).length + ')', insetLeft: 1 })), //Plot.barX(alphabet, Plot.stackX({order: "letter", x: "frequency", fill: "#ccc", insetLeft: 1})), //Plot.textX(alphabet, Plot.stackX({order: "letter", x: "frequency", text: "letter", insetLeft: 1})) ] })39:T9bd,{ const dataPlot = Plot.plot({ height: 200 + 170, width: width, grid: true, marginLeft: 50, marginRight: 80, marginBottom: 170, x: { axis: "bottom", label: "Techniques used", tickRotate: -45, domain: subMainCategories, padding: 0.2, }, y: { domain: [0, 1], tickFormat: d => Math.round(d * 100) + '%', label: "Usage %" }, marks: [ //Plot.ruleX([0]), Plot.barY(subMainCategories, { x: d => d, y1: technique => { return storyLinksData.filter(d => d[technique] == 1).length / storyLinksData.length; }, y2: technique => { return lassoData.filter(d => d[technique] == 1).length / lassoData.length; }, fill: technique => { if (storyLinksData.filter(d => d[technique] == 1).length / storyLinksData.length > lassoData.filter(d => d[technique] == 1).length / lassoData.length) return lightred; else return lightblue; } }), Plot.tickY(subMainCategories, { x: d => d, y: technique => { return lassoData.filter(d => d[technique] == 1).length / lassoData.length; }, stroke: technique => { return (storyLinksData.filter(d => d[technique] == 1).length / storyLinksData.length > lassoData.filter(d => d[technique] == 1).length / lassoData.length) ? deepred : deepblue; }, // strokeWidth: technique => { // return Math.abs(lassoData.filter(d => d[technique] == 1).length / lassoData.length - 0.5) * 10 + 0.5; // }, strokeWidth: 4, title: technique => { return Math.round(lassoData.filter(d => d[technique] == 1).length / lassoData.length * 100) + '%'; } }), Plot.tickY(subMainCategories, { x: d => d, y: technique => { return storyLinksData.filter(d => d[technique] == 1).length / storyLinksData.length; }, stroke: "black", strokeWidth: 2, strokeDasharray: 2, }) ] }) //Add Multi-line tick labels to the chart d3.select(dataPlot) .select('[aria-label="x-axis tick label"]') .selectAll("text") .call(function (t) { t.each(function (d) { var label = d3.select(this); label.attr('fill', fillScaleAll(label.text())); if (mainCategories.includes(label.text())) label.style('font-weight', 'bold'); }); }); return dataPlot; }3a:T544,{ //const highlightSource = uniqueSourceGroups[simSource]; const highlightSources = ["Washington Post", "NYT", "Bloomberg", "National Geographic", "Reuters"]; const redlightSources = ["EcoWest", "Manpopex"]; const dataPlot = Plot.plot({ height: 170, width: width/2, x: { label: "Pairwise similarity between the different sources →", tickFormat: (d) => d*100 + '%', grid: true }, y: {domain: [0, 1], axis: null}, marginLeft: 40, marginRight: 40, marginBottom: 35, marks: [ Plot.ruleY([0], {stroke: 'grey'}), Plot.dot(simArrayGroups, Plot.dodgeY({ x: d => d.sim, r: 5, fill: d => { if (highlightSources.includes(d.xi) && highlightSources.includes(d.xj)) return deepblue; else if (redlightSources.includes(d.xi) || redlightSources.includes(d.xj)) return deepred; else return "lightgrey"; }, //strokeWidth: 2, anchor: "middle", title: d => d.xi+"\n"+d.xj+"\n"+Math.round(d.sim*1000)/10+'%' }), ), Plot.line([[simOverall/100, 0],[simOverall/100, 1.1]], {stroke: 'rgb(255,114,118)', strokeWidth: 2}), ] }) return dataPlot; }3b:Tc54,{ const w = width*0.8; const h = width*0.8; const padding = width * 0.05; //const svg = d3.create("svg").attr('id', 'svg').attr("viewBox", [0, 0, w, h]); const svg = d3.select(DOM.svg(w, h));//.attr('id', 'svg'); // What is the list of groups? let allKeys = nestYearData.map(function(d){return d.key}) let r = -1; var gCells = svg.selectAll() .data(nestYearData) .enter().append("g") .attr("width", w/5) .attr("height", h/5) .append("g") .attr("transform", function(d,i){ let c = i%6; if(i%6 == 0){r+=1;} return "translate(" + ((w/6*c)) + "," + ((h/6*r)-(padding/2)) + ")" }); // Add X axis --> it is a date format var x = d3.scaleLinear() .domain(d3.extent(countPerYear, function(d) { return d.Year; })) .range([ 10, w/5 - padding - 10 ]); gCells .append("g") .attr("transform", "translate(" + 0 +"," + (h/5-padding) + ")") .call(d3.axisBottom(x).ticks(0)).select(".domain").attr("stroke","null"); //Add Y axis var y = d3.scaleLinear() .domain([0, 100 ]) //d3.max(nestYearData, function(d) { return d.Prop; })]) .range([ h/5 - padding, padding ]); // color palette var color = d3.scaleOrdinal() .domain(allKeys); // create a tooltip var Tooltip = svg .append("text") .attr("x", padding) .attr("y", h/5-padding) .style("opacity", 0) .style("font-size", 20); // Three function that change the tooltip when user hover / move / leave a cell var mouseover = function(d,i) { Tooltip.style("opacity", 1) Tooltip.attr("y", y(i.Prop)) Tooltip.attr("x", d.clientX) Tooltip.text(i.Year + ": " + i.Prop) } var mouseleave = function(d) { Tooltip.style("opacity", 0); } let tempDots; // Draw the line gCells .append("path") .attr("fill", "none") .attr("class", "myLine") //.attr("stroke", function(d){ return color(d.key) }) .attr("stroke", function(d) { return fillScaleAll(d.key); }) .attr("stroke-width", 5) .attr("d", function(d){ return d3.line() .x(function(d) { return x(d.Year); }) .y(function(d) { return y(d.Prop); }) (d.values) }); // Add dots gCells.selectAll("dots") .data(function(d,i) {return d.values;}) //.data(function(d){return {key: d.key, value: d.values}; }) .enter().append("circle") .attr("cx", function (p) {return x(p.Year); } ) .attr("cy", function (p) { return y(p.Prop); } ) .attr("r", 3) .style("fill", function(d){ return color(d.key) }) .append('title').text(function(p){return p.Year + ": " + p.Prop + "%"}); // Add titles gCells .append("text") .attr("text-anchor", "start") .attr("y", h/5 - (padding/2)) .attr("x", 0) .attr("font-size", "12px") .text(function(d){ if(d.key.length <= 17) {return d.key} else{return d.key.slice(0, 17) + '...'} }) .style("fill", function(d) { return fillScaleAll(d.key); }) .append('title').text(function(d){return d.key}); return svg.node() }3c:T5e1,{ const r = 15; const dataPlot = Plot.plot({ height: 220, width: width, x: { label: "Usage frequency best fit line change in % per year →", tickFormat: (d) => d, grid: true }, y: {domain: [0, 1], axis: null}, marginLeft: 40, marginRight: 40, marginBottom: 35, marks: [ Plot.ruleY([0], {stroke: 'grey'}), Plot.ruleX([0], {stroke: 'grey'}), Plot.dot(slopesSorted, Plot.dodgeY({ x: d => d.m, r: r, fill: "white", stroke: d => fillScaleAll(d.technique), strokeWidth: 2, opacity: 0.3, anchor: "bottom", title: d => d.technique + ": " + d.m + '%' + ' (with R2 of ' + Math.round(d.r2*10000)/100 + '%)' }), ), Plot.text(slopesSorted, Plot.dodgeY({ x: d => d.m, r: r, fill: d => fillScaleAll(d.technique), anchor: "bottom", textAnchor: 'middle', text: d => techniqueShorthandDict[d.technique] ? techniqueShorthandDict[d.technique] : d.technique, lineWidth: 6, fontWeight: 'bold', title: d => d.technique + ": " + d.m + '%' + ' (with R2 of ' + Math.round(d.r2*1000)/10 + '%)' }) ), ] }) return dataPlot; }3d:T443,// Code taken from: http://bl.ocks.org/nitaku/83f0df83b4de89eb2848 and https://www.benfrederickson.com/multidimensional-scaling/ // given a matrix of distances between some points, returns the /// point coordinates that best approximate the distances mds_classic = function(distances, dimensions) { dimensions = dimensions || 2; // square distances var M = numeric.mul(-.5, numeric.pow(distances, 2)); // double centre the rows/columns function mean(A) { return numeric.div(numeric.add.apply(null, A), A.length); } var rowMeans = mean(M), colMeans = mean(numeric.transpose(M)), totalMean = mean(rowMeans); for (var i = 0; i < M.length; ++i) { for (var j =0; j < M[0].length; ++j) { M[i][j] += totalMean - rowMeans[i] - colMeans[j]; } } // take the SVD of the double centred matrix, and return the // points from it var ret = numeric.svd(M), eigenValues = numeric.sqrt(ret.S); return ret.U.map(function(row) { return numeric.mul(row, eigenValues).splice(0, dimensions); }); };3e:T113a,defaultLasso = [[153.20216369628906,289.29119873046875],[153.20216369628906,288.4913635253906],[153.20216369628906,286.8912658691406],[153.20216369628906,286.0914306640625],[152.40216064453125,285.2911376953125],[151.60214233398438,284.4913330078125],[150.80213928222656,283.6914978027344],[149.2021026611328,282.8912048339844],[148.402099609375,282.0914001464844],[144.4020538330078,280.49127197265625],[141.20199584960938,279.6914367675781],[138.0019989013672,278.8911437988281],[136.4019317626953,278.0913391113281],[133.20187377929688,276.4912109375],[130.80184936523438,276.4912109375],[129.2018280029297,275.69140625],[126.80179595947266,275.69140625],[124.40176391601562,274.8910827636719],[121.20170593261719,274.0912780761719],[119.60169219970703,273.29095458984375],[116.40164947509766,272.49114990234375],[112.4015884399414,272.49114990234375],[111.60157775878906,272.49114990234375],[109.20154571533203,272.49114990234375],[104.40147399902344,270.8910217285156],[100.40142059326172,270.0912170410156],[99.60140228271484,270.0912170410156],[95.60134887695312,269.2909240722656],[94.80133819580078,269.2909240722656],[92.40130615234375,269.2909240722656],[90.00132751464844,269.2909240722656],[88.40125274658203,269.2909240722656],[86.80123138427734,269.2909240722656],[85.20121002197266,269.2909240722656],[82.8011703491211,269.2909240722656],[81.2011489868164,269.2909240722656],[79.60111999511719,269.2909240722656],[78.80111694335938,269.2909240722656],[78.00115203857422,269.2909240722656],[75.60106658935547,269.2909240722656],[74.80105590820312,269.2909240722656],[73.20103454589844,269.2909240722656],[70.8010025024414,269.2909240722656],[70.00099182128906,269.2909240722656],[68.40097045898438,269.2909240722656],[67.6009521484375,269.2909240722656],[66.80094909667969,269.2909240722656],[65.200927734375,270.8910217285156],[64.40090942382812,270.8910217285156],[63.600894927978516,270.8910217285156],[62.80088806152344,273.29095458984375],[62.000877380371094,274.0912780761719],[60.400856018066406,274.8910827636719],[59.6008415222168,276.4912109375],[58.80083465576172,278.0913391113281],[58.80083465576172,279.6914367675781],[58.00082015991211,279.6914367675781],[57.20081329345703,282.0914001464844],[57.20081329345703,282.8912048339844],[56.40079879760742,284.4913330078125],[54.800777435302734,288.4913635253906],[54.800777435302734,289.29119873046875],[54.800777435302734,290.8913269042969],[54.800777435302734,291.6916198730469],[54.800777435302734,292.4914245605469],[55.60078430175781,294.091552734375],[55.60078430175781,294.891357421875],[56.40079879760742,297.29132080078125],[58.00082015991211,300.4915466308594],[58.00082015991211,301.2913513183594],[59.6008415222168,303.6918029785156],[61.200870513916016,306.89154052734375],[62.000877380371094,308.4916687011719],[62.80088806152344,310.0917663574219],[63.600894927978516,312.4917297363281],[64.40090942382812,314.89166259765625],[65.200927734375,317.2915954589844],[66.80094909667969,318.8917236328125],[67.6009521484375,318.8917236328125],[67.6009521484375,320.4918212890625],[68.40097045898438,322.0919494628906],[70.00099182128906,322.8917541503906],[70.00099182128906,324.49188232421875],[71.60101318359375,326.8918151855469],[72.4010238647461,327.692138671875],[73.20103454589844,328.491943359375],[74.80105590820312,330.0920715332031],[74.80105590820312,330.8918762207031],[76.40107727050781,331.6921691894531],[77.20109558105469,333.29180908203125],[78.00115203857422,334.0921325683594],[79.60111999511719,334.8919372558594],[82.00121307373047,335.6922302246094],[83.60118103027344,336.4920654296875],[86.00126647949219,337.2918701171875],[88.40125274658203,337.2918701171875],[90.00132751464844,338.0921630859375],[91.6012954711914,338.0921630859375],[95.60134887695312,338.0921630859375],[98.80139923095703,338.8919982910156],[99.60140228271484,339.6922912597656],[101.20143127441406,340.49212646484375],[103.6014633178711,340.49212646484375],[104.40147399902344,340.49212646484375],[106.801513671875,340.49212646484375],[107.60151672363281,340.49212646484375],[108.40153503417969,340.49212646484375],[109.20154571533203,340.49212646484375],[110.0016098022461,340.49212646484375],[111.60157775878906,340.49212646484375],[113.20160675048828,339.6922912597656],[118.80168151855469,337.2918701171875],[119.60169219970703,337.2918701171875],[120.4017105102539,336.4920654296875],[122.00177001953125,336.4920654296875]]3f:T435,avgSimilaritiesForPropertyGroup = { const avgSimilaritiesForPropertyGroup = []; const avgSimOverall = Math.round(similarityArrayOverall.reduce((a, b) => a + b.sim, 0) / similarityArrayOverall.length * 100); unqiuePropertyValues.forEach(propertyValue => { const propertyValueIndices = storyLinksData.filter(d => d[propertyGroup] == propertyValue).map(d => storyLinksData.map(e => e.Link).indexOf(d.Link)); const allPropertyGroupSimilarities = []; propertyValueIndices.forEach((originalIdx, i) => { d3.range(i + 1, propertyValueIndices.length).forEach(j => { allPropertyGroupSimilarities.push({i: originalIdx, j: propertyValueIndices[j], sim: simMatrix[propertyValueIndices[i]][propertyValueIndices[j]]}) }) }); const avgSim = allPropertyGroupSimilarities.reduce((a, b) => a + b.sim, 0) / allPropertyGroupSimilarities.length * 100; avgSimilaritiesForPropertyGroup.push({propertyValue: propertyValue, averageSimilarity: avgSim, aboveOverallAverage: avgSim > avgSimOverall}); }); return avgSimilaritiesForPropertyGroup; }40:T607,function findLineByLeastSquares(values_x, values_y) { // From https://medium.com/@sahirnambiar/linear-least-squares-a-javascript-implementation-and-a-definitional-question-e3fba55a6d4b var x_sum = 0; var y_sum = 0; var xy_sum = 0; var xx_sum = 0; var count = 0; /* * The above is just for quick access, makes the program faster */ var x = 0; var y = 0; var values_length = values_x.length; if (values_length != values_y.length) { throw new Error('The parameters values_x and values_y need to have same size!'); } /* * Above and below cover edge cases */ if (values_length === 0) { return [ [], [] ]; } /* * Calculate the sum for each of the parts necessary. */ for (let i = 0; i< values_length; i++) { x = values_x[i]; y = values_y[i]; x_sum+= x; y_sum+= y; xx_sum += x*x; xy_sum += x*y; count++; } /* * Calculate m and b for the line equation: * y = x * m + b */ var m = (count*xy_sum - x_sum*y_sum) / (count*xx_sum - x_sum*x_sum); var b = (y_sum/count) - (m*x_sum)/count; /* * We then return the x and y data points according to our fit */ var result_values_x = []; var result_values_y = []; for (let i = 0; i < values_length; i++) { x = values_x[i]; y = x * m + b; result_values_x.push(x); result_values_y.push(y); } return [result_values_x, result_values_y, m, b]; }41:T5d4,42:[{"id":"90072883f3944d9fa5c1f23e2be0a571fb1bece087433656ca24918478bc6adc3900009592f9940bd6878ccde0917e3728e134305aab048e47f0337d16ca60d2","href":"https://static.observableusercontent.com/files/90072883f3944d9fa5c1f23e2be0a571fb1bece087433656ca24918478bc6adc3900009592f9940bd6878ccde0917e3728e134305aab048e47f0337d16ca60d2","name":"Story_Classification_Data.csv","type":"text/csv","lastModified":1689855660017.97,"size":37008}] 2f:{"title":"A Characterization of Interactive Visual Data Stories With a Spatio-Temporal Context","cells":[{"id":9015,"value":"# A Characterization of Interactive Visual Data Stories With a Spatio-Temporal Context","pinned":false,"hidden":false,"mode":"md"},{"id":11392,"value":"**Disclaimer:** If you are unsure about how to use this notebook, you may refer to [this explanation video](https://www.dropbox.com/s/kt0m9npl1tjszmc/notebook_explanation.mp4?dl=0).","pinned":false,"hidden":false,"mode":"md"},{"id":17352,"value":"This notebook accompanies the paper \"A Characterization of Interactive Visual Data Stories With a Spatio-Temporal Context\" [published in the Computer Graphics Forum](https://doi.org/10.1111/cgf.14922) \\[[MSPM23](#sec_references)\\].","pinned":false,"hidden":false,"mode":"md"},{"id":11400,"value":"We have collected and classified 130 interactive visual data stories with a spatio-temporal context published between 2018 and 2022. The design space used for the classification was created by combining and adapting three existing characterization approaches \\[[Rot21, SLHRS16, MW18](#sec_references)\\].\n\nIn this notebook, we present the classified data and a preliminary analysis of patterns and trends in it.","pinned":false,"hidden":false,"mode":"md"},{"id":11428,"value":"_**Note:** If interaction issues occur while using this notebook, they might be resolved by switching the browser to Firefox or Google Chrome._","pinned":false,"hidden":false,"mode":"md"},{"id":11420,"value":"## Contents of this notebook","pinned":false,"hidden":false,"mode":"md"},{"id":11231,"value":"- [Download of the data](#sec_download)\n- [Classification of the stories](#sec_classification)\n- [Usage deviations from the average based on the theme](#sec_deviations)\n- [Inspiration for your new story](#sec_inspiration)\n- [Similarity exploration](#sec_similarity_exploration)\n - [Multi-dimensional scaling](#subsec_mds)\n - [Between-source-similarity](#subsec_between_source_sim)\n - [Between-theme-similarity](#subsec_between_theme_sim)\n- [Trends](#sec_trends)\n- [References](#sec_references)\n- [Appendix (Helper functions)](#sec_appendix)\n\n ","pinned":false,"hidden":false,"mode":"md"},{"id":11442,"value":"sec_download = md`## Download of the data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11447,"value":"You may download the data used in this notebook by clicking the button below:","pinned":false,"hidden":false,"mode":"md"},{"id":14868,"value":"{\n const buttonNode = DOM.download(serialize(storyLinksData), \"Story_Classification_Data\", \"Download CSV\"); // From: https://observablehq.com/@palewire/saving-csv\n d3.select(buttonNode).selectAll('button').attr('class', 'download-button');\n \n return buttonNode;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":451,"value":"sec_classification = md`## Classification of the stories`","pinned":false,"hidden":false,"mode":"ojs"},{"id":646,"value":"Below, you can inspect our design space and how we classified the collected stories in it. Each column corresponds to one technique or additional property. \n\n_Interaction: When hovering over a cell, the title and authors of the corresponding story are displayed. When clicking on a cell, the link to the corresponding story is opened. Moreover, you can sort the table according to the columns with the dropdown menu below._","pinned":false,"hidden":false,"mode":"md"},{"id":701,"value":"viewof selectSort = Inputs.select([...subMainCategories, ...storyInfoMain], {label: \"Select column to sort by\", value: \"Theme\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":585,"value":"legend({\n color: cScale,\n title: \"Color scale for the Themes\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":14894,"value":"The table already reveals certain patterns in the data. For instance, ${textcolor('Longform Infographics', {color: fillScaleAll('Longform Infographic')})} are a very common layout, a lot of stories use ${textcolor('Textual Narrative', {color: fillScaleAll('Textual Narrative')})} and ${textcolor('Labeling', {color: fillScaleAll('Labeling')})}, and navigation is often performed via ${textcolor('Basic Scrolling', {color: fillScaleAll('Basic Scrolling')})}. In contrast, techniques for providing ${textcolor('Controlled Exploration', {color: fillScaleAll('Controlled Exploration')})} are not used very often.","pinned":false,"hidden":false,"mode":"md"},{"id":6547,"value":"sec_deviations = md`## Usage deviations from the average based on the theme`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14906,"value":"To inspect whether usage patterns are different from the overall average when focusing on a specific theme, we provide two visualizations below.","pinned":false,"hidden":false,"mode":"md"},{"id":17223,"value":"First, you may select a theme for which you want to inspect the deviations from the overall average.","pinned":false,"hidden":false,"mode":"md"},{"id":7138,"value":"viewof ratioCompareDType = Inputs.select(unqiuePropertyValues, {label: \"Select theme:\", value: unqiuePropertyValues[1]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":8286,"value":"In the view below, you can inspect to which degree the stories from the theme _${ratioCompareDType}_ deviated with their technique usage from the overall average. The ${textcolor('red', {color: deepred})} and ${textcolor('blue', {color: deepblue})} lines depict the average usage of the stories belonging to the theme _${ratioCompareDType}_, and the **dotted** lines represent the overall average usage of the techniques.","pinned":false,"hidden":false,"mode":"md"},{"id":15051,"value":"_Interaction: You may hover over a ${textcolor('red', {color: deepred})}, ${textcolor('blue', {color: deepblue})}, or **dotted** line to view the corresponding usage percentage._","pinned":false,"hidden":false,"mode":"md"},{"id":11314,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":17193,"value":"To assess more quickly for which techniques the usage deviates the most for the theme _${ratioCompareDType}_, you may refer to the view below. It displays the same deviation values as above, only ordered by their magnitude.","pinned":false,"hidden":false,"mode":"md"},{"id":17213,"value":"_Interaction: You may hover over a point to display the corresponding deviation._","pinned":false,"hidden":false,"mode":"md"},{"id":16037,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":15625,"value":"sec_inspiration = md`## Inspiration for your new story`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15592,"value":"You might know the theme of a story that you plan to write and want to get some inspiration on which techniques to use for it. You might even already have a few techniques in mind that you want to use but are unsure about which other techniques could work well together with them. In these cases, you may refer to the view below for inspiration. \n\nBelow, you can specify a subset of stories to see how much they used the different techniques. To specify the subset, you may click on the \"theme-checkboxes\" or on the axis labels below the bar chart to keep only those stories in the subset that use the corresponding techniques. The **dashed black lines** represent the overall average usages across all 130 stories.\n\nThe table beneath the bar chart displays the filtered subset.","pinned":false,"hidden":false,"mode":"md"},{"id":15672,"value":"**Example:** To give an example, we have selected the theme of the stories in the subset to be **Climate** and required them to use ${textcolor('Scrollytelling', {color: fillScaleAll('Scrollytelling')})} for navigation and ${textcolor('Animation or Slideshow', {color: fillScaleAll('Animation or Slideshow')})} to visually encode space-time.","pinned":false,"hidden":false,"mode":"md"},{"id":15580,"value":"_Interaction: You may (de-)select a checkbox to filter for the stories that used the corresponding theme or technique. You may also reset the subset by clicking the button \"Reset subset\"._","pinned":false,"hidden":false,"mode":"md"},{"id":15649,"value":"viewof resetSubgroup = {\n const resetButton = Inputs.button(\"Reset subset\");\n d3.select(resetButton).on('click', () => {\n mutable subgroupThemeSelector = [];\n mutable subgroupSelector = [];\n });\n \n return resetButton;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":15468,"value":"viewof subgroupThemes = Inputs.checkbox(uniqueThemes, {label: \"Theme-checkboxes. Specify the theme(s) of the subset:\", value: subgroupThemeSelector})","pinned":false,"hidden":false,"mode":"ojs"},{"id":15464,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":15481,"value":"There are **${selectedCompareSubgroup.length}** of **130** stories in your selected subset:","pinned":false,"hidden":false,"mode":"md"},{"id":15564,"value":"{\n const table = Inputs.table(selectedCompareSubgroup.map(d => {return {Title: d.Title, Link: d.Link}}));\n const tableSelection = d3.select(table);\n const urls = tableSelection.selectAll('td').filter(function() {return this.innerText.includes('https:')});\n urls.style('cursor', 'pointer');\n urls.on('click', function() {window.open(this.innerText)});\n return table;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":511,"value":"sec_similarity_exploration = md`## Similarity exploration`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14930,"value":"To get an even deeper understanding of the collected data, we created a similarity score to compare the stories quantitatively. It is defined as","pinned":false,"hidden":false,"mode":"md"},{"id":14932,"value":"tex`sim(s, s') := 1 - \\frac{\\sum_{i=1}^n \\|s_i - s_i'\\|}{n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14938,"value":"where ${tex`n`} is the number of different techniques in the design space and the classification of a story is represented as ${tex`s \\in \\{0,1\\}^n`}. At that, ${tex`s_i = 0`} means that story ${tex`s`} does not use technique ${tex`i`} and ${tex`s_i = 1`} means that story ${tex`s`} uses technique ${tex`i`}. Note that we did not consider the main technique categories like ${textcolor('Layout and Media', {color: fillScaleAll('Layout and Media')})}, but only the 29 subcategories like ${textcolor('Longform Infographic', {color: fillScaleAll('Longform Infographic')})}.","pinned":false,"hidden":false,"mode":"md"},{"id":14945,"value":"So, if two stories use exactly the same techniques, ${tex`sim`} has its maximum value of ${tex`1`}, and if two stories differ for every technique, ${tex`sim`} has its minimum value of ${tex`0`}.","pinned":false,"hidden":false,"mode":"md"},{"id":9538,"value":"### Overall similarity","pinned":false,"hidden":false,"mode":"md"},{"id":14948,"value":"The figure below depicts the distribution of the pairwise comparisons between all stories. They are homogeneously distributed between a minimum of ${Math.round(d3.min(overallSimCounts, d => d.val)*1000)/10}% and a maximum of ${Math.round(d3.max(overallSimCounts, d => d.val)*1000)/10}%. The ${textcolor('red', {color: deepred})} line represents the overall average similarity between all stories.","pinned":false,"hidden":false,"mode":"md"},{"id":14958,"value":"_Interaction: When hovering over a bar, the underlying frequency value is displayed._","pinned":false,"hidden":false,"mode":"md"},{"id":8534,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":9540,"value":"subsec_mds = md`### Multi-dimensional scaling`","pinned":false,"hidden":false,"mode":"ojs"},{"id":617,"value":"To get a more detailed view of how similar the stories are to each other, we used the dimension reduction method _multi-dimensional scaling_ (MDS) to project the stories into 2D space based on their similarity. To apply MDS, we used the distance measure","pinned":false,"hidden":false,"mode":"md"},{"id":14970,"value":"tex`dist(s, s') := 1 - sim(s, s') \\in [0, 1].`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14974,"value":"In the resulting projected view displayed below, each point represents a story. Two stories are more similar the closer to each other the corresponding points are located in the view.","pinned":false,"hidden":false,"mode":"md"},{"id":4232,"value":"_Interaction: You may (de-)select certain themes to show/hide the corresponding stories in the plot. Moreover, you may select specific stories via a lasso selection by clicking and moving the mouse. This updates the views after the next one._","pinned":false,"hidden":false,"mode":"md"},{"id":605,"value":"viewof groupSelection = Inputs.form(selectGroup)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2052,"value":"legend({\n color: cScale,\n title: \"Color scale for the Themes\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":7461,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":14982,"value":"Below, you can analyze the stories more closely that are selected via the lasso selection in the view above. You can inspect (in this order) which **Themes** they had, by which **Sources** they were published, and the average of which **Techniques** they used. Initially, a default lasso is drawn in the view above. In the third view, the ${textcolor('red', {color: deepred})} and ${textcolor('blue', {color: deepblue})} lines depict the average usage of the stories belonging to the selected group, and the **dotted** lines represent the overall average usage of the techniques.","pinned":false,"hidden":false,"mode":"md"},{"id":14989,"value":"_Interaction: You may hover over the bars in the first two views or the ${textcolor('red', {color: deepred})} and ${textcolor('blue', {color: deepblue})} lines in the third view to display the underlying values._","pinned":false,"hidden":false,"mode":"md"},{"id":7543,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":7559,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":7510,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":7614,"value":"subsec_between_source_sim = md`### Between-source-similarity`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14992,"value":"We also wanted to inspect how similar the different sources are to each other on average. Below, the pairwise average similarities between the sources are displayed. In addition, a specific source can be selected such that all comparisons between it and another source are highlighted in ${textcolor('blue', {color: deepblue})}. The ${textcolor('red', {color: deepred})} line represents the overall average similarity between all stories, irrespective of their source.","pinned":false,"hidden":false,"mode":"md"},{"id":14996,"value":"_Interaction: You may select a source to highlight the corresponding comparisons in the view below. Moreover, when hovering over a point in the view, the sources are displayed that were part of the comparison and the corresponding similarity value._","pinned":false,"hidden":false,"mode":"md"},{"id":11344,"value":"viewof simSource = Inputs.select([...uniqueSourceGroups].sort(), {label: \"Select source to highlight:\", value: \"NYT\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":7835,"value":"{\n const highlightSource = simSource;\n \n const dataPlot = Plot.plot({\n height: 170,\n width: width/2,\n x: {\n label: \"Pairwise similarity between the different sources →\",\n \t\ttickFormat: (d) => 100 * d + '%',\n grid: true\n },\n y: {domain: [0, 1], axis: null},\n marginLeft: 40,\n marginRight: 40,\n marginBottom: 35,\n marks: [\n Plot.ruleY([0], {stroke: 'grey'}),\n Plot.dot(simArrayGroups, \n Plot.dodgeY({\n x: d => d.sim, \n r: 5, \n fill: \"rgba(0,0,0,0)\", \n stroke: d => (d.xi == highlightSource || d.xj == highlightSource) ? deepblue : \"lightgrey\", \n strokeWidth: 2, \n anchor: \"middle\", \n title: d => d.xi+\"\\n\"+d.xj+\"\\n\"+Math.round(d.sim*1000)/10+'%'\n }),\n ),\n Plot.line([[simOverall/100, 0],[simOverall/100, 1.1]], {stroke: 'rgb(255,114,118)', strokeWidth: 2}),\n ]\n })\n\n return dataPlot;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8181,"value":"As an inspiration for exploring, in the view below, we have highlighted the comparisons that contained sources from particularly interesting groups.","pinned":false,"hidden":false,"mode":"md"},{"id":8693,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":8273,"value":"subsec_between_theme_sim = md`### Between-theme-similarity`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15004,"value":"We also inspected the average similarity between the themes. However, they turned out to all be quite similar, with similarity values ranging from ${Math.round(simArrayThemesSorted[0].sim * 100)}% when comparing _${simArrayThemesSorted[0].xi}_ and _${simArrayThemesSorted[0].xj}_ to ${Math.round(simArrayThemesSorted.at(-1).sim * 100)}% when comparing _${simArrayThemesSorted.at(-1).xi}_ and _${simArrayThemesSorted.at(-1).xj}_.","pinned":false,"hidden":false,"mode":"md"},{"id":15009,"value":"_Interaction: You may hover over the points to see which sources were part of the comparison and what the corresponding similarity value was._","pinned":false,"hidden":false,"mode":"md"},{"id":8314,"value":"{\n const highlightSource = uniqueSourceGroups[simSource];\n \n const dataPlot = Plot.plot({\n height: 90,\n width: width/3,\n x: {\n //domain: [0, 1],\n label: \"Pairwise similarity between the different themes →\",\n \t\ttickFormat: (d) => d + '%',\n grid: true\n },\n y: {domain: [0, 1], axis: null},\n marginLeft: 40,\n marginRight: 40,\n marginBottom: 35,\n marks: [\n Plot.ruleY([0], {stroke: 'grey'}),\n Plot.dot(simArrayThemes, \n Plot.dodgeY({\n x: d => Math.round(d.sim*1000)/10, \n r: 8, \n fill: \"white\",//\"white\",//d => (d.xi == highlightSource || d.xj == highlightSource) ? deepblue : \"white\", \n stroke: \"black\", \n //strokeWidth: 2, \n anchor: \"bottom\", \n title: d => d.xi+\"\\n\"+d.xj+\"\\n\"+Math.round(d.sim*1000)/10+'%'\n }),\n ),\n ]\n })\n\n return dataPlot;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":509,"value":"sec_trends = md`## Trends`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2437,"value":"To inspect how the usage of the different techniques changed over the past five years from 2018 to 2022, you may refer to the small multiple chart below. In it, the year-specific usage frequencies are displayed for all the techniques.","pinned":false,"hidden":false,"mode":"md"},{"id":15063,"value":"_Interaction: You may hover over the black sampling points to depict the usage frequencies from that year._","pinned":false,"hidden":false,"mode":"md"},{"id":2848,"value":"legend({\n color: categoryColor,\n title: \"Color scale of the main categories\",\n width: \"850\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3442,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":15066,"value":"The view above already provides an idea of which techniques have an increasing or decreasing trend. To compare the trends more closely, you can refer to the view below. To generate it, we calculated the best fit line for each of the technique trends. Then, we extracted the slope (or change rate) of the best fit line for each technique and displayed the corresponding change values in a beeswarm plot.","pinned":false,"hidden":false,"mode":"md"},{"id":15068,"value":"_Interaction: You may hover over a point to display the change rate of the underlying best fit line and the ${tex`R^2`} of the corresponding estimation._","pinned":false,"hidden":false,"mode":"md"},{"id":8854,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":637,"value":"sec_references = md`## References`","pinned":false,"hidden":false,"mode":"ojs"},{"id":632,"value":"\\[MSPM23\\] **Mayer**, B., **Steinhauer**, N., **Preim**, B. and **Meuschke**, M. (**2023**), A Characterization of Interactive Visual Data Stories With a Spatio-Temporal Context. Computer Graphics Forum, 42: e14922.\n\n\\[Rot21\\] **Roth**, R. E. (**2021**). *Cartographic design as visual storytelling: synthesis and review of map-based narratives, genres, and tropes*. The Cartographic Journal, 58(1), 83-114.\n\n\\[SLHRS16\\] **Stolper**, C. D., **Lee**, B., **Riche**, N. H., & **Stasko**, J. (**2016**). *Emerging and recurring data-driven storytelling techniques: Analysis of a curated collection of recent stories*.\n\n\\[MW18\\] **Mayr**, E., & **Windhager**, F. (**2018**). *Once upon a spacetime: Visual storytelling in cognitive and geotemporal information spaces*. ISPRS International Journal of Geo-Information, 7(3), 96.","pinned":false,"hidden":false,"mode":"md"},{"id":453,"value":"sec_appendix = md`## Appendix (Helper functions)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15054,"value":"From here on, the content is only for implementation purposes.","pinned":false,"hidden":false,"mode":"md"},{"id":3109,"value":"### Appendix: Data","pinned":false,"hidden":false,"mode":"md"},{"id":18,"value":"storyLinksData = FileAttachment(\"Story_Classification_Data.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":466,"value":"mainCategories = ['Layout and Media', '(Data-Based) Narration', 'Story Element Linkage', 'Context and Navigation', 'Controlled Exploration', 'Visual Encoding of Space-Time']","pinned":false,"hidden":false,"mode":"ojs"},{"id":15099,"value":"subCategories = ['Longform Infographic', 'Dynamic Slideshow', 'Multimedia Visual Experience', 'Textual Narrative','Audio Narration', 'Labeling', 'Text Annotations on Visualizations', 'Tooltips', 'Element Highlighting', '\"Real-time\" Extension', 'Interaction', 'Color', 'Animation', 'Next/Previous Buttons', 'Scrollytelling', 'Basic Scrolling', 'Breadcrumbs', 'Section Header Buttons', 'Menu Selection', 'Timeline', 'Geographic Map', 'Dynamic Queries' , 'Embedded E.V.', 'Separate E.V.', 'Map-Independent Time Visualization', 'Multiple Coordinated Views', 'Animation or Slideshow', 'Layer Superimposition', 'Layer Juxtaposition']","pinned":false,"hidden":false,"mode":"ojs"},{"id":491,"value":"subMainCategories = ['Layout and Media','Longform Infographic', 'Dynamic Slideshow', 'Multimedia Visual Experience', '(Data-Based) Narration', 'Textual Narrative','Audio Narration', 'Labeling', 'Text Annotations on Visualizations', 'Tooltips', 'Element Highlighting', '\"Real-time\" Extension', 'Story Element Linkage', 'Interaction', 'Color', 'Animation', 'Context and Navigation', 'Next/Previous Buttons', 'Scrollytelling', 'Basic Scrolling', 'Breadcrumbs', 'Section Header Buttons', 'Menu Selection', 'Timeline', 'Geographic Map', 'Controlled Exploration', 'Dynamic Queries' , 'Embedded E.V.', 'Separate E.V.', 'Visual Encoding of Space-Time', 'Map-Independent Time Visualization', 'Multiple Coordinated Views', 'Animation or Slideshow', 'Layer Superimposition', 'Layer Juxtaposition']","pinned":false,"hidden":false,"mode":"ojs"},{"id":501,"value":"storyInfo = ['Title', 'Year', 'Source', 'Theme', 'Authors', 'Link']","pinned":false,"hidden":false,"mode":"ojs"},{"id":1877,"value":"storyInfoMain = [\"Theme\", \"Year\", \"Source\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":15105,"value":"subData = storyLinksData.map(d => {\n const outObj = {};\n subCategories.forEach(col_name => {\n outObj[col_name] = +d[col_name];\n })\n return outObj; //if (d['Source'] != \"EcoWest\" && d['Source'] != \"Manpopex\") \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":494,"value":"subMainData = storyLinksData.map(d => {\n const outObj = {};\n subMainCategories.forEach(col_name => {\n outObj[col_name] = +d[col_name];\n })\n return outObj; //if (d['Source'] != \"EcoWest\" && d['Source'] != \"Manpopex\") \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2665,"value":"### Appendix: Classification of the stories","pinned":false,"hidden":false,"mode":"md"},{"id":958,"value":"visData = {\n return [...storyLinksData];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":513,"value":"themeInfo = storyLinksData.map(d => {\n return d['Theme'];\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":516,"value":"uniqueThemes = [...new Set(themeInfo)]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2316,"value":"mutable authors = \"authors\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2313,"value":"mutable title = \"title\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2311,"value":"mutable link = \"https://www.nytimes.com/interactive/2019/04/03/world/white-extremist-terrorism-christchurch.html\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":11753,"value":"### Appendix: Usage deviations from the average based on theme or source","pinned":false,"hidden":false,"mode":"md"},{"id":16140,"value":"propertyGroup = \"Theme\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":6942,"value":"mutable ratioCompareTechnique = \"\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":6603,"value":"fillScaleAll = (technique, allColored = false) => {\n const idx = subMainCategories.indexOf(technique);\n if (mainCategories.includes(technique) && allColored) {\n return \"black\";\n }\n else if(subMainCategories.slice(0,4).includes(technique)){\n return \"green\";\n }\n else if(subMainCategories.slice(4,12).includes(technique)){\n return \"#66c2a4\";\n }\n else if(subMainCategories.slice(12,16).includes(technique)){\n return \"#fc8d59\";\n }\n else if(subMainCategories.slice(16,25).includes(technique)){\n return \"#8c96c6\";\n }\n else if(subMainCategories.slice(25,29).includes(technique)){\n return \"#df65b0\";\n }\n else{\n return \"#969696\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":15606,"value":"fillScaleBrighter = (technique, allColored = false) => {\n const idx = subMainCategories.indexOf(technique);\n if (mainCategories.includes(technique) && allColored) {\n return \"black\";\n }\n else if(subMainCategories.slice(0,4).includes(technique)){\n return \"66b366\";\n }\n else if(subMainCategories.slice(4,12).includes(technique)){\n return \"#a3dac8\";\n }\n else if(subMainCategories.slice(12,16).includes(technique)){\n return \"#fdbb9b\";\n }\n else if(subMainCategories.slice(16,25).includes(technique)){\n return \"#bac0dd\";\n }\n else if(subMainCategories.slice(25,29).includes(technique)){\n return \"#eca3d0\";\n }\n else{\n return \"#c0c0c0\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6668,"value":"function stdDev (array) {\n if (!array || array.length === 0) {return 0;}\n const n = array.length\n const mean = array.reduce((a, b) => a + b) / n\n return Math.sqrt(array.map(x => Math.pow(x - mean, 2)).reduce((a, b) => a + b) / n)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11757,"value":"### Appendix: Similarity exploration","pinned":false,"hidden":false,"mode":"md"},{"id":4960,"value":"simOverall = Math.round(similarityArrayOverall.reduce((a, b) => a + b.sim, 0) / similarityArrayOverall.length * 100)","pinned":false,"hidden":false,"mode":"ojs"},{"id":11761,"value":"#### Appendix: Multi-dimensional scaling","pinned":false,"hidden":false,"mode":"md"},{"id":2715,"value":"Calculating Similarity Matrix:","pinned":false,"hidden":false,"mode":"md"},{"id":523,"value":"getSimilarity = function(xi, xj) {\n let similarity = 0;\n subCategories.forEach(col => {\n if (xi[col] == xj[col]) {\n similarity += 1/nrSubCols;\n }\n })\n return similarity;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8614,"value":"getSimilarityAsDistance = function(xi, xj) {\n let similarity = 0;\n subCategories.forEach(col => {\n if (xi[col] == xj[col]) {\n similarity += 1/nrSubCols;\n }\n })\n return 1-similarity < 0 ? 0 : 1-similarity;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":9053,"value":"similarityArrayOverall = {\n const simArr = [];\n d3.range(0, simMatrix.length).forEach(i => {\n d3.range(i + 1, simMatrix.length).forEach(j => {\n simArr.push({i, j, sim: simMatrix[i][j]})\n })\n })\n\n return simArr;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2705,"value":"Calculating MDS results:","pinned":false,"hidden":false,"mode":"md"},{"id":525,"value":"nrSubCols = subCategories.length;","pinned":false,"hidden":false,"mode":"ojs"},{"id":556,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":559,"value":"mdsResults = mds_classic(distanceMatrixMDS).map(d => {return {x: d[0], y: d[1]}})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4656,"value":"Show MDS results according to filtered data in design space:","pinned":false,"hidden":false,"mode":"md"},{"id":4416,"value":"vis_index = {\n let indexis= [];\n storyLinksData.forEach((d,i) =>{\n if(visData.includes(d)){indexis.push(i)}\n })\n return indexis;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1076,"value":"yearInfo = storyLinksData.map(d => {\n return d['Year'];\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2579,"value":"selectGroup = themeSelectionForm2;","pinned":false,"hidden":false,"mode":"ojs"},{"id":4100,"value":"themeSelectionForm2 = {\n const formObj = {};\n\n uniqueThemes.forEach((theme, i) => {\n formObj[theme] = Inputs.toggle({label: theme, value: true});\n })\n\n return formObj;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":10208,"value":"Newer code:","pinned":false,"hidden":false,"mode":"md"},{"id":529,"value":"simMatrix = {\n const simMatrix = [];\n\n const dataArray = subData;\n\n dataArray.forEach(xi => {\n const matrixRow = [];\n dataArray.forEach(xj => {\n matrixRow.push(getSimilarity(xi, xj));\n })\n simMatrix.push(matrixRow);\n })\n \n return simMatrix;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8620,"value":"distanceMatrixMDS = {\n const simMatrix = [];\n\n const dataArray = subData;\n\n dataArray.forEach(xi => {\n const matrixRow = [];\n dataArray.forEach(xj => {\n matrixRow.push(getSimilarityAsDistance(xi, xj));\n })\n simMatrix.push(matrixRow);\n })\n \n return simMatrix;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":565,"value":"resultsAll = mdsResults.map((d, i) => {\n const outObj = {x: d.x, y: d.y};\n storyLinksData.columns.forEach(col => outObj[col] = storyLinksData[i][col])\n return outObj;\n}).filter((d,i) => vis_index.includes(i))","pinned":false,"hidden":false,"mode":"ojs"},{"id":7464,"value":"mds_circ_rad = 7","pinned":false,"hidden":false,"mode":"ojs"},{"id":7467,"value":"import { trackPointer } from \"@fil/pointer-events\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":7500,"value":"mutable lassoSelection = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":7507,"value":"lassoData = (!!lassoSelection ? lassoSelection.data() : [])","pinned":false,"hidden":false,"mode":"ojs"},{"id":7473,"value":"function lasso() {\n const dispatch = d3.dispatch(\"start\", \"lasso\", \"end\");\n const lasso = function(selection) {\n const node = selection.node();\n const polygon = [];\n\n selection\n .on(\"touchmove\", e => e.preventDefault()) // prevent scrolling\n .on(\"pointerdown\", e => {\n trackPointer(e, {\n start: p => {\n polygon.length = 0;\n dispatch.call(\"start\", node, polygon);\n },\n move: p => {\n polygon.push(p.point);\n dispatch.call(\"lasso\", node, polygon);\n },\n end: p => {\n dispatch.call(\"end\", node, polygon);\n }\n });\n });\n };\n lasso.on = function(type, _) {\n return _ ? (dispatch.on(...arguments), lasso) : dispatch.on(...arguments);\n };\n\n return lasso;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":15191,"value":"//mutable poly = []","pinned":true,"hidden":false,"mode":"ojs"},{"id":15194,"value":"//polyString = \"[\" + poly.map(d => {return \"[\" + d[0] + \",\" + d[1] + \"]\"}) + \"]\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":11292,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs"},{"id":8001,"value":"simArray = {\n const simArray = [];\n\n const dataArray = subData;\n \n dataArray.forEach((xi, i) => {\n dataArray.forEach((xj, j) => {\n if (j > i) simArray.push({xi: storyLinksData[i].Title, xj: storyLinksData[j].Title, sim: getSimilarity(xi, xj)});\n })\n })\n \n return simArray;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8014,"value":"simArray.sort((a,b) => b.sim-a.sim)","pinned":false,"hidden":false,"mode":"ojs"},{"id":8410,"value":"overallSimArray = {\n const overallSimArray = [];\n\n simMatrix.forEach((row, i) => {\n simMatrix[i].forEach((col, j) => {\n if (j > i) overallSimArray.push(simMatrix[i][j]);\n })\n })\n return overallSimArray;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8522,"value":"overallSimCounts = {\n const uniqueVals = [...new Set(overallSimArray)].sort();\n const n = overallSimArray.length;\n\n return uniqueVals.map(val => {return {val, frequency: overallSimArray.filter(d => d == val).length / n}});\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11765,"value":"#### Appendix: Between-source-similarity","pinned":false,"hidden":false,"mode":"md"},{"id":7929,"value":"uniqueSourceGroups = uniqueSource//.filter(d => d != 'Manpopex' && d != 'EcoWest');","pinned":false,"hidden":false,"mode":"ojs"},{"id":7611,"value":"sourceAvgData = {\n const sourceAvgData = {};\n \n uniqueSourceGroups.forEach(group => {\n sourceAvgData[group] = {};\n subCategories.forEach(technique => {\n const groupData = storyLinksData.filter(d => d['Source'] == group);\n sourceAvgData[group][technique] = groupData.filter(d => d[technique] == 1).length / groupData.length; \n })\n })\n\n return sourceAvgData;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7602,"value":"simMatrixGroups = {\n const simMatrix = [];\n\n const dataArray = subData;\n\n uniqueSourceGroups.forEach(xi => {\n const matrixRow = [];\n uniqueSourceGroups.forEach(xj => {\n matrixRow.push(getSimilarityGroup(sourceAvgData[xi], sourceAvgData[xj]));\n })\n simMatrix.push(matrixRow);\n })\n \n return simMatrix;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7827,"value":"simArrayGroups = {\n const simArrayGroups = [];\n\n uniqueSourceGroups.forEach((xi, i) => {\n uniqueSourceGroups.forEach((xj, j) => {\n if (j > i) simArrayGroups.push({xi, xj, sim: getSimilarityGroup(sourceAvgData[xi], sourceAvgData[xj])});\n })\n })\n \n return simArrayGroups;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7830,"value":"simArrayGroupsSorted = simArrayGroups.filter(d => d.sim != 0).sort((a,b) => a.sim-b.sim)","pinned":false,"hidden":false,"mode":"ojs"},{"id":11770,"value":"#### Appendix: Between-theme-similarity","pinned":false,"hidden":false,"mode":"md"},{"id":8297,"value":"themeAvgData = {\n const themeAvgData = {};\n \n uniqueThemes.forEach(group => {\n themeAvgData[group] = {};\n subCategories.forEach(technique => {\n const groupData = storyLinksData.filter(d => d['Theme'] == group);\n themeAvgData[group][technique] = groupData.filter(d => d[technique] == 1).length / groupData.length; \n })\n })\n\n return themeAvgData;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8300,"value":"simMatrixThemes = {\n const simMatrix = [];\n\n const dataArray = subData;\n\n uniqueThemes.forEach(xi => {\n const matrixRow = [];\n uniqueThemes.forEach(xj => {\n matrixRow.push(getSimilarityGroup(themeAvgData[xi], themeAvgData[xj]));\n })\n simMatrix.push(matrixRow);\n })\n \n return simMatrix;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8305,"value":"simArrayThemes = {\n const simArrayThemes = [];\n\n uniqueThemes.forEach((xi, i) => {\n uniqueThemes.forEach((xj, j) => {\n if (j > i) simArrayThemes.push({xi, xj, sim: getSimilarityGroup(themeAvgData[xi], themeAvgData[xj])});\n })\n })\n \n return simArrayThemes;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8329,"value":"simArrayThemesSorted = simArrayThemes.sort((a, b) => a.sim-b.sim)","pinned":false,"hidden":false,"mode":"ojs"},{"id":11775,"value":"#### Appendix: Within-source-similarity / Within-theme-similarity","pinned":false,"hidden":false,"mode":"md"},{"id":8204,"value":" unqiuePropertyValues = propertyGroup == \"Source\" ? [...uniqueSourceGroups].sort() : [...uniqueThemes].sort()","pinned":false,"hidden":false,"mode":"ojs"},{"id":10174,"value":"uniqueSourceGroups","pinned":false,"hidden":false,"mode":"ojs"},{"id":8192,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs"},{"id":10168,"value":"ratioCompareBarchartDataFixedSubgroup = subMainCategories.map(category => {\n if (category == \"Context and Navigation\") debugger\n const dTypeData = storyLinksData.filter(d => d[propertyGroup] == ratioCompareDType);\n const ratio = dTypeData.filter(d => d[category] == 1).length / dTypeData.length;\n const avgRatio = storyLinksData.filter(d => d[category] == 1).length / storyLinksData.length;\n return {row: category, ratio: ratio, avgRatio: avgRatio, x1: d3.min([ratio, avgRatio]), x2: d3.max([ratio, avgRatio]), fill: ratio < avgRatio ? 'red' : 'blue'};\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":7605,"value":"getSimilarityGroup = function(xi, xj) {\n let similarity = 0;\n subCategories.forEach(col => {\n similarity += Math.abs(+xi[col] - +xj[col])/subCategories.length;\n })\n return 1-similarity;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":15677,"value":"### Appendix: Inspiration for your new story","pinned":false,"hidden":false,"mode":"md"},{"id":15664,"value":"mutable subgroupThemeSelector = ['Climate']","pinned":false,"hidden":false,"mode":"ojs"},{"id":15503,"value":"mutable subgroupSelector = [\"Animation or Slideshow\", \"Scrollytelling\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":15476,"value":"selectedCompareSubgroup = storyLinksData.filter(d => {\n let contained = (subgroupThemes.length === 0 || subgroupThemes.includes(d.Theme));\n subgroupSelector.forEach(technique => {\n contained = d[technique] && contained;\n });\n return contained;\n });","pinned":false,"hidden":false,"mode":"ojs"},{"id":15454,"value":"ratioCompareDataSelectorSubgroup = subMainCategories.map(category => {\n const ratioSubgroup = selectedCompareSubgroup.filter(d => d[category] == 1).length / selectedCompareSubgroup.length;\n const ratioAll = storyLinksData.filter(d => d[category] == 1).length / storyLinksData.length;\n return {row: category, ratio: ratioSubgroup, avgRatio: ratioAll, x1: d3.min([ratioSubgroup, ratioAll]), x2: d3.max([ratioSubgroup, ratioAll]), fill: ratioSubgroup < ratioAll ? 'red' : 'blue'};\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2673,"value":"### Appendix: Trends","pinned":false,"hidden":false,"mode":"md"},{"id":1089,"value":"getCatData = function(arr, cat){\n const techarray = [];\n \n for (let i = 0; i < arr.length; ++i) {\n window['array' + i] = [];\n storyLinksData.forEach(d =>{\n if(d[cat] == arr[i]){\n window['array' + i].push(d);\n }\n })\n techarray.push(window['array' + i]);\n }\n \n return techarray;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1092,"value":"yearData = getCatData(uniqueYears, storyInfo[1]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1098,"value":"Calculate Counts of Techniques per Year","pinned":false,"hidden":false,"mode":"md"},{"id":3447,"value":"groupedYears = function(data){\n let group = [];\n for (let index = 0; index < techniqueInfo.length; ++index) {\n group.push({\"technique\":techniqueInfo[index]})\n }\n for (let index = 0; index < data.length; ++index) {\n for (let j = 0; j < group.length; ++j) {\n if(uniqueYears.includes(data[index].Year)){\n group[j][data[index].Year] = data[index][techniqueInfo[j]];\n }\n }\n }\n return group;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3450,"value":"groupedYearData = groupedYears(countPerYear)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1102,"value":"techniqueInfo = {\n return storyLinksData.columns.slice(0, subMainCategories.length);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1100,"value":"getCountsPerCat = function(arr, cat, string){\n let timeArray = [];\n let count = 0;\n for (let i = 0; i < arr.length; ++i) { // 6\n let obj = {};\n for (let j = 0; j < techniqueInfo.length; ++j) { // 42\n arr[i].forEach(d => { \n if(+d[techniqueInfo[j]] == \"\" ){\n //console.log(\"empty\")\n } else{count+=1;}\n })\n obj[techniqueInfo[j]] = Math.round((100/arr[i].length)*count); //count\n if(j == techniqueInfo.length - 1){\n console.log(arr[i], cat, string)\n if (!arr[i][0]) debugger;\n obj[string] = arr[i][0][cat];\n }\n count = 0;\n } \n timeArray.push(obj);\n }\n return timeArray;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3462,"value":"nestYearData = {\n let timeArray = [];\n for (let i = 0; i < techniqueInfo.length; ++i) { \n let obj = {};\n let value_array = [];\n obj[\"key\"] = techniqueInfo[i];\n for (let j = 0; j < countPerYear.length; ++j) { \n value_array.push({\"Year\": countPerYear[j].Year, \"Prop\": countPerYear[j][techniqueInfo[i]]})\n } \n obj[\"values\"] = value_array;\n timeArray.push(obj);\n }\n return timeArray;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1343,"value":"stringTime = 'Year';","pinned":false,"hidden":false,"mode":"ojs"},{"id":1113,"value":"countPerYear = getCountsPerCat(yearData, storyInfo[1], stringTime).slice(0,5);","pinned":false,"hidden":false,"mode":"ojs"},{"id":12352,"value":"#### Appendix: Technique trend change","pinned":false,"hidden":false,"mode":"md"},{"id":8814,"value":"leastSquareResults = nestYearData.map((nestYearDatum, i) => {\n const xValues = nestYearDatum.values.map(d => +d.Year);\n const yValues = nestYearDatum.values.map(d => +d.Prop);\n const lsr = findLineByLeastSquares(xValues, yValues);\n const x = lsr[0];\n const y = lsr[1];\n const m = lsr[2]; \n const b = lsr[3];\n const r2 = rSquared(xValues, yValues, m, b);\n return {technique: nestYearDatum.key, x, y, m, b, r2};\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":8825,"value":"slopesSorted = {\n const slopesSorted = leastSquareResults.map(({technique, m, r2}) => {return {technique, m, r2}});\n slopesSorted.sort((a,b) => a.m - b.m);\n return slopesSorted;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8757,"value":"$40","pinned":false,"hidden":false,"mode":"ojs"},{"id":15147,"value":"function rSquared(x, y, m, b) {\n // From https://stackoverflow.com/questions/65987106/how-do-i-calculate-r-squared-value-in-javascript\n\n let regressionSquaredError = 0\n let totalSquaredError = 0\n\n let yMean = y.reduce((d, e) => d + e) / y.length\n\n for (let i = 0; i < x.length; i++) {\n regressionSquaredError += Math.pow(y[i] - (b + m * x[i]), 2)\n totalSquaredError += Math.pow(y[i] - yMean, 2)\n }\n\n const r2 = 1 - (regressionSquaredError / totalSquaredError);\n\n return !!r2 ? r2 : 1;\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2679,"value":"### Appendix: General","pinned":false,"hidden":false,"mode":"md"},{"id":413,"value":"countEntries = function(colomn) {\n let count = 0;\n let tempEntries = d3.map(visData, function(d){return +d[colomn];});\n for(let i = 0; i < tempEntries.length; i++){\n if(tempEntries[i] != \"\"){count+=1;\n } else{ \n // nothing\n } \n }return count;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":594,"value":"function clone(elements) {\n return elements.map(e => e.cloneNode(true));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2440,"value":"function textcolor(content, style = {}) {\n function yiq(color) {\n const {r, g, b} = d3.rgb(color);\n return (r * 299 + g * 587 + b * 114) / 1000 / 255; // returns values between 0 and 1\n }\n const {\n background,\n color = yiq(background) >= 0.6 ? \"#111\" : \"white\", \n padding = \"0 5px\",\n borderRadius = \"4px\",\n fontWeight = 800,\n ...rest\n } = typeof style === \"string\" ? {background: style} : style;\n return htl.html`${content}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8957,"value":"techniqueShorthandDict = {\n return {\n \"(Data-Based) Narration\": \"(Data-Based) Narration\",\n \"Text Annotations on Visualizations\": \"Text Annot. on Vis.\",\n \"Story Element Linkage\": \"Story Element Linkage\",\n \"Context and Navigation\": \"Context and Navigation\",\n \"Controlled Exploration\": \"Controlled Exploration\",\n \"Map-Independent Time Visualization\": \"Map-Indep. Time Vis.\",\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":579,"value":"Scales:","pinned":false,"hidden":false,"mode":"md"},{"id":2845,"value":"categoryColor = d3.scaleOrdinal()\n .domain(mainCategories.map(d => !!techniqueShorthandDict[d] ? techniqueShorthandDict[d] : d))\n .range([\"green\", \"#66c2a4\", \"#fc8d59\", \"#8c96c6\", \"#df65b0\", \"#969696\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":581,"value":"cScale = d3.scaleOrdinal([\"Society & Health\", \"Climate\", \"Election\", \"Conflicts\"], [d3.schemeCategory10[9], d3.schemeCategory10[8], \"#640ea5\", d3.schemeCategory10[3]])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2595,"value":"yearScale = d3.scaleOrdinal(uniqueYears, d3.schemeCategory10.slice(0, uniqueYears.length))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2604,"value":"sourceScale = \nd3.scaleOrdinal()\n .domain(uniqueSource)\n .range([...d3.schemeTableau10, d3.schemeCategory10[6],\n '#41ae76',\n '#ef6548',\n '#3f007d',\n '#ce1256',\n '#525252'\n ])","pinned":false,"hidden":false,"mode":"ojs"},{"id":9312,"value":"Certain colors that are used throughout this notebook:","pinned":false,"hidden":false,"mode":"md"},{"id":7341,"value":"viewof deepred = Inputs.color({label: \"Deep red\", value: \"#e15759\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":7343,"value":"viewof deepblue = Inputs.color({label: \"Deep blue\", value: \"#4e79a7\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":7324,"value":"viewof lightblue = Inputs.color({label: \"Light blue\", value: \"#eef2f6\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":7327,"value":"viewof lightred = Inputs.color({label: \"Light red\", value: \"#fcefef\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2694,"value":"Unique Theme, Year and Source:","pinned":false,"hidden":false,"mode":"md"},{"id":2566,"value":"uniqueSource = [...new Set(sourceInfo)]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1080,"value":"uniqueYears = [...new Set(yearInfo)].sort();","pinned":false,"hidden":false,"mode":"ojs"},{"id":2562,"value":"sourceInfo = storyLinksData.map(d => {\n return d['Source'];\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":11968,"value":"### Appendix: Imports","pinned":false,"hidden":false,"mode":"md"},{"id":17328,"value":"d3 = require('d3@7.8.5/dist/d3.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":14864,"value":"array2CSV = (dataArray) => {\n const cols = Object.keys(dataArray[0]);\n \n const csvString = [\n cols.map(colHeader => {\n if (colHeader.includes(',')) return `\"${colHeader}\"`;\n else if (colHeader.includes('\"')) return `\"${colHeader.replaceAll('\"', '\"\"')}\"`;\n else return colHeader;\n }),\n ...dataArray.map(row => {\n return cols.map(col => {\n if (row[col].includes(',')) return `\"${row[col]}\"`;\n else if (row[col].includes('\"')) return `\"${row[col].replaceAll('\"', '\"\"')}\"`;\n else return row[col];\n });\n })\n ]\n .map(e => e.join(\",\")) \n .join(\"\\n\");\n\n return csvString;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":15094,"value":"serialize = (dataArray) => {\n const csvString = array2CSV(dataArray);\n return new Blob([csvString], {type: \"text/csv\"});\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":587,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3331,"value":"import {data, rows_header} from '@nitaku/biadjacency-matrix'","pinned":false,"hidden":false,"mode":"ojs"},{"id":553,"value":"numeric = require('numeric@1.2.6/numeric-1.2.6.js').catch(() => window[\"numeric\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":11970,"value":"### Appendix: Style","pinned":false,"hidden":false,"mode":"md"},{"id":981,"value":"$41","pinned":false,"hidden":false,"mode":"html"}],"files":"$W42","stdlib":"1","titling":"auto"}