md`# Scatter plots`
d3 = require("d3@6")
html`
<style>
.axis {
color: white;
font-size: 10px;
}
</style>
`
newDataPoints = html`<button>Click here for new data</button>`
scatterPlot = {
let w = 550;
let h = 350;
const margin = ({top: 20, right: 20, bottom: 20, left: 30}) // Note that you have to input all four dimensions. You cannot only specify: const margin = ({top}) !!
const numDataPoints = 50;
let maxRange = Math.random() * 1000;
let dataset = []; // You cannot use const here
for (let i = 0; i < numDataPoints; i++) {
let newNumber1 = Math.floor(Math.random() * maxRange);
let newNumber2 = Math.floor(Math.random() * maxRange);
dataset.push([newNumber1, newNumber2])
}
let xScale = d3.scaleLinear()
.domain([0, d3.max(dataset, d => d[0])]) // This should be in the form of .domain([a, b])
.range([margin.left, w - margin.right]); // This should be in the form of .range([a, b])
let yScale = d3.scaleLinear()
.domain([0, d3.max(dataset, d => d[1])])
.range([h - margin.bottom, margin.top]);
let xAxis = d3.axisBottom()
.scale(xScale)
.ticks(5);
let yAxis = d3.axisLeft()
.scale(yScale)
.ticks(5);
const svg = d3.create("svg").attr("width", w).attr("height", h).style("background-color", "black");
let circles = svg.selectAll("circle")
.data(dataset)
.join("circle")
.attr("cx", d => xScale(d[0]))
.attr("cy", d => yScale(d[1]))
.attr("r", 2)
.style("fill", "white");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate (0, "+ (h - margin.bottom) + ") ")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate ("+ margin.left +", 0)")
.call(yAxis);
d3.select(newDataPoints) // No need to use "" here. Why?
.on("click", function () {
let numValues = dataset.length;
maxRange = Math.random() * 1000;
dataset = []; //Note that you cannot use `let dataset = []`
for (let i = 0; i < numValues; i++) {
let newNumber1 = Math.floor(Math.random() * maxRange);
let newNumber2 = Math.floor(Math.random() * maxRange);
dataset.push([newNumber1, newNumber2])
};
xScale.domain([0, d3.max(dataset, d => d[0])]);
yScale.domain([0, d3.max(dataset, d => d[1])]);
svg.selectAll("circle")
.data(dataset)
.transition()
.duration(1000) //in milliseconds. 1000 ms is 1 second.
.attr("cx", d => xScale(d[0]))
.attr("cy", d => yScale(d[1]))
xAxis.scale(xScale); // Is this necessary?
yAxis.scale(yScale); // Is this necessary?
svg.select(".x.axis")
.transition()
.duration(1000)
.call(xAxis)
svg.select(".y.axis")
.transition()
.duration(1000)
.call(yAxis)
})
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.
