UW | Data Visualization TA
width
height = 400
chartWidth = width/2
margins = ({
top: 60,
right: 30,
bottom: 30,
left: 80
})
emptyCanvas = {
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
const subPlot1 = svg.append("g")
.attr("class", "emptySubPlot1");
const sublot2 = svg.append("g")
.attr("transform", `translate(${chartWidth}, 0)`)
.attr("class", "emptySubPlot2");
return svg.node();
}
updateEmptyCanvas = {
const chartsContainer = d3.select(emptyCanvas);
chartsContainer.select("g.emptySubPlot1")
.call(emptySubPlot1)
chartsContainer.select("g.emptySubPlot2")
.call(emptySubPlot2)
}
emptySubPlot1 = container => {
container.append("text")
.attr("x", chartWidth/2)
.attr("y", height/2)
.text("subplot1")
.attr("fill", "black")
}
emptySubPlot2 = container => {
container
.append("text")
.attr("x", chartWidth/2)
.attr("y", height/2)
.text("subplot2")
.attr("fill", "black")
}
import {tooltipChart as barChart} from "7630862fe4a1f037"
import {presentChart as networkChart} from "f2990e64eef48906"
canvas = {
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
const subPlot1 = svg.append("g")
.attr("class", "SubPlot1");
const sublot2 = svg.append("g")
.attr("transform", `translate(${chartWidth}, 0)`)
.attr("class", "SubPlot2");
return svg.node();
}
updateCanvas = {
const chartsContainer = d3.select(canvas);
chartsContainer.select("g.SubPlot1")
.call(barChart)
chartsContainer.select("g.SubPlot2")
.call(networkChart)
}
import {textcolor} from "@observablehq/text-color-annotations-in-markdown"
import {toc} from "@jonfroehlich/collapsible-toc"
d3 = require("d3@7")
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.
