Data Analysis Script / Interactive Info Vis

UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues.

Workspace

Published

Edited

Dec 14, 2020

Fork of Data Analysis Script

Importers

deathRates = await FileAttachment("death_rate_per_month.csv").url()

empl = await FileAttachment("employment@1.CSV").url()

deathRates_data = d3.csv(deathRates, d3.autoType)

empl_data = d3.csv(empl, d3.autoType)

pop_JP = 126500000

deathRates_data

chart3 = {

//let data = chart1_data2[country];

let x = d3

.scaleBand()

.domain(d3.map(deathRates_data, d => d.Months))

.range([margin.left, width - margin.right]);

let y = d3

.scaleLinear()

.domain([0, 100])

.nice()

.range([height - margin.bottom, margin.top]);

let line1 = d3

.line()

.curve(d3.curveCatmullRom)

.x(d => x(d.Months) + 40)

.y(d => y(d[country] * 100));

let line2 = d3

.line()

.curve(d3.curveCatmullRom)

.x(d => x(d.Months) + 40)

.y(d => y(d[country]));

let xAxis = g =>

g.attr("transform", `translate(0,${height - margin.bottom})`).call(

.axisBottom(x)

.ticks(width / 80)

.tickSizeOuter(0)

);

let yAxis = g =>

g.attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(y));

const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);

svg.append("g").call(xAxis);

svg.append("g").call(yAxis);

svg

.append("path")

.datum(empl_data)

.attr("fill", "none")

.attr("stroke", "steelblue")

.attr("stroke-width", 1.5)

.attr("stroke-linejoin", "round")

.attr("stroke-linecap", "round")

.attr("d", line2);

svg

.append("path")

.datum(deathRates_data)

.attr("fill", "none")

.attr("stroke", "orange")

.attr("stroke-width", 1.5)

.attr("stroke-linejoin", "round")

.attr("stroke-linecap", "round")

.attr("d", line1);

// append chart title label

svg

.append("text")

.attr("x", width / 2)

.attr("y", 40)

.style('text-anchor', 'middle')

.style("font-size", "20px")

.text(

"Relationship Between Covid Death Rate & Employment Rate for " +

`${[country]}`

);

// append Employment rate label

svg

.append("text")

.attr("x", 95)

.attr("y", 100)

.text("Empolyment Rate")

.style("font-size", "15px")

.style("fill", "#000")

.attr("alignment-baseline", "middle");

// append Covid death rate label

svg

.append("text")

.attr("x", 95)

.attr("y", 415)

.text("Covid Death Rate")

.style("font-size", "15px")

.style("fill", "#000")

.attr("alignment-baseline", "middle");

// append x-axis label

svg

.append("text")

.attr("x", width / 2)

.attr("y", height - 20)

.style('text-anchor', 'middle')

.text('Months');

// append y-axis label

svg

.append("text")

.attr("x", -(height / 2))

.attr("y", Math.floor(margin.left / 2))

.style("text-anchor", "middle")

.attr('transform', "rotate(-90)")

.text("Employment and Coivd Death Rate %");

return svg.node();

}

chart2 = {

let data = chart2_data;

let x = d3

.scaleLinear()

.domain(d3.extent(data['United States'], d => d.cases_per_mil))

.range([margin.left, width - margin.right]);

let y = d3

.scaleLinear()

.domain([60, d3.max(data['Japan'], d => d.rates)])

.nice()

.range([height - margin.bottom, margin.top]);

let line = d3

.line()

.curve(d3.curveCatmullRom)

.x(d => x(d.cases_per_mil))

.y(d => y(d.rates));

let xAxis = g =>

g.attr("transform", `translate(0,${height - margin.bottom})`).call(

.axisBottom(x)

.ticks(width / 80)

.tickSizeOuter(0)

);

let yAxis = g =>

g.attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(y));

const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);

svg.append("g").call(xAxis);

svg.append("g").call(yAxis);

svg

