The end-to-end solution for building and hosting better data apps, dashboards, and reports.
viewof ydim = Inputs.select([
"bill_depth_mm",
"flipper_length_mm",
"body_mass_g"
], { label: "Y dimension" })
chart = scatterUpdate(data)
ydim
chart.update((d) => d[ydim]) // we pass in an anonymous function
data = d3.csv( "https://raw.githubusercontent.com/allisonhorst/palmerpenguins/master/inst/extdata/penguins.csv",
d3.autoType // this will automatically convert the CSV text into numbers and dates as appropriate
)
function scatterUpdate(data, {
width = 640,
height = 400,
margin = 20,
x = (d) => d.bill_length_mm,
y = (d) => d.bill_depth_mm,
} = {}) {
const xScale = d3.scaleLinear()
.domain(d3.extent(data, x))
.range([margin, width - margin])
const yScale = d3.scaleLinear()
.domain(d3.extent(data, y))
.range([height - margin, margin])
var svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
svg.selectAll("circle")
.data(data)
.join("circle")
.attr("cx", d => xScale(x(d)))
.attr("cy", d => yScale(y(d)))
.attr("r", 5)
let domElement = svg.node()
// We define the update function which we can then call from another cell
domElement.update = function(updateY) {
// in this case we are expecting a function that will give us a y accessor
y = updateY
yScale.domain(d3.extent(data, y))
svg.selectAll("circle")
.data(data)
.join("circle")
.transition()
.attr("cx", d => xScale(x(d)))
.attr("cy", d => yScale(y(d)))
.attr("r", 5)
}
return domElement
}
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.
