Published
Edited
Jul 12, 2020
axis = {
const x = d3.axisBottom(scale.x)
.ticks(width / 120)
.tickPadding(6)
.tickSizeOuter(0)
.tickSizeInner(0)
.tickFormat(d3.timeFormat('%-I:%M %p'));
const y = d3.axisLeft(scale.y)
.ticks(10, "d")
.tickPadding(6)
.tickSizeOuter(0)
.tickSizeInner(0);
return {x: x, y: y};
}
scale = {
const x = d3.scaleUtc()
.domain(d3.extent(data, d => d.finishedTime)).nice()
.range([0, params.plot.width]);
const y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.wpm)]).nice()
.range([params.plot.height, 0]);
const size = d3.scaleSqrt()
.domain(d3.extent(data, d => d.words))
.range([5, width / 32]);
const color = d3.scaleOrdinal()
.domain(d3.map(data, d => d.revisionMode))
.range(["#4EA376", "#9885D5"])
return {x: x, y: y, size: size, color: color}
}
params = {
let output = {};
output["svg"] = {
"width": width,
"height": d3.max([width / 1.618, 450]) // golden ratio
};
output["margin"] = {
"top": 72,
"right": 32,
"bottom": 60,
"left": 48
};
output["plot"] = {
"x": output["margin"]["left"],
"y": output["margin"]["top"],
"width": output["svg"]["width"] - output["margin"]["left"] - output["margin"]["right"],
"height": output["svg"]["height"] - output["margin"]["top"] - output["margin"]["bottom"]
};
return output;
}
typographyStyles = html`<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');
text {
fill: #282541;
font: 400 12px/1.4 "Noto Sans", sans-serif;
}
#title {
fill: #282541;
font: 700 16px/1.4 "Noto Sans", sans-serif;
}
`
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.
