Public
Edited
Apr 24
{
const height = width/10;
const radius = 10;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
// create a point at a random position
const point = svg.append('circle')
.attr('r', radius)
.attr('cx', Math.random() * width)
.attr('cy', Math.random() * height);
// get the button
const button = d3.select("#clickableButton")
// add the click event
button.on("click", () => {
point
.transition() // <-- this is where the magic happens
.attr('cx', Math.random() * width)
.attr('cy', Math.random() * height);
})
return svg.node();
}
{
const height = width/10;
const radius = 10;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
// create a point at a random position
const point = svg.append('circle')
.attr('r', radius)
.attr('cx', Math.random() * width)
.attr('cy', Math.random() * height);
// get the button
const button = d3.select("#clickableButton2")
// add the click event
button.on("click", () => {
point
.transition() // <-- this is where the magic happens
.duration(2000)
.delay(20)
.ease(d3.easeCubicInOut)
.attr('cx', Math.random() * width)
.attr('cy', Math.random() * height);
})
return svg.node();
}
{
const height = width/10;
const radius = 10;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
// create a point at a random position
const point = svg.append('circle')
.attr('r', radius)
.attr('cx', Math.random() * width)
.attr('cy', Math.random() * height)
.on("click", () => {
point
.transition() // <-- this is where the magic happens
.duration(2000)
.delay(20)
.ease(d3.easeCubicInOut)
.attr('cx', Math.random() * width)
.attr('cy', Math.random() * height)
// we change the color to red during the animation
.on('start', _ => {
point.style('fill', 'red');
})
// we add a callback that triggers once the animation finishes
.on('end', _ => {
point.style('fill', 'black');
});
})
return svg.node();
}
{
// standard plot setup
const width = 1000;
const height = 300;
const margin = {top:20, bottom: 35, left:35, right:5};
const radius = 2;
// get some data, the cars, for example
const data = cars;
// create the scatter plot
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
// create scales
// we do not add the domains yet, because we do not know the attributes yet
const scaleX = d3.scaleLinear().range([margin.left, width - margin.right]);
const scaleY = d3.scaleLinear().range([height - margin.bottom, margin.top]);
// initialize the axis and labels
const axisX = svg.append('g')
.attr('transform', `translate(0, ${height - margin.bottom})`);
const labelX = axisX.append('text')
.attr('x', scaleX.range()[1])
.attr('y', margin.bottom - 5)
.style('fill', 'black')
.style('text-anchor', 'end');
const axisY = svg.append('g')
.attr('transform', `translate(${margin.left}, 0)`);
const labelY = axisY.append('text')
.attr('x', 0)
.attr('y', margin.top - 5)
.style('fill', 'black')
.style('text-anchor', 'middle');
// the x and y attributes
let attributeX = 'power (hp)';
let attributeY = 'economy (mpg)';
// get the select boxes and add the callback that triggers on changing the attribute
const selectX = d3.select('#attributeX');
const selectY = d3.select('#attributeY');
// add all of the possible attributes
selectX.selectAll('option')
.data(Object.keys(data[0]).filter(d => d != 'name'))
.join('option')
.text(d => d);
selectY.selectAll('option')
.data(Object.keys(data[0]).filter(d => d != 'name'))
.join('option')
.text(d => d);
// add the callback on change:
selectX.on('change', function(e) {
attributeX = this.value;
draw_scatterplot();
});
selectY.on('change', function(e) {
attributeY = this.value;
draw_scatterplot();
});
// make the initial draw
draw_scatterplot();
function draw_scatterplot() {
scaleX.domain(d3.extent(data, d => d[attributeX]));
scaleY.domain(d3.extent(data, d => d[attributeY]));
// add X axis
axisX.call(d3.axisBottom(scaleX));
labelX.text(attributeX);
// add Y axis
axisY.call(d3.axisLeft(scaleY))
labelY.text(attributeY);
// plot points
svg.selectAll('circle')
.data(data)
.join('circle')
.attr('r', radius)
.attr('cx', d => scaleX(d[attributeX]))
.attr('cy', d => scaleY(d[attributeY]));
}
// get the node to plot it in Observable
return svg.node();
}
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.
