chosenTempYear = 2019;
chosenTempTerm = "China Virus";
tempData = generateMonthlyCountsDataByYear(chosenTempYear, chosenTempTerm);
height = 500
width = 1400
margin = Object({top: 40, right: 250, bottom: 60, left: 60})
week = Array.from(slursUsed.map(d => d.Week));
monthYearArray = Array.from(new Set(week.map(dateString => dateString.split('-').slice(0, 2).join('-'))));
yearsOnly = Array.from(new Set(week.map(dateString => dateString.split('-')[0])));
monthOnly = Array.from(new Set(week.map(dateString => dateString.split('-')[1])));
uniqueMonths = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
x = d3.scaleBand()
.domain(uniqueMonths)
.range([margin.left, width - margin.right])
.padding(0.1);
graph = {
const svg = d3.create('svg')
.attr('width', width)
.attr('height', height);
svg.append('g')
.attr('transform', `translate(0, ${height - margin.bottom})`)
.call(d3.axisBottom(x))
.append("text")
.attr("text-anchor", 'end')
.attr('fill', 'black')
.attr("font-size", '12px')
.attr("font-weight", 'bold')
.attr("x", width - margin.right)
.attr('y', '30')
.text("Months");
svg.append('g')
.attr('transform', `translate(${margin.left}, 0)`)
.call(d3.axisLeft(y))
.append("text")
.attr("transform", `translate(-30, ${margin.top}) rotate (-90)`)
.attr("text-anchor", 'end')
.attr('fill', 'black')
.attr("font-size", '12px')
.attr("font-weight", 'bold')
.text("Term Popularity (in %)");
svg.selectAll("rect")
.data(slursUsed)
.join("rect")
.attr("x", (d) => x(d[0]))
.attr("y", (d) => y(d[1]))
.attr("height", d => height - margin.bottom - y(d[1]))
.attr("width", x.bandwidth())
.append('title')
.text(d => `Term: ${termSelector}\nYear: ${parseInt(yearSelector)}`);
const bars = svg
.attr("fill", "steelblue")
.selectAll("rect")
.data(Object.entries(generateMonthlyCountsDataByYear(parseInt(yearSelector), termSelector)))
.join("rect")
.attr("x", (d) => x(d[0]))
.attr("y", (d) => y(d[1]))
.attr("height", d => height - margin.bottom - y(d[1]))
.attr("width", x.bandwidth())
update();
function update() {
const newYearData = generateMonthlyCountsDataByYear(parseInt(yearSelector), termSelector);
bars
.data(Object.entries(newYearData))
.transition()
.duration(1000)
.ease(d3.easeCubic)
.attr('x', d => x(d[0]))
.attr('y', d => y(d[1]))
.attr("height", d => height - margin.bottom - y(d[1]))
.attr("width", x.bandwidth())
}
return Object.assign(svg.node());
}
slursOnly = Object.keys(slursUsed[0]).filter(key => key !== "Week");
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.
