UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues.
Published
Edited
May 20, 2020
render_data_table(table_info)
chartAlternative = {
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height);
const names = [playerSelect1, playerSelect2];
const x_scale = d3
.scaleBand()
.domain([0, 1])
.range([margin.left, width - margin.right]);
const x_axis = d3
.axisBottom()
.scale(x_scale)
.tickFormat(count => names[count]);
let x_axisNames = svg
.append("g")
.attr("transform", `translate(0, ${height - margin.bottom})`);
x_axisNames.call(x_axis);
const data_scale = d3
.scaleLinear()
.domain([0, 100])
.range([height - margin.bottom, margin.top]);
const y_axis = d3.axisLeft().scale(data_scale);
let y_axisValues = svg
.append("g")
.attr("transform", `translate(${margin.left}, 0)`);
y_axisValues.call(y_axis);
//Player B
svg
.append("g")
.attr("fill", "steelblue")
.selectAll("rect")
.data(nestedData4)
.join("rect")
.transition()
.ease(d3.easeCubicIn)
.duration(400)
.attr("x", x_scale(1) + x_scale.bandwidth() / 4)
.attr("y", data_scale(nestedData4[0].children.winrate))
.attr("height", data_scale(0) - data_scale(nestedData4[0].children.winrate))
.attr("width", x_scale.bandwidth() / 2);
//Player A
svg
.append("g")
.attr("fill", "steelblue")
.selectAll("rect")
.data(nestedData3)
.join("rect")
.transition()
.ease(d3.easeCubicIn)
.duration(200)
.attr("x", x_scale(0) + x_scale.bandwidth() / 4)
.attr("y", data_scale(nestedData3[0].children.winrate))
.attr("height", data_scale(0) - data_scale(nestedData3[0].children.winrate))
.attr("width", x_scale.bandwidth() / 2);
return svg.node();
}
groupArray = [nestedData3[0], nestedData4[0]]
data = d3.csvParse(
await FileAttachment("lec_playerdata-1.csv").text(),
d3.autoType
)
d3 = require("d3@5")
_ = require("lodash@4")
import { select, radio, checkbox } from "@jashkenas/inputs"
import { swatches } from "@d3/color-legend"
height = 1000
margin = ({ top: 20, right: 30, bottom: 40, left: 50 })
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.
