Building and Using Tools to See.
UVA Architecture + Data Science. IT Director. Instructor.
Public
Edited
Feb 6, 2024
data = {
const data = [];
data.push(2);
data.push(3);
data.push(5);
data.push(7);
return data;
}
data
<svg width=${width} height="500" viewBox="0 0 ${width} 500">
<rect x="50" y="50" width="50" height="150" fill="rgb(255,0,0)" />
<rect x="50" y="200" width="50" height="300" fill="rgb(0,255,0)" />
<circle cx="75" cy="200" r="10" fill="none" stroke="blue" />
<rect x="150" y="150" width="50" height="150" fill="rgb(255,0,0)" />
<rect x="150" y="300" width="50" height="200" fill="rgb(0,255,0)" />
<circle cx="175" cy="300" r="10" fill="none" stroke="blue" />
</svg>
chart = {
const width = 640;
const height = 400;
const margin = {top: 20, right: 30, bottom: 30, left: 40};
const x = d3.scaleUtc()
.domain(d3.extent(aapl, d => d.Date))
.range([margin.left, width - margin.right]);
const y = d3.scaleLinear()
.domain([0, d3.max(aapl, d => d.Close)])
.range([height - margin.bottom, margin.top]);
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
svg.append("g")
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x));
svg.append("g")
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y));
svg.append("path")
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 1.5)
.attr("d", d3.line()
.x(d => x(d.Date))
.y(d => y(d.Close))
(aapl));
return svg.node();
}
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.
