You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Among the most common graph types used in science are *scatter plots*, where individual points are placed into a two-coordinate plane. This project extracts data from a Google Sheet and displays them interactively on the screen as an interactive web page.
4
4
@@ -9,51 +9,69 @@ While any decent spreadsheet processor can generate a scatter plot, there are go
9
9
10
10
11
11
----
12
-
# Example use for comparing the chemical elements
13
12
14
-
To demonstrate how this project works, we provide
15
-
1. a dataset containing basic information on chemical elements. You can view it at the [google sheets here](https://docs.google.com/spreadsheets/d/1K4z2Up7PbC__3yXLqWTkNsnOSVtqYm4u6FtFCVmyTXw/edit?gid=0#gid=0). Of course you can make your own copy to add some new columns or new elements.
16
-
2. A running main webpage from this project, which has to be opened with the hash enabling it to load the data from the table (see links below).
13
+
# Additional features of the plotting HTML page
17
14
15
+
1.**Point color as a third axis:** Rainbow scale can show point grouping, or reveal their hidden higher-order correlations. Points with no valid data for color are plotted dark grey.
16
+
1.**Point relations:** Every point may refer to another point as its parent, since samples in laboratories are typically developed step by step, forming a large inheritance tree. The relations are displayed as arrows, optionally along with a description of each relation.
17
+
1.**Filtering of data:** A simple filter can be applied to show only a subset of points. Two filtering rules are available and can be combined with logical "and"/"or" operand.
18
+
1.**Settings are immediately reflected in the address bar:** Copy the URL to share your current axes/colours settings with anybody whom you send this link.
19
+
1.**Visual parameter grouping:** The first row of the table denotes the parameter group, which can be folded. This saves screen space when there are over 20-30 parameters per point.
20
+
1.**Visual parameter highliting:** If you want to point out a new or otherwise interesting parameter (or group), just put an asterisk behind its name. It will be highlighted green.
21
+
22
+
23
+
----
24
+
# Example: Comparing chemical elements
25
+
26
+
To demonstrate how this project works, we provide
27
+
1. a dataset containing basic information on chemical elements. You can view it at the [google sheets here](https://docs.google.com/spreadsheets/d/1K4z2Up7PbC__3yXLqWTkNsnOSVtqYm4u6FtFCVmyTXw/edit?gid=0#gid=0). Of course you can make your own copy to fill it with own data, as described below.
28
+
2. A running main webpage from this project, which has to be opened with the hash enabling it to load the data.
18
29
19
30
Having assigned the period and group number in the periodic table to each element, the graph can arrange them to form an inverted periodic table as we know it.
20
31
<ahref="https://filipdominec.github.io/googlesheet2scatterplot/?x=group&y=period&c=period&fo1=(NOT%20USED)&fop=and&fo2=(NOT%20USED)&googleid=2PACX-1vRZbVmg68lEl8VS9DGa1rEDS5-V55Ome6JXc6Cs4UuGhAYUgHHZw1x1_f9AbvHlyDL8GmzRVxli0W-o">Try this interactive plot by period/group numbers</a>
22
33
23
34
Depending on the data filled in the table, many interesting correlations can be interactively examined.
24
-
For example, by two mouse clicks we can rearrange the elements to show how their boiling points are related to their melting points. We have also switched the X,Y axes to logarithmic scale. This nicely shows that monoatomic noble gases have their boiling/melting temperatures very close, lying on the graph diagonal (automatically added dashed line). For most elements the ratio about 1.5-1.8 %, whereas for alkaline metals and similar ones (Hg, Bi, Pb) form a line at about 300 %. There are some outliers like sublimating As, or covalently bound biatomic liquid metal Ga. There is a lot of interesting physics to discuss (which is beyond the scope of this document).
35
+
For example, by two mouse clicks we can rearrange the elements to show how their boiling points are related to their melting points. We have also switched the X,Y axes to logarithmic scale. *This nicely shows that monoatomic noble gases have their boiling/melting temperatures very close, lying on the graph diagonal (automatically added dashed line). For most elements the temperature ratio lies around 1.5-1.8, whereas alkaline metals and similar elements (Hg, Bi, Pb) form a line at about 3.0. There are some outliers like (sublimating) As, or (covalently bound biatomic) liquid metal Ga. There is a lot of interesting physics to discuss, which is beyond the scope of this document.*
25
36
26
37
<ahref="https://filipdominec.github.io/googlesheet2scatterplot/?x=melting%20point&y=boiling%20point&c=period&xlog=1&ylog=1&fo1=(NOT%20USED)&fop=and&fo2=(NOT%20USED)&googleid=2PACX-1vRZbVmg68lEl8VS9DGa1rEDS5-V55Ome6JXc6Cs4UuGhAYUgHHZw1x1_f9AbvHlyDL8GmzRVxli0W-o">Try the interactive plot by melting/boiling points</a>
28
39
29
40
It is similarly easy to show how thermal capacity per gram is almost inversely proportional to the atomic Z number. However, even here we can see some outliers, which is obviously related to the element's melting point (coded by colour).
30
41
31
42
<ahref="https://filipdominec.github.io/googlesheet2scatterplot/?x=atomic%20weight&y=thermal%20capacity&c=melting%20point&xlog=1&ylog=1&fb1=boiling%20point&fo1=gt&fp1=400&fop=and&fo2=(NOT%20USED)&googleid=2PACX-1vRZbVmg68lEl8VS9DGa1rEDS5-V55Ome6JXc6Cs4UuGhAYUgHHZw1x1_f9AbvHlyDL8GmzRVxli0W-o">Try the interactive plot by Ct/melting points</a>
33
44
34
-
Cloning & editing the Google sheets table you can fill it with your own column names, row names and data values. Then, using the [procedure described here](https://www.fzu.cz/~dominecf/xy/howto.html) the address bar for the plotting website can be generated that points the HTML website to the exported CSV data from Google sheets.
35
45
46
+
----
47
+
48
+
# Making your own Google Sheets with data
49
+
50
+
The core of this project is just a HTML/Javascript page, named **index.html**. All data are stored in a Google spreadsheet and all plotting is done in your browser.
51
+
Therefore, the **index.html** page can be used for as many data tables as you wish. You are also free to download and run this project locally, but as long as Github supports hosting the page linked above in the examples, there is no reason not to use this online instance.
52
+
53
+
However, to plot your own data, you will have to create own sheet. There is a certain format the sheet has to obey. It is easiest to make a copy of the example Google sheet to fill it with your own column names (for measurement types), row names (for samples) and corresponding data values. Note that the table can be "sparse", i.e., missing data values in certain cells are not a problem.
54
+
55
+
To make a plot your own data, make a copy of the underlying example table **https://docs.google.com/spreadsheets/d/1K4z2Up7PbC__3yXLqWTkNsnOSVtqYm4u6FtFCVmyTXw/edit#gid=0** and fill it according to your needs. See [our step-by-step guide](docs/howto.html) to generate a corresponding ```googleid=``` parameter that will allow the Javascript .
36
56
37
57
----
38
58
39
-
# Additional features of the plotting HTML page
59
+
# Installation
40
60
41
-
1.**Point color as a third axis:** Rainbow scale can show hidden higher-order correlations between points.
42
-
1.**Point relations:** Every point may refer to another point as its parent, since samples in laboratories are typically developed step by step, forming a large inheritance tree. The relations are displayed as arrows, optionally along with a description of each relation.
43
-
1.**Filtering of data:** A simple filter can be applied to show only a subset of points. Two filtering rules are available and can be combined with logical "and"/"or" operand.
44
-
1.**Settings are immediately reflected in the address bar:** Copy the address bar to share your current axes/colours settings with anybody whom you send this link.
45
-
1.**Visual parameter grouping:** The first row of the table denotes the parameter group, which can be folded. This saves screen space when there are over 20-30 parameters per point.
46
-
1.**Visual parameter highliting:** If you want to point out a new or otherwise interesting parameter (or group), just put an asterisk behind its name. It will be highlighted green.
61
+
The visualisation runs online. If you can see open examples, you don't have to install anything!
47
62
48
63
49
64
----
50
65
51
-
# Trying the script online
66
+
# Using Google API for automation
67
+
68
+
To further streamline your sample management, it is possible to let Google generate an API token for you, which enables your Python scripts to upload data without manual logging in.
52
69
53
-
Note this project gives you just a javascript page; all data are stored in your own Google spreadsheet, all plotting is done in your browser. You may open the index.html locally, or put it on your website for easier access online. Therefore, one HTML page running anywhere can be used for as many data tables as you wish.
54
-
Pulling data from your google sheet as specified by your own ```googleid=``` parameter makes the website also safe even for confidential projects.
70
+
This step will, however, require running Python and following modules:
55
71
56
-
To make plot your own data, make a copy of the underlying example table **https://docs.google.com/spreadsheets/d/1K4z2Up7PbC__3yXLqWTkNsnOSVtqYm4u6FtFCVmyTXw/edit#gid=0** and fill it according to your needs. See **https://www.fzu.cz/~dominecf/** for a step-by-step guide how to generate a corresponding ```googleid=``` parameter.
72
+
```
73
+
pip install oauth2client
74
+
pip install gspread
75
+
```
57
76
58
-
If you wish to be independent of the website, e.g., for Javascript development, simply clone this project's files and put them somewhere accessible to your browser - the plotting web page should work even locally. You don't need to edit the sources if you just fill in your data; but contributions to this project are welcome.
Copy file name to clipboardExpand all lines: index.html
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -107,7 +107,7 @@
107
107
</tr>
108
108
</table>
109
109
110
-
<center><b>Google sheet for Plotly</b>, updated 2025-06-14<br> (c) Filip Dominec (2018-2025) using Javascript, HTML, <ahref="https://plot.ly">Plotly</a> and <ahref="https://docs.google.com/spreadsheets">google documents</a></br> To share your choice of axes and colors, copy the full path from your address bar.<br> To edit the data, ask the author of the underlying Google spreadsheet for access and permissions. <br> To make a new plot of your own data, <b><ahref='./docs/howto.html'>follow the howto</a></b>. <br> To contribute to the source code, see the git repository at <ahref="https://github.com/FilipDominec/googlesheet2scatterplot">https://github.com/FilipDominec/googlesheet2scatterplot</a>. </center>
110
+
<center><b>googlesheet2plotly</b>, updated 2025-06-16<br> (c) Filip Dominec (2018-2025) using Javascript, HTML, <ahref="https://plot.ly">Plotly</a> and <ahref="https://docs.google.com/spreadsheets">google documents</a></br> To share your choice of axes and colors, copy the full path from your address bar.<br> To edit the data, ask the author of the underlying Google spreadsheet for access and permissions. <br> To make a new plot of your own data, <b><ahref='./docs/howto.html'>follow the howto</a></b>. <br> To report an error or contribute, see the git repository at <b><ahref="https://github.com/FilipDominec/googlesheet2scatterplot">https://github.com/FilipDominec/googlesheet2scatterplot</a><b>. </center>
0 commit comments