.append("path")

.datum(data['United States'])

.attr("fill", "none")

.attr("stroke", "Maroon")

.attr("stroke-width", 1.5)

.attr("stroke-linejoin", "round")

.attr("stroke-linecap", "round")

.attr("d", line);

svg

.append("path")

.datum(data['Canada'])

.attr("fill", "none")

.attr("stroke", "orange")

.attr("stroke-width", 1.5)

.attr("stroke-linejoin", "round")

.attr("stroke-linecap", "round")

.attr("d", line);

svg

.append("path")

.datum(data['Japan'])

.attr("fill", "none")

.attr("stroke", "steelblue")

.attr("stroke-width", 1.5)

.attr("stroke-linejoin", "round")

.attr("stroke-linecap", "round")

.attr("d", line);

// append Japan text

svg

.append("text")

.attr("x", 95)

.attr("y", 65)

.text("Japan")

.style("font-size", "15px")

.style("fill", "steelblue")

.attr("alignment-baseline", "middle");

// append Canada text

svg

.append("text")

.attr("x", 148)

.attr("y", 320)

.text("Canada")

.style("font-size", "15px")

.style("fill", "orange")

.attr("alignment-baseline", "middle");

// append U.S. text

svg

.append("text")

.attr("x", 370)

.attr("y", 323)

.text("United States")

.style("font-size", "15px")

.style("fill", "Maroon")

.attr("alignment-baseline", "middle");

// append chart title label

svg

.append("text")

.attr("x", width / 2)

.attr("y", 40)

.style('text-anchor', 'middle')

.style("font-size", "20px")

.text("Relationship Between Cases per Million & Unemployment Rate");

// append x-axis label

svg

.append("text")

.attr("x", width / 2)

.attr("y", height - 20)

.style('text-anchor', 'middle')

.text('#Cases per Million');

// append y-axis label

svg

.append("text")

.attr("x", -(height / 2))

.attr("y", Math.floor(margin.left / 2))

.style("text-anchor", "middle")

.attr('transform', "rotate(-90)")

.text("Employment Rate %");

return svg.node();

}

Histagram = {

for (let i = 0; i < cases_data.length; i++) {

cases_data[i].Month = i + " - " + (i + 1);

}

let x = d3

.scaleBand()

.domain(d3.range(cases_data.length))

.range([margin.left, width - margin.right]);

let y = d3

.scaleLinear()

.domain([0, value])

.nice()

.range([height - margin.bottom, margin.top]);

let xAxis = g =>

g.attr("transform", `translate(0,${height - margin.bottom})`).call(

.axisBottom(x)

.tickFormat(i => cases_data[i].Month)

.tickSizeOuter(0)

);

let yAxis = g =>

g.attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(y));

const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);

svg

.append("g")

.selectAll("rect")

.data(cases_data)

.join("rect")

.attr("x", (d, i) => x(i))

.attr("y", d => y(d[metric]))

.attr("fill", 'steelblue')

.attr("height", d => y(0) - y(d[metric]))

.attr("width", x.bandwidth());

// append chart title label

svg

.append("text")

.attr("x", width / 2)

.attr("y", 40)

.style('text-anchor', 'middle')

.style("font-size", "20px")

.text("New Confirmed COVID-19 Cases per Month for " + `${[metric]}`);

// append x-axis label

svg

.append("text")

.attr("x", width / 2)

.attr("y", height - 20)

.style('text-anchor', 'middle')

.text('Month');

// append y-axis label

svg

.append("text")

.attr("x", -(height / 2))

.attr("y", Math.floor(margin.left / 5.5))

.style("text-anchor", "middle")

.attr('transform', "rotate(-90)")

.text("Covid-19 New Confirmed Cases");

svg.append("g").call(xAxis);

svg.append("g").call(yAxis);

return svg.node();

}

function length(path) {

return d3.create("svg:path").attr("d", path).node().getTotalLength();

}

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.

Learn more