UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues.
Published
Edited
Oct 13, 2020
1 fork
scaleBand = {
return d3
.scaleBand()
.domain(categories)
.range([0, 60]);
}
viewof select = DOM.select(categories)
scaleBand(select)
// make an array of objects with colors and random heights for easy d3 handline
data = [
{
color: "red",
height: 50
},
{
color: "blue",
height: 280
},
{
color: "green",
height: 200
}
]
simple_bar_chart = {
const svg = // define and create an svg with width = 300, height = 300
const yScale = // define a linear scale using scaleLinear with a domain STARTING at 300 and ending at 0. Give the scale a range from 30 to 270 pixels
const yAxis = d3.axisLeft().scale(yScale);
// append y-axis
svg
.append('g')
.call(yAxis)
.attr('transform', 'translate(30,0)'); // shift y-axis left 30
// scaleBand. <- use .range to overwrite and update the range of scaleBand. Give it a range of 30 to 270
const xAxis = d3.axisBottom().scale(scaleBand);
svg
.append('g')
.call(xAxis)
.attr('transform', 'translate(0, 270)');
svg
.selectAll(// fill in the correct param)
.data(// fill in the correct data param)
.join(// use enter to a 'rect' for each object of data)
.attr('x', d => // use scaleBand to return the appropriate x value for each bar)
.attr('y', d => yScale(d.height))
.attr('width', scaleBand.bandwidth())
.attr('height', d => yScale(0) - yScale(d.height))
.attr('fill', d => d.color);
return svg.node();
}
sortedArr = {
const arr = [9, 2, 4, 21, 42, 68];
// you might notice this looks like a compareTo function in Java
function compare(a, b) {
if (a < b) {
return -1;
} else if (a == b) {
return 0;
} else {
// b > a
return 1;
}
}
return arr.sort(compare);
}
md`_Use \`.sort\` to sort the data array by height in descending order_`
d3 = require('d3@5')
import {
render_data_table,
table_styles,
displayImage,
displayCaution
} from '@info474/utilities'
html`<style>
p code, li > code {color: #c30771;}
</style>
`
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.
