Building and Using Tools to See.
UVA Architecture + Data Science. IT Director. Instructor.
<div>
<svg width="600" height="300">
<g id="layer1"></g>
</svg>
<div id="tooltip"></div>
<style>
#tooltip {position: absolute; z-index: 100; padding: 2px 8px; background-color: rgba(220,220,220,0.7); border: 1px solid #aaa; border-radius: 5px; font-family: Arial, sans-serif; font-size: 12px;}
#tooltip .TTtitle {font-size: 15px; font-weight: bold;}
#tooltip .TTsubtitle {font-weight: bold;}
</style>
</div>
data = [
{name: "one", value: 1},
{name: "two", value: 2},
{name: "three", value: 3},
{name: "four", value: 4},
{name: "five", value: 5}
]
circles = viz.select("#layer1").selectAll(".mycircle")
.data(data)
.join("circle")
.classed("mycircle", true)
.attr("cx",d => d.value * 100)
.attr("cy", 150)
.attr("r", d => d.value * 10)
.style("fill","steelblue")
.on("mousemove", (e,d) => tooltip.show(e,d,ttOptions))
.on("mouseout", () => tooltip.hide())
import {dvTooltip} from "@emfielduva/dvlib_ui"
tooltip = new dvTooltip(d3.select(container).select("#tooltip"))
// options to define and control the tooltip
ttOptions = ({
title: {dataName: "name"},
subtitle: {dataName: "name"},
fields: [
{displayName: "My Name", dataName: "name", prefix: "", suffix: ""},
{displayName: "My Value", dataName: "value", prefix: "", suffix: " some_units"}
]
})
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.
