Public
Edited
Sep 11, 2018
2 forks
{
const container = d3.select(DOM.svg(width+margin.left+margin.right, height+margin.top+margin.bottom));
const svg = container.append('g')
.attr('width', width)
.attr('height', height)
.attr('transform', 'translate(' + margin.left + '.' + margin.top + ')');
svg.append("g")
.call(xAx);
svg.append("g")
.call(yAx);
svg.append("g")
.attr("stroke", "#000")
.attr("stroke-opacity", 0.2)
.selectAll("circle")
.data(data.filter(a => a.name === r)[0].data)
.enter().append("circle").transition().duration(300)
.attr("cx", (d,i) => xScale(d.x))
.attr("cy", (d,i) => yScale(d.y))
.attr("fill", (d,i) => col(d.y))
.attr("r", 3.5);
return container.node();
}
xAx = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(xScale).ticks(width / 80))
yAx = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(yScale).ticks(6))
.call(g => g.append("text")
.attr("fill", "#000")
.attr("x", 5)
.attr("y", margin.top)
.attr("dy", "0.32em")
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text(`${r} Data`))
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.
