UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues.
Published
Edited
May 13, 2021
1 fork
1 star
// chart = {
// const svg = d3.create("svg").attr("viewBox", [0, 0, 800, 800]);
// svg
// .append("g")
// .attr("fill", "steelblue")
// .selectAll("rect")
// .data(sorted_top_ten)
// .join("rect")
// .attr("x", (d, i) => x(i))
// .attr("y", d => y(d.value))
// .attr("height", d => y(0) - y(d.value))
// .attr("width", x.bandwidth());
// svg
// .append("g")
// .call(xAxis)
// .selectAll("text")
// .style("text-anchor", "end")
// .attr("transform", function(d) {
// return "rotate(-30)";
// });
// svg.append("g").call(yAxis);
// return svg.node();
// }
// x = d3
// .scaleBand()
// .domain(d3.range(sorted_top_ten.length))
// .range([margin.left, width - margin.right])
// .padding(0.2)
// xAxis = g =>
// g.attr("transform", `translate(0,${height - margin.bottom})`).call(
// d3
// .axisBottom(x)
// .tickFormat(i => sorted_top_ten[i].name)
// .tickSizeOuter(0)
// )
// y = d3
// .scaleLinear()
// .domain([0, d3.max(sorted_top_ten, d => d.value)])
// .nice()
// .range([height - margin.bottom, margin.top])
// yAxis = g =>
// g
// .attr("transform", `translate(${margin.left},0)`)
// .call(d3.axisLeft(y).ticks(null, sorted_top_ten.format))
// .call(g => g.select(".domain").remove())
// .call(g =>
// g
// .append("text")
// .attr("x", -margin.left)
// .attr("y", 10)
// .attr("fill", "currentColor")
// .attr("text-anchor", "start")
// .text(sorted_top_ten.y)
// )
comments.comments.forEach(
obj => (obj.timestamp = new Date(obj.timestamp * 1000))
)
comments_last_year = {
let comments_last_year = [];
let currDate = new Date();
const oneyear = 31556952000;
for (let i = 0; i < comments.comments.length; i++) {
let data = comments.comments[i];
let date = data.timestamp;
if (currDate - date < oneyear) {
comments_last_year.push(data);
}
}
yield comments_last_year;
}
comments_last_year.forEach(
obj =>
(obj.timestamp = new Date(
obj.timestamp.getFullYear(),
obj.timestamp.getMonth(),
obj.timestamp.getDate()
))
)
comment_map = d3.rollup(
comments_last_year,
v => d3.count(v, d => d.timestamp),
d => d.timestamp
)
testDate = new Date("2021-04-25T00:00")
comment_map.get(testDate)
comment_data = []
comment_map.forEach((value, key) => {
comment_data.push({ key, value });
})
import { TimeChart, TimeAxis } from "@observablehq/timechart"
import { disposal } from "@observablehq/inputs"
interval = d3.utcMinute.every(200)
stop = new Date("2021-04-25T00:00")
start = new Date("2020-05-04T00:00")
TimeAxis({ interval, start, stop })
md`## Bar Chart - Facebook Reactions`
reactions_data.reactions.forEach(
obj => (obj.timestamp = new Date(obj.timestamp * 1000))
)
reactions_data.reactions[0]
reactions_last_year = {
let reactions_last_year = [];
let currDate = new Date();
const oneyear = 31556952000;
for (let i = 0; i < reactions_data.reactions.length; i++) {
let data = reactions_data.reactions[i];
let date = data.timestamp;
if (currDate - date < oneyear) {
reactions_last_year.push(data);
}
}
yield reactions_last_year;
}
chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, 800, 800]);
svg
.append("g")
.attr("fill", "steelblue")
.selectAll("rect")
.data(reaction_count)
.join("rect")
.attr("x", (d, i) => x(i))
.attr("y", d => y(d.value))
.attr("height", d => y(0) - y(d.value))
.attr("width", x.bandwidth());
svg
.append("g")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("transform", function(d) {
return "rotate(-30)";
});
svg.append("g").call(yAxis);
return svg.node();
}
margin = ({ top: 30, right: 0, bottom: 30, left: 40 })
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.
