Published
Edited
Nov 20, 2020
d3.groups(data,d=> d.class)
d3.rollups(data,v => d3.mean(v, d => d.sepal_length),d=> d.class)
{
const margin = 50
const height = 400
const width = 400
const canvas = d3.select(DOM.svg(width, height))
const color = d3.scaleOrdinal(d3.schemeCategory10)
const x = d3.scaleLinear().range([margin, width-margin]).domain(d3.extent(data,d=>d.sepal_width))
const xAxis = d3.axisBottom().scale(x)
canvas.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (height-margin) + ")")
.call(xAxis)
canvas.append("text")
.attr("x", width/2)
.attr("y", height-5)
.style("text-anchor", "middle")
.text("Sepal Width")
const y = d3.scaleLinear().range([height-margin , margin]).domain(d3.extent(data, (d,i) => d.sepal_length))
const yAxis = d3.axisLeft().scale(y)
canvas.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + margin + ",0)")
.call(yAxis)
canvas.append("text")
.attr("transform", "rotate(-90,15,"+(height/2)+")")
.attr("x", 15)
.attr("y", height/2)
.style("text-anchor", "middle")
.text("Sepal Length")
canvas.append("g").selectAll("circle")
.data(data)
.join("circle")
.attr("cx", d=> x(d.sepal_width))
.attr("cy", d=> y(d.sepal_length))
.attr("r", 3)
.style("stroke", d=> color(d.class) )
.style("stroke-width", 2)
.style("fill", "none")
.transition()
.delay((d,i) => i * 10)
.style("stroke-width", d=> (ch.indexOf(d.class)+1) ? 5 : 1)
return canvas.node();
}
import {select} from "@jashkenas/inputs"
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.
