Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
F
fordecyt_2019
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Rodrigo Tapia-McClung
fordecyt_2019
Commits
51a2313b
Commit
51a2313b
authored
Aug 19, 2019
by
Anne Blankert
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
add colors to classes
parent
a47462c2
Changes
2
Expand all
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
4177 additions
and
15 deletions
+4177
-15
attrinfo.html
public/attrinfo.html
+105
-15
colorbrewer.js
public/colorbrewer.js
+4072
-0
No files found.
public/attrinfo.html
View file @
51a2313b
...
...
@@ -18,7 +18,10 @@
flex-direction
:
column
;
justify-content
:
space-between
;
}
#feaureinfo
{
display
:
inline-block
;}
#featureinfo
{
display
:
inline-block
;
max-width
:
400px
;
}
#attrinfo
{
display
:
flex
;
flex-wrap
:
wrap
;
...
...
@@ -31,10 +34,12 @@
<script
src=
'https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.0/mapbox-gl.js'
></script>
<link
href=
'https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.0/mapbox-gl.css'
rel=
'stylesheet'
/>
<link
href=
'loader.css'
rel=
'stylesheet'
/>
<script
src=
"./colorbrewer.js"
></script>
<script>
"use strict"
;
let
map
=
null
;
let
globalStats
=
null
;
function
init
()
{
const
urlParams
=
new
URLSearchParams
(
window
.
location
.
search
);
...
...
@@ -74,6 +79,7 @@
})
}
graphStats
(
json
)
globalStats
=
json
;
})
.
catch
(
err
=>
attrInfoElement
.
innerHTML
=
`Failed to parse response, message:
${
err
.
message
}
`
...
...
@@ -81,16 +87,6 @@
})
}
function
addLegendLine
(
color
,
label
)
{
const
legend
=
document
.
querySelector
(
'#legend'
);
const
svg
=
`<svg width="30" height="15">
<rect width="30" height="15" style="fill:
${
color
}
;fill-opacity:1;stroke-width:1;stroke:#444"></rect>
</svg>`
const
legendLine
=
document
.
createElement
(
'div'
);
legendLine
.
innerHTML
=
`<div><span>
${
svg
}
</span><span>
${
label
}
<span></div>`
legend
.
appendChild
(
legendLine
);
}
function
initMap
()
{
const
urlParams
=
new
URLSearchParams
(
window
.
location
.
search
);
...
...
@@ -293,6 +289,88 @@
}
})
}
function
addLegendLine
(
color
,
label
)
{
const
legend
=
document
.
querySelector
(
'#legend'
);
const
svg
=
`<svg width="30" height="15">
<rect width="30" height="15" style="fill:
${
color
}
;fill-opacity:1;stroke-width:1;stroke:#444"></rect>
</svg>`
const
legendLine
=
document
.
createElement
(
'div'
);
legendLine
.
innerHTML
=
`<div> <span>
${
svg
}
</span> <span>
${
label
}
<span></div>`
legend
.
appendChild
(
legendLine
);
}
function
prepareLegend
()
{
if
(
globalStats
)
{
document
.
querySelector
(
'#legend'
).
innerHTML
=
''
;
return
true
;
}
let
messageElem
=
document
.
querySelector
(
'#legend.message'
);
if
(
messageElem
)
{
return
false
;
}
messageElem
=
document
.
createElement
(
'div'
);
messageElem
.
classList
.
add
(
'message'
);
messageElem
.
innerHTML
=
"waiting for stats, retry later..."
;
return
false
;
}
// legendTypes 'div', 'qual', 'seq'
// for diverging, qualitative and sequential legends
function
getColorSchemes
(
numClasses
,
legendType
)
{
return
colorbrewer
.
filter
(
scheme
=>
scheme
.
type
===
legendType
&&
scheme
.
sets
.
length
>
numClasses
-
3
)
.
map
(
scheme
=>
{
const
result
=
scheme
.
sets
[
numClasses
-
3
];
result
.
name
=
scheme
.
name
;
result
.
type
=
scheme
.
type
;
return
result
;
});
}
function
classButton
(
classType
)
{
if
(
prepareLegend
())
{
const
classCount
=
document
.
querySelector
(
'#classcount'
).
value
;
if
(
classCount
===
1
)
{
// special case, single classification
}
else
{
// classCount > 1
const
rowCount
=
globalStats
.
percentiles
.
reduce
((
result
,
percentile
)
=>
result
+
percentile
.
count
,
0
);
let
classValues
=
globalStats
.
values
.
filter
(
value
=>
value
.
value
!==
null
);
if
(
classValues
.
length
>
classCount
)
{
classValues
=
classValues
.
slice
(
0
,
classCount
-
1
);
const
classValuesRowCount
=
classValues
.
reduce
((
result
,
value
)
=>
result
+
value
.
count
,
0
);
classValues
.
push
({
value
:
"other"
,
count
:
rowCount
-
classValuesRowCount
})
const
schemes
=
getColorSchemes
(
classCount
,
'qual'
);
const
mapboxPaint
=
{
"line-color"
:
[
"match"
,
[
"get"
,
"bicycle"
]
],
"line-width"
:
1
}
classValues
.
forEach
((
value
,
index
)
=>
{
addLegendLine
(
schemes
[
0
].
colors
[
index
],
value
.
value
);
mapboxPaint
[
"line-color"
].
push
(
value
.
value
);
mapboxPaint
[
"line-color"
].
push
(
schemes
[
0
].
colors
[
index
]);
});
mapboxPaint
[
"line-color"
].
push
(
schemes
[
0
].
colors
[
classValues
.
length
-
1
]);
map
.
setPaintProperty
(
'attrlayer'
,
'line-color'
,
mapboxPaint
[
"line-color"
]);
}
}
const
nullValues
=
globalStats
.
values
.
filter
(
value
=>
value
.
value
===
null
).
reduce
((
result
,
value
)
=>
result
+
value
.
count
,
0
);
const
checkButtonNullValues
=
document
.
querySelector
(
'#hidenulls'
)
if
(
nullValues
)
{
checkButtonNullValues
.
removeAttribute
(
'disabled'
);
}
else
{
checkButtonNullValues
.
setAttribute
(
'disabled'
,
''
)
}
}
}
</script>
</head>
...
...
@@ -312,11 +390,23 @@
<div
id=
"map"
></div>
<div
id=
"featurecontainer"
>
<div
id=
"legendcontainer"
>
<select
id=
"numclasses"
name=
"numclasses"
>
<option>
1
</option>
<select
id=
"classcount"
name=
"classcount"
>
<option
value=
"1"
selected
>
1
</option>
<option
value=
"2"
>
2
</option>
<option
value=
"3"
>
3
</option>
<option
value=
"4"
>
4
</option>
<option
value=
"5"
>
5
</option>
<option
value=
"6"
>
6
</option>
<option
value=
"7"
>
7
</option>
<option
value=
"8"
>
8
</option>
<option
value=
"9"
>
9
</option>
<option
value=
"10"
>
10
</option>
<option
value=
"11"
>
11
</option>
<option
value=
"12"
>
12
</option>
</select><label
for=
"numclasses"
>
number of classes
</label><br>
<button>
equal interval
</button>
<button>
quantile
</button><br>
<button
onclick=
"classButton('interval')"
>
equal interval
</button>
<button
onclick=
"classButton('quantile')"
>
quantile
</button>
<button
onclick=
"classButton('qualitative')"
>
qualitative
</button><br>
<input
type=
"checkbox"
id=
"hidenulls"
name=
"hidenulls"
checked
><label
for=
"hidenulls"
>
Hide null values
</label>
<div
id=
"legend"
></div>
</div>
...
...
public/colorbrewer.js
0 → 100644
View file @
51a2313b
This diff is collapsed.
Click to expand it.
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