Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
T
timebars
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Analytics
Analytics
CI / CD
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Nesstar
timebars
Commits
c082ad2d
Commit
c082ad2d
authored
Apr 01, 2014
by
Kjetil Thuen
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Display metadata for selected/hovered birthyear
parent
451e5a0c
Changes
4
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
128 additions
and
26 deletions
+128
-26
src/app/main.coffee
src/app/main.coffee
+1
-1
src/app/timebars.coffee
src/app/timebars.coffee
+74
-16
src/style/timebars.scss
src/style/timebars.scss
+42
-8
www/index.html
www/index.html
+11
-1
No files found.
src/app/main.coffee
View file @
c082ad2d
...
...
@@ -7,7 +7,7 @@ window.nesstartimebars = {}
window
.
nesstartimebars
.
main
=
(
containerId
,
dataDesc
)
->
nesstarloader
.
reloadNesstarData
(
(
data
)
->
timebars
.
setupChart
containerId
,
data
timebars
.
setupChart
containerId
,
data
,
dataDesc
.
display
currentFrame
=
timebars
.
nextFrame
containerId
,
currentFrame
,
dataDesc
)
...
...
src/app/timebars.coffee
View file @
c082ad2d
...
...
@@ -33,26 +33,48 @@ x_scale = (chartId) ->
y_scale
=
(
chartId
)
->
d3
.
scale
.
linear
()
.
domain
(
d3
.
extent
valuesFromFrame
(
chartId
,
0
),
(
d
)
->
d
.
age
)
.
range
[
0
,
chartHeight
(
chartId
)
]
.
range
[
0
,
chartHeight
chartId
]
x_axis
=
(
chartId
)
->
d3
.
svg
.
axis
()
.
scale
x_scale
(
chartId
)
.
scale
x_scale
chartId
.
orient
"bottom"
.
ticks
5
y_axis
=
(
chartId
)
->
d3
.
svg
.
axis
()
.
scale
y_scale
(
chartId
)
.
scale
y_scale
chartId
.
orient
"left"
.
ticks
5
prepareMetadataDiv
=
(
chartId
,
data
,
mapping
)
->
if
data
fieldMapping
=
mapping
or
{
birthyear
:
"birthyear"
,
left
:
"lvalue"
,
right
:
"rvalue"
}
_results
=
[
"<dl> "
]
for
own
field
,
name
of
fieldMapping
_results
.
push
"<dt>"
_results
.
push
completeData
[
chartId
].
displayDetails
[
field
+
"label"
]
_results
.
push
"</dt>"
_results
.
push
"<dd>"
_results
.
push
data
[
name
]
_results
.
push
"</dd>"
_results
.
push
"</dl>"
_results
.
join
""
updateInformation
=
(
chartId
,
data
)
->
# FIXME: Add a delay to reduce flicker
if
not
data
data
=
d3
.
select
(
chartId
+
" svg.chart g.selected"
).
data
()
data
=
d3
.
select
(
chartId
+
" svg.chart g.selected"
).
data
()
[
0
]
d3
.
select
chartId
+
" div.dataDetails"
.
html
JSON
.
stringify
(
data
)
.
html
prepareMetadataDiv
chartId
,
data
hoverBar
=
(
chartId
)
->
(
data
,
index
)
->
...
...
@@ -84,15 +106,16 @@ addBar = (newBar, chartId) ->
.
attr
"class"
,
"valuepoint"
.
attr
"transform"
,
(
d
,
i
)
->
"translate(0, "
+
(
y_scale
(
chartId
)(
i
)
+
1
)
+
")"
.
on
"mouseover"
,
hoverBar
(
chartId
)
.
on
"mouseout"
,
unhoverBar
(
chartId
)
.
on
"click"
,
selectBar
(
chartId
)
.
on
"mouseover"
,
hoverBar
chartId
.
on
"mouseout"
,
unhoverBar
chartId
.
on
"click"
,
selectBar
chartId
barGroup
.
append
"rect"
.
attr
"class"
,
"right"
.
attr
"x"
,
chartWidth
(
chartId
)
/
2
+
margin
(
chartId
)
.
attr
"width"
,
(
d
)
->
x_scale
(
chartId
)(
d
.
rvalue
)
.
attr
"height"
,
barThickness
chartId
.
attr
"fill"
,
completeData
[
chartId
].
displayDetails
.
rightcolor
barGroup
.
append
"text"
.
attr
"x"
,
chartWidth
(
chartId
)
/
2
...
...
@@ -103,7 +126,8 @@ addBar = (newBar, chartId) ->
.
attr
"x"
,
(
d
)
->
(
chartWidth
(
chartId
)
/
2
)
-
x_scale
(
chartId
)(
d
.
lvalue
)
-
margin
(
chartId
)
.
attr
"width"
,
(
d
)
->
x_scale
(
chartId
)(
d
.
lvalue
)
.
attr
"height"
,
barThickness
(
chartId
)
.
attr
"height"
,
barThickness
chartId
.
attr
"fill"
,
completeData
[
chartId
].
displayDetails
.
leftcolor
valuesFromFrame
=
(
chartId
,
frameNum
)
->
frameIndexes
=
lodash
.
keys
(
completeData
[
chartId
])
...
...
@@ -117,14 +141,15 @@ updateChart = (chartId, frameNum) ->
valuepoints
=
chart
.
selectAll
"g.valuepoint"
.
data
data
,
(
d
)
->
d
.
birthyear
label
=
chart
.
select
"g div.yearLabel"
.
html
(
d
)
->
data
.
year
label
=
d3
.
select
chartId
+
" span.yearLabel"
.
html
completeData
[
chartId
].
displayDetails
.
name
+
" "
+
lodash
.
keys
(
completeData
[
chartId
])[
frameNum
]
valuepoints
.
transition
()
.
attr
"transform"
,
(
d
,
i
)
->
"translate(0, "
+
(
y_scale
(
chartId
)(
i
)
+
1
)
+
")"
yAxesGroup
.
call
(
y_axis
(
chartId
)
)
yAxesGroup
.
call
(
y_axis
chartId
)
addBar
valuepoints
.
enter
(),
chartId
...
...
@@ -150,11 +175,24 @@ nextFrame = (chartId, frameNum) ->
#are ignored), each element in these arrays should contain an object that has
#the value property.
#
#The c
ontainerId is just a string identfying
a div within wich the graph should
#The c
hartId is the id attribute of
a div within wich the graph should
#be built. There can be several simultanious graphs
setupChart
=
(
chartId
,
data
)
->
#
#displayDetails contain stuff like labels and colors
setupChart
=
(
chartId
,
data
,
displayDetails
)
->
if
data
completeData
[
chartId
]
=
data
completeData
[
chartId
].
displayDetails
=
displayDetails
or
{
name
:
"Timebars"
,
leftsymbol
:
"fa fa-female"
,
rightsymbol
:
"fa fa-male"
,
leftlabel
:
"Women"
,
rightlabel
:
"Men"
,
leftcolor
:
"#EBA487"
,
rightcolor
:
"#87CEEB"
,
yearlabel
:
"Year"
,
birthyearlabel
:
"Birthyear"
}
lodash
.
forEach
(
lodash
.
keys
completeData
),
(
id
)
->
...
...
@@ -175,13 +213,33 @@ setupChart = (chartId, data) ->
.
attr
"transform"
,
"translate("
+
chartWidth
(
id
)
/
2
+
","
+
margin
(
id
)
+
")"
d3
.
select
chartId
metadata
=
d3
.
select
chartId
.
append
"div"
.
attr
"class"
,
"metaData"
metadata
.
append
"span"
.
attr
"class"
,
"yearLabel"
.
data
data
metadata
.
append
"div"
.
attr
"class"
,
"dataDetails"
d3
.
select
chartId
.
append
"div"
.
attr
"class"
,
"dataDetails"
.
attr
"class"
,
"leftLabel"
.
html
"<i class='"
+
completeData
[
chartId
].
displayDetails
.
leftsymbol
+
"'></i> "
+
completeData
[
chartId
].
displayDetails
.
leftlabel
d3
.
select
chartId
.
append
"div"
.
attr
"class"
,
"rightLabel"
.
html
"<i class='"
+
completeData
[
chartId
].
displayDetails
.
rightsymbol
+
"'></i> "
+
completeData
[
chartId
].
displayDetails
.
rightlabel
window
.
onresize
=
setupChart
...
...
src/style/timebars.scss
View file @
c082ad2d
@mixin
rounded
(
$radius
:
0
.5em
)
{
-webkit-border-radius
:
$radius
;
-moz-border-radius
:
$radius
;
border-radius
:
$radius
;
}
#main
{
margin-top
:
2em
;
}
...
...
@@ -6,17 +13,13 @@
margin
:
1em
;
}
div
.chartContainer
{
position
:
relative
;
}
.chart
{
pointer-events
:
all
;
rect
.right
{
fill
:
#EBA487
;
}
rect
.left
{
fill
:
#87CEEB
;
}
.valuepoint
text
{
visibility
:
hidden
;
text-anchor
:
middle
;
...
...
@@ -36,3 +39,34 @@
}
}
}
div
.metaData
{
@include
rounded
();
position
:
absolute
;
left
:
1em
;
top
:
1em
;
background
:
rgba
(
0
.2
,
0
.2
,
0
.2
,
0
.6
);
padding
:
0
.5em
;
color
:
#fff
;
display
:
inline
;
span
.yearLabel
{
font-size
:
150%
;
}
}
div
.leftLabel
{
font-size
:
200%
;
position
:
absolute
;
left
:
1em
;
bottom
:
1em
;
}
div
.rightLabel
{
font-size
:
200%
;
position
:
absolute
;
right
:
1em
;
bottom
:
1em
;
text-align
:
right
;
}
www/index.html
View file @
c082ad2d
...
...
@@ -10,7 +10,7 @@
</head>
<body>
<section
id=
"main"
>
<div
id=
"content"
></div>
<div
class=
"chartContainer"
id=
"content"
></div>
<button
id=
"playBtn"
class=
"btn btn-primary"
onclick=
"window.nesstartimebars.toggleAnimation('#content')"
>
<i
class=
"fa fa-play"
></i>
</button>
...
...
@@ -45,6 +45,16 @@
"
members
"
:
[
"
12
"
]
}
]
},
display
:
{
name
:
"
Befolkningsframskrivning for Hordaland, fordelt på kjønn
"
,
leftsymbol
:
"
fa fa-female
"
,
rightsymbol
:
"
fa fa-male
"
,
leftlabel
:
"
Kvinner
"
,
rightlabel
:
"
Menn
"
,
leftcolor
:
"
#EBA487
"
,
rightcolor
:
"
#87CEEB
"
,
birthyearlabel
:
"
Fødselsår
"
}
};
...
...
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