-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathboston_scatterplot.html
More file actions
131 lines (111 loc) · 11.1 KB
/
boston_scatterplot.html
File metadata and controls
131 lines (111 loc) · 11.1 KB
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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<head><meta charset="utf-8" /><script src=https://cdn.plot.ly/plotly-1.34.0.min.js></script></head><div id="72d866bc-67c1-4712-b7cd-75e235058c60" style="height: 100%; width: 100%;" class="plotly-graph-div"></div><script type="text/javascript">window.PLOTLYENV=window.PLOTLYENV || {};window.PLOTLYENV.BASE_URL="https://plot.ly";Plotly.newPlot("72d866bc-67c1-4712-b7cd-75e235058c60", [{"customdata": ["ACS_17_5YR"], "hoverinfo": "all", "ids": [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, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125, 126, 127, 128, 129, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 150, 151, 152, 153, 154, 155, 156, 157, 158, 159, 160, 161, 162, 163, 164, 165, 166, 167, 168, 169, 170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181, 182, 183, 184, 185, 186, 187, 188, 189, 190, 191, 192, 193, 194, 195, 196, 197, 198, 199, 200, 201, 202, 203, 204], "line": {"dash": "solid", "width": 1}, "marker": {"color": "rgb(142, 186, 217)", "colorbar": {"len": 0.8}, "colorscale": "Greys", "line": {"color": "rgb(31, 119, 180)", "width": 1}, "reversescale": false, "showscale": false, "size": 10, "symbol": 0}, "mode": "markers", "name": "ACS_17_5YR - SQLdist", "opacity": 1.0, "text": [], "x": [1452, 1812, 1732, 343, 2255, 680, 1365, 1346, 1610, 1092, 929, 1301, 1440, 1900, 1619, 1500, 1991, 1776, 1937, 1843, 2253, 1802, 1928, 1074, 575, 822, 1093, 1381, 1469, 1465, 1338, 1044, 1502, 1061, 1259, 1471, 1730, 1866, 526, 472, 460, 1129, 1311, 2750, 1809, 1467, 2202, 1389, 1825, 407, 1666, 1772, 1067, 1673, 1548, 1044, 655, 507, 1951, 969, 1316, 1308, 1400, 1368, 1232, 1670, 2981, 1794, 430, 1826, 1688, 2623, 1987, 1301, 1385, 1253, 1495, 1538, 1121, 1350, 924, 1434, 1184, 1526, 1344, 1692, 1663, 1371, 1290, 1562, 901, 856, 1979, 1605, 2377, 1831, 1307, 1828, 2055, 2041, 597, 1927, 868, 1484, 1898, 978, 1143, 1926, 1517, 1172, 1005, 684, 1368, 1943, 1522, 1184, 1917, 2463, 2516, 1228, 1823, 1788, 1321, 1087, 1366, 1473, 1695, 1497, 1325, 1598, 1575, 1093, 1117, 1411, 1394, 1522, 741, 1525, 1426, 1564, 1483, 1368, 998, 1780, 1662, 1365, 1317, 1445, 1387, 1187, 1302, 1143, 524, 1296, 1346, 1630, 1014, 1781, 1837, 663, 1174, 1940, 675, 1517, 1546, 548, 1107, 1681, 1317, 1286, 1208, 1346, 1173, 1698, 1899, 1266, 1218, 850, 1410, 646, 1088, 1003, 893, 1872, 759, 2551, 1071, 1166, 2179, 2171, 1426, 2637], "y": [2461.0319262592366, 3435.0085189586066, 2939.596894597393, 3369.8667101112974, 1872.6322362801757, 4706.8686591637215, 3902.918492077416, 6865.318032194235, 8749.015724079476, 11125.50827200364, 7398.658709295538, 7668.10698364589, 3830.0387927366496, 1599.8160345869587, 1813.0992852887437, 5829.491977480409, 8520.361307244575, 7830.271981166229, 3037.5395181305835, 3006.754829581774, 1545.8663103450576, 901.1068593524063, 1340.2945252384318, 3151.8990562448776, 1999.2790865809136, 4412.078379531953, 4574.775139798041, 5606.337043991056, 8358.915220680488, 9279.19079117024, 8994.359325666037, 7059.0371502499365, 12736.391003912722, 12417.908988862437, 5399.226227246449, 8659.574746455628, 6692.17526965046, 3460.114058231572, 2148.258222066805, 2014.0795104595666, 5756.51856885381, 9768.77637911568, 7455.3575624718, 7821.4366343864995, 2794.509799248869, 8281.164912993409, 7022.414757015575, 2104.7746339183923, 2705.628197860299, 5203.384759663147, 6271.919716015267, 2523.671592667801, 4121.975811818037, 3922.8186873941604, 1922.7002077025772, 3190.404102235686, 3288.5792143430053, 5270.74960027841, 605.1879555944677, 2034.6246295790513, 2967.60786059973, 2405.5837232955414, 2907.241616839729, 3687.266681806802, 2101.241960079396, 3073.4973311518706, 1480.1500451947868, 2394.2219630654836, 2831.1655978742124, 7405.875512306618, 5926.671543930775, 2021.8937010432678, 971.3099296750011, 4125.689659638193, 5685.453302854767, 8927.7185272203, 8624.46698951093, 5263.242228918482, 4471.818907607083, 6355.371076157542, 7753.281960493552, 8372.054357245064, 9976.471398133512, 9430.458164606196, 10232.299852941112, 9716.885061635421, 11925.210107773486, 13065.780663303532, 6987.787434133711, 6931.340255467394, 5253.871662999494, 5277.917252408731, 5903.7142883236065, 5830.414115426689, 5236.749042448205, 3490.507605583784, 4087.444716263267, 2533.0966385835936, 2275.1374829490965, 2361.311228583058, 2263.588145497303, 3162.239851308307, 901.8865154240153, 1366.8549118632775, 2554.913525027217, 2573.310190930749, 3665.069935353992, 4505.784242595451, 5136.81969715642, 4348.093089027904, 4410.4995965027465, 6329.82779032784, 3593.8862204112434, 4607.893192062569, 4536.865179305414, 5552.253477378207, 996.5512575996082, 1151.9625660223435, 539.487706832173, 6342.262433645084, 9080.98270267486, 8432.634796677667, 7018.508803506746, 12890.553854841868, 4336.480194619514, 5511.774133446588, 5664.448368606854, 11505.231693666961, 13958.329796237465, 11277.393616412763, 8994.440202557984, 11168.534125113923, 7225.2837673219765, 7263.207903023434, 7214.856500885669, 8532.646475584907, 7074.479484554618, 7648.954213762831, 7369.104370817514, 8728.049431415571, 9068.38449131815, 8232.845754468623, 9562.76175944623, 7465.132800329782, 6480.7416696480595, 6456.402749399044, 7083.0404016456105, 10754.77739483984, 3657.875358403584, 4534.4470466080675, 6000.900225197441, 5090.275302773304, 3988.5224673195485, 5021.40391626226, 7285.364628319292, 6069.178556921976, 13190.10965676862, 6671.2330465377645, 1167.589736104905, 2560.3121302278505, 4877.238772160972, 3365.69065485057, 1353.153347719308, 10404.074277765845, 7285.165331162169, 3576.8957083440046, 9424.323347517184, 11223.83482562595, 14520.527698944627, 6348.312133679103, 11950.739500048168, 6685.965281955809, 8254.175487203638, 7968.1967981613925, 922.3331886839499, 5478.2007843447, 2609.0657738878367, 4913.717107104674, 5908.95875036654, 3079.349979288549, 5206.190462272709, 4680.870176404099, 5741.775687803723, 9152.462403305848, 3201.56017451372, 1160.7440914681567, 1977.4574136369538, 7377.948272446132, 3926.194726398039, 445.9596061523889, 10622.210222680544, 2058.0822951079986], "type": "scatter", "uid": "e0fe5b36-df29-11e9-a78f-e4b97af77e18"}], {"legend": {"orientation": "v"}, "showlegend": true, "title": "", "xaxis": {"autorange": true, "rangeslider": {"borderwidth": 1, "visible": false}, "title": "ACS_17_5YR", "type": "linear"}, "yaxis": {"autorange": true, "title": "SQLdist", "type": "linear"}}, {"editable": true, "scrollZoom": true, "showLink": false, "linkText": "Export to plot.ly"})</script>
<script>
// additional js function to select and click on the data
// returns the ids of the selected/clicked feature
var plotly_div = document.getElementById('72d866bc-67c1-4712-b7cd-75e235058c60')
var plotly_data = plotly_div.data
// selecting function
plotly_div.on('plotly_selected', function(data){
var dds = {};
dds["mode"] = 'selection'
dds["type"] = data.points[0].data.type
featureIds = [];
featureIdsTernary = [];
data.points.forEach(function(pt){
featureIds.push(parseInt(pt.id))
featureIdsTernary.push(parseInt(pt.pointNumber))
dds["id"] = featureIds
dds["tid"] = featureIdsTernary
})
//console.log(dds)
window.status = JSON.stringify(dds)
})
// clicking function
plotly_div.on('plotly_click', function(data){
var featureIds = [];
var dd = {};
dd["fidd"] = data.points[0].id
dd["mode"] = 'clicking'
// loop and create dictionary depending on plot type
for(var i=0; i < data.points.length; i++){
// scatter plot
if(data.points[i].data.type == 'scatter'){
dd["uid"] = data.points[i].data.uid
dd["type"] = data.points[i].data.type
data.points.forEach(function(pt){
dd["fid"] = pt.id
})
}
// pie
else if(data.points[i].data.type == 'pie'){
dd["type"] = data.points[i].data.type
dd["label"] = data.points[i].label
dd["field"] = data.points[i].data.name
console.log(data.points[i].label)
console.log(data.points[i])
}
// histogram
else if(data.points[i].data.type == 'histogram'){
dd["type"] = data.points[i].data.type
dd["uid"] = data.points[i].data.uid
dd["field"] = data.points[i].data.name
// correct axis orientation
if(data.points[i].data.orientation == 'v'){
dd["id"] = data.points[i].x
dd["bin_step"] = data.points[i].data.xbins.size
}
else {
dd["id"] = data.points[i].y
dd["bin_step"] = data.points[i].data.ybins.size
}
}
// box plot
else if(data.points[i].data.type == 'box'){
dd["uid"] = data.points[i].data.uid
dd["type"] = data.points[i].data.type
dd["field"] = data.points[i].data.customdata[0]
// correct axis orientation
if(data.points[i].data.orientation == 'v'){
dd["id"] = data.points[i].x
}
else {
dd["id"] = data.points[i].y
}
}
// violin plot
else if(data.points[i].data.type == 'violin'){
dd["uid"] = data.points[i].data.uid
dd["type"] = data.points[i].data.type
dd["field"] = data.points[i].data.customdata[0]
// correct axis orientation (for violin is viceversa)
if(data.points[i].data.orientation == 'v'){
dd["id"] = data.points[i].x
}
else {
dd["id"] = data.points[i].y
}
}
// bar plot
else if(data.points[i].data.type == 'bar'){
dd["uid"] = data.points[i].data.uid
dd["type"] = data.points[i].data.type
dd["field"] = data.points[i].data.customdata
// correct axis orientation
if(data.points[i].data.orientation == 'v'){
dd["id"] = data.points[i].x
}
else {
dd["id"] = data.points[i].y
}
}
// ternary
else if(data.points[i].data.type == 'scatterternary'){
dd["uid"] = data.points[i].data.uid
dd["type"] = data.points[i].data.type
dd["field"] = data.points[i].data.customdata
dd["fid"] = data.points[i].pointNumber
}
}
window.status = JSON.stringify(dd)
});
</script>