Skip to content

Instantly share code, notes, and snippets.

@nbryant

nbryant/README.md

Last active June 1, 2016 15:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nbryant/5d973a0dd9965fcf5026 to your computer and use it in GitHub Desktop.
Save nbryant/5d973a0dd9965fcf5026 to your computer and use it in GitHub Desktop.
Download ZIP
Webcharts - Custom Chart with Controls
Raw
README.md

This chart is created with Webcharts and plots boiling point by group across all elements in the periodic table. A bar is plotted for each set of elements in a period for each element group, and a circle is plotted at the mean y-value for each group. The y-values that are plotted can be changed using the first dropdown above the chart. Data represented in the chart can be filtered on period and group using the second two dropdowns. Data sourced from here.

Raw
coolChart.js
var settings = {
x: {column: "Group", type: "ordinal", label: "Group" },
y: {column: "Boiling point", type: "linear", label: function(){return this.config.y.column; } },
marks: [
{type: "bar", per: ["Group"], split: "Period", arrange: "grouped"},
{type: "circle", per: ["Group"], summarizeY: "mean", tooltip: "[Name]", attributes: {"fill-opacity": 1, fill: "black", "stroke": "black"}, size: 4}
],
color_by: "Period",
max_width: 800,
gridlines: 'xy'
};
var controls = webCharts.createControls('body',
{
location: 'top',
inputs:[
{type: "dropdown", option: "y.column", label: "Y Values", values: ["Mass", "Boiling point", "Melting point", "Density", "Radius"], require: true},
{type: "subsetter", value_col: "Period", label: "Filter by Period"},
{type: "subsetter", value_col: "Group", label: "Filter by Group"}
]
}
);
var coolChart = webCharts.createChart('body', settings, controls);
d3.csv('elements2.csv', function(e,d){
coolChart.init(d);
});
Raw
elements2.csv
Number Period Group Symbol Name Mass Radius Valence el. Stable isotopes Melting point Boiling point Density
1 1 1 H Hydrogen 1.008 25 1 2 14.1 20.3 0.084
2 1 18 He Helium 4.003 31 2 2 4.2 0.17
3 2 1 Li Lithium 6.941 145 1 2 454 1615 0.53
4 2 2 Be Beryllium 9.012 105 2 1 1551 3750 1.85
5 2 13 B Boron 10.81 85 3 2 2349 4200 2.46
6 2 14 C Carbon 12.011 70 4 2 3820 5100 3.51
7 2 15 N Nitrogen 14.007 65 5 2 63.1 77.4 1.17
8 2 16 O Oxygen 15.999 60 6 3 54.4 90.2 1.33
9 2 17 F Fluorine 18.998 50 7 1 53.5 85 1.58
10 2 18 Ne Neon 20.18 38 8 3 24.6 27.1 0.84
11 3 1 Na Sodium 22.99 180 1 1 371 1156 0.97
12 3 2 Mg Magnesium 24.305 150 2 3 923 1380 1.74
13 3 13 Al Aluminium 26.92 125 3 1 933 2740 2.7
14 3 14 Si Silicon 28.085 110 4 3 1683 2628 2.33
15 3 15 P Phosphorus 30.974 100 5 1 317 550 1.82
16 3 16 S Sulfur 62.065 100 6 4 338 718 2.06
17 3 17 Cl Chlorine 35.453 100 7 2 172 239 2.95
18 3 18 Ar Argon 39.948 71 8 3 84 87 1.66
19 4 1 K Potassium 39.098 220 1 2 337 1032 0.86
20 4 2 Ca Calcium 40.078 280 2 4 1115 1757 1.54
21 4 3 Sc Scandium 44.956 160 1 1814 3103 2.99
22 4 4 Ti Titanium 47.867 140 5 1941 3560 4.51
23 4 5 V Vanadium 50.942 135 1 2183 3680 6.09
24 4 6 Cr Chromium 51.996 140 3 2130 2945 7.14
25 4 7 Mn Manganese 54.938 140 1 1517 2235 7.44
26 4 8 Fe Iron 55.845 140 4-Mar 1808 3023 7.87
27 4 9 Co Cobalt 58.993 135 1 1768 3200 8.89
28 4 10 Ni Nickel 58.693 135 5 1738 3186 8.91
29 4 11 Cu Copper 63.456 135 2 1358 2840 8.92
30 4 12 Zn Zinc 65.39 135 5 693 1180 7.14
31 4 13 Ga Gallium 69.723 130 3 2 303 2477 5.91
32 4 14 Ge Germanium 72.64 125 4 4 1211 3093 5.32
33 4 15 As Arsenic 74.922 115 5 1 889 5.72
34 4 16 Se Selenium 78.96 115 6 5 494 958 4.82
35 4 17 Br Bromine 79.904 115 7 2 266 332 3.14
36 4 18 Kr Krypton 83.8 88 8 5 116 120 3.48
37 5 1 Rb Rubidium 85.468 235 1 1 312 961 1.53
38 5 2 Sr Strontium 87.62 200 2 4 1050 1655 2.63
39 5 3 Y Yttrium 88.906 180 1 1799 3609 4.47
40 5 4 Zr Zirconium 91.224 155 4 2130 4682 6.51
41 5 5 Nb Niob 92.906 145 1 2750 5017 8.58
42 5 6 Mo Molybdenum 95.94 145 6 2896 4912 10.28
43 5 7 Tc Technetium 98 135 2430 5150 11.49
44 5 8 Ru Ruthenium 101.07 130 7 2607 4423 12.45
45 5 9 Rh Rhodium 102.91 135 1 2273 3968 12.41
46 5 10 Pd Palladium 106.42 140 6 1828 3236 12.02
47 5 11 Ag Silver 107.87 160 2 1234 2435 10.49
48 5 12 Cd Cadmium 112.41 155 ?3 594 1040 8.64
49 5 13 In Indium 114.82 155 3 1 430 2345 7.31
50 5 14 Sn Tin 118.71 145 4 10 505 2875 7.29
51 5 15 Sb Antimony 121.76 145 5 2 904 1860 6.69
52 5 16 Te Tellurium 127.6 140 6 5-Apr 723 1263 6.25
53 5 17 I Iodine 126.9 140 7 1 387 457 4.94
54 5 18 Xe Xenon 131.29 108 8 9 161 165 4.49
55 6 1 Cs Caesium 132.9 260 1 1 302 944 1.9
56 6 2 Ba Barium 137.33 215 2 7 1000 1913 3.65
57 6 3 La Lanthanum 138.91 195 1 1193 3730 6.16
58 6 3 Ce Cerium 140.12 185 3 1068 3716 6.77
59 6 3 Pr Praseodym 140.91 185 1 1204 3793 6.48
60 6 3 Nd Neodym 144.24 185 5 1297 3373 7
61 6 3 Pm Promethium 145 185 1315 3273 7.22
62 6 3 Sm Samarium 150.36 185 4 1345 2076 7.54
63 6 3 Eu Europium 151.96 185 2 1099 1800 6.16
64 6 3 Gd Gadolinium 157.25 180 6 1585 3523 7.89
65 6 3 Tb Terbium 158.92 175 1 1629 3503 8.25
66 6 3 Dy Dysprosium 162.5 175 7 1680 2840 8.56
67 6 3 Ho Holmium 163.93 175 1 1747 2963 8.78
68 6 3 Er Erbium 167.26 175 6 1795 2783 9.05
69 6 3 Tm Thulium 168.93 175 1 1818 2220 9.32
70 6 3 Yb Ytterbium 173.04 175 7 1097 1467 6.97
71 6 3 Lu Lutetium 174.97 175 1 1936 3668 9.84
72 6 4 Hf Hafnium 178.49 155 5 2506 4876 13.31
73 6 5 Ta Tantalum 180.95 145 1 3290 5731 16.68
74 6 6 W Tungsten 183.84 135 4 3695 5828 19.26
75 6 7 Re Rhenium 186.21 135 1 3459 5869 21.03
76 6 8 Os Osmium 190.23 130 6 3306 5285 22.61
77 6 9 Ir Iridium 192.22 135 2 2739 4701 22.65
78 6 10 Pt Platinum 195.08 135 5-Apr 2045 4100 21.45
79 6 11 Au Gold 196.97 135 1 1337 3129 19.32
80 6 12 Hg Mercury 200.59 150 7 234 630 13.55
81 6 13 Tl Thallium 204.38 190 3 2 577 1746 11.85
82 6 14 Pb Lead 207.2 180 4 3 601 2023 11.34
83 6 15 Bi Bismuth 208.98 160 5 544 1837 9.8
84 6 16 Po Polonium 209 190 6 527 1235 9.2
85 6 17 At Astatine 210 7 575 610
86 6 18 Rn Radon 222 120 8 202 211 9.23
87 7 1 Fr Francium 223 1 300 950
88 7 2 Ra Radium 226 215 2 973 2010 5.5
89 7 3 Ac Actinium 227 195 1327 3473 10.07
90 7 3 Th Thorium 232.04 180 2028 5061 11.72
91 7 3 Pa Protactinium 231.04 180 2113 4300 15.37
92 7 3 U Uranium 238.03 175 1406 4203 18.97
93 7 3 Np Neptunium 237 175 912 4175 20.48
94 7 3 Pu Plutonium 244 175 913 3509 19.74
95 7 3 Am Americium 243 175 1449 2880 13.67
96 7 3 Cm Curium 247 1613 3383 13.51
97 7 3 Bk Berkelium 247 1259 13.25
98 7 3 Cf Californium 251 1173 1743 15.1
99 7 3 Es Einsteinium 252 1133
100 7 3 Fm Fermium 257 1800
101 7 3 Md Mendelevium 258 1100
102 7 3 No Nobelium 259 1100
103 7 3 Lr Lawrencium 262
104 7 4 Rf Rutherfordium 267
105 7 5 Db Dubnium 262
106 7 6 Sg Seaborgium 266
107 7 7 Bh Bohrium 264
108 7 8 Hs Hassium 277
109 7 9 Mt Meitnerium 268
110 7 10 Ds Darmstadtium 281
111 7 11 Rg Roentgenium 280
112 7 12 Cp Copernicium 277
113 7 13 Uut Ununtrium 287 3
114 7 14 Fl Flerovium 289 4
115 7 15 Uup Ununpentium 288 5
116 7 16 Lv Livermorium 289 6
117 7 17 Uus Ununseptium 291 7
118 7 18 Uuh Ununoctium 294 8
Raw
index.html
<html lang="en">
<title>Webcharts - Custom Chart with Controls</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="https://rawgit.com/RhoInc/Webcharts/master/css/webcharts.css">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src='https://rawgit.com/RhoInc/Webcharts/master/build/webcharts.js'></script>
</head>
<body style="padding:1em;">
</body>
<script src="coolChart.js" defer></script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment