UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues.
Published
Edited
Dec 13, 2020
1 fork
Importers
1 star
chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
svg
.append("g")
.call(xAxis)
.attr('transform', 'translate(10, 460)');
svg
.append("g")
.call(yAxis)
.attr('transform', 'translate(40, 0)');
svg.append("g");
const rectangles = svg
.selectAll()
.data(formatted_data)
.join(enter => enter.append("rect"))
//.attr('x', d => scaleBand(d.name) + 20)
.attr("x", d => x(+d.name))
//.attr('y', d => y(d.value))
.attr("y", d => {
if (d.value < 0) {
return y(0);
} else {
return y(d.value);
}
})
.transition()
.duration(1000)
// .attr('width', x.bandwidth())
.attr('width', (width - margin.left - margin.right) / 40)
.attr("height", d => Math.abs(y(0) - y(d.value)))
.attr("fill", d => color(d.key));
svg
.selectAll("rect")
.on("mouseover", function(d) {
d3.select(this).attr('fill-opacity', '1');
tooltip.style("visibility", "visible").html(`
<div>Year: ${d.target.__data__.name}</div>
<div>Album: ${cumulative_data.get(d.target.__data__.name).album}</div>
<div>Average Sentiment: ${Math.round(d.target.__data__.value * 1000) /
1000}</div>
`);
d3.select(this).attr('fill', '#eec42d');
})
// hover effects
.on("mousemove", function(e) {
tooltip
.style("top", e.pageY - 10 + "px")
.style("left", e.pageX + 10 + "px");
})
.on("mouseout", function() {
//d3.select(this).attr('fill-opacity', '0.8');
tooltip.style("visibility", "hidden");
d3.select(this)
.transition()
.attr('fill', d => color(d.key));
});
rectangles.selectAll('rect').on('click', function(d) {
d3.select(this)
.transition()
// .ease(d3.easeLinear) // See also d3.easeCubicInOut, d3.easeQuadInOut
// .duration(750) // 750 is the default duration in milliseconds.
.attr('fill', d => color(d.key)) // we can change color!
.attr('x', 250)
.attr('y', 250);
});
// x-axis label
svg
.append("text")
.text("Years")
.style("font-size", "12px")
.attr("text-anchor", "middle")
.attr("transform", "translate(500, 600)");
// y-axis label
svg
.append("text")
.text("Average Album Sentiment")
.style("font-size", "12px")
.attr("transform", "translate(10, 330) rotate(-90)");
// Chart title
svg
.append("text")
.text("Average Album Sentiment Across 40 years (1980 - 2019)")
.style("text-anchor", "middle")
.attr("transform", `translate(${width / 2}, 20)`)
.attr("font-weight", "bold")
.style("font-size", "20px");
return svg.node();
}
artists_data = {
const div = d3
.create("div")
.style("height", "300px")
.style("overflow", "scroll");
const artists = div.selectAll("p").data([...cumulative_data.entries()]);
//.data(d => [...d[1].songs.entries()]) // do the double data join with the array of songs for each artist
}
xRange = [margin.left, width - margin.right]
xScaleSorted = d3
.scaleBand()
.domain(d3.range(formatted_data.map(d => d.name).length))
.range(xRange)
// (winner_data.map['album'] = d => d.album)
new_album_map = {
let data_map1 = [];
for (let i = 0; i < formatted_data.length; i++) {
data_map1[i] = albums[i];
}
return data_map1;
}
albums = d3.map(winner_data, d => d.album)
// x = d3
// .scaleBand()
// .domain(d3.extent(formatted_data, d => d.name))
// //.domain([d3.max(formatted_data, d => d.name)])
// .range([margin.left, width - margin.right])
// yAxis = g =>
// g
// .attr("transform", `translate(${margin.left},0)`)
// .call(d3.axisLeft(y))
// .call(g => g.select(".domain").remove())
// .call(g =>
// g
// .select(".tick:last-of-type text")
// .clone()
// .attr("x", 3)
// .attr("text-anchor", "start")
// .attr("font-weight", "bold")
// .text(year_sentiment_map.y)
// )
cumulative_data = {
let results = new Map();
// create initial map culmination for each album
for (let i = 0; i < winner_data.length; i++) {
let track = winner_data[i].album_id;
let filtered_lyrics = lyrics_data.filter(d => d.album_ids == track);
if (track != "N/A") {
let culm = cumulate(
lyrics_data.filter(d => d.album_ids == track),
"track_id",
"afinn_value"
);
results.set(track, culm);
}
}
// re-format and add extra metadata to map
let results2 = new Map();
let keys = [...results.keys()];
for (let i = 0; i < keys.length; i++) {
let data = results.get(keys[i]);
let year = data[0].album;
let grouped = d3.group(data, d => d.track);
results2.set(+by_album.get(year)[0].year, {
album: year,
songs: grouped,
avg_sentiment: year_sentiment_map.get(+by_album.get(year)[0].year)
});
}
return results2;
}
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.
