Quantitative Headlines / abebrath

chart = {

const svg = d3.create("svg")

.attr("viewBox", [0, 0, width, height]);

svg.append("rect")

.attr("width", "100%")

.attr("height", "100%")

.attr("class", "svgBackground");

// Yellow bars

svg.append("g")

.selectAll("rect")

.data(dataWiki)

.join("rect")

.attr("id", "highlight")

.attr("x",margin.left)

.attr("y",function(d,i) {return (i) * 20 + margin.top + 6})

.attr("height", 18)

.attr("width", d => textHighlight(d.Num_Watchers_Clean))

.attr("fill", "#f9ff77");

// Text init

const wiki = svg.append("g")

.selectAll("a")

.data(dataWiki)

.join("a")

.attr("transform", (d, i) => `translate(${margin.left} ${(i+1) * 20 + margin.top})`)

.attr("href", d => "https://en.wikipedia.org/" + d.Wiki_URL)

.attr("target", "_blank")

.append("text")

.attr("id", "para")

.attr("class", "init")

// margin gutter rectangle

svg.append("rect")

.attr("class", "svgBackground")

.attr("x", width - margin.right)

.attr("y", 0)

.attr("width", margin.right)

.attr("height", "100%")

// legend and title

svg.append("g")

.call(xAxis);

svg.append("g")

.call(axisTitle);

svg.append("g")

.call(legend);

yield svg.node();

format();

}

dataWiki = FileAttachment("Aug2019data@1.json").json()

tooltip = function(d){

return d.Article_Title + ": " +

"\n " + d.First_Para_Clean.replace(/\n/g, "") +

"\n Views: " + d3.format(",.0f")(d.Page_Views) +

"\n Words: " + d3.format(",.0f")(d.Page_Length) +

"\n Edits: " + d3.format(",.0f")(d.Total_Edits) +

"\n Wait: " + d3.format(",.1f")(d.Days_Wait/365) + " years" +

"\n Age: " + d3.format(",.1f")(d.Article_Age/365) + " years" +

"\n Watchers: " + d3.format(",.0f")(d.Num_Watchers_Clean)

}

format = function(){

const ch1 = d3.select("input#pageViews").property("checked"),

ch2 = d3.select("input#pageLength").property("checked"),

ch3 = d3.select("input#totalEdits").property("checked"),

ch4 = d3.select("input#yearsWait").property("checked"),

ch5 = d3.select("input#articleAge").property("checked"),

ch6 = d3.select("input#numWatcher").property("checked");

d3.selectAll("text#para")

.each(function(d){

let currentObj = d3.select(this);

currentObj.text("");

for (let i = 0; i < 150; i++){ // <= arbitrary value 150, just so long as the text covers the screen

let bold = (i < width2char(textBold(d.Page_Views)) && ch1)

let color = (i < width2char(textColor(d.Page_Length)) && ch2)

let uLine = (i < width2char(textUnderline(d.Total_Edits)) && ch3)

let ital = (i < width2char(textItalic(d.Days_Wait)) && ch4)

let serif = (i < width2char(textSerif(d.Article_Age)) || !ch5)

currentObj.append("tspan")

.attr("class", "init")

.attr("font-weight", bold? "bold":"normal")

.attr("fill", color? "#2166ac":"#b2182b")

.attr("text-decoration", uLine? "underline":"none")

.style("font-variation-settings", function(){

return `"slnt" ${ital? -30:0},

"wght" ${bold? 800:400},

"CASL" ${serif? 0:1},

"CRSV" ${serif? 0:1},

"MONO" 1`})

.text(d.First_Para_Clean.substring(i, i+1))

currentObj.append("title")

.text(tooltip)

}

})

d3.selectAll("rect#highlight")

.each(function(d){

d3.select(this)

.transition()

.duration(200)

.attr("opacity", ch6? 1:0)

})

}

textBold = d3.scaleLinear()

.domain([0, d3.max(dataWiki, d => d.Page_Views)])