Platform
Resources
Pricing
Sign in
Get started
Rahul Mukherjee
Workspace
Fork
Published
By
Rahul Mukherjee
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.
Try it for free
Learn more
Fork
View
Export
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
drawGraph
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
doubles
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
singles
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
hrs
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
y
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
x
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
height
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
width
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
margin
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
d3
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML