Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
Field Science
datavis
Commits
51c08e40
Commit
51c08e40
authored
Jan 18, 2020
by
Porter Libby
Browse files
Merge branch 'master' of
https://github.com/probably-not-porter/datavis
parents
71eb7e6a
65c7fcc1
Changes
9
Hide whitespace changes
Inline
Side-by-side
README.md
View file @
51c08e40
...
...
@@ -13,7 +13,6 @@ Contributors: Porter Libby
[
Live Demo Version
](
http://cluster.earlham.edu:9900/
)
[
Mobile Front-end
](
https://github.com/probably-not-porter/datavis-mobile
)
...
...
public/css/data.css
View file @
51c08e40
...
...
@@ -13,7 +13,7 @@
}
#data
{
margin-top
:
1
2
0px
;
margin-top
:
1
0
0px
;
text-align
:
center
;
padding-bottom
:
100px
;
}
...
...
public/css/main.css
View file @
51c08e40
...
...
@@ -38,9 +38,9 @@ html, body, #viewDiv{
margin-top
:
0px
;
border-radius
:
10px
;
border
:
1px
solid
var
(
--theme2
);
-webkit-box-shadow
:
10px
10px
5px
-4px
rgba
(
0
,
0
,
0
,
0.
3
5
);
-moz-box-shadow
:
10px
10px
5px
-4px
rgba
(
0
,
0
,
0
,
0.
3
5
);
box-shadow
:
10px
10px
5px
-4px
rgba
(
0
,
0
,
0
,
0.
3
5
);
-webkit-box-shadow
:
10px
10px
5px
-4px
rgba
(
0
,
0
,
0
,
0.
1
5
);
-moz-box-shadow
:
10px
10px
5px
-4px
rgba
(
0
,
0
,
0
,
0.
1
5
);
box-shadow
:
10px
10px
5px
-4px
rgba
(
0
,
0
,
0
,
0.
1
5
);
}
.nav-view-button
:hover
{
background-color
:
var
(
--theme3
);
...
...
public/css/mobile.css
0 → 100644
View file @
51c08e40
@media
only
screen
and
(
max-width
:
600px
)
{
#navcontrols
{
top
:
2px
;
}
.nav-view-button
{
vertical-align
:
top
;
}
#title
{
font-size
:
15px
;
}
}
\ No newline at end of file
public/js/data.js
View file @
51c08e40
...
...
@@ -251,26 +251,27 @@ function getReadings(spot_id){
url
:
'
/readings
'
,
data
:
{
spotid
:
spot_id
,
sectorid
:
query_selection
[
2
],
siteid
:
query_selection
[
1
],
tripid
:
query_selection
[
0
]},
success
:
function
(
response
)
{
var
st
rea
m
ings
=
[];
var
rea
d
ings
=
[];
for
(
x
=
0
;
x
<
response
.
length
;
x
++
){
st
rea
m
ings
.
push
(
response
[
x
]);
rea
d
ings
.
push
(
response
[
x
]);
}
console
.
info
(
'
DATA -
STREAMINGS
'
);
console
.
info
(
'
Loaded
'
+
st
rea
m
ings
.
length
+
"
points.
"
);
console
.
info
(
'
DATA -
readings
'
);
console
.
info
(
'
Loaded
'
+
rea
d
ings
.
length
+
"
points.
"
);
var
color
=
getRandomColor
();
query_data
=
st
rea
m
ings
;
query_data
=
rea
d
ings
;
createReading
(
streamings
,
'
test
'
,
color
);
createPoints
([
readings
[
0
]],
color
);
createGraphReading
(
readings
,
query_selection
,
color
);
var
dataview
=
document
.
getElementById
(
"
dataView
"
)
dataview
.
querySelector
(
"
#nav-button-graph
"
).
classList
.
add
(
"
new_data_button
"
);
dataview
.
querySelector
(
"
#nav-button-map
"
).
classList
.
add
(
"
new_data_button
"
);
document
.
getElementById
(
'
reading
'
).
innerHTML
=
""
;
document
.
getElementById
(
'
data-prompt
'
).
innerHTML
=
"
Loaded
"
+
st
rea
m
ings
.
length
+
"
points to the graph and map!
"
;
document
.
getElementById
(
'
data-prompt
'
).
innerHTML
=
"
Loaded
"
+
rea
d
ings
.
length
+
"
points to the graph and map!
"
;
document
.
getElementById
(
"
button_permalink
"
).
disabled
=
false
;
document
.
getElementById
(
"
button_csv
"
).
disabled
=
false
;
...
...
@@ -364,18 +365,28 @@ function getStreamings(date){
var
color
=
getRandomColor
();
query_data
=
streamings
;
createGraph
(
streamings
,
date
,
color
);
createPoints
(
streamings
,
color
);
if
(
streamings
.
length
!=
0
){
createGraphStreaming
(
streamings
,
date
,
color
);
createPoints
(
streamings
,
color
);
var
dataview
=
document
.
getElementById
(
"
dataView
"
)
dataview
.
querySelector
(
"
#nav-button-graph
"
).
classList
.
add
(
"
new_data_button
"
);
dataview
.
querySelector
(
"
#nav-button-map
"
).
classList
.
add
(
"
new_data_button
"
);
var
dataview
=
document
.
getElementById
(
"
dataView
"
)
dataview
.
querySelector
(
"
#nav-button-graph
"
).
classList
.
add
(
"
new_data_button
"
);
dataview
.
querySelector
(
"
#nav-button-map
"
).
classList
.
add
(
"
new_data_button
"
);
document
.
getElementById
(
'
streaming
'
).
innerHTML
=
""
;
document
.
getElementById
(
'
data-prompt
'
).
innerHTML
=
"
Loaded
"
+
streamings
.
length
+
"
points to the graph and map!
"
;
document
.
getElementById
(
'
streaming
'
).
innerHTML
=
""
;
document
.
getElementById
(
'
data-prompt
'
).
innerHTML
=
"
Loaded
"
+
streamings
.
length
+
"
points to the graph and map!
"
;
document
.
getElementById
(
"
button_permalink
"
).
disabled
=
false
;
document
.
getElementById
(
"
button_csv
"
).
disabled
=
false
;
document
.
getElementById
(
"
button_permalink
"
).
disabled
=
false
;
document
.
getElementById
(
"
button_csv
"
).
disabled
=
false
;
}
else
{
console
.
error
(
'
ERR: empty set
'
);
document
.
getElementById
(
'
streaming
'
).
innerHTML
=
""
;
document
.
getElementById
(
'
data-prompt
'
).
innerHTML
=
"
Selected set contains no valid points
"
;
}
},
error
:
function
(
xhr
,
status
,
err
)
{
console
.
log
(
xhr
.
responseText
);
...
...
@@ -492,14 +503,6 @@ function renderStreamingsDates(dates){
togglediv
(
'
#streamingsplatforms-ls
'
,
'
streamingsplatforms-button
'
);
}
}
function
createReading
(
data
,
title
,
color
){
createPoints
([
data
[
0
]],
color
);
for
(
x
=
0
;
x
<
data
.
length
;
x
++
){
console
.
log
(
data
[
x
]);
}
}
/*
Other
...
...
public/js/graph.js
View file @
51c08e40
...
...
@@ -24,7 +24,54 @@ $( document ).ready(function() {
}
});
});
function
createGraph
(
dataset
,
title
,
color
){
function
createGraphReading
(
dataset
,
q_arr
,
color
){
//reset containers
document
.
getElementById
(
'
readingStats
'
).
style
.
display
=
'
block
'
;
document
.
getElementById
(
'
line-chart
'
).
style
.
display
=
'
none
'
;
//prepare active container
var
parent
=
document
.
getElementById
(
'
readingStats
'
);
parent
.
innerHTML
=
""
;
// create title
var
trip
=
q_arr
[
0
];
var
site
=
q_arr
[
1
];
var
sector
=
q_arr
[
2
];
var
spot
=
q_arr
[
3
];
var
title
=
document
.
createElement
(
'
h
'
);
title
.
innerHTML
=
"
Trip
"
+
trip
+
"
, Site
"
+
site
+
"
, Sector
"
+
sector
+
"
, Spot
"
+
spot
;
parent
.
append
(
title
);
//fill with content
var
textElem
=
document
.
createElement
(
'
p
'
);
textElem
.
innerHTML
=
"
Latitude:
"
+
dataset
[
x
].
latitude
;
parent
.
append
(
textElem
);
var
textElem
=
document
.
createElement
(
'
p
'
);
textElem
.
innerHTML
=
"
Longitude:
"
+
dataset
[
x
].
longitude
;
parent
.
append
(
textElem
);
var
textElem
=
document
.
createElement
(
'
p
'
);
textElem
.
innerHTML
=
"
Elevation:
"
+
dataset
[
x
].
elevation
;
parent
.
append
(
textElem
);
var
textElem
=
document
.
createElement
(
'
p
'
);
textElem
.
innerHTML
=
"
Accuracy:
"
+
dataset
[
x
].
accuracy
;
parent
.
append
(
textElem
);
for
(
x
=
0
;
x
<
dataset
.
length
;
x
++
){
var
textElem
=
document
.
createElement
(
'
p
'
);
textElem
.
innerHTML
=
dataset
[
x
].
sensorid
+
"
:
"
+
dataset
[
x
].
value
;
parent
.
append
(
textElem
);
}
}
function
createGraphStreaming
(
dataset
,
title
,
color
){
// reset some containers
document
.
getElementById
(
'
line-chart
'
).
style
.
display
=
'
block
'
;
document
.
getElementById
(
'
readingStats
'
).
style
.
display
=
'
none
'
;
title
=
''
times_arr
=
[];
// x axis ticks (timestamps)
data
=
[[]];
// this array will each set of data (split by sensor)
...
...
@@ -70,6 +117,7 @@ function addData(chart,times,data,types,color,title) {
if
(
chart
){
chart
.
destroy
();
// clear old information so it doesnt overflow
}
chart
=
new
Chart
(
document
.
getElementById
(
"
line-chart
"
),
{
// create new chart structure for streaming data
type
:
'
scatter
'
,
data
:
{},
...
...
public/js/map.js
View file @
51c08e40
...
...
@@ -35,7 +35,7 @@ require(["esri/Map", "esri/views/SceneView", "esri/views/MapView", "esri/Graphic
center
:
[
-
13.68
,
65.29
],
container
:
"
viewDiv
"
,
map
:
map
,
zoom
:
1
1
zoom
:
1
5
});
var
basemapToggle
=
new
BasemapToggle
({
viewModel
:
{
// autocasts as new BasemapToggleViewModel()
...
...
public/js/util.js
View file @
51c08e40
...
...
@@ -43,65 +43,54 @@ function switchToData(){
setTimeout
(
function
(){
document
.
getElementById
(
"
loading
"
).
style
.
display
=
"
none
"
;
},
10
);}
// TEAMPLATES FOR DOM PIECES
function
createRadioElementTrips
(
mode
,
name
,
checked
,
label
,
id
)
{
var
radioHtml
=
'
<div class="elem-div elem-
'
+
mode
+
'
"><input class="data-radio form-radio" onchange="getSites(
'
+
id
+
'
)" type="radio" name="
'
+
name
+
'
" id="
'
+
label
+
'
"
'
;
if
(
checked
)
{
radioHtml
+=
'
checked="checked"
'
;
}
radioHtml
+=
'
/>
'
;
radioHtml
+=
'
<label for="
'
+
label
+
'
"><strong>
'
+
label
+
"
</strong><span class='detailed_info'> (ID:
"
+
id
+
'
)</span></label></div>
'
;
return
radioHtml
;
}
function
createRadioElementSites
(
mode
,
name
,
checked
,
label
,
siteid
)
{
var
radioHtml
=
'
<div class="elem-div elem-
'
+
mode
+
'
"><input class="data-radio form-radio" onchange="getSectors(
'
+
siteid
+
'
)" type="radio" name="
'
+
name
+
'
" id="
'
+
label
+
'
"
'
;
if
(
checked
)
{
radioHtml
+=
'
checked="checked"
'
;
// generalized formula
function
createRadioElement
(
name
,
id
,
label
,
f
){
console
.
log
(
name
,
id
,
label
);
var
radioHtml
=
'
<div class="elem-div elem-0">
'
if
(
typeof
id
===
'
string
'
||
id
instanceof
String
){
radioHtml
+=
'
<input class="data-radio form-radio" onchange="
'
+
f
+
'
(
'
;
radioHtml
+=
"
'
"
+
id
+
"
'
"
;
radioHtml
+=
'
)" type="radio" name="
'
+
name
+
'
" id="
'
+
label
+
'
" />
'
;
}
else
{
radioHtml
+=
'
<input class="data-radio form-radio" onchange="
'
+
f
+
'
(
'
+
id
+
'
)" type="radio" name="
'
+
name
+
'
" id="
'
+
label
+
'
" />
'
;
}
radioHtml
+=
'
/>
'
;
radioHtml
+=
'
<label for="
'
+
label
+
'
"><strong>
'
+
label
+
"
</strong><span class='detailed_info'> (ID:
"
+
siteid
+
'
)</span></label></div>
'
;
radioHtml
+=
'
<label for="
'
+
label
+
'
">
'
;
radioHtml
+=
'
<strong>
'
+
label
+
"
</strong>
"
;
radioHtml
+=
'
<span class="detailed_info"> (ID:
'
+
id
+
'
)</span>
'
;
radioHtml
+=
'
</label></div>
'
;
return
radioHtml
;
}
function
createRadioElementSectors
(
mode
,
name
,
checked
,
label
,
sectorid
)
{
var
radioHtml
=
'
<div class="elem-div elem-
'
+
mode
+
'
"><input class="data-radio form-radio"
'
// switch for streaming
if
(
query_type
==
1
){
radioHtml
+=
'
onchange="getStreamingsPlatforms(
'
+
sectorid
+
'
)"
'
;
}
else
{
radioHtml
+=
'
onchange="getSpots(
'
+
sectorid
+
'
)"
'
;
}
radioHtml
+=
'
type="radio" name="
'
+
name
+
'
" id="
'
+
label
+
'
"
'
;
if
(
checked
)
{
radioHtml
+=
'
checked="checked"
'
;
}
radioHtml
+=
'
/>
'
;
radioHtml
+=
'
<label for="
'
+
label
+
'
"><strong>
'
+
label
+
"
</strong><span class='detailed_info'> (ID:
"
+
sectorid
+
'
)</span></label></div>
'
;
return
radioHtml
;
// take information from data.js and write it into html
function
createRadioElementTrips
(
mode
,
name
,
checked
,
label
,
id
)
{
var
f
=
"
getSites
"
;
return
createRadioElement
(
name
,
id
,
label
,
f
);
}
function
createRadioElementSpots
(
mode
,
name
,
checked
,
label
,
spotid
)
{
var
radioHtml
=
'
<div class="elem-div elem-
'
+
mode
+
'
"><input class="data-radio form-radio" onchange="getReadings(
'
+
spotid
+
'
)" type="radio" name="
'
+
name
+
'
" id="
'
+
label
+
'
"
'
;
if
(
checked
)
{
radioHtml
+=
'
checked="checked"
'
;
}
radioHtml
+=
'
/>
'
;
radioHtml
+=
'
<label for="
'
+
label
+
'
"><strong>Spot #
'
+
label
+
'
</strong></label></div>
'
;
return
radioHtml
;
function
createRadioElementSites
(
mode
,
name
,
checked
,
label
,
id
)
{
var
f
=
"
getSectors
"
;
return
createRadioElement
(
name
,
id
,
label
,
f
);
}
function
createRadioElementStreamingsPlatforms
(
mode
,
name
,
checked
,
id
,
name
)
{
var
radioHtml
=
'
<div class="elem-div elem-
'
+
mode
+
'
"><input class="data-radio form-radio" onchange="getStreamingsDates(
'
+
"
'
"
+
id
.
toString
()
+
"
'
"
+
'
)"type="radio" name="
'
+
'
streamingplatforms
'
+
'
" id="
'
+
name
+
'
"
'
;
if
(
checked
)
{
radioHtml
+=
'
checked="checked"
'
;
// this one is different since it changes for reading and streaming
function
createRadioElementSectors
(
mode
,
name
,
checked
,
label
,
id
)
{
var
f
=
"
getSpots
"
;
// if reading
if
(
query_type
==
1
){
// if streaming
f
=
"
getStreamingsPlatforms
"
;
}
radioHtml
+=
'
/>
'
;
radioHtml
+=
'
<label for="
'
+
name
+
'
"><strong>
'
+
name
+
"
</strong><span class='detailed_info'> (ID:
"
+
id
+
"
)
"
+
'
</span></label></div>
'
;
return
createRadioElement
(
name
,
id
,
label
,
f
);
}
function
createRadioElementSpots
(
mode
,
name
,
checked
,
label
,
id
)
{
var
f
=
"
getReadings
"
;
return
createRadioElement
(
name
,
id
,
label
,
f
);
return
radioHtml
;
}
function
createRadioElementStreamingsPlatforms
(
mode
,
name
,
checked
,
id
,
label
)
{
var
f
=
"
getStreamingsDates
"
;
return
createRadioElement
(
name
,
id
,
label
,
f
);
}
// this one doesnt use the general formula.
function
createRadioElementStreamingsDates
(
mode
,
name
,
checked
,
date
)
{
var
radioHtml
=
'
<div class="elem-div elem-
'
+
mode
+
'
"><input class="data-radio form-radio" onchange="getStreamings(
'
+
"
'
"
+
date
+
"
'
"
+
'
)"type="radio" name="
'
+
name
+
'
" id="
'
+
date
+
'
"
'
;
if
(
checked
)
{
...
...
@@ -113,22 +102,12 @@ function createRadioElementStreamingsDates( mode, name, checked, date ) {
return
radioHtml
;
}
function
createRadioElementStreamings
(
mode
,
name
,
checked
,
label
)
{
var
radioHtml
=
'
<div class="elem-div elem-
'
+
mode
+
'
"><input class="data-radio form-radio" onclick="displayStreamings(
'
+
"
'
"
+
label
+
"
'
"
+
'
)" type="radio" name="
'
+
name
+
'
" id="
'
+
label
+
'
"
'
;
if
(
checked
)
{
radioHtml
+=
'
checked="checked"
'
;
}
radioHtml
+=
'
/>
'
;
radioHtml
+=
'
<label for="
'
+
label
+
'
"><strong>Set
'
+
label
+
'
</strong></label></div>
'
;
return
radioHtml
;
var
f
=
"
displayStreamings
"
;
return
createRadioElement
(
name
,
name
,
label
,
f
);
}
function
createRadioElementReadings
(
mode
,
name
,
checked
,
label
)
{
var
radioHtml
=
'
<div class="elem-div elem-
'
+
mode
+
'
"><input class="data-radio form-radio" onclick="displayReadings(
'
+
"
'
"
+
label
+
"
'
"
+
'
)" type="radio" name="
'
+
name
+
'
" id="
'
+
label
+
'
"
'
;
if
(
checked
)
{
radioHtml
+=
'
checked="checked"
'
;
}
radioHtml
+=
'
/>
'
;
radioHtml
+=
'
<label for="
'
+
label
+
'
"><strong>Set
'
+
label
+
'
</strong></label></div>
'
;
return
radioHtml
;
var
f
=
"
displayReadings
"
;
return
createRadioElement
(
name
,
label
,
label
,
f
);
}
function
getRandomColor
()
{
...
...
views/index.ejs
View file @
51c08e40
...
...
@@ -20,6 +20,7 @@
<link
rel=
"stylesheet"
type=
"text/css"
href=
"css/graph.css"
/>
<link
rel=
"stylesheet"
type=
"text/css"
href=
"css/data.css"
/>
<link
rel=
"stylesheet"
type=
"text/css"
href=
"css/map.css"
/>
<link
rel=
"stylesheet"
type=
"text/css"
href=
"css/mobile.css"
/>
</head>
<body>
<div
id=
'loading'
>
...
...
@@ -67,6 +68,7 @@
<div
id=
'graphView'
>
<div
id=
'graph'
>
<canvas
id=
"line-chart"
></canvas>
<div
id=
'readingStats'
style=
'position:absolute;z-index: 10;width: 100%; height: 100%;'
></div>
</div>
<div
id=
'navcontrols'
>
<div
class=
'tooltip2'
>
...
...
@@ -107,8 +109,7 @@
<div
id=
'dataView'
>
<div
id=
'title'
>
<span
style=
'font-size:30px;'
>
IFS Datavis Tool
</span><br>
<span
style=
'font-size:15px;'
>
Additional Info
</span>
<span
style=
'font-size:20px;'
>
IFS Datavis Tool
</span><br>
</div>
<div
id=
'data'
>
<div
class=
'data-catagory'
id=
'query_type'
>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment