Department of Computer Science, Virginia Tech
<svg width=400 height=200 style="border:1px solid black">
<rect x=50 y=50 width=200 height=100 fill='blue' />
<circle cx=100 cy=100 r=50 fill='green' />
</svg>
// From D3 Visualization notes...
//// = new stuff
chart = {
// Define and select the SVG
let svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("border", "1px solid black");
//// Define details-on-demand tag here
let rects = svg
// MARKS: maps data rows to rects
.selectAll("rect")
.data(data)
.join("rect") // creates new rects for each data row
// CHANNELS: maps data columns to rect attributes
.attr("x", (r) => xScale(r.Abbrev))
.attr("width", xScale.bandwidth() - 1)
.attr("y", (r) => yScale(r.PercentCollegeGrad))
.attr("height", (r) => yScale(0) - yScale(r.PercentCollegeGrad))
.style("fill", "steelblue");
//// Interaction events
//// Drag or Brush interactions:
//setupDrag(svg, rects);
//setupBrush(svg, rects);
//// Interactive updates from other widgets
return svg.node();
}
// mutable = can be modified by other cells
function setupBrush(svg, rects) {
// D3 Brush API
const brush = d3.brush().on("start brush end", brushing);
//.extent([[margin.left, margin.top], [width - margin.right, height - margin.bottom]])
svg.append("g").call(brush); // Create brush and regiser events
// Brush event callback function
function brushing(event) {
if (event.selection) {
//console.log(event.selection);
const [[left, top], [right, bottom]] = event.selection; // The brush pixel coordinates
//// do brush stuff here...
}
}
}
function setupDrag(svg, rects) {
// D3 Drag API
const drag = d3.drag().on("start drag end", dragging);
rects.call(drag); // register drag events on all rects
// Drag event callback function
function dragging(event, d) {
//// do drag stuff here... 'this' is the dragged element
}
}
// Create the widget
// reference the widget value
// update the visualization
// Data => Pixel
scale(0)
// Pixel => Data
scale.invert(50)
{
let svg = d3
.create("svg")
.attr("width", 600)
.attr("height", 100)
.style("border", "0.1px solid lightgrey"); // offsetX is off by border width?
//// Add mouse events here
drawAxis(svg, scale, "bottom", 50);
let rect = svg
.append("rect")
.attr("x", scale(100000))
.attr("width", scale(200000) - scale(100000))
.attr("y", 10)
.attr("height", 40)
.attr("fill", "steelblue");
return svg.node();
}
import { drawAxis } from "@chrislnorth/simple-axis-drawing"
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.
