Data visualization software enginner: working to make visualization more accessible, equitable, and impactful.
Published
Edited
May 26, 2019
1 star
// Define some global settings for the chart
settings = ({
margin:{top: 50, right: 40, bottom: 50, left: 60},
height:500,
width:900,
delay:1000
})
scales = {
// Determine min/max x and y values
let xMin = d3.min(data, (d) => d.x);
let xMax = d3.max(data, (d) => d.x);
let yMin = d3.min(data, (d) => d.y);
let yMax = d3.max(data, (d) => d.y);
// Create scales using the domain of your data, and the visual range of the settings
let xScale = d3.scaleLinear().domain([xMin, xMax]).range([0, settings.width]);
let yScale = d3.scaleLinear().domain([yMin, yMax]).range([settings.height, 0]);
return {
x: xScale,
y:yScale
}
}
// Creating an svg
svg = {
let fullWidth = settings.width + settings.margin.left + settings.margin.right;
let fullHeight = settings.height + settings.margin.top + settings.margin.bottom;
const svg = d3.select(DOM.svg(fullWidth, fullHeight)).style("background-color", "lightgray")
return(svg.node())
}
// Add circles to the svg
circles = {
// Append SVG, and g to hold markers
let fullWidth = settings.width + settings.margin.left + settings.margin.right;
let fullHeight = settings.height + settings.margin.top + settings.margin.bottom;
const svg = d3.select(DOM.svg(fullWidth, fullHeight));
const g = svg.append("g")
.attr("transform", "translate(" + settings.margin.left + "," + settings.margin.top + ")");
// Join data to the selection of elements and append circles, setting positions using scales
let circles = g.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", (d) => scales.x(d.x))
.attr("cy", (d) => scales.y(d.y))
.attr("r", 5)
return svg.node()
}
// Add circles to the svg
labeled = {
// Append SVG, and g to hold markers
let fullWidth = settings.width + settings.margin.left + settings.margin.right;
let fullHeight = settings.height + settings.margin.top + settings.margin.bottom;
const svg = d3.select(DOM.svg(fullWidth, fullHeight));
const g = svg.append("g")
.attr("transform", "translate(" + settings.margin.left + "," + settings.margin.top + ")");
// Join data to the selection of elements and append circles, setting positions using scales
let circles = g.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", (d) => scales.x(d.x))
.attr("cy", (d) => scales.y(d.y))
.style("opacity", .3)
.attr("r", 5)
// X Axis
svg.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(" + settings.margin.left + "," + (settings.height + settings.margin.top) + ")")
.call(d3.axisBottom(scales.x));
// X axis label
svg.append("text")
.text("Percent College Educated")
.attr("dx", settings.width / 2)
.attr("dy", settings.height + settings.margin.top + settings.margin.bottom - 10)
// Y Axis
svg.append("g")
.attr("class", "axis axis--y")
.attr("transform", "translate(" + settings.margin.left + "," + settings.margin.top + ")")
.call(d3.axisLeft(scales.y));
// Y Axis label
svg.append("text")
.text("Percent Adult Poverty")
.attr("x", -settings.height/2 - settings.margin.top)
.attr("transform", "rotate(-90)")
.style("text-anchor", "middle")
.attr("y", settings.margin.left -40)
return svg.node()
}
// Add circles to the svg
animated = {
// Append SVG, and g to hold markers
let fullWidth = settings.width + settings.margin.left + settings.margin.right;
let fullHeight = settings.height + settings.margin.top + settings.margin.bottom;
const svg = d3.select(DOM.svg(fullWidth, fullHeight));
const g = svg.append("g")
.attr("transform", "translate(" + settings.margin.left + "," + settings.margin.top + ")");
// Join data to the selection of elements and append circles, setting positions using scales
let circles = g.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", 0)
.style("opacity", .3)
.attr("cy", (d) => scales.y(d.y))
.attr("r", 5)
// X Axis
svg.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(" + settings.margin.left + "," + (settings.height + settings.margin.top) + ")")
.call(d3.axisBottom(scales.x));
// X axis label
svg.append("text")
.text("Percent College Educated")
.attr("dx", settings.width / 2)
.attr("dy", settings.height + settings.margin.top + settings.margin.bottom - 10)
// Y Axis
svg.append("g")
.attr("class", "axis axis--y")
.attr("transform", "translate(" + settings.margin.left + "," + settings.margin.top + ")")
.call(d3.axisLeft(scales.y));
// Y Axis label
svg.append("text")
.text("Percent Adult Poverty")
.attr("x", -settings.height/2 - settings.margin.top)
.attr("transform", "rotate(-90)")
.style("text-anchor", "middle")
.attr("y", settings.margin.left -40)
// Export function to transition elements
svg.node().transition = () => {
g.selectAll("circle")
.attr("cx", 0)
.transition()
.duration(1000)
.delay((d) => scales.x(d.x))
.attr("cx", (d) => scales.x(d.x))
.attr("cy", (d) => scales.y(d.y))
}
return svg.node()
}
import {chart} from "@mkfreeman/animated-scale-diagram"
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.
