Woman, computer scientist, introvert, daughter of an immigrant, and Associate Professor at the University of San Francisco.
types = d3.set(letters, d => d.type);
x = {
return d3.scaleLinear()
.domain(d3.extent(letters, d => d.frequency))
.range([2 * r, width - 2 * r]) // pad by circle radius
.nice();
}
y = {
return d3.scaleLinear()
.domain(d3.extent(letters, d => d.points))
.range([height - 2 * r, 2 * r]) // pad by circle radius
.nice();
}
color = {
return d3.scaleOrdinal(d3.schemeSet2).domain(types.values());
}
swatches({
color: color
})
vis = {
const svg = d3.select(DOM.svg(width, height));
svg.style("border", "1px solid #bbbbbb");
const g = svg.append("g").attr("id", "circles");
g.selectAll("circle")
.data(letters)
.enter()
.append("circle")
.attr("cx", d => x(d.frequency))
.attr("cy", d => y(d.points))
.attr("r", r)
.style("fill", d => color(d.type));
svg.append("g").attr("id", "annotation");
return svg.node();
}
highlight = {
const svg = d3.select(vis);
const status = html`<code>highlight: none</code>`;
// TODO
return status;
}
hover1 = {
const svg = d3.select(vis);
const status = html`<code>hover: none</code>`;
// TODO
return status;
}
hover2 = {
const svg = d3.select(vis);
const status = html`<code>hover: none</code>`;
// TODO
return status;
}
brush1 = {
const svg = d3.select(vis);
const status = html`<code>brush: none</code>`;
// TODO
return status;
}
brush2 = {
const svg = d3.select(vis);
const status = html`<code>brush: none</code>`;
// TODO
return status;
}
drag = {
const svg = d3.select(vis);
const status = html`<code>drag: none</code>`;
// TODO
return status;
}
circles = d3.select(vis).select("g#circles").selectAll("circle");
annotations = d3.select(vis).select("g#annotation");
html`
<style>
circle {
stroke: white;
stroke-width: 2px;
}
text, .tooltip {
font-family: sans-serif;
font-size: 10pt;
}
.dim {
fill-opacity: 0.3;
}
.tooltip {
position: absolute;
width: auto;
height: auto;
padding: 8px;
background: #ddd;
pointer-events: none;
border: 1px solid #eee;
border-radius: 10px;
}
</style>
`
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.
