-
-
Notifications
You must be signed in to change notification settings - Fork 15
/
plot.scroll
106 lines (78 loc) · 2.66 KB
/
plot.scroll
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
authors Breck Yunits
https://twitter.com/breckyunits Breck Yunits
date 6/24/2024
openGraphImage scatterplot.png
tags All
title Write scatterplot to get a scatterplot
header.scroll
keyboardNav
printTitle
printAuthors
mediumColumns 1
I _engineered on_ many innovative data science tools, including Grapher and Ohayo^engineering.
dateline
https://github.com/breck7/ohayo Ohayo
https://github.com/owid/owid-grapher Grapher
So I was excited to see Observable launch something new: Plot.
https://observablehq.com/plot/ Plot
https://observablehq.com/ Observable
***
Plot is already great on its own. It handles many of the hard parts of data vis, and it's open source, so we can help them fix the parts that are still a little rough.
https://github.com/observablehq/plot open source
But I found a way to take Plot to the next level: I combined it with Scroll.
../index.html Scroll
The Plot/Scroll integration is early, but I can already tell it will evolve into a _very useful_ data science tool.
***
# A Scatterplot with 2 words
You can now make scatterplots with 2 words.
// if that's not no code, I don't know the meaning of no code.
Obviously you want to add a few more words, but I don't think I'm exaggerating when I say that this is the simplest way to generate a scatterplot now and forever will be (until the day when we have mind-reading machines that can generate a scatterplot with zero words).
But enough talk, let's see some code. A tutorial is below.
To follow along, create a new website in 1 second using ScrollHub or install Scroll locally with `npm install -g scroll-cli`.
http://hub.scroll.pub ScrollHub
***
# Step 1: Generate a scatterplot with 2 words
belowAsCode
planets.csv
scatterplot
***
# Step 2: Add a title
belowAsCode
planets.csv
scatterplot
title The Planets
***
# Step 3: Add inline data
belowAsCode
table
scatterplot
title The Simpson Family
x age
y height
label name
data
name age height
Homer 39 183
Bart 10 137
Lisa 8 120
***
# Step 4: Everything everywhere all at once
belowAsCode
planets.csv
scatterplot
title The Planets in our Solar System
subtitle Note: This chart is not designed to be pretty but to show all the current features in the Scroll/Plot integration.
caption Data from Wikipedia.
x yearsToOrbitSun
y moons
fill diameter
radius diameter
label id
symbol hasLife
***
That's it (for now)!
If you like where this is headed, give us a star on GitHub.
https://github.com/breck7/scroll give us a star on GitHub
****
^engineering The difference between programming and engineering? It takes programming to make a program that works. It takes engineering to make a program that _barely_ works.
footer.scroll