Public
Edited
Nov 25, 2024
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
simulationForceColide = 33
Insert cell
hoveredData = data.filter(d => d.id === "LeBron James")
Insert cell
med = d3.median(data, d => d.value);
Insert cell
Insert cell
mutable previousPlayerNodeStyle = null;
Insert cell
Inputs.table(nba)
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
Insert cell
nba_stats@2.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
topData = nba.sort(function(a, b) {
return d3.descending(+a.pts, +b.pts);
}).slice(0, 75);
Insert cell
Insert cell
data = topData.map(d => ({ value: Number(d[form.stat]), id: d.name, headshot:d.player_image }))
Insert cell
Insert cell
Insert cell
Insert cell
xAxis = d3.axisBottom(xScale).ticks(20)
Insert cell
xMin = d3.min(data, d => d.value);
Insert cell
xMax = d3.max(data, d => d.value);
Insert cell
Insert cell
margin = ({ top: 10, right: 20, bottom: 30, left: 20 })
Insert cell
height = 720
Insert cell
simulation = {
const sim = d3.forceSimulation(data)
.force("x", d3.forceX(d => xScale(d.value)).strength(0.75))
.force("y", d3.forceY(height / 2))
.force("collide", d3.forceCollide(simulationForceColide))
.stop()
for (let i = 0; i < 120; ++i) {
sim.tick();
}
return sim
}
Insert cell
function xGrid (g){
g
.attr('class', 'grid-lines')
.selectAll('line')
.data(xScale.ticks())
.join('line')
.attr('x1', d => xScale(d))
.attr('x2', d => xScale(d))
.attr('y1', margin.top)
.attr('y2', height - margin.bottom)
.style('stroke', "#E7E7E7")
}
Insert cell
xScale.ticks()
Insert cell
Insert cell
Insert cell
Insert cell
getLines("Hello There My Name is Tanya", 15)
Insert cell

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.
Learn more