UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues.
Published
Edited
May 19, 2020
Importers
// change the colums on either 'Users' or 'In-Game'
user = 'InGame'
// the raw data
daily_play = d3
.csvParse(await FileAttachment("chart@1.csv").text(), d3.autoType)
.slice(-138)
beg = daily_play[0][user]
march = daily_play[60][user]
current = daily_play[137][user]
// use this one
daily_recent_data = {
//const parseDate = d3.timeParse("%Y%m%d");
const data = d3.csvParse(
await FileAttachment("chart_revised.csv").text(),
d => ({
date: formatDate(d.date),
value: +d["InGame"]
}),
d3.autoType
);
data.y = "# Users";
return data;
}
function formatDate(date) {
var d = new Date(date);
return d;
}
x_line2 = d3
.scaleUtc()
.domain(d3.extent(daily_recent_data, d => d.date))
.range([margin.left, width - margin.right])
y_line2 = d3
.scaleLinear()
.domain([0, d3.max(daily_recent_data, d => d.value)])
.nice()
.range([height - margin.bottom, margin.top])
xAxis_line2 = g =>
g.attr("transform", `translate(0,${height - margin.bottom})`).call(
d3
.axisBottom(x_line2)
.ticks(width / 80)
.tickSizeOuter(0)
)
yAxis_line2 = g =>
g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y_line2))
.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(daily_recent_data.y)
)
line = d3
.line()
.x(d => x_line2(d.date))
.y(d => y_line2(d.value))
import { chart as daily_bar_chart } with {
daily_bar_data as data
} from '@d3/bar-chart'
import { chart2, metric, pie_chart } from "@skymrsn/assignment-2"
d3 = require('d3')
import { render_data_table } from "@info474/utilities"
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.
