Published
Edited
Sep 22, 2022
Lab 11
d3 = require("d3@7")
width1 = 100;
height = 100;
data = [{x: 20, y: 20, r: 10},
{x: 50, y: 50, r: 30},
{x: 80, y: 80, r: 10}];
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width1, height]);
svg.append('g')
.attr('fill', 'steelblue')
.selectAll('rect')
.data(data)
.join('circle')
.attr('cx', d => d.x)
.attr('cy', d => d.y)
.attr('r', d => d.r);
return svg.node();
}
import {BarChart} from "@d3/bar-chart"
alphabet = FileAttachment("alphabet.csv").csv({typed: true})
chart2 = BarChart(alphabet, {
x: d => d.letter,
y: d => d.frequency,
xDomain: d3.groupSort(alphabet, ([d]) => -d.frequency, d => d.letter), // sort by descending frequency
yFormat: "%",
yLabel: "↑ Frequency",
width,
height: 500,
color: "steelblue"
})
Plot.plot({
x: {
domain: d3.groupSort(alphabet, ([d]) => -d.frequency, d => d.letter),
label:null
},
y:{
tickFormat:".0%",
label: "↑ Frequency"
},
marks: [
Plot.barY(alphabet, {x: "letter", y: "frequency", fill: "steelblue"}),
Plot.ruleY([0])
]
})
import {LineChart} from "@d3/line-chart"
aapl = FileAttachment("aapl.csv").csv({typed: true})
chart3 = LineChart(aapl, {
x: d => d.date,
y: d => d.close,
yLabel: "↑ Daily close ($)",
width,
height: 500,
color: "steelblue"
})
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.
