UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues.
data = [
{
x: 50,
y: 50
},
{
x: 100,
y: 100
}
]
lineGenerator = d3
.line()
.x(d => d.x) // .x -> x values to use for line
.y(d => d.y) // .y -> y values to use for line
dString = lineGenerator(data)
html`<svg width=200 height=200>
<path d="${dString}" stroke="black"></path>
</svg>`
simple_line_example = {
const svg = d3.create('svg').attr('viewbox', [0, 0, 200, 200]);
svg
.append('path')
.datum(data)
// .data([data]) // an alternative -- the "data" bound to the selection is an array w/one element in it
.attr('stroke', 'black')
// when we use datum the whole data array is passed as "d" instead of just one object
.attr('d', d => lineGenerator(d));
// .attr('d', lineGenerator); // if you want to be really minimalist about it...
return svg.node();
}
formatTime = d3.timeParse("%b %d %Y");
stockData = rawData.map(d => {
return {
symbol: d.symbol,
price: d.price,
date: formatTime(d.date)
};
})
chart = {
const svg = d3
.create('svg')
.attr('viewBox', [0, 0, measurements.width, measurements.height]);
svg.node().update = symbol => {
svg.selectAll('*').remove(); // remove everything inside of svg before updating data
// WRITE YOUR CODE HERE
};
return svg.node();
}
chart.update(symbol)
viewof symbol = DOM.select([...new Set(stockData.map(d => d.symbol))])
html`<style>
p code, li > code {color: #c30771;}
</style>`
d3 = require('d3@5')
import {
render_data_table,
table_styles,
displayImage,
displayCaution
} 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.
