Published
Edited
Mar 11, 2021
movies = await aq
.loadCSV('https://raw.githubusercontent.com/rfordatascience/tidytuesday/master/data/2021/2021-03-09/movies.csv')
movies
.derive({ profitability: m => m.domgross / m.budget })
.groupby('binary')
.rollup({
count: op.count(),
avg_profitability: m => op.mean(m.profitability)
})
.view()
// to re-use the scatterplot we need to have our data match what the plot expects
// which is possible by renaming things appropriately and
// calling the .objects function
mf = movies_filt
.derive({
name: m => m.title,
x: m => m.year,
y: m => m.profitability
})
.objects()
import {chart, x, y, height, margin, grid, yAxis}
with {mf as data}
from "@d3/scatterplot"
chart
{
const data = mf
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width + 75, height]);
svg.append("g")
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).ticks(width / 80).tickFormat(d3.format("d"))) // get rid of comma
.call(g => g.select(".domain").remove())
.call(g => g.append("text")
.attr("x", width)
.attr("y", margin.bottom - 4)
.attr("fill", "currentColor")
.attr("text-anchor", "end")
.text(data.x))
svg.append("g")
.call(yAxis);
svg.append("g")
.call(grid);
svg.append("g")
.attr("stroke", "steelblue")
.attr("stroke-width", 0)
.selectAll("circle")
.data(data)
.join("circle")
.attr("cx", d => x(d.x))
.attr("cy", d => y(d.y))
// color by test result
.attr("fill", d => color(d.binary))
.attr("r", 3);
svg.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.selectAll("text")
.data(data)
.join("text")
.attr("dy", "0.35em")
.attr("x", d => x(d.x))
// adjust anchor to be centered and beneath point
.attr("y", d => y(d.y) - 10)
.attr("text-anchor", "middle")
.text(d => d.name);
// add legend
const legend = d3Legend
.legendColor()
.shape("path", d3.symbol().type(d3.symbolCircle).size(25)()) //.shape("circle")
.shapePadding(15)
.labelOffset(5)
.scale(color)
.labels(["Pass", "Fail"]);
svg.append("g")
.attr("class", "legend_auto")
.style('font-size', 18)
.style('font-family', 'sans-serif')
.attr("transform", `translate(${width - margin.right - 30}, ${margin.top})`)
.call(legend)
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.
