Published
Edited
Jul 10, 2019
Insert cell
md`# Trout Average Ball Position Charts`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
doubles = d3.csvParse(`year,hc_x_ft,hc_y_ft
2014,-79.37951538,283.038841
2015,-58.38033438,259.2314313
2016,17.4429625,256.399025
2017,-62.56766923,236.7038038
2018,-79.84715833,235.0105958
2019,-59.43959444,282.4710778`)
Insert cell
singles = d3.csvParse(`year,hc_x_ft,hc_y_ft
2014,-30.80862135,197.9444955
2015,0.541411828,197.1360387
2016,-18.09756729,206.981086
2017,-18.36415806,200.2976984
2018,-14.84646875,212.4325075
2019,-19.189139,227.707193`)
Insert cell
hrs = d3.csvParse(`year,hc_x_ft,hc_y_ft
2014,-61.20262778,384.3399722
2015,-26.44663659,382.5570171
2016,-62.07441379,377.4736586
2017,-93.34050606,386.0605242
2018,-102.0928333,371.1528692
2019,-115.243464,385.563407 `)
Insert cell
y = d3.scaleLinear()
.domain([0, 400])
.range([ height, 0]);
Insert cell
x = d3.scaleLinear()
.domain([-215, 215])
.range([ 0, width ]);
Insert cell
height = 320 - margin.top - margin.bottom
Insert cell
width = 368 - margin.left - margin.right
Insert cell
margin = ({top: 10, right: 30, bottom: 30, left: 60})
Insert cell
d3 = require("https://d3js.org/d3.v4.min.js")
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