A ♥ for data visualization + interaction
Published
Edited
Aug 31, 2020
9 stars
d3 = require("d3@5");
carData = {
yield fetch("https://vega.github.io/editor/data/cars.json")
.then(result => result.json());
}
svg`
<svg id="canvas">
<g class="vis">
<g class="marks"></g>
<g class="axis x"></g>
<g class="axis y"></g>
</g>
</svg>
`
width = 1000
height = 750
margin = 20
canvas = d3.select("#canvas")
.attr("width", width)
.attr("height", height);
marks = canvas.select(".vis .marks");
scaleX = d3.scaleLinear()
.domain([0, d3.max(carData.map(d => d[xEncoding]))])
.range([0, width - 2*margin]);
scaleY = d3.scaleLinear()
.domain([0, d3.max(carData.map(d => d[yEncoding]))])
.range([height - 2*margin, 0]);
axisX = d3.axisBottom(scaleX);
axisY = d3.axisLeft(scaleY);
{
d3.select("g.axis.x")
.call(axisX)
.attr("transform", `translate(0, ${height - margin - margin})`);
d3.select("g.axis.y").call(axisY);
}
pointMark = {
d3.select(".vis").attr("transform", `translate(${margin}, ${margin})`);
yield marks.selectAll("circle.point").data(carData)
.join("circle")
.attr("class", "point")
.attr("fill", "steelblue")
.attr("fill-opacity", 0.73)
.attr("r", 5)
.attr("cx", d => scaleX(d[xEncoding]))
.attr("cy", d => scaleY(d[yEncoding]));
}
{
const maxDomainHorizontal = d3.max(carData.map(d => d[xEncoding]));
scaleX.domain([0, maxDomainHorizontal]);
marks.selectAll("circle.point")
.attr("cx", d => scaleX(d.Displacement));
}
xEncoding = "Horsepower"
yEncoding = "Miles_per_Gallon"
// your code goes here:
myEncoding = "Origin"
// your code goes here:
// (make sure the scale is a notebook variable like the other scales above)
colorScale = d3.scaleOrdinal(d3.schemeCategory10).domain(["USA", "Japan", "Europe"])
// your code goes here:
pointMark.attr("fill", d => colorScale(d[myEncoding]))
/*
{
// zoom modifies the scales by applying a transformation to it
// this transform is however cumulative, so we need to maintain a copy
// of the original scales to not overemphasize interactions
// try replacing the scaleXCopy inside the zoom event listener to see
// how that influences the behavior of the zoom
const scaleXCopy = scaleX.copy();
const scaleYCopy = scaleY.copy();
// generator function for zoom
const zoom = d3.zoom()
.on("zoom", () => {
// applying the zoom transformation to the vertical and horizontal
// scales
const rescaledX = d3.event.transform.rescaleX(scaleXCopy);
const rescaledY = d3.event.transform.rescaleY(scaleYCopy);
// updating the point mark
marks.selectAll("circle.point")
.attr("cx", d => rescaledX(d.Horsepower))
.attr("cy", d => rescaledY(d.Miles_per_Gallon));
// reconfiguring the axis generators
axisX.scale(rescaledX);
axisY.scale(rescaledY);
// redrawing the axes
d3.select("g.axis.x").call(axisX)
d3.select("g.axis.y").call(axisY);
});
// calling the zoom generator on a rectangle selection. All zoom events on
// this rectangle receives all zoom events and is not influenced by the
// transformation, thus it always stays in place.
canvas.append("rect")
.attr("id", "zoomHelper")
.attr("fill", "transparent")
.attr("width", width)
.attr("height", height)
.call(zoom);
}
*/
/*
{
const tooltip = d3.select(".vis .tooltip");
let res = null;
pointMark.on("mouseenter", d => {
res = d;
console.log(d);
})
yield res;
}
*/
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.
