Compare commits
No commits in common. 'gh-pages' and 'master' have entirely different histories.
334 changed files with 58852 additions and 447 deletions
@ -0,0 +1,6 @@ |
|||||||
|
# Ignore pelican output directories |
||||||
|
pelican/cache |
||||||
|
pelican/output |
||||||
|
|
||||||
|
# Python |
||||||
|
*.pyc |
||||||
@ -0,0 +1,22 @@ |
|||||||
|
The MIT License (MIT) |
||||||
|
|
||||||
|
Copyright (c) 2015 Charles Reid |
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy |
||||||
|
of this software and associated documentation files (the "Software"), to deal |
||||||
|
in the Software without restriction, including without limitation the rights |
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
||||||
|
copies of the Software, and to permit persons to whom the Software is |
||||||
|
furnished to do so, subject to the following conditions: |
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all |
||||||
|
copies or substantial portions of the Software. |
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE |
||||||
|
SOFTWARE. |
||||||
|
|
||||||
@ -0,0 +1,2 @@ |
|||||||
|
# dang-sunburst |
||||||
|
Exploring D3 sunburst charts with D3 + Angular + Pelican. |
||||||
@ -1,68 +0,0 @@ |
|||||||
<!DOCTYPE html> |
|
||||||
<html lang="en"> |
|
||||||
<head> |
|
||||||
<title>dang-sunburst - Authors</title> |
|
||||||
<meta charset="utf-8" /> |
|
||||||
|
|
||||||
<!-- |
|
||||||
my CSS styles |
|
||||||
--> |
|
||||||
<link href="/dang-sunburst/theme/css/bootstrap.css" rel="stylesheet" type="text/css"> |
|
||||||
<link href="/dang-sunburst/theme/css/main.css" rel="stylesheet" type="text/css"> |
|
||||||
|
|
||||||
<link href="/dang-sunburst/theme/css/cosmo.css" rel="stylesheet" type="text/css"> |
|
||||||
<link href="/dang-sunburst/theme/css/font-awesome.css" rel="stylesheet" type="text/css"/> |
|
||||||
<link href="/dang-sunburst/theme/css/pygment.css" rel="stylesheet" type="text/css"/> |
|
||||||
|
|
||||||
<!-- |
|
||||||
include Angular first |
|
||||||
--> |
|
||||||
<script type="text/javascript" src="/dang-sunburst/theme/js/angular-1.3.15.js"></script> |
|
||||||
</head> |
|
||||||
|
|
||||||
<body id="index" class="home"> |
|
||||||
<div class="container"> |
|
||||||
<h1><a href="/dang-sunburst/">dang-sunburst <strong></strong></a></h1> |
|
||||||
<hr /> |
|
||||||
|
|
||||||
<h1>Authors on dang-sunburst</h1> |
|
||||||
|
|
||||||
<ul> </ul> |
|
||||||
</div> |
|
||||||
|
|
||||||
<footer id="contentinfo" class="body"> |
|
||||||
<hr /> |
|
||||||
<p style="text-align: center"> |
|
||||||
<span class="fa-stack fa-lg"> |
|
||||||
<i class="fa fa-square fa-stack-2x"></i> |
|
||||||
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i> |
|
||||||
</span> |
|
||||||
Made from the command line with vim by |
|
||||||
<a href="http://charlesreid1.com">charlesreid1</a>. |
|
||||||
</p> |
|
||||||
|
|
||||||
<p style="text-align: center;">Made with HTML ( |
|
||||||
<a href="http://http://bootstrap.org/">Bootstrap</a>, |
|
||||||
<a href="http://bootswatch.com">Bootswatch</a>), |
|
||||||
Javascript ( |
|
||||||
<a href="http://http://d3js.org/">D3.js</a>, |
|
||||||
<a href=https://angularjs.org/">Angular.js</a>, |
|
||||||
<a href="https://jquery.com/">jQuery</a>), |
|
||||||
and Python ( |
|
||||||
<a href="http://getpelican.com">Pelican</a>, |
|
||||||
<a href="http://http://stanford.edu/~mwaskom/software/seaborn/">Seaborn</a>, |
|
||||||
<a href="http://matplotlib.org">Matplotlib</a>, |
|
||||||
<a href="http://numpy.org">Numpy</a>). |
|
||||||
</p> |
|
||||||
|
|
||||||
<script type="text/javascript" src="/dang-sunburst/theme/js/jquery-1.11.2.js"></script> |
|
||||||
<script type="text/javascript" src="/dang-sunburst/theme/js/bootstrap-3.3.4.js"></script> |
|
||||||
<script type="text/javascript" src="/dang-sunburst/theme/js/d3-3.5.5.js"></script> |
|
||||||
<!-- |
|
||||||
<script type="text/javascript" src="/dang-sunburst/theme/js/leaflet-0.7.3.js"></script> |
|
||||||
<script type="text/javascript" src="/dang-sunburst/theme/js/leaflet.ajax.min.js"></script> |
|
||||||
--> |
|
||||||
</footer><!-- /#contentinfo --> |
|
||||||
|
|
||||||
</body> |
|
||||||
</html> |
|
||||||
@ -0,0 +1,68 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<title>dang-sunburst - Authors</title> |
||||||
|
<meta charset="utf-8" /> |
||||||
|
|
||||||
|
<!-- |
||||||
|
my CSS styles |
||||||
|
--> |
||||||
|
<link href="/theme/css/bootstrap.css" rel="stylesheet" type="text/css"> |
||||||
|
<link href="/theme/css/main.css" rel="stylesheet" type="text/css"> |
||||||
|
|
||||||
|
<link href="/theme/css/cosmo.css" rel="stylesheet" type="text/css"> |
||||||
|
<link href="/theme/css/font-awesome.css" rel="stylesheet" type="text/css"/> |
||||||
|
<link href="/theme/css/pygment.css" rel="stylesheet" type="text/css"/> |
||||||
|
|
||||||
|
<!-- |
||||||
|
include Angular first |
||||||
|
--> |
||||||
|
<script type="text/javascript" src="/theme/js/angular-1.3.15.js"></script> |
||||||
|
<script src="//d3js.org/d3.v3.min.js"></script> |
||||||
|
</head> |
||||||
|
|
||||||
|
<body id="index" class="home"> |
||||||
|
<div class="container"> |
||||||
|
<h1><a href="/">dang-sunburst <strong></strong></a></h1> |
||||||
|
<hr /> |
||||||
|
|
||||||
|
<h1>Authors on dang-sunburst</h1> |
||||||
|
|
||||||
|
<ul> </ul> |
||||||
|
</div> |
||||||
|
|
||||||
|
<footer id="contentinfo" class="body"> |
||||||
|
<hr /> |
||||||
|
<p style="text-align: center"> |
||||||
|
<span class="fa-stack fa-lg"> |
||||||
|
<i class="fa fa-square fa-stack-2x"></i> |
||||||
|
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i> |
||||||
|
</span> |
||||||
|
Made from the command line with vim by |
||||||
|
<a href="http://charlesreid1.com">charlesreid1</a>. |
||||||
|
</p> |
||||||
|
|
||||||
|
<p style="text-align: center;">Made with HTML ( |
||||||
|
<a href="http://http://bootstrap.org/">Bootstrap</a>, |
||||||
|
<a href="http://bootswatch.com">Bootswatch</a>), |
||||||
|
Javascript ( |
||||||
|
<a href="http://http://d3js.org/">D3.js</a>, |
||||||
|
<a href=https://angularjs.org/">Angular.js</a>, |
||||||
|
<a href="https://jquery.com/">jQuery</a>), |
||||||
|
and Python ( |
||||||
|
<a href="http://pydata.org">Pandas</a>, |
||||||
|
<a href="http://getpelican.com">Pelican</a>, |
||||||
|
<a href="http://ipython.org">Jupyter Notebooks</a>). |
||||||
|
</p> |
||||||
|
|
||||||
|
<script type="text/javascript" src="/theme/js/jquery-1.11.2.js"></script> |
||||||
|
<script type="text/javascript" src="/theme/js/bootstrap-3.3.4.js"></script> |
||||||
|
<!-- |
||||||
|
<script type="text/javascript" src="/theme/js/d3-3.5.5.js"></script> |
||||||
|
<script type="text/javascript" src="/theme/js/leaflet-0.7.3.js"></script> |
||||||
|
<script type="text/javascript" src="/theme/js/leaflet.ajax.min.js"></script> |
||||||
|
--> |
||||||
|
</footer><!-- /#contentinfo --> |
||||||
|
|
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,161 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<title>bubbles Chart</title> |
||||||
|
<meta charset="utf-8" /> |
||||||
|
|
||||||
|
<!-- |
||||||
|
my CSS styles |
||||||
|
--> |
||||||
|
<link href="/theme/css/bootstrap.css" rel="stylesheet" type="text/css"> |
||||||
|
<link href="/theme/css/main.css" rel="stylesheet" type="text/css"> |
||||||
|
|
||||||
|
<link href="/theme/css/cosmo.css" rel="stylesheet" type="text/css"> |
||||||
|
<link href="/theme/css/font-awesome.css" rel="stylesheet" type="text/css"/> |
||||||
|
<link href="/theme/css/pygment.css" rel="stylesheet" type="text/css"/> |
||||||
|
|
||||||
|
<!-- |
||||||
|
include Angular first |
||||||
|
--> |
||||||
|
<script type="text/javascript" src="/theme/js/angular-1.3.15.js"></script> |
||||||
|
<script src="//d3js.org/d3.v3.min.js"></script> |
||||||
|
</head> |
||||||
|
|
||||||
|
<body id="index" class="home"> |
||||||
|
<div class="container"> |
||||||
|
<h1><a href="/">dang-sunburst <strong></strong></a></h1> |
||||||
|
<hr /> |
||||||
|
|
||||||
|
|
||||||
|
<link href="/bubbles/bubbles.css" rel="stylesheet" stype="text/css" /> |
||||||
|
|
||||||
|
<div ng-app="bubblesApp"> |
||||||
|
|
||||||
|
<div ng-controller="bubblesController" ng-init="initialize()"> |
||||||
|
|
||||||
|
|
||||||
|
<div class="row"> |
||||||
|
<div class="col-sm-12" id="bubbles_title"> |
||||||
|
<bubbleshead></bubbleshead> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="row"> |
||||||
|
<div class="col-sm-10" id="bubbles_controls"> |
||||||
|
<bubblescontrols></bubblescontrols> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
<div class="row"> |
||||||
|
<div class="col-sm-6" id="bubbles_charts"> |
||||||
|
<div class="row" id="bubbles_chart"> |
||||||
|
<bubbleschart></bubbleschart> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="col-sm-6" id="bubbles_panels"> |
||||||
|
<div class="row" id="bubbles_panel"> |
||||||
|
<bubblespanel></bubblespanel> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="row"> |
||||||
|
|
||||||
|
<div class="col-sm-10" id="bubbles_text"> |
||||||
|
<div class="row" id="bubbles_md"> |
||||||
|
Bubble chart. |
||||||
|
|
||||||
|
<br /> |
||||||
|
<br /> |
||||||
|
|
||||||
|
<pre style="font-size: 8px;"> |
||||||
|
[ |
||||||
|
{ "className": "S324", |
||||||
|
"axes": [ |
||||||
|
{"value": 1, "axis": "January"}, |
||||||
|
{"value": 0, "axis": "February"}, |
||||||
|
|
||||||
|
... |
||||||
|
|
||||||
|
{"value": 0, "axis": "December"} |
||||||
|
] |
||||||
|
}, |
||||||
|
{ "className": "S328", |
||||||
|
"axes": [ |
||||||
|
{"value": 1, "axis": "January"}, |
||||||
|
{"value": 1, "axis": "February"}, |
||||||
|
|
||||||
|
... |
||||||
|
|
||||||
|
{"value": 2, "axis": "December"} |
||||||
|
] |
||||||
|
}, |
||||||
|
{ "className": "Y15", |
||||||
|
"axes": [ |
||||||
|
{"value": 3, "axis": "January"}, |
||||||
|
{"value": 2, "axis": "February"}, |
||||||
|
|
||||||
|
... |
||||||
|
|
||||||
|
{"value": 1, "axis": "December"} |
||||||
|
] |
||||||
|
} |
||||||
|
] |
||||||
|
</pre> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
<script src="http://d3js.org/d3.v3.js"></script> |
||||||
|
<script type="text/javascript" src="/bubbles/bubbles_modcontrol.js"></script> |
||||||
|
<script type="text/javascript" src="/bubbles/bubbles_chart.js"></script> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
<footer id="contentinfo" class="body"> |
||||||
|
<hr /> |
||||||
|
<p style="text-align: center"> |
||||||
|
<span class="fa-stack fa-lg"> |
||||||
|
<i class="fa fa-square fa-stack-2x"></i> |
||||||
|
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i> |
||||||
|
</span> |
||||||
|
Made from the command line with vim by |
||||||
|
<a href="http://charlesreid1.com">charlesreid1</a>. |
||||||
|
</p> |
||||||
|
|
||||||
|
<p style="text-align: center;">Made with HTML ( |
||||||
|
<a href="http://http://bootstrap.org/">Bootstrap</a>, |
||||||
|
<a href="http://bootswatch.com">Bootswatch</a>), |
||||||
|
Javascript ( |
||||||
|
<a href="http://http://d3js.org/">D3.js</a>, |
||||||
|
<a href=https://angularjs.org/">Angular.js</a>, |
||||||
|
<a href="https://jquery.com/">jQuery</a>), |
||||||
|
and Python ( |
||||||
|
<a href="http://pydata.org">Pandas</a>, |
||||||
|
<a href="http://getpelican.com">Pelican</a>, |
||||||
|
<a href="http://ipython.org">Jupyter Notebooks</a>). |
||||||
|
</p> |
||||||
|
|
||||||
|
<script type="text/javascript" src="/theme/js/jquery-1.11.2.js"></script> |
||||||
|
<script type="text/javascript" src="/theme/js/bootstrap-3.3.4.js"></script> |
||||||
|
<!-- |
||||||
|
<script type="text/javascript" src="/theme/js/d3-3.5.5.js"></script> |
||||||
|
<script type="text/javascript" src="/theme/js/leaflet-0.7.3.js"></script> |
||||||
|
<script type="text/javascript" src="/theme/js/leaflet.ajax.min.js"></script> |
||||||
|
--> |
||||||
|
</footer><!-- /#contentinfo --> |
||||||
|
|
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,72 @@ |
|||||||
|
[{"labels": "S324", "values": [{"value": 1, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "S328", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 2, "label": "June"}, {"value": 2, "label": "July"}, {"value": 0, "label": "August"}, {"value": 1, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "Y15", "values": [{"value": 1, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "Y14", "values": [{"value": 2, "label": "January"}, {"value": 0, "label": "February"}, {"value": 1, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 1, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 1, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "I120", "values": [{"value": 2, "label": "January"}, {"value": 2, "label": "February"}, {"value": 2, "label": "March"}, {"value": 2, "label": "April"}, {"value": 2, "label": "May"}, {"value": 1, "label": "June"}, {"value": 6, "label": "July"}, {"value": 2, "label": "August"}, {"value": 1, "label": "September"}, {"value": 3, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "I129", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 1, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 1, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "A051", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 1, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "W19", "values": [{"value": 1, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 2, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 1, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "T465", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 1, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 1, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "C449", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 1, "label": "August"}, {"value": 0, "label": "September"}, {"value": 1, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "C119", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 1, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 1, "label": "September"}, {"value": 0, "label": "October"}, {"value": 1, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "C444", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 1, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "T519", "values": [{"value": 1, "label": "January"}, {"value": 1, "label": "February"}, {"value": 0, "label": "March"}, {"value": 1, "label": "April"}, {"value": 0, "label": "May"}, {"value": 1, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 1, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "T510", "values": [{"value": 3, "label": "January"}, {"value": 1, "label": "February"}, {"value": 6, "label": "March"}, {"value": 5, "label": "April"}, {"value": 5, "label": "May"}, {"value": 6, "label": "June"}, {"value": 6, "label": "July"}, {"value": 1, "label": "August"}, {"value": 8, "label": "September"}, {"value": 1, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "T511", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 1, "label": "May"}, {"value": 1, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "K117", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 1, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "W18", "values": [{"value": 2, "label": "January"}, {"value": 1, "label": "February"}, {"value": 1, "label": "March"}, {"value": 2, "label": "April"}, {"value": 1, "label": "May"}, {"value": 0, "label": "June"}, {"value": 1, "label": "July"}, {"value": 0, "label": "August"}, {"value": 2, "label": "September"}, {"value": 2, "label": "October"}, {"value": 1, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "C781", "values": [{"value": 0, "label": "January"}, {"value": 1, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "I38", "values": [{"value": 3, "label": "January"}, {"value": 0, "label": "February"}, {"value": 1, "label": "March"}, {"value": 2, "label": "April"}, {"value": 2, "label": "May"}, {"value": 3, "label": "June"}, {"value": 3, "label": "July"}, {"value": 1, "label": "August"}, {"value": 0, "label": "September"}, {"value": 2, "label": "October"}, {"value": 1, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "M109", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 2, "label": "June"}, {"value": 1, "label": "July"}, {"value": 1, "label": "August"}, {"value": 0, "label": "September"}, {"value": 1, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "G610", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 1, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "J159", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 1, "label": "March"}, {"value": 0, "label": "April"}, {"value": 1, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 1, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "J150", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 1, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "J151", "values": [{"value": 1, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 1, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "J152", "values": [{"value": 1, "label": "January"}, {"value": 1, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 1, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 1, "label": "September"}, {"value": 2, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "C259", "values": [{"value": 4, "label": "January"}, {"value": 4, "label": "February"}, {"value": 4, "label": "March"}, {"value": 3, "label": "April"}, {"value": 2, "label": "May"}, {"value": 5, "label": "June"}, {"value": 6, "label": "July"}, {"value": 7, "label": "August"}, {"value": 6, "label": "September"}, {"value": 5, "label": "October"}, {"value": 3, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "I829", "values": [{"value": 0, "label": "January"}, {"value": 1, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 1, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "T983", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 1, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "R402", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 1, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 1, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "C254", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 1, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "F059", "values": [{"value": 0, "label": "January"}, {"value": 1, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 1, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 1, "label": "August"}, {"value": 0, "label": "September"}, {"value": 1, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "F051", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 1, "label": "September"}, {"value": 1, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "C341", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 1, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 1, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "K909", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 1, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "J90", "values": [{"value": 1, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 2, "label": "April"}, {"value": 2, "label": "May"}, {"value": 1, "label": "June"}, {"value": 2, "label": "July"}, {"value": 0, "label": "August"}, {"value": 2, "label": "September"}, {"value": 2, "label": "October"}, {"value": 1, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "T443", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 1, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "J969", "values": [{"value": 11, "label": "January"}, {"value": 10, "label": "February"}, {"value": 13, "label": "March"}, {"value": 13, "label": "April"}, {"value": 17, "label": "May"}, {"value": 13, "label": "June"}, {"value": 16, "label": "July"}, {"value": 21, "label": "August"}, {"value": 11, "label": "September"}, {"value": 12, "label": "October"}, {"value": 4, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "J961", "values": [{"value": 4, "label": "January"}, {"value": 3, "label": "February"}, {"value": 4, "label": "March"}, {"value": 1, "label": "April"}, {"value": 3, "label": "May"}, {"value": 4, "label": "June"}, {"value": 2, "label": "July"}, {"value": 0, "label": "August"}, {"value": 4, "label": "September"}, {"value": 3, "label": "October"}, {"value": 1, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "J960", "values": [{"value": 5, "label": "January"}, {"value": 2, "label": "February"}, {"value": 8, "label": "March"}, {"value": 6, "label": "April"}, {"value": 5, "label": "May"}, {"value": 4, "label": "June"}, {"value": 7, "label": "July"}, {"value": 2, "label": "August"}, {"value": 9, "label": "September"}, {"value": 6, "label": "October"}, {"value": 1, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "V439", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 1, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "K137", "values": [{"value": 1, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "S061", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 1, "label": "July"}, {"value": 0, "label": "August"}, {"value": 1, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "S060", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 1, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "R090", "values": [{"value": 2, "label": "January"}, {"value": 2, "label": "February"}, {"value": 5, "label": "March"}, {"value": 2, "label": "April"}, {"value": 2, "label": "May"}, {"value": 0, "label": "June"}, {"value": 3, "label": "July"}, {"value": 4, "label": "August"}, {"value": 4, "label": "September"}, {"value": 3, "label": "October"}, {"value": 1, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "R092", "values": [{"value": 6, "label": "January"}, {"value": 5, "label": "February"}, {"value": 7, "label": "March"}, {"value": 1, "label": "April"}, {"value": 5, "label": "May"}, {"value": 2, "label": "June"}, {"value": 8, "label": "July"}, {"value": 5, "label": "August"}, {"value": 4, "label": "September"}, {"value": 4, "label": "October"}, {"value": 1, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "R098", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 1, "label": "August"}, {"value": 2, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "S066", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 1, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 1, "label": "July"}, {"value": 0, "label": "August"}, {"value": 1, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "S065", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 3, "label": "April"}, {"value": 2, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 3, "label": "September"}, {"value": 2, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "T794", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 1, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "I698", "values": [{"value": 2, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 1, "label": "April"}, {"value": 1, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 3, "label": "August"}, {"value": 0, "label": "September"}, {"value": 1, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "I694", "values": [{"value": 4, "label": "January"}, {"value": 1, "label": "February"}, {"value": 3, "label": "March"}, {"value": 1, "label": "April"}, {"value": 2, "label": "May"}, {"value": 0, "label": "June"}, {"value": 2, "label": "July"}, {"value": 2, "label": "August"}, {"value": 0, "label": "September"}, {"value": 2, "label": "October"}, {"value": 1, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "I690", "values": [{"value": 1, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "D693", "values": [{"value": 1, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "D695", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 1, "label": "August"}, {"value": 0, "label": "September"}, {"value": 1, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "D696", "values": [{"value": 0, "label": "January"}, {"value": 2, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 1, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 1, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "D699", "values": [{"value": 0, "label": "January"}, {"value": 1, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "K739", "values": [{"value": 0, "label": "January"}, {"value": 2, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 1, "label": "May"}, {"value": 1, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "X78", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 1, "label": "June"}, {"value": 0, "label": "July"}, {"value": 1, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "X74", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 2, "label": "May"}, {"value": 4, "label": "June"}, {"value": 8, "label": "July"}, {"value": 7, "label": "August"}, {"value": 6, "label": "September"}, {"value": 7, "label": "October"}, {"value": 1, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "I10", "values": [{"value": 33, "label": "January"}, {"value": 17, "label": "February"}, {"value": 32, "label": "March"}, {"value": 22, "label": "April"}, {"value": 22, "label": "May"}, {"value": 24, "label": "June"}, {"value": 22, "label": "July"}, {"value": 30, "label": "August"}, {"value": 20, "label": "September"}, {"value": 18, "label": "October"}, {"value": 8, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "C099", "values": [{"value": 0, "label": "January"}, {"value": 1, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "P236", "values": [{"value": 1, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "K922", "values": [{"value": 8, "label": "January"}, {"value": 5, "label": "February"}, {"value": 5, "label": "March"}, {"value": 5, "label": "April"}, {"value": 10, "label": "May"}, {"value": 7, "label": "June"}, {"value": 5, "label": "July"}, {"value": 5, "label": "August"}, {"value": 7, "label": "September"}, {"value": 8, "label": "October"}, {"value": 1, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "K920", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 1, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "Q938", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 1, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "D487", "values": [{"value": 0, "label": "January"}, {"value": 1, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 2, "label": "July"}, {"value": 0, "label": "August"}, {"value": 1, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "Q200", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 1, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "C151", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 1, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "C159", "values": [{"value": 7, "label": "January"}, {"value": 1, "label": "February"}, {"value": 0, "label": "March"}, {"value": 1, "label": "April"}, {"value": 5, "label": "May"}, {"value": 2, "label": "June"}, {"value": 3, "label": "July"}, {"value": 0, "label": "August"}, {"value": 2, "label": "September"}, {"value": 4, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "X94", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 1, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "V224", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 1, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||||
|
{"labels": "G409", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 1, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 1, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}] |
||||||
@ -0,0 +1,516 @@ |
|||||||
|
var ng; |
||||||
|
dir = []; |
||||||
|
|
||||||
|
//////////////////////////////////////
|
||||||
|
// Chart Directives
|
||||||
|
//
|
||||||
|
// This file defines Angular directives
|
||||||
|
// that use D3 to draw charts.
|
||||||
|
//
|
||||||
|
|
||||||
|
///////////////////////////////////////
|
||||||
|
// Header Directives:
|
||||||
|
//
|
||||||
|
// Print out instructions, title, etc.
|
||||||
|
|
||||||
|
|
||||||
|
ng = a.directive('bubbleshead', function($compile) { |
||||||
|
|
||||||
|
function link(scope, element, attr) { |
||||||
|
|
||||||
|
var el = element[0]; |
||||||
|
|
||||||
|
$(el).empty(); |
||||||
|
|
||||||
|
var dir = $("div#bubbles_title"); |
||||||
|
|
||||||
|
var h1 = $("<h1 />"); |
||||||
|
|
||||||
|
var b = $("<b />") |
||||||
|
.text("bubble chart example") |
||||||
|
.appendTo(h1); |
||||||
|
|
||||||
|
h1.appendTo(dir); |
||||||
|
|
||||||
|
|
||||||
|
var p = $("<p />", { |
||||||
|
"class" : "normal" }) |
||||||
|
.html("A fancy little bubble chart.") |
||||||
|
.appendTo(dir); |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
return { |
||||||
|
restrict: "E", |
||||||
|
link: link, |
||||||
|
scope: {} |
||||||
|
} |
||||||
|
}); |
||||||
|
dir.push(ng); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
///////////////////////////////////////////////
|
||||||
|
// Chart Controls Directives
|
||||||
|
|
||||||
|
ng = a.directive('bubblescontrols', function($compile) { |
||||||
|
|
||||||
|
function link(scope, element, attr) { |
||||||
|
|
||||||
|
// wait to build the buttons until we've loaded the data,
|
||||||
|
// since the buttons come from the data.
|
||||||
|
scope.$parent.$watch('bubblesdata',doStuff); |
||||||
|
|
||||||
|
function doStuff() { |
||||||
|
if(!scope.$parent.bubblesdata) { return; } |
||||||
|
buildButtons(element, scope.$parent); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
}; |
||||||
|
|
||||||
|
function buildButtons(element,pscope) { |
||||||
|
|
||||||
|
var mydiv = "div#bubbles_controls"; |
||||||
|
|
||||||
|
var el = $(mydiv); |
||||||
|
|
||||||
|
var div = $("<div />"); |
||||||
|
|
||||||
|
|
||||||
|
// ------------------------------------
|
||||||
|
// Add ICD 10 code buttons
|
||||||
|
//
|
||||||
|
var btn_grp = $("<div />", { |
||||||
|
"id" : "codebtns", |
||||||
|
"class" : "btn-group" |
||||||
|
}); |
||||||
|
|
||||||
|
for( var i = 0; i < pscope.bubblesdata.length; i++ ) { |
||||||
|
var this_code = pscope.bubblesdata[i]['labels'] |
||||||
|
var code = $("<a />", { |
||||||
|
"class" : "btn btn-code btn-large btn-primary", |
||||||
|
"changecode" : "", |
||||||
|
"id" : "btn_"+this_code, |
||||||
|
"code" : this_code, |
||||||
|
}) |
||||||
|
.html( this_code ) |
||||||
|
.appendTo(btn_grp); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// to make buttons in this btn group active,
|
||||||
|
// you have to use D3's classed() method
|
||||||
|
// after you add the elements to the document
|
||||||
|
// (i.e., after you call $compile)
|
||||||
|
|
||||||
|
angular.element(el).append($compile(btn_grp)(pscope)); |
||||||
|
|
||||||
|
|
||||||
|
pscope.updateCode = function() { |
||||||
|
|
||||||
|
// -----------------------------
|
||||||
|
// make button for active icd 10 code
|
||||||
|
|
||||||
|
d3.selectAll("a.btn-code").classed('active',false); |
||||||
|
var btnlabel = "a#btn_"+pscope.icd10code; |
||||||
|
d3.selectAll(btnlabel).classed('active',true); |
||||||
|
|
||||||
|
}; |
||||||
|
|
||||||
|
pscope.$watch('icd10code',pscope.updateCode); |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
return { |
||||||
|
restrict: "E", |
||||||
|
link: link, |
||||||
|
scope: {} |
||||||
|
} |
||||||
|
}); |
||||||
|
dir.push(ng); |
||||||
|
|
||||||
|
|
||||||
|
//////////////////////////////////
|
||||||
|
// Action directive:
|
||||||
|
// What to do when the user changes the ICD 10 code
|
||||||
|
// by clicking an ICD 10 code button
|
||||||
|
|
||||||
|
ng = a.directive("changecode", function($compile) { |
||||||
|
|
||||||
|
return function(pscope, element, attrs){ |
||||||
|
element.bind("click", function(){ |
||||||
|
|
||||||
|
// first, update the scope variable
|
||||||
|
// that holds the current icd 10 code
|
||||||
|
// (no need to load any new data)
|
||||||
|
|
||||||
|
|
||||||
|
// This is the ICD 10 code the user has selected.
|
||||||
|
var this_code = attrs['code']; |
||||||
|
var this_description = pscope.icd10codes_all[this_code] |
||||||
|
|
||||||
|
//console.log('Changed icd 10 code, updating description:');
|
||||||
|
//console.log(this_code);
|
||||||
|
//console.log(this_description);
|
||||||
|
|
||||||
|
|
||||||
|
// !!!!!!!!!!!!!!!!!!!!!!!!
|
||||||
|
// NOTE
|
||||||
|
// The lines below - this $apply() method -
|
||||||
|
// this is the way you change the variable
|
||||||
|
// at the controller level, and get the
|
||||||
|
// various watchers to detect changes.
|
||||||
|
// !!!!!!!!!!!!!!!!!!!!!!!!!!
|
||||||
|
pscope.$apply(function() { |
||||||
|
pscope.icd10code = this_code; |
||||||
|
}); |
||||||
|
|
||||||
|
pscope.$apply(function() { |
||||||
|
pscope.description = this_description; |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
//// This is some weak-sauce,
|
||||||
|
//// its not even changing value of variable
|
||||||
|
//pscope.update_icd10code(attrs['code']);
|
||||||
|
//// ...
|
||||||
|
//// .......
|
||||||
|
//// seriously.
|
||||||
|
//// all we needed was just
|
||||||
|
//// pscope.$apply()
|
||||||
|
////
|
||||||
|
//// smh.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//// then run the donut chart update function
|
||||||
|
//pscope.updatebubbles();
|
||||||
|
|
||||||
|
// then run the button controllers update function
|
||||||
|
pscope.updateCode(); |
||||||
|
|
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
///////////////////////////////////////////////
|
||||||
|
// Panels:
|
||||||
|
// Display useful information in a pretty box
|
||||||
|
|
||||||
|
|
||||||
|
ng = a.directive('bubblespanel', function($compile) { |
||||||
|
|
||||||
|
|
||||||
|
function link(scope, element, attr) { |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
var el = element[0]; |
||||||
|
|
||||||
|
var pscope = scope.$parent; |
||||||
|
|
||||||
|
// --------------------------
|
||||||
|
// add display for details
|
||||||
|
|
||||||
|
// assemble the tags,
|
||||||
|
// then compile the html
|
||||||
|
// select element of interest with angular.element
|
||||||
|
// and append the compiled tags
|
||||||
|
//
|
||||||
|
var br = $("<br />").appendTo(el); |
||||||
|
|
||||||
|
var panel = $("<div />", { |
||||||
|
"class" : "panel panel-primary", |
||||||
|
"id" : "first" |
||||||
|
}); |
||||||
|
|
||||||
|
var panelhead = $("<div />", { |
||||||
|
"class" : "panel-heading" |
||||||
|
}).appendTo(panel); |
||||||
|
|
||||||
|
var h3 = $("<h3 />", { |
||||||
|
"class" : "panel-title" |
||||||
|
}).text("Current ICD 10 Code") |
||||||
|
.appendTo(panelhead); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
var panelbody = $("<div />", { |
||||||
|
"class" : "panel-body" |
||||||
|
}).appendTo(panel); |
||||||
|
|
||||||
|
var maindiv = $("<div />", { |
||||||
|
}).appendTo(panelbody); |
||||||
|
|
||||||
|
var h = $("<h3 />") |
||||||
|
.html("ICD 10 Code: [[icd10code]]") |
||||||
|
.appendTo(maindiv); |
||||||
|
|
||||||
|
var de = $("<p />", { |
||||||
|
"class" : "lead" }) |
||||||
|
.html("Description: [[description]]") |
||||||
|
.appendTo(maindiv); |
||||||
|
|
||||||
|
angular.element(el).prepend($compile(panel)(pscope)); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
return { |
||||||
|
link: link, |
||||||
|
restrict: "E", |
||||||
|
scope: { } |
||||||
|
}; |
||||||
|
}); |
||||||
|
dir.push(ng); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
///////////////////////////////////////////////
|
||||||
|
// bubbles Chart
|
||||||
|
//
|
||||||
|
// This is the actual donut chart, of gender ratios.
|
||||||
|
|
||||||
|
ng = a.directive('bubbleschart', function($compile) { |
||||||
|
|
||||||
|
function link(scope, element, attr) { |
||||||
|
|
||||||
|
scope.$parent.$watch('bubblesdata',doStuff); |
||||||
|
|
||||||
|
function doStuff() { |
||||||
|
if(!scope.$parent.bubblesdata) { return; } |
||||||
|
buildbubbles(element, scope.$parent); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
}; |
||||||
|
|
||||||
|
function buildbubbles(element,pscope) { |
||||||
|
|
||||||
|
var mydiv = "div#bubbles_chart"; |
||||||
|
|
||||||
|
|
||||||
|
var diameter = 500, //max size of the bubbles
|
||||||
|
color = d3.scale.category20b(); //color category
|
||||||
|
|
||||||
|
var bubble = d3.layout.pack() |
||||||
|
.sort(null) |
||||||
|
.size([diameter, diameter]) |
||||||
|
.padding(1.5); |
||||||
|
|
||||||
|
var svg = d3.select(mydiv).append("svg") |
||||||
|
.attr("width", diameter) |
||||||
|
.attr("height", diameter) |
||||||
|
.attr("class", "bubble"); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
pscope.updatebubbles = function() { |
||||||
|
|
||||||
|
console.log('update bubbles'); |
||||||
|
|
||||||
|
var all_data = pscope.bubblesdata; |
||||||
|
|
||||||
|
// ----------------------------------
|
||||||
|
// Get pie chart data
|
||||||
|
//
|
||||||
|
// Here, we have all donut data
|
||||||
|
// available to us.
|
||||||
|
//
|
||||||
|
// We use the currently-selected ICD 10 code
|
||||||
|
// to filter which donut data is being plotted.
|
||||||
|
//
|
||||||
|
// Where to keep track of current code?
|
||||||
|
// In the controller (available via pscope).
|
||||||
|
// pscope.icd10code
|
||||||
|
//
|
||||||
|
var code; |
||||||
|
var data; |
||||||
|
for( var i=0; i < all_data.length; i++ ) { |
||||||
|
|
||||||
|
// set excpetion handling:
|
||||||
|
// if no icd10code is set, problems occur.
|
||||||
|
if(all_data[i]['labels'] == pscope.icd10code) { |
||||||
|
code = all_data[i]['labels']; |
||||||
|
data = all_data[i]['values']; |
||||||
|
break; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// finished; use data
|
||||||
|
// ---------------------------------
|
||||||
|
|
||||||
|
svg.selectAll("circle").remove() |
||||||
|
svg.selectAll(".bubblelabels").remove() |
||||||
|
|
||||||
|
/////////////////////////////////////////
|
||||||
|
// Create chart
|
||||||
|
//
|
||||||
|
//
|
||||||
|
|
||||||
|
//bubbles needs very specific format, convert data to this.
|
||||||
|
var nodes = bubble.nodes({children:data}).filter(function(d) { return !d.children; }); |
||||||
|
|
||||||
|
var g = svg.selectAll("circle") |
||||||
|
.data(nodes, function(d) { |
||||||
|
return d.label; |
||||||
|
}) |
||||||
|
.enter(); |
||||||
|
|
||||||
|
g.append("circle") |
||||||
|
.attr("r", function(d) { |
||||||
|
return +d.value*10; |
||||||
|
}) |
||||||
|
.attr("cx", function(d){ return d.x; }) |
||||||
|
.attr("cy", function(d){ return d.y; }) |
||||||
|
.attr("class","node") |
||||||
|
.style("fill", function(d) { return color(d.label); }); |
||||||
|
g.append("text") |
||||||
|
.text(function(d){ |
||||||
|
if( +d.value > 0 ) { |
||||||
|
return d.label; |
||||||
|
} |
||||||
|
}) |
||||||
|
.attr("class","bubblelabels") |
||||||
|
.attr("x", function(d){ return d.x; }) |
||||||
|
.attr("y", function(d){ return d.y; }) |
||||||
|
|
||||||
|
/* |
||||||
|
//format the text for each bubble
|
||||||
|
circles.append("text") |
||||||
|
//.attr("x", function(d){ return d.x; })
|
||||||
|
//.attr("y", function(d){ return d.y; })
|
||||||
|
.attr("text-anchor", "middle") |
||||||
|
.text(function(d){ |
||||||
|
console.log(d.label); |
||||||
|
return d.label; }) |
||||||
|
.style({ |
||||||
|
"color" : "red", |
||||||
|
"font-family":"Helvetica Neue, Helvetica, Arial, san-serif", |
||||||
|
"font-size": "12px" |
||||||
|
}); |
||||||
|
*/ |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
pscope.$watch('icd10code',pscope.updatebubbles); |
||||||
|
} |
||||||
|
|
||||||
|
return { |
||||||
|
link: link, |
||||||
|
restrict: "E", |
||||||
|
scope: { } |
||||||
|
}; |
||||||
|
}); |
||||||
|
dir.push(ng); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// BubbleChart = function(){
|
||||||
|
//
|
||||||
|
// var diameter;
|
||||||
|
//
|
||||||
|
// /**
|
||||||
|
// * Create a bubble chart
|
||||||
|
// *
|
||||||
|
// * @param {data} array of objects with name/value keys
|
||||||
|
// * @param {elm} string the element which to put this chart
|
||||||
|
// * @param {size} object with width/height keys
|
||||||
|
// * @param {pallet} array | undefined of hex codes for the bubble colors
|
||||||
|
// */
|
||||||
|
// this.createChart = function(data, elm, size, pallet) {
|
||||||
|
//
|
||||||
|
// pallet = pallet || ["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"];
|
||||||
|
// var domain = [],
|
||||||
|
// sorted = [];
|
||||||
|
//
|
||||||
|
// data = data.sort(function(a, b){ return b.value - a.value});
|
||||||
|
//
|
||||||
|
//
|
||||||
|
// for(var i=0; i<data.length; ++i){
|
||||||
|
// domain.push(data[i].value);
|
||||||
|
// }
|
||||||
|
//
|
||||||
|
// var diameter = Math.min(size.width, size.height),
|
||||||
|
// color = d3.scale.ordinal().domain(domain).range(pallet);
|
||||||
|
//
|
||||||
|
// var bubble = d3.layout.pack()
|
||||||
|
// .sort(null)
|
||||||
|
// .size([size.width, size.height])
|
||||||
|
// .padding(1.5);
|
||||||
|
//
|
||||||
|
// var svg = d3.select(elm).append("svg")
|
||||||
|
// .attr("width", size.width)
|
||||||
|
// .attr("height", size.height)
|
||||||
|
// .attr("class", "bubble");
|
||||||
|
//
|
||||||
|
// nodes = bubble.nodes({children:data}).filter(function(d) { return !d.children; });
|
||||||
|
//
|
||||||
|
// var circles = svg.selectAll("circle")
|
||||||
|
// .data(nodes, function(d){return d.name;})
|
||||||
|
// .enter()
|
||||||
|
// .append("circle")
|
||||||
|
// .attr("r", 0)
|
||||||
|
// .style("fill", function(d) { console.log(d); return color(d.value); })
|
||||||
|
// .attr("cx", function(d){ return d.x;})
|
||||||
|
// .attr("cy", function(d){ return d.y;})
|
||||||
|
// .attr("class", "node");
|
||||||
|
//
|
||||||
|
// circles.transition()
|
||||||
|
// .duration(1000)
|
||||||
|
// .attr("r", function(d) { return d.r; })
|
||||||
|
// .each('end', function(){ display_text();});
|
||||||
|
//
|
||||||
|
// function display_text() {
|
||||||
|
// var text = svg
|
||||||
|
// .selectAll(".text")
|
||||||
|
// .data(nodes, function(d){return d.name;});
|
||||||
|
//
|
||||||
|
// text.enter().append("text")
|
||||||
|
// .attr("class", "text")
|
||||||
|
// .style("font-size", "10px")
|
||||||
|
// .attr("x", function(d) { return d.x; })
|
||||||
|
// .attr("y", function(d) { return d.y; })
|
||||||
|
// .attr("dy", ".3em")
|
||||||
|
// .attr("text-anchor", "middle")
|
||||||
|
// .text(function(d) { return d.name.substring(0, d.r / 3); });
|
||||||
|
// }
|
||||||
|
//
|
||||||
|
// function hide_text() {
|
||||||
|
// var text = svg.selectAll(".text").remove();
|
||||||
|
// }
|
||||||
|
//
|
||||||
|
// this.changeData = function(newData){
|
||||||
|
// hide_text();
|
||||||
|
// nodes = bubble.nodes({children:newData}).filter(function(d) { return !d.children; });
|
||||||
|
// circles = circles.data(nodes);
|
||||||
|
// circles.transition().duration(1000)
|
||||||
|
// .attr("r", function(d){ return d.r;})
|
||||||
|
// .attr("cx", function(d){ return d.x;})
|
||||||
|
// .attr("cy", function(d){ return d.y;})
|
||||||
|
// .each('end', function(){ display_text();});
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
//
|
||||||
|
// d3.select(self.frameElement).style("height", diameter + "px");
|
||||||
|
//
|
||||||
|
// return this;
|
||||||
|
// };
|
||||||
|
//
|
||||||
|
//
|
||||||
|
// */
|
||||||
@ -0,0 +1,76 @@ |
|||||||
|
///////////////////////////////////////
|
||||||
|
//
|
||||||
|
// bubbles
|
||||||
|
//
|
||||||
|
// Module/Controller
|
||||||
|
//
|
||||||
|
|
||||||
|
var a = angular.module("bubblesApp", [], function($interpolateProvider) { |
||||||
|
$interpolateProvider.startSymbol('[['); |
||||||
|
$interpolateProvider.endSymbol(']]'); |
||||||
|
} |
||||||
|
); |
||||||
|
|
||||||
|
var datafactory = a.factory('datafactory', function($http, $q) { |
||||||
|
|
||||||
|
return { |
||||||
|
getbubblesdata: function() { |
||||||
|
var deferred = $q.defer(); |
||||||
|
|
||||||
|
var json_file = 'bubbles.json'; |
||||||
|
|
||||||
|
$http.get(json_file).success(function(data) { |
||||||
|
deferred.resolve(data); |
||||||
|
}).error(function(){ |
||||||
|
console.log('error loading json file: '+json_file); |
||||||
|
deferred.reject(); |
||||||
|
}); |
||||||
|
|
||||||
|
return deferred.promise; |
||||||
|
}, |
||||||
|
|
||||||
|
getCodeData: function() { |
||||||
|
var deferred = $q.defer(); |
||||||
|
|
||||||
|
$http.get('icd10codes.json').success(function(data) { |
||||||
|
deferred.resolve(data); |
||||||
|
}).error(function(){ |
||||||
|
console.log('error loading icd10codes.json'); |
||||||
|
deferred.reject(); |
||||||
|
}); |
||||||
|
|
||||||
|
return deferred.promise; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
function bubblesController($scope,datafactory) { |
||||||
|
|
||||||
|
$scope.initialize = function() { |
||||||
|
|
||||||
|
$scope.icd10code="S324"; |
||||||
|
$scope.donutFemale = 0; |
||||||
|
$scope.donutMale = 0; |
||||||
|
|
||||||
|
datafactory.getbubblesdata().then( |
||||||
|
function(data) { |
||||||
|
$scope.bubblesdata = data; |
||||||
|
} |
||||||
|
); |
||||||
|
|
||||||
|
datafactory.getCodeData().then( |
||||||
|
function(data) { |
||||||
|
$scope.icd10codes_all = data; |
||||||
|
var descr = $scope.icd10codes_all[$scope.icd10code]; |
||||||
|
$scope.description = descr; |
||||||
|
} |
||||||
|
); |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
// the first few arguments of the list should correspond to the Angular-namespace stuff to feed to controller
|
||||||
|
var c = a.controller("bubblesController", ["$scope", "datafactory", bubblesController]); |
||||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 99 KiB |
|
Before Width: | Height: | Size: 115 KiB After Width: | Height: | Size: 115 KiB |
|
After Width: | Height: | Size: 63 KiB |
|
After Width: | Height: | Size: 70 KiB |
|
Before Width: | Height: | Size: 106 KiB After Width: | Height: | Size: 106 KiB |
|
Before Width: | Height: | Size: 90 KiB After Width: | Height: | Size: 90 KiB |
|
Before Width: | Height: | Size: 105 KiB After Width: | Height: | Size: 105 KiB |
|
Before Width: | Height: | Size: 129 KiB After Width: | Height: | Size: 129 KiB |
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 3.8 KiB |
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 50 KiB |
|
Before Width: | Height: | Size: 115 KiB After Width: | Height: | Size: 115 KiB |
|
After Width: | Height: | Size: 106 KiB |
|
After Width: | Height: | Size: 58 KiB |
|
Before Width: | Height: | Size: 6.3 KiB After Width: | Height: | Size: 6.3 KiB |
@ -0,0 +1,86 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<title>Sunburst Chart: Bigrams</title> |
||||||
|
<meta charset="utf-8" /> |
||||||
|
|
||||||
|
<!-- |
||||||
|
my CSS styles |
||||||
|
--> |
||||||
|
<link href="/theme/css/bootstrap.css" rel="stylesheet" type="text/css"> |
||||||
|
<link href="/theme/css/main.css" rel="stylesheet" type="text/css"> |
||||||
|
|
||||||
|
<link href="/theme/css/cosmo.css" rel="stylesheet" type="text/css"> |
||||||
|
<link href="/theme/css/font-awesome.css" rel="stylesheet" type="text/css"/> |
||||||
|
<link href="/theme/css/pygment.css" rel="stylesheet" type="text/css"/> |
||||||
|
|
||||||
|
<!-- |
||||||
|
include Angular first |
||||||
|
--> |
||||||
|
<script type="text/javascript" src="/theme/js/angular-1.3.15.js"></script> |
||||||
|
<script src="//d3js.org/d3.v3.min.js"></script> |
||||||
|
</head> |
||||||
|
|
||||||
|
<body id="index" class="home"> |
||||||
|
<div class="container"> |
||||||
|
<h1><a href="/">dang-sunburst <strong></strong></a></h1> |
||||||
|
<hr /> |
||||||
|
|
||||||
|
|
||||||
|
<link href="/letters/bigrams.css" rel="stylesheet" stype="text/css" /> |
||||||
|
|
||||||
|
<div ng-app="bigramsApp"> |
||||||
|
|
||||||
|
<div ng-controller="HelloController" ng-init="initialize()"> |
||||||
|
|
||||||
|
<p> |
||||||
|
<bigram-sunburst-head></bigram-sunburst-head> |
||||||
|
<bigram-sunburst-controls></bigram-sunburst-controls> |
||||||
|
<bigram-sunburst-chart></bigram-sunburst-chart> |
||||||
|
</p> |
||||||
|
|
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
<script type="text/javascript" src="/letters/bigrams_modcontrol.js"></script> |
||||||
|
<script type="text/javascript" src="/letters/bigrams_sunburst.js"></script> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
<footer id="contentinfo" class="body"> |
||||||
|
<hr /> |
||||||
|
<p style="text-align: center"> |
||||||
|
<span class="fa-stack fa-lg"> |
||||||
|
<i class="fa fa-square fa-stack-2x"></i> |
||||||
|
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i> |
||||||
|
</span> |
||||||
|
Made from the command line with vim by |
||||||
|
<a href="http://charlesreid1.com">charlesreid1</a>. |
||||||
|
</p> |
||||||
|
|
||||||
|
<p style="text-align: center;">Made with HTML ( |
||||||
|
<a href="http://http://bootstrap.org/">Bootstrap</a>, |
||||||
|
<a href="http://bootswatch.com">Bootswatch</a>), |
||||||
|
Javascript ( |
||||||
|
<a href="http://http://d3js.org/">D3.js</a>, |
||||||
|
<a href=https://angularjs.org/">Angular.js</a>, |
||||||
|
<a href="https://jquery.com/">jQuery</a>), |
||||||
|
and Python ( |
||||||
|
<a href="http://pydata.org">Pandas</a>, |
||||||
|
<a href="http://getpelican.com">Pelican</a>, |
||||||
|
<a href="http://ipython.org">Jupyter Notebooks</a>). |
||||||
|
</p> |
||||||
|
|
||||||
|
<script type="text/javascript" src="/theme/js/jquery-1.11.2.js"></script> |
||||||
|
<script type="text/javascript" src="/theme/js/bootstrap-3.3.4.js"></script> |
||||||
|
<!-- |
||||||
|
<script type="text/javascript" src="/theme/js/d3-3.5.5.js"></script> |
||||||
|
<script type="text/javascript" src="/theme/js/leaflet-0.7.3.js"></script> |
||||||
|
<script type="text/javascript" src="/theme/js/leaflet.ajax.min.js"></script> |
||||||
|
--> |
||||||
|
</footer><!-- /#contentinfo --> |
||||||
|
|
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,86 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<title>Interactive Sunburst Chart: Bigrams</title> |
||||||
|
<meta charset="utf-8" /> |
||||||
|
|
||||||
|
<!-- |
||||||
|
my CSS styles |
||||||
|
--> |
||||||
|
<link href="/theme/css/bootstrap.css" rel="stylesheet" type="text/css"> |
||||||
|
<link href="/theme/css/main.css" rel="stylesheet" type="text/css"> |
||||||
|
|
||||||
|
<link href="/theme/css/cosmo.css" rel="stylesheet" type="text/css"> |
||||||
|
<link href="/theme/css/font-awesome.css" rel="stylesheet" type="text/css"/> |
||||||
|
<link href="/theme/css/pygment.css" rel="stylesheet" type="text/css"/> |
||||||
|
|
||||||
|
<!-- |
||||||
|
include Angular first |
||||||
|
--> |
||||||
|
<script type="text/javascript" src="/theme/js/angular-1.3.15.js"></script> |
||||||
|
<script src="//d3js.org/d3.v3.min.js"></script> |
||||||
|
</head> |
||||||
|
|
||||||
|
<body id="index" class="home"> |
||||||
|
<div class="container"> |
||||||
|
<h1><a href="/">dang-sunburst <strong></strong></a></h1> |
||||||
|
<hr /> |
||||||
|
|
||||||
|
|
||||||
|
<link href="/letters/bigrams2.css" rel="stylesheet" stype="text/css" /> |
||||||
|
|
||||||
|
<div ng-app="bigramsApp"> |
||||||
|
|
||||||
|
<div ng-controller="Bigram2Controller" ng-init="initialize()"> |
||||||
|
|
||||||
|
<p> |
||||||
|
<bigram2-sunburst-head></bigram2-sunburst-head> |
||||||
|
<bigram2-sunburst-controls></bigram2-sunburst-controls> |
||||||
|
<bigram2-sunburst-chart></bigram2-sunburst-chart> |
||||||
|
</p> |
||||||
|
|
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
<script type="text/javascript" src="/letters/bigrams2_modcontrol.js"></script> |
||||||
|
<script type="text/javascript" src="/letters/bigrams2_sunburst.js"></script> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
<footer id="contentinfo" class="body"> |
||||||
|
<hr /> |
||||||
|
<p style="text-align: center"> |
||||||
|
<span class="fa-stack fa-lg"> |
||||||
|
<i class="fa fa-square fa-stack-2x"></i> |
||||||
|
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i> |
||||||
|
</span> |
||||||
|
Made from the command line with vim by |
||||||
|
<a href="http://charlesreid1.com">charlesreid1</a>. |
||||||
|
</p> |
||||||
|
|
||||||
|
<p style="text-align: center;">Made with HTML ( |
||||||
|
<a href="http://http://bootstrap.org/">Bootstrap</a>, |
||||||
|
<a href="http://bootswatch.com">Bootswatch</a>), |
||||||
|
Javascript ( |
||||||
|
<a href="http://http://d3js.org/">D3.js</a>, |
||||||
|
<a href=https://angularjs.org/">Angular.js</a>, |
||||||
|
<a href="https://jquery.com/">jQuery</a>), |
||||||
|
and Python ( |
||||||
|
<a href="http://pydata.org">Pandas</a>, |
||||||
|
<a href="http://getpelican.com">Pelican</a>, |
||||||
|
<a href="http://ipython.org">Jupyter Notebooks</a>). |
||||||
|
</p> |
||||||
|
|
||||||
|
<script type="text/javascript" src="/theme/js/jquery-1.11.2.js"></script> |
||||||
|
<script type="text/javascript" src="/theme/js/bootstrap-3.3.4.js"></script> |
||||||
|
<!-- |
||||||
|
<script type="text/javascript" src="/theme/js/d3-3.5.5.js"></script> |
||||||
|
<script type="text/javascript" src="/theme/js/leaflet-0.7.3.js"></script> |
||||||
|
<script type="text/javascript" src="/theme/js/leaflet.ajax.min.js"></script> |
||||||
|
--> |
||||||
|
</footer><!-- /#contentinfo --> |
||||||
|
|
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,84 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<title>Hello</title> |
||||||
|
<meta charset="utf-8" /> |
||||||
|
|
||||||
|
<!-- |
||||||
|
my CSS styles |
||||||
|
--> |
||||||
|
<link href="/theme/css/bootstrap.css" rel="stylesheet" type="text/css"> |
||||||
|
<link href="/theme/css/main.css" rel="stylesheet" type="text/css"> |
||||||
|
|
||||||
|
<link href="/theme/css/cosmo.css" rel="stylesheet" type="text/css"> |
||||||
|
<link href="/theme/css/font-awesome.css" rel="stylesheet" type="text/css"/> |
||||||
|
<link href="/theme/css/pygment.css" rel="stylesheet" type="text/css"/> |
||||||
|
|
||||||
|
<!-- |
||||||
|
include Angular first |
||||||
|
--> |
||||||
|
<script type="text/javascript" src="/theme/js/angular-1.3.15.js"></script> |
||||||
|
<script src="//d3js.org/d3.v3.min.js"></script> |
||||||
|
</head> |
||||||
|
|
||||||
|
<body id="index" class="home"> |
||||||
|
<div class="container"> |
||||||
|
<h1><a href="/">dang-sunburst <strong></strong></a></h1> |
||||||
|
<hr /> |
||||||
|
|
||||||
|
|
||||||
|
<div ng-app="lettersApp"> |
||||||
|
|
||||||
|
<div ng-controller="HelloController" ng-init="initialize()"> |
||||||
|
|
||||||
|
<p> |
||||||
|
<plain-sunburst-head></plain-sunburst-head> |
||||||
|
<plain-sunburst-controls></plain-sunburst-controls> |
||||||
|
<plain-sunburst-chart></plain-sunburst-chart> |
||||||
|
</p> |
||||||
|
|
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
<script type="text/javascript" src="/letters/plain_modcontrol.js"></script> |
||||||
|
<script type="text/javascript" src="/letters/plain_sunburst.js"></script> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
<footer id="contentinfo" class="body"> |
||||||
|
<hr /> |
||||||
|
<p style="text-align: center"> |
||||||
|
<span class="fa-stack fa-lg"> |
||||||
|
<i class="fa fa-square fa-stack-2x"></i> |
||||||
|
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i> |
||||||
|
</span> |
||||||
|
Made from the command line with vim by |
||||||
|
<a href="http://charlesreid1.com">charlesreid1</a>. |
||||||
|
</p> |
||||||
|
|
||||||
|
<p style="text-align: center;">Made with HTML ( |
||||||
|
<a href="http://http://bootstrap.org/">Bootstrap</a>, |
||||||
|
<a href="http://bootswatch.com">Bootswatch</a>), |
||||||
|
Javascript ( |
||||||
|
<a href="http://http://d3js.org/">D3.js</a>, |
||||||
|
<a href=https://angularjs.org/">Angular.js</a>, |
||||||
|
<a href="https://jquery.com/">jQuery</a>), |
||||||
|
and Python ( |
||||||
|
<a href="http://pydata.org">Pandas</a>, |
||||||
|
<a href="http://getpelican.com">Pelican</a>, |
||||||
|
<a href="http://ipython.org">Jupyter Notebooks</a>). |
||||||
|
</p> |
||||||
|
|
||||||
|
<script type="text/javascript" src="/theme/js/jquery-1.11.2.js"></script> |
||||||
|
<script type="text/javascript" src="/theme/js/bootstrap-3.3.4.js"></script> |
||||||
|
<!-- |
||||||
|
<script type="text/javascript" src="/theme/js/d3-3.5.5.js"></script> |
||||||
|
<script type="text/javascript" src="/theme/js/leaflet-0.7.3.js"></script> |
||||||
|
<script type="text/javascript" src="/theme/js/leaflet.ajax.min.js"></script> |
||||||
|
--> |
||||||
|
</footer><!-- /#contentinfo --> |
||||||
|
|
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,414 @@ |
|||||||
|
/* |
||||||
|
* author: charles reid |
||||||
|
|
||||||
|
var data = [ |
||||||
|
{ |
||||||
|
groupName: 'group1', // optional, can be used for styling
|
||||||
|
values: [ |
||||||
|
{label: "asdf", value: 21}, |
||||||
|
{label: "qwerty", value: 19}, |
||||||
|
{label: "woieru", value: 11}, |
||||||
|
{label: "nxcb", value: 13} |
||||||
|
] |
||||||
|
}, |
||||||
|
{ |
||||||
|
groupName: 'group2', // optional, can be used for styling
|
||||||
|
values: [ |
||||||
|
{label: "asdf", value: 21}, |
||||||
|
{label: "qwerty", value: 19}, |
||||||
|
{label: "woieru", value: 11}, |
||||||
|
{label: "nxcb", value: 13} |
||||||
|
] |
||||||
|
} |
||||||
|
]; |
||||||
|
|
||||||
|
*/ |
||||||
|
var BarChart = { |
||||||
|
|
||||||
|
defaultConfig: { |
||||||
|
containerClass: 'bar-chart', |
||||||
|
w: 600, |
||||||
|
h: 600, |
||||||
|
maxValue: 0, |
||||||
|
color: d3.scale.category10(), |
||||||
|
axisLine: true, |
||||||
|
axisText: true, |
||||||
|
axisJoin: function(d, i) { |
||||||
|
return d.className || i; |
||||||
|
}, |
||||||
|
transitionDuration: 300 |
||||||
|
}, |
||||||
|
chartSetup: function() { |
||||||
|
|
||||||
|
// default config
|
||||||
|
var cfg = Object.create(BarChart.defaultConfig); |
||||||
|
|
||||||
|
function bar(selection) { |
||||||
|
|
||||||
|
selection.each(function(both_data) { |
||||||
|
|
||||||
|
var code = both_data[0]['className']; |
||||||
|
var data = both_data[0]['axes'] |
||||||
|
|
||||||
|
var container = d3.select(this); |
||||||
|
|
||||||
|
console.log('from a special place:'); |
||||||
|
console.log(data); |
||||||
|
|
||||||
|
//container.empty();
|
||||||
|
|
||||||
|
//container.classed(cfg.containerClass, 1);
|
||||||
|
|
||||||
|
///////////////////////////////////
|
||||||
|
// now draw the svg with d3
|
||||||
|
|
||||||
|
// ---------------
|
||||||
|
// the chart itself:
|
||||||
|
|
||||||
|
var margin = { |
||||||
|
top: 10, |
||||||
|
bottom: 100, |
||||||
|
|
||||||
|
right: 30, |
||||||
|
left: 50 |
||||||
|
}; |
||||||
|
|
||||||
|
var w = cfg.w; |
||||||
|
var h = cfg.h; |
||||||
|
|
||||||
|
var barwidth = w - margin.left - margin.right; |
||||||
|
var barheight = h - margin.top - margin.bottom; |
||||||
|
|
||||||
|
var x = d3.scale.ordinal() |
||||||
|
.rangeRoundBands([0, barwidth], .1); |
||||||
|
|
||||||
|
var y = d3.scale.linear() |
||||||
|
.range([barheight, 0]); |
||||||
|
|
||||||
|
var xAxis = d3.svg.axis() |
||||||
|
.scale(x) |
||||||
|
.orient("bottom"); |
||||||
|
|
||||||
|
var yAxis = d3.svg.axis() |
||||||
|
.scale(y) |
||||||
|
.orient("left") |
||||||
|
.ticks(10) |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
x.domain(data.map(function(d) { return d.label; })); |
||||||
|
|
||||||
|
y.domain([0, d3.max(data, function(d) { return d.value; })]); |
||||||
|
|
||||||
|
container.append("g") |
||||||
|
.attr("class", "x axis") |
||||||
|
.attr("transform", function(d,i) { |
||||||
|
return "translate(0,"+ (barheight) + ")"; |
||||||
|
}) |
||||||
|
.call(xAxis) |
||||||
|
.selectAll("text") |
||||||
|
.attr("class", "x axis label") |
||||||
|
.attr("transform", "rotate(90)" ) |
||||||
|
.style("text-anchor", "start") |
||||||
|
.attr("dx", "0.5em") |
||||||
|
.attr("dy", "-1em"); |
||||||
|
|
||||||
|
container.append("g") |
||||||
|
.attr("class", "y axis") |
||||||
|
.call(yAxis) |
||||||
|
.append("text") |
||||||
|
.attr("class", "y axis label") |
||||||
|
.attr("transform", "rotate(90)") |
||||||
|
.style("text-anchor", "start") |
||||||
|
.attr("y", 6) |
||||||
|
.attr("dy", "3.5em"); |
||||||
|
//.text("Number of Death Records");
|
||||||
|
|
||||||
|
var color = d3.scale.category10(); |
||||||
|
container.selectAll(".bar") |
||||||
|
.data(data) |
||||||
|
.enter().append("rect") |
||||||
|
.attr("class", "bar") |
||||||
|
.attr("fill",function(d,i) { |
||||||
|
///////////////////////////////////
|
||||||
|
// uuuugggghhhhhh fiixxxxx
|
||||||
|
return color(d.label) |
||||||
|
///////////////////////////////////
|
||||||
|
}) |
||||||
|
.attr("x", function(d) { return x(d.label); }) |
||||||
|
.attr("width", x.rangeBand()) |
||||||
|
.attr("y", function(d) { return y(d.value); }) |
||||||
|
.attr("height", function(d) { |
||||||
|
var toptobottom = (barheight); |
||||||
|
var toptobartop = y(d.value); |
||||||
|
var ht = toptobottom - toptobartop |
||||||
|
return ht; |
||||||
|
}); |
||||||
|
|
||||||
|
function type(d) { |
||||||
|
d.value = +d.value; |
||||||
|
return d; |
||||||
|
} |
||||||
|
|
||||||
|
// else: "No Data" label
|
||||||
|
|
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
bar.config = function(value) { |
||||||
|
if(!arguments.length) { |
||||||
|
return cfg; |
||||||
|
} |
||||||
|
if(arguments.length > 1) { |
||||||
|
cfg[arguments[0]] = arguments[1]; |
||||||
|
} |
||||||
|
else { |
||||||
|
d3.entries(value || {}).forEach(function(option) { |
||||||
|
cfg[option.key] = option.value; |
||||||
|
}); |
||||||
|
} |
||||||
|
return bar; |
||||||
|
}; |
||||||
|
|
||||||
|
return bar; |
||||||
|
|
||||||
|
}, |
||||||
|
|
||||||
|
draw: function(id, d, options) { |
||||||
|
var chart = BarChart.chart().config(options); |
||||||
|
var cfg = chart.config(); |
||||||
|
|
||||||
|
d3.select(id).select('svg').remove(); |
||||||
|
d3.select(id) |
||||||
|
.append("svg") |
||||||
|
.attr("width", cfg.w) |
||||||
|
.attr("height", cfg.h) |
||||||
|
.datum(d) |
||||||
|
.call(chart); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
}; |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* |
||||||
|
* A special bar chart |
||||||
|
* from Mike Bostock |
||||||
|
* |
||||||
|
* http://bl.ocks.org/mbostock/3885304
|
||||||
|
|
||||||
|
original data is a TSV in this format: |
||||||
|
|
||||||
|
letter frequency |
||||||
|
A .08167 |
||||||
|
B .01492 |
||||||
|
C .02782 |
||||||
|
D .04253 |
||||||
|
E .12702 |
||||||
|
F .02288 |
||||||
|
G .02015 |
||||||
|
H .06094 |
||||||
|
I .06966 |
||||||
|
J .00153 |
||||||
|
K .00772 |
||||||
|
L .04025 |
||||||
|
M .02406 |
||||||
|
N .06749 |
||||||
|
O .07507 |
||||||
|
P .01929 |
||||||
|
Q .00095 |
||||||
|
R .05987 |
||||||
|
S .06327 |
||||||
|
T .09056 |
||||||
|
U .02758 |
||||||
|
V .00978 |
||||||
|
W .02360 |
||||||
|
X .00150 |
||||||
|
Y .01974 |
||||||
|
Z .00074 |
||||||
|
|
||||||
|
|
||||||
|
Alternative 1: |
||||||
|
(Use this one!) |
||||||
|
-------------- |
||||||
|
Single series/univariate bar chart: |
||||||
|
|
||||||
|
[ |
||||||
|
{ |
||||||
|
'letter' : 'A', |
||||||
|
'frequency' : 0.08167 |
||||||
|
}, |
||||||
|
{ |
||||||
|
'letter' : 'B', |
||||||
|
'frequency' : 0.01492 |
||||||
|
} |
||||||
|
... |
||||||
|
] |
||||||
|
|
||||||
|
(A bit verbose, but good to stick with this |
||||||
|
because it's a structure D3 likes.) |
||||||
|
|
||||||
|
Alternative 2: |
||||||
|
(XXXXXX don't use XXXXXXX) |
||||||
|
---------------- |
||||||
|
|
||||||
|
{ |
||||||
|
'letter' : ['A','B','C','D', .... ], |
||||||
|
'frequency' : [0.08167, 0.01492, ... ] |
||||||
|
} |
||||||
|
|
||||||
|
More compact, but requires some untangling. |
||||||
|
Not keen on doing this with Javascript. |
||||||
|
|
||||||
|
*/ |
||||||
|
var BostockBarChart = { |
||||||
|
|
||||||
|
defaultConfig: { |
||||||
|
containerClass: 'bostock-bar-chart', |
||||||
|
parentDiv: 'bar2_chart', |
||||||
|
w: 400, |
||||||
|
h: 400, |
||||||
|
maxValue: 0, |
||||||
|
color: d3.scale.category10(1), |
||||||
|
hovercolor: d3.scale.category10(2) |
||||||
|
}, //end defaultConfig
|
||||||
|
|
||||||
|
/* static chart, easy peasy */ |
||||||
|
chart: function() { |
||||||
|
|
||||||
|
|
||||||
|
// default config
|
||||||
|
var cfg = Object.create(BostockBarChart.defaultConfig); |
||||||
|
|
||||||
|
|
||||||
|
function bar(selection) { |
||||||
|
|
||||||
|
data = selection.data()[0]; |
||||||
|
|
||||||
|
var container = d3.select(this); |
||||||
|
|
||||||
|
// ---------8<-----------
|
||||||
|
// commence copy and paste from
|
||||||
|
// http://bl.ocks.org/mbostock/3310560
|
||||||
|
|
||||||
|
var margin = {top: 20, right: 30, bottom: 30, left: 40}, |
||||||
|
width = 960 - margin.left - margin.right, |
||||||
|
height = 500 - margin.top - margin.bottom; |
||||||
|
|
||||||
|
var x = d3.scale.ordinal() |
||||||
|
.rangeRoundBands([0, width], 0.1, 0.2); |
||||||
|
|
||||||
|
var y = d3.scale.linear() |
||||||
|
.range([height, 0]); |
||||||
|
|
||||||
|
var svg = container.append("svg") |
||||||
|
.attr("width", width + margin.left + margin.right) |
||||||
|
.attr("height", height + margin.top + margin.bottom) |
||||||
|
.append("g") |
||||||
|
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); |
||||||
|
|
||||||
|
// function(error, data)
|
||||||
|
// if (error) throw error;
|
||||||
|
|
||||||
|
x.domain( data.map(function(d) { return d.letter; })); |
||||||
|
y.domain([0, d3.max(data, function(d) { return d.frequency; })]); |
||||||
|
|
||||||
|
svg.append("g") |
||||||
|
.attr("class", "x axis") |
||||||
|
.attr("transform", "translate(0," + height + ")") |
||||||
|
.call(d3.svg.axis().scale(x).orient("bottom")); |
||||||
|
|
||||||
|
svg.append("g") |
||||||
|
.attr("class", "y axis") |
||||||
|
.call(d3.svg.axis().scale(y).orient("left")); |
||||||
|
/* |
||||||
|
.append("text") |
||||||
|
.attr("transform", "rotate(-90)") |
||||||
|
.attr("y", 6) |
||||||
|
.attr("dy", "0.71em") |
||||||
|
.attr("text-anchor", "end") |
||||||
|
.text("Frequency"); |
||||||
|
*/ |
||||||
|
|
||||||
|
svg.selectAll(".bar") |
||||||
|
.data(data) |
||||||
|
.enter().append("rect") |
||||||
|
.attr("class", "bar") |
||||||
|
.attr("x", function(d) { return x(d.label); }) |
||||||
|
.attr("width", x.rangeBand()) |
||||||
|
.attr("y", function(d) { return y(d.value); }) |
||||||
|
.attr("height", function(d) { return height - y(d.value); }); |
||||||
|
|
||||||
|
|
||||||
|
svg.selectAll(".bar") |
||||||
|
.attr("fill","steelblue"); |
||||||
|
svg.selectAll(".bar:hover") |
||||||
|
.attr("fill","darkred"); |
||||||
|
|
||||||
|
function type(d) { |
||||||
|
d.frequency = +d.frequency; |
||||||
|
return d; |
||||||
|
} |
||||||
|
|
||||||
|
// ---------8<-----------
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
bar.config = function(value) { |
||||||
|
if(!arguments.length) { |
||||||
|
return cfg; |
||||||
|
} |
||||||
|
if(arguments.length > 1) { |
||||||
|
cfg[arguments[0]] = arguments[1]; |
||||||
|
} |
||||||
|
else { |
||||||
|
d3.entries(value || {}).forEach(function(option) { |
||||||
|
cfg[option.key] = option.value; |
||||||
|
}); |
||||||
|
} |
||||||
|
return bar; |
||||||
|
}; |
||||||
|
|
||||||
|
return bar; |
||||||
|
|
||||||
|
}, //end chart()
|
||||||
|
|
||||||
|
draw: function(id, d, options) { |
||||||
|
var chart = BostockBarChart.chart().config(options); |
||||||
|
var cfg = chart.config(); |
||||||
|
|
||||||
|
d3.select(id).select('svg').remove(); |
||||||
|
d3.select(id) |
||||||
|
.append("svg") |
||||||
|
.attr("width", cfg.w) |
||||||
|
.attr("height", cfg.h) |
||||||
|
.datum(d) |
||||||
|
.call(chart); |
||||||
|
} |
||||||
|
|
||||||
|
}//end BostockBarChart
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,38 @@ |
|||||||
|
path { |
||||||
|
stroke: white; |
||||||
|
stroke-width: 0.5; |
||||||
|
} |
||||||
|
|
||||||
|
div#mouseoverPointPanel, |
||||||
|
div#clickedPointPanel { |
||||||
|
width: 300px; |
||||||
|
} |
||||||
|
|
||||||
|
.fade { |
||||||
|
opacity: 0; |
||||||
|
-webkit-transition: opacity 0.85s linear; |
||||||
|
-moz-transition: opacity 0.85s linear; |
||||||
|
-o-transition: opacity 0.85s linear; |
||||||
|
transition: opacity 0.85s linear; |
||||||
|
} |
||||||
|
|
||||||
|
.fade.in { |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
|
||||||
|
.active { |
||||||
|
stroke: black; |
||||||
|
stroke-width: 2.0; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.axis path, |
||||||
|
.axis line { |
||||||
|
fill: none; |
||||||
|
stroke: #000; |
||||||
|
shape-rendering: crispEdges; |
||||||
|
} |
||||||
|
|
||||||
|
.x.axis path { |
||||||
|
display: none; |
||||||
|
} |
||||||
@ -0,0 +1,186 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<title>Bar Donut Chart</title> |
||||||
|
<meta charset="utf-8" /> |
||||||
|
|
||||||
|
<!-- |
||||||
|
my CSS styles |
||||||
|
--> |
||||||
|
<link href="/theme/css/bootstrap.css" rel="stylesheet" type="text/css"> |
||||||
|
<link href="/theme/css/main.css" rel="stylesheet" type="text/css"> |
||||||
|
|
||||||
|
<link href="/theme/css/cosmo.css" rel="stylesheet" type="text/css"> |
||||||
|
<link href="/theme/css/font-awesome.css" rel="stylesheet" type="text/css"/> |
||||||
|
<link href="/theme/css/pygment.css" rel="stylesheet" type="text/css"/> |
||||||
|
|
||||||
|
<!-- |
||||||
|
include Angular first |
||||||
|
--> |
||||||
|
<script type="text/javascript" src="/theme/js/angular-1.3.15.js"></script> |
||||||
|
<script src="//d3js.org/d3.v3.min.js"></script> |
||||||
|
</head> |
||||||
|
|
||||||
|
<body id="index" class="home"> |
||||||
|
<div class="container"> |
||||||
|
<h1><a href="/">dang-sunburst <strong></strong></a></h1> |
||||||
|
<hr /> |
||||||
|
|
||||||
|
|
||||||
|
<link href="/objects/bar1.css" rel="stylesheet" stype="text/css" /> |
||||||
|
|
||||||
|
<div ng-app="bar1app"> |
||||||
|
|
||||||
|
<div ng-controller="bar1controller" ng-init="initialize()"> |
||||||
|
|
||||||
|
|
||||||
|
<div class="row"> |
||||||
|
<div class="col-sm-12" id="bar1_title"> |
||||||
|
<bar1head></bar1head> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="row"> |
||||||
|
<div class="col-sm-10" id="bar1_controls"> |
||||||
|
<bar1controls></bar1controls> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
<div class="row"> |
||||||
|
|
||||||
|
<div class="col-sm-4" id="bar1_charts"> |
||||||
|
<div class="row" id="bar1_chart"> |
||||||
|
<bar1chart></bar1chart> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="col-sm-4" id="bar1_text"> |
||||||
|
<div class="row" id="bar1_panels"> |
||||||
|
<bar1panel></bar1panel> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="row"> |
||||||
|
|
||||||
|
<div class="col-sm-10" id="bar1_moretext"> |
||||||
|
<div class="row" id="bar1_md"> |
||||||
|
This chart demonstrates linking a donut chart with a bar chart, |
||||||
|
so that a single controller filters data on both. |
||||||
|
It also effectively implements the "folding up" technique |
||||||
|
demonstrated with the Donut Picker chart. |
||||||
|
|
||||||
|
<br /> |
||||||
|
<br /> |
||||||
|
|
||||||
|
The data visualized are death records from the United States in 2014. |
||||||
|
Death records are anonymized and classified by many variables, |
||||||
|
including gender and manner of death, and released to the public. |
||||||
|
Statistics about these variables are counted up for different ICD 10 codes, |
||||||
|
which indicate various circumstances present at death, and visualized above. |
||||||
|
|
||||||
|
<br/> |
||||||
|
<br/> |
||||||
|
|
||||||
|
Here, we bundle bar and donut plot data together by ICD 10 code. |
||||||
|
When the user picks an ICD 10 code using buttons, we filter the data |
||||||
|
plotted by the bar and donut plots. |
||||||
|
|
||||||
|
<pre style="font-size: 8px;"> |
||||||
|
[ |
||||||
|
{ |
||||||
|
"code": "T510"}, |
||||||
|
"donut": |
||||||
|
[ |
||||||
|
{"value": 17, "label": "M"}, |
||||||
|
{"value": 4, "label": "F"} |
||||||
|
], |
||||||
|
"bar": |
||||||
|
[ |
||||||
|
{"value": 10, "label": "Accident"}, |
||||||
|
{"value": 0, "label": "Suicide"}, |
||||||
|
{"value": 0, "label": "Homicide"}, |
||||||
|
{"value": 3, "label": "Natural"} |
||||||
|
] |
||||||
|
}, |
||||||
|
{ |
||||||
|
"code": "Y14"}, |
||||||
|
"donut": |
||||||
|
[ |
||||||
|
{"value": 1, "label": "M"}, |
||||||
|
{"value": 3, "label": "F"} |
||||||
|
], |
||||||
|
"bar": |
||||||
|
[ |
||||||
|
{"value": 4, "label": "Accident"}, |
||||||
|
{"value": 2, "label": "Suicide"}, |
||||||
|
{"value": 0, "label": "Homicide"}, |
||||||
|
{"value": 2, "label": "Natural"} |
||||||
|
] |
||||||
|
}, |
||||||
|
|
||||||
|
... |
||||||
|
] |
||||||
|
</pre> |
||||||
|
|
||||||
|
Once we filter on "code", we get the "donut" array, and pass it to the D3 pie chart object, |
||||||
|
which renders the d ata structure into the donut chart on the left. Likewise, the "bar" array |
||||||
|
is sent to the bar chart and visualized accordingly. |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
<script src="http://d3js.org/d3.v3.js"></script> |
||||||
|
<script type="text/javascript" src="/objects/bar1_modcontrol.js"></script> |
||||||
|
<script type="text/javascript" src="/objects/bar1_chart.js"></script> |
||||||
|
<script type="text/javascript" src="/objects/bar-chart.js"></script> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
<footer id="contentinfo" class="body"> |
||||||
|
<hr /> |
||||||
|
<p style="text-align: center"> |
||||||
|
<span class="fa-stack fa-lg"> |
||||||
|
<i class="fa fa-square fa-stack-2x"></i> |
||||||
|
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i> |
||||||
|
</span> |
||||||
|
Made from the command line with vim by |
||||||
|
<a href="http://charlesreid1.com">charlesreid1</a>. |
||||||
|
</p> |
||||||
|
|
||||||
|
<p style="text-align: center;">Made with HTML ( |
||||||
|
<a href="http://http://bootstrap.org/">Bootstrap</a>, |
||||||
|
<a href="http://bootswatch.com">Bootswatch</a>), |
||||||
|
Javascript ( |
||||||
|
<a href="http://http://d3js.org/">D3.js</a>, |
||||||
|
<a href=https://angularjs.org/">Angular.js</a>, |
||||||
|
<a href="https://jquery.com/">jQuery</a>), |
||||||
|
and Python ( |
||||||
|
<a href="http://pydata.org">Pandas</a>, |
||||||
|
<a href="http://getpelican.com">Pelican</a>, |
||||||
|
<a href="http://ipython.org">Jupyter Notebooks</a>). |
||||||
|
</p> |
||||||
|
|
||||||
|
<script type="text/javascript" src="/theme/js/jquery-1.11.2.js"></script> |
||||||
|
<script type="text/javascript" src="/theme/js/bootstrap-3.3.4.js"></script> |
||||||
|
<!-- |
||||||
|
<script type="text/javascript" src="/theme/js/d3-3.5.5.js"></script> |
||||||
|
<script type="text/javascript" src="/theme/js/leaflet-0.7.3.js"></script> |
||||||
|
<script type="text/javascript" src="/theme/js/leaflet.ajax.min.js"></script> |
||||||
|
--> |
||||||
|
</footer><!-- /#contentinfo --> |
||||||
|
|
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,72 @@ |
|||||||
|
[{"className": "S324", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "S328", "axes": [{"value": 1, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 4, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "Y15", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 1, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "Y14", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 5, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "I120", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 23, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "I129", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 2, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "A051", "axes": [{"value": 1, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "W19", "axes": [{"value": 2, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 2, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "T465", "axes": [{"value": 0, "label": "Accident"}, {"value": 2, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "C449", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 2, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "C119", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 3, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "C444", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "T519", "axes": [{"value": 2, "label": "Accident"}, {"value": 1, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 1, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "T510", "axes": [{"value": 37, "label": "Accident"}, {"value": 2, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 3, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "T511", "axes": [{"value": 2, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "K117", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "W18", "axes": [{"value": 13, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "C781", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "I38", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 18, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "M109", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 5, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "G610", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "J159", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 3, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "J150", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "J151", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 2, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "J152", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 6, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "C259", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 49, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "I829", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 2, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "T983", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "R402", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 2, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "C254", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "F059", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 4, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "F051", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 2, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "C341", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 2, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "K909", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "J90", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 13, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "T443", "axes": [{"value": 1, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "J969", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 141, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "J961", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 29, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "J960", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 55, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "V439", "axes": [{"value": 1, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "K137", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "S061", "axes": [{"value": 2, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "S060", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "R090", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 28, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "R092", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 48, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "R098", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 3, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "S066", "axes": [{"value": 3, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "S065", "axes": [{"value": 8, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 1, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "T794", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "I698", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 8, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "I694", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 18, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "I690", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "D693", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "D695", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 2, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "D696", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 4, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "D699", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "K739", "axes": [{"value": 2, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 2, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "X78", "axes": [{"value": 0, "label": "Accident"}, {"value": 2, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "X74", "axes": [{"value": 0, "label": "Accident"}, {"value": 35, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "I10", "axes": [{"value": 2, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 246, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "C099", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "P236", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "K922", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 66, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "K920", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "Q938", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "D487", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 4, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "Q200", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "C151", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "C159", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 25, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "X94", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 1, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "V224", "axes": [{"value": 1, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"className": "G409", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 2, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}] |
||||||
@ -0,0 +1,398 @@ |
|||||||
|
var ng; |
||||||
|
dir = []; |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//////////////////////////////////////
|
||||||
|
// Chart Directives
|
||||||
|
//
|
||||||
|
// This file defines Angular directives
|
||||||
|
// that use D3 to draw charts.
|
||||||
|
//
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
///////////////////////////////////////
|
||||||
|
// Header Directives:
|
||||||
|
//
|
||||||
|
// Print out instructions, title, etc.
|
||||||
|
|
||||||
|
|
||||||
|
ng = a.directive('bar1head', function($compile) { |
||||||
|
|
||||||
|
function link(scope, element, attr) { |
||||||
|
|
||||||
|
var el = element[0]; |
||||||
|
|
||||||
|
$(el).empty(); |
||||||
|
|
||||||
|
var dir = $("div#bar1_title"); |
||||||
|
|
||||||
|
var h1 = $("<h1 />"); |
||||||
|
|
||||||
|
var b = $("<b />") |
||||||
|
.text("bar1 Chart Example") |
||||||
|
.appendTo(h1); |
||||||
|
|
||||||
|
h1.appendTo(dir); |
||||||
|
|
||||||
|
|
||||||
|
var p = $("<p />", { |
||||||
|
"class" : "normal" }) |
||||||
|
.html("The following charts show statistics about death records, classified by ICD 10 code. Select an ICD 10 code to view statistics about gender and manner of death.") |
||||||
|
.appendTo(dir); |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
return { |
||||||
|
restrict: "E", |
||||||
|
link: link, |
||||||
|
scope: {} |
||||||
|
} |
||||||
|
}); |
||||||
|
dir.push(ng); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
///////////////////////////////////////////////
|
||||||
|
// Chart Controls Directives
|
||||||
|
|
||||||
|
ng = a.directive('bar1controls', function($compile) { |
||||||
|
|
||||||
|
function link(scope, element, attr) { |
||||||
|
|
||||||
|
// wait to build the buttons until we've loaded the data,
|
||||||
|
// since the buttons come from the data.
|
||||||
|
scope.$parent.$watch('pickerData',doStuff); |
||||||
|
|
||||||
|
function doStuff() { |
||||||
|
if(!scope.$parent.pickerData) { return; } |
||||||
|
buildButtons(element, scope.$parent); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
}; |
||||||
|
|
||||||
|
function buildButtons(element,pscope) { |
||||||
|
|
||||||
|
var mydiv = "div#bar1_controls"; |
||||||
|
|
||||||
|
var el = $(mydiv); |
||||||
|
|
||||||
|
var div = $("<div />"); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// ------------------------------------
|
||||||
|
// Add ICD 10 code buttons
|
||||||
|
//
|
||||||
|
var btn_grp = $("<div />", { |
||||||
|
"id" : "codebtns", |
||||||
|
"class" : "btn-group" |
||||||
|
}); |
||||||
|
|
||||||
|
for( var i = 0; i < pscope.pickerData.length; i++ ) { |
||||||
|
var this_code = pscope.pickerData[i]['code'] |
||||||
|
var code = $("<a />", { |
||||||
|
"class" : "btn btn-code btn-large btn-primary", |
||||||
|
"changecode" : "", |
||||||
|
"id" : "btn_"+this_code, |
||||||
|
"code" : this_code, |
||||||
|
}) |
||||||
|
.html( this_code ) |
||||||
|
.appendTo(btn_grp); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// to make buttons in this btn group active,
|
||||||
|
// you have to use D3's classed() method
|
||||||
|
// after you add the elements to the document
|
||||||
|
// (i.e., after you call $compile)
|
||||||
|
|
||||||
|
angular.element(el).append($compile(btn_grp)(pscope)); |
||||||
|
|
||||||
|
|
||||||
|
pscope.updateCode = function() { |
||||||
|
|
||||||
|
// -----------------------------
|
||||||
|
// make button for active icd 10 code
|
||||||
|
|
||||||
|
d3.selectAll("a.btn-code").classed('active',false); |
||||||
|
var btnlabel = "a#btn_"+pscope.icd10code; |
||||||
|
d3.selectAll(btnlabel).classed('active',true); |
||||||
|
|
||||||
|
}; |
||||||
|
|
||||||
|
pscope.$watch('icd10code',pscope.updateCode); |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
return { |
||||||
|
restrict: "E", |
||||||
|
link: link, |
||||||
|
scope: {} |
||||||
|
} |
||||||
|
}); |
||||||
|
dir.push(ng); |
||||||
|
|
||||||
|
|
||||||
|
//////////////////////////////////
|
||||||
|
// Action directive:
|
||||||
|
// What to do when the user changes the ICD 10 code
|
||||||
|
// by clicking an ICD 10 code button
|
||||||
|
|
||||||
|
ng = a.directive("changecode", function($compile) { |
||||||
|
|
||||||
|
return function(pscope, element, attrs){ |
||||||
|
element.bind("click", function(){ |
||||||
|
|
||||||
|
// first, update the scope variable
|
||||||
|
// that holds the current icd 10 code
|
||||||
|
// (no need to load any new data)
|
||||||
|
|
||||||
|
|
||||||
|
// This is the ICD 10 code the user has selected.
|
||||||
|
var this_code = attrs['code']; |
||||||
|
var this_description = pscope.icd10codes_all[this_code] |
||||||
|
|
||||||
|
//console.log('Changed icd 10 code, updating description:');
|
||||||
|
//console.log(this_code);
|
||||||
|
//console.log(this_description);
|
||||||
|
|
||||||
|
|
||||||
|
// !!!!!!!!!!!!!!!!!!!!!!!!
|
||||||
|
// NOTE
|
||||||
|
// The lines below - this $apply() method -
|
||||||
|
// this is the way you change the variable
|
||||||
|
// at the controller level, and get the
|
||||||
|
// various watchers to detect changes.
|
||||||
|
// !!!!!!!!!!!!!!!!!!!!!!!!!!
|
||||||
|
pscope.$apply(function() { |
||||||
|
pscope.icd10code = this_code; |
||||||
|
}); |
||||||
|
|
||||||
|
pscope.$apply(function() { |
||||||
|
pscope.description = this_description; |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
//// This is some weak-sauce,
|
||||||
|
//// its not even changing value of variable
|
||||||
|
//pscope.update_icd10code(attrs['code']);
|
||||||
|
//// ...
|
||||||
|
//// .......
|
||||||
|
//// seriously.
|
||||||
|
//// all we needed was just
|
||||||
|
//// pscope.$apply()
|
||||||
|
////
|
||||||
|
//// smh.
|
||||||
|
|
||||||
|
|
||||||
|
// then run the button controllers update function
|
||||||
|
pscope.updateCode(); |
||||||
|
|
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
///////////////////////////////////////////////
|
||||||
|
// Panels:
|
||||||
|
// Display useful information in a pretty box
|
||||||
|
|
||||||
|
|
||||||
|
ng = a.directive('bar1panel', function($compile) { |
||||||
|
|
||||||
|
function link(scope, element, attr) { |
||||||
|
|
||||||
|
var el = element[0]; |
||||||
|
|
||||||
|
var pscope = scope.$parent; |
||||||
|
|
||||||
|
// --------------------------
|
||||||
|
// add display for details
|
||||||
|
|
||||||
|
// assemble the tags,
|
||||||
|
// then compile the html
|
||||||
|
// select element of interest with angular.element
|
||||||
|
// and append the compiled tags
|
||||||
|
//
|
||||||
|
var br = $("<br />").appendTo(el); |
||||||
|
|
||||||
|
var panel = $("<div />", { |
||||||
|
"class" : "panel panel-primary", |
||||||
|
"id" : "first" |
||||||
|
}); |
||||||
|
|
||||||
|
var panelhead = $("<div />", { |
||||||
|
"class" : "panel-heading" |
||||||
|
}).appendTo(panel); |
||||||
|
|
||||||
|
var h3 = $("<h3 />", { |
||||||
|
"class" : "panel-title" |
||||||
|
}).text("Current ICD 10 Code") |
||||||
|
.appendTo(panelhead); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
var panelbody = $("<div />", { |
||||||
|
"class" : "panel-body" |
||||||
|
}).appendTo(panel); |
||||||
|
|
||||||
|
var maindiv = $("<div />", { |
||||||
|
}).appendTo(panelbody); |
||||||
|
|
||||||
|
var h = $("<h3 />") |
||||||
|
.html("ICD 10 Code: [[icd10code]]") |
||||||
|
.appendTo(maindiv); |
||||||
|
|
||||||
|
var de = $("<p />", { |
||||||
|
"class" : "lead" }) |
||||||
|
.html("Description: [[description]]") |
||||||
|
.appendTo(maindiv); |
||||||
|
|
||||||
|
angular.element(el).prepend($compile(panel)(pscope)); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
return { |
||||||
|
link: link, |
||||||
|
restrict: "E", |
||||||
|
scope: { } |
||||||
|
}; |
||||||
|
}); |
||||||
|
dir.push(ng); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
///////////////////////////////////////////////
|
||||||
|
// bar1 chart
|
||||||
|
//
|
||||||
|
// This is a bar chart for manner of death.
|
||||||
|
|
||||||
|
ng = a.directive('bar1chart', function($compile) { |
||||||
|
|
||||||
|
function link(scope, element, attr) { |
||||||
|
|
||||||
|
scope.$parent.$watch('bar1data',doStuff); |
||||||
|
scope.$parent.$watch('icd10code',doStuff); |
||||||
|
|
||||||
|
function doStuff() { |
||||||
|
if(!scope.$parent.bar1data) { return; } |
||||||
|
if(!scope.$parent.icd10code) { return; } |
||||||
|
buildBar(element, scope.$parent); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
}; |
||||||
|
|
||||||
|
function buildBar(element,pscope) { |
||||||
|
|
||||||
|
BarChart.defaultConfig.color = function() {}; |
||||||
|
BarChart.defaultConfig.w = 400; |
||||||
|
BarChart.defaultConfig.h = 400; |
||||||
|
|
||||||
|
var chart = BarChart.chartSetup(); |
||||||
|
|
||||||
|
var cfg = chart.config(); // retrieve default config
|
||||||
|
|
||||||
|
var mydiv = "div#bar1_chart"; |
||||||
|
|
||||||
|
var svg = d3.select(mydiv).append('svg') |
||||||
|
.attr('width', cfg.w + cfg.w + 50) |
||||||
|
.attr('height', cfg.h + cfg.h / 4); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/////////////////////////////////////////////////////
|
||||||
|
// update bar chart
|
||||||
|
//
|
||||||
|
pscope.updatebar1 = function() { |
||||||
|
|
||||||
|
var all_data = pscope.bar1data; |
||||||
|
|
||||||
|
// ----------------------------------
|
||||||
|
// Get chart data
|
||||||
|
//
|
||||||
|
// Here, we have all donut data
|
||||||
|
// available to us.
|
||||||
|
//
|
||||||
|
// We use the currently-selected ICD 10 code
|
||||||
|
// to filter which donut data is being plotted.
|
||||||
|
//
|
||||||
|
// Where to keep track of current code?
|
||||||
|
// In the controller (available via pscope).
|
||||||
|
// pscope.icd10code
|
||||||
|
//
|
||||||
|
var code; |
||||||
|
var data; |
||||||
|
for( var jj=0; jj < all_data.length; jj++ ) { |
||||||
|
// set exception handling:
|
||||||
|
// if no icd10code is set, problems occur.
|
||||||
|
if(all_data[jj]['className'] == pscope.icd10code) { |
||||||
|
code = all_data[jj]['className']; |
||||||
|
data = [all_data[jj]] |
||||||
|
break; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
if(data==null) { |
||||||
|
console.log("Error. Check that ICD 10 code is in data set: "+pscope.icd10code); |
||||||
|
console.log(pscope.icd10code); |
||||||
|
console.log(all_data); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
console.log(pscope.icd10code); |
||||||
|
console.log(data); |
||||||
|
|
||||||
|
// finished; use data
|
||||||
|
// ---------------------------------
|
||||||
|
|
||||||
|
|
||||||
|
///////////////////////////////////
|
||||||
|
// now draw the svg with d3
|
||||||
|
//
|
||||||
|
|
||||||
|
/////////////
|
||||||
|
// clean it up
|
||||||
|
//svg.selectAll(".single").remove();
|
||||||
|
svg.selectAll(".single").remove(); |
||||||
|
svg.selectAll(".axis").remove(); |
||||||
|
svg.selectAll(".area").remove(); |
||||||
|
|
||||||
|
svg.append('g') |
||||||
|
.classed('single', 1) |
||||||
|
.datum(data) |
||||||
|
.call(chart); |
||||||
|
|
||||||
|
// chart is the BarChart object
|
||||||
|
} |
||||||
|
|
||||||
|
pscope.$watch('icd10code',pscope.updatebar1); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
return { |
||||||
|
link: link, |
||||||
|
restrict: "E", |
||||||
|
scope: { } |
||||||
|
}; |
||||||
|
}); |
||||||
|
dir.push(ng); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,86 @@ |
|||||||
|
///////////////////////////////////////
|
||||||
|
//
|
||||||
|
// chart
|
||||||
|
//
|
||||||
|
//
|
||||||
|
|
||||||
|
var a = angular.module("bar1app", [], function($interpolateProvider) { |
||||||
|
$interpolateProvider.startSymbol('[['); |
||||||
|
$interpolateProvider.endSymbol(']]'); |
||||||
|
} |
||||||
|
); |
||||||
|
|
||||||
|
var datafactory = a.factory('datafactory', function($http, $q) { |
||||||
|
|
||||||
|
return { |
||||||
|
getbar1data: function() { |
||||||
|
var deferred = $q.defer(); |
||||||
|
|
||||||
|
var json_file = 'bar1.json'; |
||||||
|
|
||||||
|
$http.get(json_file).success(function(data) { |
||||||
|
deferred.resolve(data); |
||||||
|
}).error(function(){ |
||||||
|
console.log('error loading json file: '+json_file); |
||||||
|
deferred.reject(); |
||||||
|
}); |
||||||
|
|
||||||
|
return deferred.promise; |
||||||
|
}, |
||||||
|
|
||||||
|
getCodeData: function() { |
||||||
|
var deferred = $q.defer(); |
||||||
|
|
||||||
|
$http.get('icd10codes.json').success(function(data) { |
||||||
|
deferred.resolve(data); |
||||||
|
}).error(function(){ |
||||||
|
console.log('error loading icd10codes.json'); |
||||||
|
deferred.reject(); |
||||||
|
}); |
||||||
|
|
||||||
|
return deferred.promise; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
function bar1controller($scope,datafactory) { |
||||||
|
|
||||||
|
$scope.initialize = function() { |
||||||
|
|
||||||
|
$scope.icd10code="S328"; |
||||||
|
$scope.donutFemale = 0; |
||||||
|
$scope.donutMale = 0; |
||||||
|
|
||||||
|
datafactory.getbar1data().then( |
||||||
|
function(data) { |
||||||
|
$scope.bar1data = data; |
||||||
|
} |
||||||
|
); |
||||||
|
|
||||||
|
datafactory.getCodeData().then( |
||||||
|
function(data) { |
||||||
|
$scope.icd10codes_all = data; |
||||||
|
var descr = $scope.icd10codes_all[$scope.icd10code]; |
||||||
|
$scope.description = descr; |
||||||
|
} |
||||||
|
); |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
/* |
||||||
|
// This does not change the value of this
|
||||||
|
// variable in everyone's parent scope.
|
||||||
|
// UUUUGGGGHHHHH. Stupid code.
|
||||||
|
$scope.update_icd10code = function(code) { |
||||||
|
$scope.icd10code = code; |
||||||
|
console.log("from update_icd10code:"+$scope.icd10code); |
||||||
|
} |
||||||
|
*/ |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
// the first few arguments of the list should correspond to the Angular-namespace stuff to feed to bar1controller
|
||||||
|
var c = a.controller("bar1controller", ["$scope", "datafactory", bar1controller]); |
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,69 @@ |
|||||||
|
<!doctype html> |
||||||
|
<meta charset="utf-8"> |
||||||
|
<head> |
||||||
|
|
||||||
|
<script type="text/javascript" src="/theme/js/angular-1.3.15.js"></script> |
||||||
|
|
||||||
|
<script src="//d3js.org/d3.v3.min.js"></script> |
||||||
|
|
||||||
|
</head> |
||||||
|
<body id="index" class="home"> |
||||||
|
<div class="container"> |
||||||
|
<h1><a href="/">dang-sunburst <strong></strong></a></h1> |
||||||
|
<hr /> |
||||||
|
|
||||||
|
|
||||||
|
<!-- |
||||||
|
<div ng-app="plusradarApp"> |
||||||
|
|
||||||
|
<div ng-controller="plusradarController" ng-init="initialize()"> |
||||||
|
|
||||||
|
<div class="row"> |
||||||
|
<div class="col-sm-12" id="plusradar_charts"> |
||||||
|
<plusradarchart></plusradarchart> |
||||||
|
--> |
||||||
|
<div id="viz"></div> |
||||||
|
<!-- |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
--> |
||||||
|
|
||||||
|
<script> |
||||||
|
var data = [ |
||||||
|
{"value": 100, "name": "alpha"}, |
||||||
|
{"value": 70, "name": "beta"}, |
||||||
|
{"value": 40, "name": "gamma"}, |
||||||
|
{"value": 15, "name": "delta"}, |
||||||
|
{"value": 5, "name": "epsilon"}, |
||||||
|
{"value": 1, "name": "zeta"} |
||||||
|
] |
||||||
|
|
||||||
|
d3plus.viz() |
||||||
|
.container("#viz") |
||||||
|
.data(data) |
||||||
|
.type("pie") |
||||||
|
.id("name") |
||||||
|
.size("value") |
||||||
|
.draw() |
||||||
|
|
||||||
|
</script> |
||||||
|
|
||||||
|
<script src="//d3plus.org/js/d3.js"></script> |
||||||
|
<script src="//d3plus.org/js/d3plus.js"></script> |
||||||
|
|
||||||
|
<script type="text/javascript" src="/radar/plusradar_modcontrol.js"></script> |
||||||
|
<script type="text/javascript" src="/radar/plusradar_chart.js"></script> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
<script type="text/javascript" src="/theme/js/jquery-1.11.2.js"></script> |
||||||
|
<script type="text/javascript" src="/theme/js/bootstrap-3.3.4.js"></script> |
||||||
|
|
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
[{"donut": [{"value": 0, "label": "M"}, {"value": 1, "label": "F"}], "code": "S324", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 2, "label": "M"}, {"value": 3, "label": "F"}], "code": "S328", "modbars": [{"value": 1, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 4, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 1, "label": "M"}, {"value": 0, "label": "F"}], "code": "Y15", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 1, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 1, "label": "M"}, {"value": 4, "label": "F"}], "code": "Y14", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 5, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 9, "label": "M"}, {"value": 14, "label": "F"}], "code": "I120", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 23, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 0, "label": "M"}, {"value": 2, "label": "F"}], "code": "I129", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 2, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 1, "label": "M"}, {"value": 0, "label": "F"}], "code": "A051", "modbars": [{"value": 1, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 1, "label": "M"}, {"value": 3, "label": "F"}], "code": "W19", "modbars": [{"value": 2, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 2, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 1, "label": "M"}, {"value": 1, "label": "F"}], "code": "T465", "modbars": [{"value": 0, "label": "Accident"}, {"value": 2, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 2, "label": "M"}, {"value": 0, "label": "F"}], "code": "C449", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 2, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 2, "label": "M"}, {"value": 1, "label": "F"}], "code": "C119", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 3, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 0, "label": "M"}, {"value": 1, "label": "F"}], "code": "C444", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 3, "label": "M"}, {"value": 2, "label": "F"}], "code": "T519", "modbars": [{"value": 2, "label": "Accident"}, {"value": 1, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 1, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 30, "label": "M"}, {"value": 12, "label": "F"}], "code": "T510", "modbars": [{"value": 37, "label": "Accident"}, {"value": 2, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 3, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 2, "label": "M"}, {"value": 0, "label": "F"}], "code": "T511", "modbars": [{"value": 2, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 0, "label": "M"}, {"value": 1, "label": "F"}], "code": "K117", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}] |
||||||
@ -0,0 +1,127 @@ |
|||||||
|
var ng; |
||||||
|
dir = []; |
||||||
|
|
||||||
|
///////////////////////////////////////////////
|
||||||
|
// plusradar Chart
|
||||||
|
//
|
||||||
|
|
||||||
|
ng = a.directive('plusradarchart', function($compile) { |
||||||
|
|
||||||
|
function link(scope, element, attr) { |
||||||
|
console.log('link'); |
||||||
|
|
||||||
|
scope.$parent.$watch('plusradardata',doStuff); |
||||||
|
|
||||||
|
function doStuff() { |
||||||
|
if(!scope.$parent.plusradardata) { return; } |
||||||
|
buildplusradar(element, scope.$parent); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
}; |
||||||
|
|
||||||
|
function buildplusradar(element,pscope) { |
||||||
|
console.log('building'); |
||||||
|
|
||||||
|
var mydiv = "div#plusradar_chart"; |
||||||
|
|
||||||
|
/////////////////////////////////////////
|
||||||
|
// Create chart
|
||||||
|
//
|
||||||
|
// data has not been loaded yet.
|
||||||
|
// start by initializing variables
|
||||||
|
// that don't depend on the data.
|
||||||
|
//
|
||||||
|
|
||||||
|
//var el = element[0];
|
||||||
|
//$(el).empty();
|
||||||
|
|
||||||
|
|
||||||
|
/////////////////////////////////////////////////////
|
||||||
|
// update radar chart
|
||||||
|
//
|
||||||
|
pscope.updateplusradar = function() { |
||||||
|
console.log('updating'); |
||||||
|
|
||||||
|
//var all_data = pscope.plusradardata;
|
||||||
|
|
||||||
|
// ----------------------------------
|
||||||
|
// Get chart data
|
||||||
|
//
|
||||||
|
// Here, we have all donut data
|
||||||
|
// available to us.
|
||||||
|
//
|
||||||
|
// We use the currently-selected ICD 10 code
|
||||||
|
// to filter which donut data is being plotted.
|
||||||
|
//
|
||||||
|
// Where to keep track of current code?
|
||||||
|
// In the controller (available via pscope).
|
||||||
|
// pscope.icd10code
|
||||||
|
//
|
||||||
|
|
||||||
|
/* |
||||||
|
var code; |
||||||
|
var data; |
||||||
|
for( var jj=0; jj < all_data.length; jj++ ) { |
||||||
|
// set excpetion handling:
|
||||||
|
// if no icd10code is set, problems occur.
|
||||||
|
if(all_data[jj]['className'] == pscope.icd10code) { |
||||||
|
code = all_data[jj]['className']; |
||||||
|
data = all_data[jj] |
||||||
|
break; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
if(data==null) { |
||||||
|
console.log("Error. Check that ICD 10 code is in data set: "+pscope.icd10code); |
||||||
|
console.log(pscope.icd10code); |
||||||
|
console.log(all_data); |
||||||
|
return; |
||||||
|
} |
||||||
|
*/ |
||||||
|
|
||||||
|
// finished; use data
|
||||||
|
// ---------------------------------
|
||||||
|
|
||||||
|
|
||||||
|
///////////////////////////////////
|
||||||
|
// now draw the svg with d3
|
||||||
|
//
|
||||||
|
//
|
||||||
|
|
||||||
|
var data = [ |
||||||
|
{"value": 100, "name": "alpha"}, |
||||||
|
{"value": 70, "name": "beta"}, |
||||||
|
{"value": 40, "name": "gamma"}, |
||||||
|
{"value": 15, "name": "delta"}, |
||||||
|
{"value": 5, "name": "epsilon"}, |
||||||
|
{"value": 1, "name": "zeta"} |
||||||
|
]; |
||||||
|
|
||||||
|
d3plus.viz() |
||||||
|
.container("#viz") |
||||||
|
.data(data) |
||||||
|
.type("pie") |
||||||
|
.id("somethingstupid") |
||||||
|
.size("value") |
||||||
|
.draw() |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// ------------------
|
||||||
|
// if you build it,
|
||||||
|
// you must update it.
|
||||||
|
pscope.updateplusradar(); |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
return { |
||||||
|
link: link, |
||||||
|
restrict: "E", |
||||||
|
scope: { } |
||||||
|
}; |
||||||
|
}); |
||||||
|
dir.push(ng); |
||||||
@ -0,0 +1,55 @@ |
|||||||
|
///////////////////////////////////////
|
||||||
|
//
|
||||||
|
// plusradar
|
||||||
|
//
|
||||||
|
// Module/Controller
|
||||||
|
//
|
||||||
|
|
||||||
|
var a = angular.module("plusradarApp", [], function($interpolateProvider) { |
||||||
|
$interpolateProvider.startSymbol('[['); |
||||||
|
$interpolateProvider.endSymbol(']]'); |
||||||
|
} |
||||||
|
); |
||||||
|
|
||||||
|
var datafactory = a.factory('datafactory', function($http, $q) { |
||||||
|
|
||||||
|
return { |
||||||
|
getplusradardata: function() { |
||||||
|
var deferred = $q.defer(); |
||||||
|
|
||||||
|
var json_file = 'plusradar.json'; |
||||||
|
|
||||||
|
$http.get(json_file).success(function(data) { |
||||||
|
deferred.resolve(data); |
||||||
|
}).error(function(){ |
||||||
|
console.log('error loading json file: '+json_file); |
||||||
|
deferred.reject(); |
||||||
|
}); |
||||||
|
|
||||||
|
return deferred.promise; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
function plusradarController($scope,datafactory) { |
||||||
|
|
||||||
|
$scope.initialize = function() { |
||||||
|
|
||||||
|
//$scope.icd10code="S324";
|
||||||
|
//$scope.donutFemale = 0;
|
||||||
|
//$scope.donutMale = 0;
|
||||||
|
|
||||||
|
datafactory.getplusradardata().then( |
||||||
|
function(data) { |
||||||
|
$scope.plusradardata = data; |
||||||
|
} |
||||||
|
); |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
// the first few arguments of the list should correspond to the Angular-namespace stuff to feed to controller
|
||||||
|
var c = a.controller("plusradarController", ["$scope", "datafactory", plusradarController]); |
||||||
@ -0,0 +1,28 @@ |
|||||||
|
<!doctype html> |
||||||
|
<meta charset="utf-8"> |
||||||
|
|
||||||
|
<script src="//d3plus.org/js/d3.js"></script> |
||||||
|
<script src="//d3plus.org/js/d3plus.js"></script> |
||||||
|
|
||||||
|
<div id="viz"></div> |
||||||
|
|
||||||
|
<script> |
||||||
|
|
||||||
|
var data = [ |
||||||
|
{"value": 100, "name": "alpha"}, |
||||||
|
{"value": 70, "name": "beta"}, |
||||||
|
{"value": 40, "name": "gamma"}, |
||||||
|
{"value": 15, "name": "delta"}, |
||||||
|
{"value": 5, "name": "epsilon"}, |
||||||
|
{"value": 1, "name": "zeta"} |
||||||
|
] |
||||||
|
|
||||||
|
d3plus.viz() |
||||||
|
.container("#viz") |
||||||
|
.data(data) |
||||||
|
.type("pie") |
||||||
|
.id("name") |
||||||
|
.size("value") |
||||||
|
.draw() |
||||||
|
|
||||||
|
</script> |
||||||
@ -0,0 +1,292 @@ |
|||||||
|
/* |
||||||
|
* Source: https://github.com/alangrafu/radar-chart-d3
|
||||||
|
* Author: alangrafu |
||||||
|
* License: Apache License v2.0 https://github.com/alangrafu/radar-chart-d3/blob/master/LICENSE
|
||||||
|
*/ |
||||||
|
var RadarChart = { |
||||||
|
defaultConfig: { |
||||||
|
containerClass: 'radar-chart', |
||||||
|
w: 600, |
||||||
|
h: 600, |
||||||
|
factor: 0.95, |
||||||
|
factorLegend: 1, |
||||||
|
levels: 3, |
||||||
|
maxValue: 0, |
||||||
|
radians: 2 * Math.PI, |
||||||
|
color: d3.scale.category10(), |
||||||
|
axisLine: true, |
||||||
|
axisText: true, |
||||||
|
circles: true, |
||||||
|
radius: 5, |
||||||
|
axisJoin: function(d, i) { |
||||||
|
return d.className || i; |
||||||
|
}, |
||||||
|
transitionDuration: 300 |
||||||
|
}, |
||||||
|
chart: function() { |
||||||
|
// default config
|
||||||
|
var cfg = Object.create(RadarChart.defaultConfig); |
||||||
|
|
||||||
|
function radar(selection) { |
||||||
|
selection.each(function(data) { |
||||||
|
var container = d3.select(this); |
||||||
|
|
||||||
|
// allow simple notation
|
||||||
|
data = data.map(function(datum) { |
||||||
|
if(datum instanceof Array) { |
||||||
|
datum = {axes: datum}; |
||||||
|
} |
||||||
|
return datum; |
||||||
|
}); |
||||||
|
|
||||||
|
var maxValue = Math.max(cfg.maxValue, d3.max(data, function(d) { |
||||||
|
return d3.max(d.axes, function(o){ return o.value; }); |
||||||
|
})); |
||||||
|
|
||||||
|
var allAxis = data[0].axes.map(function(i, j){ return i.axis; }); |
||||||
|
var total = allAxis.length; |
||||||
|
var radius = cfg.factor * Math.min(cfg.w / 2, cfg.h / 2); |
||||||
|
|
||||||
|
container.classed(cfg.containerClass, 1); |
||||||
|
|
||||||
|
function getPosition(i, range, factor, func){ |
||||||
|
factor = typeof factor !== 'undefined' ? factor : 1; |
||||||
|
return range * (1 - factor * func(i * cfg.radians / total)); |
||||||
|
} |
||||||
|
function getHorizontalPosition(i, range, factor){ |
||||||
|
return getPosition(i, range, factor, Math.sin); |
||||||
|
} |
||||||
|
function getVerticalPosition(i, range, factor){ |
||||||
|
return getPosition(i, range, factor, Math.cos); |
||||||
|
} |
||||||
|
|
||||||
|
// levels && axises
|
||||||
|
var levelFactors = d3.range(0, cfg.levels).map(function(level) { |
||||||
|
return radius * ((level + 1) / cfg.levels); |
||||||
|
}); |
||||||
|
|
||||||
|
var levelGroups = container.selectAll('g.level-group').data(levelFactors); |
||||||
|
|
||||||
|
levelGroups.enter().append('g'); |
||||||
|
levelGroups.exit().remove(); |
||||||
|
|
||||||
|
levelGroups.attr('class', function(d, i) { |
||||||
|
return 'level-group level-group-' + i; |
||||||
|
}); |
||||||
|
|
||||||
|
var levelLine = levelGroups.selectAll('.level').data(function(levelFactor) { |
||||||
|
return d3.range(0, total).map(function() { return levelFactor; }); |
||||||
|
}); |
||||||
|
|
||||||
|
levelLine.enter().append('line'); |
||||||
|
levelLine.exit().remove(); |
||||||
|
|
||||||
|
levelLine |
||||||
|
.attr('class', 'level') |
||||||
|
.attr('x1', function(levelFactor, i){ return getHorizontalPosition(i, levelFactor); }) |
||||||
|
.attr('y1', function(levelFactor, i){ return getVerticalPosition(i, levelFactor); }) |
||||||
|
.attr('x2', function(levelFactor, i){ return getHorizontalPosition(i+1, levelFactor); }) |
||||||
|
.attr('y2', function(levelFactor, i){ return getVerticalPosition(i+1, levelFactor); }) |
||||||
|
.attr('transform', function(levelFactor) { |
||||||
|
return 'translate(' + (cfg.w/2-levelFactor) + ', ' + (cfg.h/2-levelFactor) + ')'; |
||||||
|
}); |
||||||
|
|
||||||
|
if(cfg.axisLine || cfg.axisText) { |
||||||
|
var axis = container.selectAll('.axis').data(allAxis); |
||||||
|
|
||||||
|
var newAxis = axis.enter().append('g'); |
||||||
|
if(cfg.axisLine) { |
||||||
|
newAxis.append('line'); |
||||||
|
} |
||||||
|
if(cfg.axisText) { |
||||||
|
newAxis.append('text'); |
||||||
|
} |
||||||
|
|
||||||
|
axis.exit().remove(); |
||||||
|
|
||||||
|
axis.attr('class', 'axis'); |
||||||
|
|
||||||
|
if(cfg.axisLine) { |
||||||
|
axis.select('line') |
||||||
|
.attr('x1', cfg.w/2) |
||||||
|
.attr('y1', cfg.h/2) |
||||||
|
.attr('x2', function(d, i) { return getHorizontalPosition(i, cfg.w / 2, cfg.factor); }) |
||||||
|
.attr('y2', function(d, i) { return getVerticalPosition(i, cfg.h / 2, cfg.factor); }); |
||||||
|
} |
||||||
|
|
||||||
|
if(cfg.axisText) { |
||||||
|
axis.select('text') |
||||||
|
.attr('class', function(d, i){ |
||||||
|
var p = getHorizontalPosition(i, 0.5); |
||||||
|
|
||||||
|
return 'legend ' + |
||||||
|
((p < 0.4) ? 'left' : ((p > 0.6) ? 'right' : 'middle')); |
||||||
|
}) |
||||||
|
.attr('dy', function(d, i) { |
||||||
|
var p = getVerticalPosition(i, 0.5); |
||||||
|
return ((p < 0.1) ? '1em' : ((p > 0.9) ? '0' : '0.5em')); |
||||||
|
}) |
||||||
|
.text(function(d) { return d; }) |
||||||
|
.attr('x', function(d, i){ return getHorizontalPosition(i, cfg.w / 2, cfg.factorLegend); }) |
||||||
|
.attr('y', function(d, i){ return getVerticalPosition(i, cfg.h / 2, cfg.factorLegend); }); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// content
|
||||||
|
data.forEach(function(d){ |
||||||
|
d.axes.forEach(function(axis, i) { |
||||||
|
axis.x = getHorizontalPosition(i, cfg.w/2, (parseFloat(Math.max(axis.value, 0))/maxValue)*cfg.factor); |
||||||
|
axis.y = getVerticalPosition(i, cfg.h/2, (parseFloat(Math.max(axis.value, 0))/maxValue)*cfg.factor); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
var polygon = container.selectAll(".area").data(data, cfg.axisJoin); |
||||||
|
|
||||||
|
polygon.enter().append('polygon') |
||||||
|
.classed({area: 1, 'd3-enter': 1}) |
||||||
|
.on('mouseover', function (d){ |
||||||
|
container.classed('focus', 1); |
||||||
|
d3.select(this).classed('focused', 1); |
||||||
|
}) |
||||||
|
.on('mouseout', function(){ |
||||||
|
container.classed('focus', 0); |
||||||
|
d3.select(this).classed('focused', 0); |
||||||
|
}); |
||||||
|
|
||||||
|
polygon.exit() |
||||||
|
.classed('d3-exit', 1) // trigger css transition
|
||||||
|
.transition().duration(cfg.transitionDuration) |
||||||
|
.remove(); |
||||||
|
|
||||||
|
polygon |
||||||
|
.each(function(d, i) { |
||||||
|
var classed = {'d3-exit': 0}; // if exiting element is being reused
|
||||||
|
classed['radar-chart-serie' + i] = 1; |
||||||
|
if(d.className) { |
||||||
|
classed[d.className] = 1; |
||||||
|
} |
||||||
|
d3.select(this).classed(classed); |
||||||
|
}) |
||||||
|
// styles should only be transitioned with css
|
||||||
|
.style('stroke', function(d, i) { return cfg.color(i); }) |
||||||
|
.style('fill', function(d, i) { return cfg.color(i); }) |
||||||
|
.transition().duration(cfg.transitionDuration) |
||||||
|
// svg attrs with js
|
||||||
|
.attr('points',function(d) { |
||||||
|
return d.axes.map(function(p) { |
||||||
|
return [p.x, p.y].join(','); |
||||||
|
}).join(' '); |
||||||
|
}) |
||||||
|
.each('start', function() { |
||||||
|
d3.select(this).classed('d3-enter', 0); // trigger css transition
|
||||||
|
}); |
||||||
|
|
||||||
|
if(cfg.circles && cfg.radius) { |
||||||
|
var tooltip = container.selectAll('.tooltip').data([1]); |
||||||
|
tooltip.enter().append('text').attr('class', 'tooltip'); |
||||||
|
|
||||||
|
var circleGroups = container.selectAll('g.circle-group').data(data, cfg.axisJoin); |
||||||
|
|
||||||
|
circleGroups.enter().append('g').classed({'circle-group': 1, 'd3-enter': 1}); |
||||||
|
circleGroups.exit() |
||||||
|
.classed('d3-exit', 1) // trigger css transition
|
||||||
|
.transition().duration(cfg.transitionDuration).remove(); |
||||||
|
|
||||||
|
circleGroups |
||||||
|
.each(function(d) { |
||||||
|
var classed = {'d3-exit': 0}; // if exiting element is being reused
|
||||||
|
if(d.className) { |
||||||
|
classed[d.className] = 1; |
||||||
|
} |
||||||
|
d3.select(this).classed(classed); |
||||||
|
}) |
||||||
|
.transition().duration(cfg.transitionDuration) |
||||||
|
.each('start', function() { |
||||||
|
d3.select(this).classed('d3-enter', 0); // trigger css transition
|
||||||
|
}); |
||||||
|
|
||||||
|
var circle = circleGroups.selectAll('.circle').data(function(datum, i) { |
||||||
|
return datum.axes.map(function(d) { return [d, i]; }); |
||||||
|
}); |
||||||
|
|
||||||
|
circle.enter().append('circle') |
||||||
|
.classed({circle: 1, 'd3-enter': 1}) |
||||||
|
.on('mouseover', function(d){ |
||||||
|
tooltip |
||||||
|
.attr('x', d[0].x - 10) |
||||||
|
.attr('y', d[0].y - 5) |
||||||
|
.text(d[0].value) |
||||||
|
.classed('visible', 1); |
||||||
|
|
||||||
|
container.classed('focus', 1); |
||||||
|
container.select('.area.radar-chart-serie'+d[1]).classed('focused', 1); |
||||||
|
}) |
||||||
|
.on('mouseout', function(d){ |
||||||
|
tooltip.classed('visible', 0); |
||||||
|
|
||||||
|
container.classed('focus', 0); |
||||||
|
container.select('.area.radar-chart-serie'+d[1]).classed('focused', 0); |
||||||
|
}); |
||||||
|
|
||||||
|
circle.exit() |
||||||
|
.classed('d3-exit', 1) // trigger css transition
|
||||||
|
.transition().duration(cfg.transitionDuration).remove(); |
||||||
|
|
||||||
|
circle |
||||||
|
.each(function(d) { |
||||||
|
var classed = {'d3-exit': 0}; // if exit element reused
|
||||||
|
classed['radar-chart-serie'+d[1]] = 1; |
||||||
|
d3.select(this).classed(classed); |
||||||
|
}) |
||||||
|
// styles should only be transitioned with css
|
||||||
|
.style('fill', function(d) { return cfg.color(d[1]); }) |
||||||
|
.transition().duration(cfg.transitionDuration) |
||||||
|
// svg attrs with js
|
||||||
|
.attr('r', cfg.radius) |
||||||
|
.attr('cx', function(d) { |
||||||
|
return d[0].x; |
||||||
|
}) |
||||||
|
.attr('cy', function(d) { |
||||||
|
return d[0].y; |
||||||
|
}) |
||||||
|
.each('start', function() { |
||||||
|
d3.select(this).classed('d3-enter', 0); // trigger css transition
|
||||||
|
}); |
||||||
|
|
||||||
|
// ensure tooltip is upmost layer
|
||||||
|
var tooltipEl = tooltip.node(); |
||||||
|
tooltipEl.parentNode.appendChild(tooltipEl); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
radar.config = function(value) { |
||||||
|
if(!arguments.length) { |
||||||
|
return cfg; |
||||||
|
} |
||||||
|
if(arguments.length > 1) { |
||||||
|
cfg[arguments[0]] = arguments[1]; |
||||||
|
} |
||||||
|
else { |
||||||
|
d3.entries(value || {}).forEach(function(option) { |
||||||
|
cfg[option.key] = option.value; |
||||||
|
}); |
||||||
|
} |
||||||
|
return radar; |
||||||
|
}; |
||||||
|
|
||||||
|
return radar; |
||||||
|
}, |
||||||
|
draw: function(id, d, options) { |
||||||
|
var chart = RadarChart.chart().config(options); |
||||||
|
var cfg = chart.config(); |
||||||
|
|
||||||
|
d3.select(id).select('svg').remove(); |
||||||
|
d3.select(id) |
||||||
|
.append("svg") |
||||||
|
.attr("width", cfg.w) |
||||||
|
.attr("height", cfg.h) |
||||||
|
.datum(d) |
||||||
|
.call(chart); |
||||||
|
} |
||||||
|
}; |
||||||
@ -0,0 +1,81 @@ |
|||||||
|
.area { |
||||||
|
fill: #FFD700; |
||||||
|
} |
||||||
|
.radar-chart .area { |
||||||
|
fill-opacity: 0.3; |
||||||
|
} |
||||||
|
.radar-chart.focus .area { |
||||||
|
fill-opacity: 0.3; |
||||||
|
} |
||||||
|
.radar-chart.focus .area.focused { |
||||||
|
fill-opacity: 0.9; |
||||||
|
fill: #FFD700; |
||||||
|
stroke: none; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* |
||||||
|
* from https://rawgit.com/tpreusse/radar-chart-d3/master/src/radar-chart.css |
||||||
|
* and https://github.com/alangrafu/radar-chart-d3 |
||||||
|
*/ |
||||||
|
.radar-chart .level { |
||||||
|
stroke: grey; |
||||||
|
stroke-width: 0.5; |
||||||
|
} |
||||||
|
|
||||||
|
.radar-chart .axis line { |
||||||
|
stroke: grey; |
||||||
|
stroke-width: 1; |
||||||
|
} |
||||||
|
.radar-chart .axis .legend { |
||||||
|
font-family: sans-serif; |
||||||
|
font-size: 10px; |
||||||
|
} |
||||||
|
.radar-chart .axis .legend.top { |
||||||
|
dy:1em; |
||||||
|
} |
||||||
|
.radar-chart .axis .legend.left { |
||||||
|
text-anchor: start; |
||||||
|
} |
||||||
|
.radar-chart .axis .legend.middle { |
||||||
|
text-anchor: middle; |
||||||
|
} |
||||||
|
.radar-chart .axis .legend.right { |
||||||
|
text-anchor: end; |
||||||
|
} |
||||||
|
|
||||||
|
.radar-chart .tooltip { |
||||||
|
font-family: sans-serif; |
||||||
|
font-size: 13px; |
||||||
|
transition: opacity 200ms; |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
.radar-chart .tooltip.visible { |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
|
||||||
|
/* area transition when hovering */ |
||||||
|
.radar-chart .area { |
||||||
|
stroke-width: 2; |
||||||
|
fill-opacity: 0.5; |
||||||
|
} |
||||||
|
.radar-chart.focus .area { |
||||||
|
fill-opacity: 0.1; |
||||||
|
} |
||||||
|
.radar-chart.focus .area.focused { |
||||||
|
fill-opacity: 0.7; |
||||||
|
} |
||||||
|
|
||||||
|
.radar-chart .circle { |
||||||
|
fill-opacity: 0.9; |
||||||
|
} |
||||||
|
|
||||||
|
/* transitions */ |
||||||
|
.radar-chart .area, .radar-chart .circle { |
||||||
|
transition: opacity 300ms, fill-opacity 200ms; |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
.radar-chart .d3-enter, .radar-chart .d3-exit { |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
@ -0,0 +1,175 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<title>radar1 Chart</title> |
||||||
|
<meta charset="utf-8" /> |
||||||
|
|
||||||
|
<!-- |
||||||
|
my CSS styles |
||||||
|
--> |
||||||
|
<link href="/theme/css/bootstrap.css" rel="stylesheet" type="text/css"> |
||||||
|
<link href="/theme/css/main.css" rel="stylesheet" type="text/css"> |
||||||
|
|
||||||
|
<link href="/theme/css/cosmo.css" rel="stylesheet" type="text/css"> |
||||||
|
<link href="/theme/css/font-awesome.css" rel="stylesheet" type="text/css"/> |
||||||
|
<link href="/theme/css/pygment.css" rel="stylesheet" type="text/css"/> |
||||||
|
|
||||||
|
<!-- |
||||||
|
include Angular first |
||||||
|
--> |
||||||
|
<script type="text/javascript" src="/theme/js/angular-1.3.15.js"></script> |
||||||
|
<script src="//d3js.org/d3.v3.min.js"></script> |
||||||
|
</head> |
||||||
|
|
||||||
|
<body id="index" class="home"> |
||||||
|
<div class="container"> |
||||||
|
<h1><a href="/">dang-sunburst <strong></strong></a></h1> |
||||||
|
<hr /> |
||||||
|
|
||||||
|
|
||||||
|
<link href="/radar/radar1.css" rel="stylesheet" stype="text/css" /> |
||||||
|
|
||||||
|
<div ng-app="radar1App"> |
||||||
|
|
||||||
|
<div ng-controller="radar1Controller" ng-init="initialize()"> |
||||||
|
|
||||||
|
|
||||||
|
<div class="row"> |
||||||
|
<div class="col-sm-12" id="radar1_title"> |
||||||
|
<radar1head></radar1head> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="row"> |
||||||
|
<div class="col-sm-10" id="radar1_controls"> |
||||||
|
<radar1controls></radar1controls> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
<div class="row"> |
||||||
|
<div class="col-sm-6" id="radar1_charts"> |
||||||
|
<div class="row" id="radar1_chart"> |
||||||
|
<radar1chart></radar1chart> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="col-sm-6" id="radar1_panels"> |
||||||
|
<div class="row" id="radar1_panel"> |
||||||
|
<radar1panel></radar1panel> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="row"> |
||||||
|
|
||||||
|
<div class="col-sm-10" id="radar1_text"> |
||||||
|
<div class="row" id="radar1_md"> |
||||||
|
This chart uses a radar chart that's defined as a single, standalone Javacsript object, |
||||||
|
which expects data in a particular structure. Some settings cannot be changed and are implemented as is, |
||||||
|
while other options can be configured using a dictionary. |
||||||
|
|
||||||
|
<br /> |
||||||
|
<br /> |
||||||
|
|
||||||
|
The radar chart is connected to data about the month of death, |
||||||
|
organized in a hierarchical way, similar to the organization for |
||||||
|
the bar and donut charts. The difference is that this time, |
||||||
|
the pre-defined RadarChart object was used, which expected |
||||||
|
particular data labels. |
||||||
|
|
||||||
|
<br/> |
||||||
|
<br/> |
||||||
|
|
||||||
|
Here is how the data looks for this example: |
||||||
|
|
||||||
|
<pre style="font-size: 8px;"> |
||||||
|
[ |
||||||
|
{ "className": "S324", |
||||||
|
"axes": [ |
||||||
|
{"value": 1, "axis": "January"}, |
||||||
|
{"value": 0, "axis": "February"}, |
||||||
|
|
||||||
|
... |
||||||
|
|
||||||
|
{"value": 0, "axis": "December"} |
||||||
|
] |
||||||
|
}, |
||||||
|
{ "className": "S328", |
||||||
|
"axes": [ |
||||||
|
{"value": 1, "axis": "January"}, |
||||||
|
{"value": 1, "axis": "February"}, |
||||||
|
|
||||||
|
... |
||||||
|
|
||||||
|
{"value": 2, "axis": "December"} |
||||||
|
] |
||||||
|
}, |
||||||
|
{ "className": "Y15", |
||||||
|
"axes": [ |
||||||
|
{"value": 3, "axis": "January"}, |
||||||
|
{"value": 2, "axis": "February"}, |
||||||
|
|
||||||
|
... |
||||||
|
|
||||||
|
{"value": 1, "axis": "December"} |
||||||
|
] |
||||||
|
} |
||||||
|
] |
||||||
|
</pre> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
<script src="http://d3js.org/d3.v3.js"></script> |
||||||
|
<script type="text/javascript" src="/radar/radar1_modcontrol.js"></script> |
||||||
|
<script type="text/javascript" src="/radar/radar1_chart.js"></script> |
||||||
|
<script type="text/javascript" src="/radar/radar-chart.js"></script> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
<footer id="contentinfo" class="body"> |
||||||
|
<hr /> |
||||||
|
<p style="text-align: center"> |
||||||
|
<span class="fa-stack fa-lg"> |
||||||
|
<i class="fa fa-square fa-stack-2x"></i> |
||||||
|
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i> |
||||||
|
</span> |
||||||
|
Made from the command line with vim by |
||||||
|
<a href="http://charlesreid1.com">charlesreid1</a>. |
||||||
|
</p> |
||||||
|
|
||||||
|
<p style="text-align: center;">Made with HTML ( |
||||||
|
<a href="http://http://bootstrap.org/">Bootstrap</a>, |
||||||
|
<a href="http://bootswatch.com">Bootswatch</a>), |
||||||
|
Javascript ( |
||||||
|
<a href="http://http://d3js.org/">D3.js</a>, |
||||||
|
<a href=https://angularjs.org/">Angular.js</a>, |
||||||
|
<a href="https://jquery.com/">jQuery</a>), |
||||||
|
and Python ( |
||||||
|
<a href="http://pydata.org">Pandas</a>, |
||||||
|
<a href="http://getpelican.com">Pelican</a>, |
||||||
|
<a href="http://ipython.org">Jupyter Notebooks</a>). |
||||||
|
</p> |
||||||
|
|
||||||
|
<script type="text/javascript" src="/theme/js/jquery-1.11.2.js"></script> |
||||||
|
<script type="text/javascript" src="/theme/js/bootstrap-3.3.4.js"></script> |
||||||
|
<!-- |
||||||
|
<script type="text/javascript" src="/theme/js/d3-3.5.5.js"></script> |
||||||
|
<script type="text/javascript" src="/theme/js/leaflet-0.7.3.js"></script> |
||||||
|
<script type="text/javascript" src="/theme/js/leaflet.ajax.min.js"></script> |
||||||
|
--> |
||||||
|
</footer><!-- /#contentinfo --> |
||||||
|
|
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
[{"donut": [{"value": 0, "label": "M"}, {"value": 1, "label": "F"}], "code": "S324", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 2, "label": "M"}, {"value": 3, "label": "F"}], "code": "S328", "modbars": [{"value": 1, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 4, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 1, "label": "M"}, {"value": 0, "label": "F"}], "code": "Y15", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 1, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 1, "label": "M"}, {"value": 4, "label": "F"}], "code": "Y14", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 5, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 9, "label": "M"}, {"value": 14, "label": "F"}], "code": "I120", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 23, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 0, "label": "M"}, {"value": 2, "label": "F"}], "code": "I129", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 2, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 1, "label": "M"}, {"value": 0, "label": "F"}], "code": "A051", "modbars": [{"value": 1, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 1, "label": "M"}, {"value": 3, "label": "F"}], "code": "W19", "modbars": [{"value": 2, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 2, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 1, "label": "M"}, {"value": 1, "label": "F"}], "code": "T465", "modbars": [{"value": 0, "label": "Accident"}, {"value": 2, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 2, "label": "M"}, {"value": 0, "label": "F"}], "code": "C449", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 2, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 2, "label": "M"}, {"value": 1, "label": "F"}], "code": "C119", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 3, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 0, "label": "M"}, {"value": 1, "label": "F"}], "code": "C444", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 3, "label": "M"}, {"value": 2, "label": "F"}], "code": "T519", "modbars": [{"value": 2, "label": "Accident"}, {"value": 1, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 1, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 30, "label": "M"}, {"value": 12, "label": "F"}], "code": "T510", "modbars": [{"value": 37, "label": "Accident"}, {"value": 2, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 3, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 2, "label": "M"}, {"value": 0, "label": "F"}], "code": "T511", "modbars": [{"value": 2, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 0, "label": "M"}, {"value": 1, "label": "F"}], "code": "K117", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}] |
||||||
@ -0,0 +1,700 @@ |
|||||||
|
var ng; |
||||||
|
dir = []; |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//////////////////////////////////////
|
||||||
|
// Chart Directives
|
||||||
|
//
|
||||||
|
// This file defines Angular directives
|
||||||
|
// that use D3 to draw charts.
|
||||||
|
//
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
///////////////////////////////////////
|
||||||
|
// Header Directives:
|
||||||
|
//
|
||||||
|
// Print out instructions, title, etc.
|
||||||
|
|
||||||
|
|
||||||
|
ng = a.directive('radar1head', function($compile) { |
||||||
|
|
||||||
|
function link(scope, element, attr) { |
||||||
|
|
||||||
|
var el = element[0]; |
||||||
|
|
||||||
|
$(el).empty(); |
||||||
|
|
||||||
|
var dir = $("div#radar1_title"); |
||||||
|
|
||||||
|
var h1 = $("<h1 />"); |
||||||
|
|
||||||
|
var b = $("<b />") |
||||||
|
.text("Radar Chart Example") |
||||||
|
.appendTo(h1); |
||||||
|
|
||||||
|
h1.appendTo(dir); |
||||||
|
|
||||||
|
|
||||||
|
var p = $("<p />", { |
||||||
|
"class" : "normal" }) |
||||||
|
.html("A fancy little radar chart.") |
||||||
|
.appendTo(dir); |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
return { |
||||||
|
restrict: "E", |
||||||
|
link: link, |
||||||
|
scope: {} |
||||||
|
} |
||||||
|
}); |
||||||
|
dir.push(ng); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
///////////////////////////////////////////////
|
||||||
|
// Chart Controls Directives
|
||||||
|
|
||||||
|
ng = a.directive('radar1controls', function($compile) { |
||||||
|
|
||||||
|
function link(scope, element, attr) { |
||||||
|
|
||||||
|
// wait to build the buttons until we've loaded the data,
|
||||||
|
// since the buttons come from the data.
|
||||||
|
scope.$parent.$watch('radar1data',doStuff); |
||||||
|
|
||||||
|
function doStuff() { |
||||||
|
if(!scope.$parent.radar1data) { return; } |
||||||
|
buildButtons(element, scope.$parent); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
}; |
||||||
|
|
||||||
|
function buildButtons(element,pscope) { |
||||||
|
|
||||||
|
var mydiv = "div#radar1_controls"; |
||||||
|
|
||||||
|
var el = $(mydiv); |
||||||
|
|
||||||
|
var div = $("<div />"); |
||||||
|
|
||||||
|
|
||||||
|
// ------------------------------------
|
||||||
|
// Add ICD 10 code buttons
|
||||||
|
//
|
||||||
|
var btn_grp = $("<div />", { |
||||||
|
"id" : "codebtns", |
||||||
|
"class" : "btn-group" |
||||||
|
}); |
||||||
|
|
||||||
|
for( var i = 0; i < pscope.radar1data.length; i++ ) { |
||||||
|
var this_code = pscope.radar1data[i]['className'] |
||||||
|
var code = $("<a />", { |
||||||
|
"class" : "btn btn-code btn-large btn-primary", |
||||||
|
"changecode" : "", |
||||||
|
"id" : "btn_"+this_code, |
||||||
|
"code" : this_code, |
||||||
|
}) |
||||||
|
.html( this_code ) |
||||||
|
.appendTo(btn_grp); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// to make buttons in this btn group active,
|
||||||
|
// you have to use D3's classed() method
|
||||||
|
// after you add the elements to the document
|
||||||
|
// (i.e., after you call $compile)
|
||||||
|
|
||||||
|
angular.element(el).append($compile(btn_grp)(pscope)); |
||||||
|
|
||||||
|
|
||||||
|
pscope.updateCode = function() { |
||||||
|
|
||||||
|
// -----------------------------
|
||||||
|
// make button for active icd 10 code
|
||||||
|
|
||||||
|
d3.selectAll("a.btn-code").classed('active',false); |
||||||
|
var btnlabel = "a#btn_"+pscope.icd10code; |
||||||
|
d3.selectAll(btnlabel).classed('active',true); |
||||||
|
|
||||||
|
}; |
||||||
|
|
||||||
|
pscope.$watch('icd10code',pscope.updateCode); |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
return { |
||||||
|
restrict: "E", |
||||||
|
link: link, |
||||||
|
scope: {} |
||||||
|
} |
||||||
|
}); |
||||||
|
dir.push(ng); |
||||||
|
|
||||||
|
|
||||||
|
//////////////////////////////////
|
||||||
|
// Action directive:
|
||||||
|
// What to do when the user changes the ICD 10 code
|
||||||
|
// by clicking an ICD 10 code button
|
||||||
|
|
||||||
|
ng = a.directive("changecode", function($compile) { |
||||||
|
|
||||||
|
return function(pscope, element, attrs){ |
||||||
|
element.bind("click", function(){ |
||||||
|
|
||||||
|
// first, update the scope variable
|
||||||
|
// that holds the current icd 10 code
|
||||||
|
// (no need to load any new data)
|
||||||
|
|
||||||
|
|
||||||
|
// This is the ICD 10 code the user has selected.
|
||||||
|
var this_code = attrs['code']; |
||||||
|
var this_description = pscope.icd10codes_all[this_code] |
||||||
|
|
||||||
|
//console.log('Changed icd 10 code, updating description:');
|
||||||
|
//console.log(this_code);
|
||||||
|
//console.log(this_description);
|
||||||
|
|
||||||
|
|
||||||
|
// !!!!!!!!!!!!!!!!!!!!!!!!
|
||||||
|
// NOTE
|
||||||
|
// The lines below - this $apply() method -
|
||||||
|
// this is the way you change the variable
|
||||||
|
// at the controller level, and get the
|
||||||
|
// various watchers to detect changes.
|
||||||
|
// !!!!!!!!!!!!!!!!!!!!!!!!!!
|
||||||
|
pscope.$apply(function() { |
||||||
|
pscope.icd10code = this_code; |
||||||
|
}); |
||||||
|
|
||||||
|
pscope.$apply(function() { |
||||||
|
pscope.description = this_description; |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
//// This is some weak-sauce,
|
||||||
|
//// its not even changing value of variable
|
||||||
|
//pscope.update_icd10code(attrs['code']);
|
||||||
|
//// ...
|
||||||
|
//// .......
|
||||||
|
//// seriously.
|
||||||
|
//// all we needed was just
|
||||||
|
//// pscope.$apply()
|
||||||
|
////
|
||||||
|
//// smh.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//// then run the donut chart update function
|
||||||
|
//pscope.updateradar1();
|
||||||
|
|
||||||
|
// then run the button controllers update function
|
||||||
|
pscope.updateCode(); |
||||||
|
|
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
///////////////////////////////////////////////
|
||||||
|
// Panels:
|
||||||
|
// Display useful information in a pretty box
|
||||||
|
|
||||||
|
|
||||||
|
ng = a.directive('radar1panel', function($compile) { |
||||||
|
|
||||||
|
|
||||||
|
function link(scope, element, attr) { |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
var el = element[0]; |
||||||
|
|
||||||
|
var pscope = scope.$parent; |
||||||
|
|
||||||
|
// --------------------------
|
||||||
|
// add display for details
|
||||||
|
|
||||||
|
// assemble the tags,
|
||||||
|
// then compile the html
|
||||||
|
// select element of interest with angular.element
|
||||||
|
// and append the compiled tags
|
||||||
|
//
|
||||||
|
var br = $("<br />").appendTo(el); |
||||||
|
|
||||||
|
var panel = $("<div />", { |
||||||
|
"class" : "panel panel-primary", |
||||||
|
"id" : "first" |
||||||
|
}); |
||||||
|
|
||||||
|
var panelhead = $("<div />", { |
||||||
|
"class" : "panel-heading" |
||||||
|
}).appendTo(panel); |
||||||
|
|
||||||
|
var h3 = $("<h3 />", { |
||||||
|
"class" : "panel-title" |
||||||
|
}).text("Current ICD 10 Code") |
||||||
|
.appendTo(panelhead); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
var panelbody = $("<div />", { |
||||||
|
"class" : "panel-body" |
||||||
|
}).appendTo(panel); |
||||||
|
|
||||||
|
var maindiv = $("<div />", { |
||||||
|
}).appendTo(panelbody); |
||||||
|
|
||||||
|
var h = $("<h3 />") |
||||||
|
.html("ICD 10 Code: [[icd10code]]") |
||||||
|
.appendTo(maindiv); |
||||||
|
|
||||||
|
var de = $("<p />", { |
||||||
|
"class" : "lead" }) |
||||||
|
.html("Description: [[description]]") |
||||||
|
.appendTo(maindiv); |
||||||
|
|
||||||
|
angular.element(el).prepend($compile(panel)(pscope)); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
return { |
||||||
|
link: link, |
||||||
|
restrict: "E", |
||||||
|
scope: { } |
||||||
|
}; |
||||||
|
}); |
||||||
|
dir.push(ng); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
///////////////////////////////////////////////
|
||||||
|
// radar1 Chart
|
||||||
|
//
|
||||||
|
// This is the actual donut chart, of gender ratios.
|
||||||
|
|
||||||
|
ng = a.directive('radar1chart', function($compile) { |
||||||
|
|
||||||
|
function link(scope, element, attr) { |
||||||
|
|
||||||
|
scope.$parent.$watch('radar1data',doStuff); |
||||||
|
|
||||||
|
function doStuff() { |
||||||
|
if(!scope.$parent.radar1data) { return; } |
||||||
|
buildradar1(element, scope.$parent); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
}; |
||||||
|
|
||||||
|
function buildradar1(element,pscope) { |
||||||
|
|
||||||
|
var mydiv = "div#radar1_chart"; |
||||||
|
|
||||||
|
/////////////////////////////////////////
|
||||||
|
// Create chart
|
||||||
|
//
|
||||||
|
// data has not been loaded yet.
|
||||||
|
// start by initializing variables
|
||||||
|
// that don't depend on the data.
|
||||||
|
//
|
||||||
|
|
||||||
|
|
||||||
|
/////////////////////////////////
|
||||||
|
//
|
||||||
|
// Wonderful:
|
||||||
|
//
|
||||||
|
// https://github.com/alangrafu/radar-chart-d3
|
||||||
|
//
|
||||||
|
|
||||||
|
var el = element[0]; |
||||||
|
$(el).empty(); |
||||||
|
|
||||||
|
RadarChart.defaultConfig.color = function() {}; |
||||||
|
RadarChart.defaultConfig.radius = 3; |
||||||
|
RadarChart.defaultConfig.w = 400; |
||||||
|
RadarChart.defaultConfig.h = 400; |
||||||
|
|
||||||
|
//var chart = RadarChart.chart({'minValue':-1});
|
||||||
|
var chart = RadarChart.chart(); |
||||||
|
|
||||||
|
var cfg = chart.config(); // retrieve default config
|
||||||
|
cfg['minValue'] = -1; |
||||||
|
cfg['levels'] = 10; |
||||||
|
cfg['circles'] = true; |
||||||
|
cfg['axisLine'] = true; |
||||||
|
|
||||||
|
var svg = d3.select(mydiv).append('svg') |
||||||
|
.attr('width', cfg.w + cfg.w + 50) |
||||||
|
.attr('height', cfg.h + cfg.h / 4); |
||||||
|
|
||||||
|
|
||||||
|
/////////////////////////////////////////////////////
|
||||||
|
// update radar chart
|
||||||
|
//
|
||||||
|
pscope.updateradar1 = function() { |
||||||
|
|
||||||
|
var all_data = pscope.radar1data; |
||||||
|
|
||||||
|
// ----------------------------------
|
||||||
|
// Get chart data
|
||||||
|
//
|
||||||
|
// Here, we have all donut data
|
||||||
|
// available to us.
|
||||||
|
//
|
||||||
|
// We use the currently-selected ICD 10 code
|
||||||
|
// to filter which donut data is being plotted.
|
||||||
|
//
|
||||||
|
// Where to keep track of current code?
|
||||||
|
// In the controller (available via pscope).
|
||||||
|
// pscope.icd10code
|
||||||
|
//
|
||||||
|
var code; |
||||||
|
var data; |
||||||
|
for( var jj=0; jj < all_data.length; jj++ ) { |
||||||
|
// set excpetion handling:
|
||||||
|
// if no icd10code is set, problems occur.
|
||||||
|
if(all_data[jj]['className'] == pscope.icd10code) { |
||||||
|
code = all_data[jj]['className']; |
||||||
|
data = [all_data[jj]] |
||||||
|
break; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
if(data==null) { |
||||||
|
console.log("Error. Check that ICD 10 code is in data set: "+pscope.icd10code); |
||||||
|
console.log(pscope.icd10code); |
||||||
|
console.log(all_data); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
console.log(pscope.icd10code); |
||||||
|
console.log(data); |
||||||
|
|
||||||
|
// finished; use data
|
||||||
|
// ---------------------------------
|
||||||
|
|
||||||
|
|
||||||
|
///////////////////////////////////
|
||||||
|
// now draw the svg with d3
|
||||||
|
//
|
||||||
|
|
||||||
|
//svg.selectAll(".single").remove();
|
||||||
|
svg.selectAll(".single").remove(); |
||||||
|
svg.selectAll(".axis").remove(); |
||||||
|
svg.selectAll(".area").remove(); |
||||||
|
|
||||||
|
svg.append('g') |
||||||
|
.classed('single', 1) |
||||||
|
.datum(data) |
||||||
|
.call(chart); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
pscope.$watch('icd10code',pscope.updateradar1); |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
/////////////////////////////////////////////////////
|
||||||
|
// update radar chart
|
||||||
|
pscope.updateDonut = function() { |
||||||
|
|
||||||
|
var all_data = pscope.radar1data; |
||||||
|
|
||||||
|
|
||||||
|
// ----------------------------------
|
||||||
|
// Get pie chart data
|
||||||
|
//
|
||||||
|
// Here, we have all donut data
|
||||||
|
// available to us.
|
||||||
|
//
|
||||||
|
// We use the currently-selected ICD 10 code
|
||||||
|
// to filter which donut data is being plotted.
|
||||||
|
//
|
||||||
|
// Where to keep track of current code?
|
||||||
|
// In the controller (available via pscope).
|
||||||
|
// pscope.icd10code
|
||||||
|
//
|
||||||
|
var code; |
||||||
|
var data; |
||||||
|
for( var i=0; i < all_data.length; i++ ) { |
||||||
|
|
||||||
|
// set excpetion handling:
|
||||||
|
// if no icd10code is set, problems occur.
|
||||||
|
if(all_data[i]['code'] == pscope.icd10code) { |
||||||
|
code = all_data[i]['code']; |
||||||
|
data = all_data[i]['modbars']; |
||||||
|
break; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
if(data==null) { |
||||||
|
console.log("Check ICD 10 code is in data set: "+pscope.icd10code); |
||||||
|
console.log(all_data); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
// finished; use data
|
||||||
|
// ---------------------------------
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// --------------------------------------
|
||||||
|
// Now we are ready to draw the damn chart.
|
||||||
|
|
||||||
|
var cfg = { |
||||||
|
radius: 5, |
||||||
|
w: w, |
||||||
|
h: h, |
||||||
|
factor: 1, |
||||||
|
factorLegend: .85, |
||||||
|
levels: 3, |
||||||
|
maxValue: 0, |
||||||
|
radians: 2 * Math.PI, |
||||||
|
opacityArea: 0.5, |
||||||
|
ToRight: 5, |
||||||
|
TranslateX: 80, |
||||||
|
TranslateY: 30, |
||||||
|
ExtraWidthX: 100, |
||||||
|
ExtraWidthY: 100, |
||||||
|
color: d3.scale.category10() |
||||||
|
}; |
||||||
|
|
||||||
|
cfg.maxValue = Math.max(cfg.maxValue, d3.max(data.map(function(o){return o.value;}))); |
||||||
|
var allAxis = (data.map(function(i, j){ return i.label})); |
||||||
|
var total = allAxis.length; |
||||||
|
var radius = cfg.factor*Math.min(cfg.w/2, cfg.h/2); |
||||||
|
var Format = d3.format('%'); |
||||||
|
|
||||||
|
d3.select(mydiv).select("svg").remove(); |
||||||
|
|
||||||
|
//console.log(allAxis);
|
||||||
|
|
||||||
|
//Circular segments
|
||||||
|
for(var j=0; j<cfg.levels-1; j++){ |
||||||
|
var levelFactor = cfg.factor*radius*((j+1)/cfg.levels); |
||||||
|
svg.selectAll(".levels") |
||||||
|
.data(allAxis) |
||||||
|
.enter() |
||||||
|
.append("svg:line") |
||||||
|
.attr("x1", function(d, i){return levelFactor*(1-cfg.factor*Math.sin(i*cfg.radians/total));}) |
||||||
|
.attr("y1", function(d, i){return levelFactor*(1-cfg.factor*Math.cos(i*cfg.radians/total));}) |
||||||
|
.attr("x2", function(d, i){return levelFactor*(1-cfg.factor*Math.sin((i+1)*cfg.radians/total));}) |
||||||
|
.attr("y2", function(d, i){return levelFactor*(1-cfg.factor*Math.cos((i+1)*cfg.radians/total));}) |
||||||
|
.attr("class", "line") |
||||||
|
.attr("class", "mylines") |
||||||
|
.style("stroke", "grey") |
||||||
|
.style("stroke-opacity", "0.75") |
||||||
|
.style("stroke-width", "0.3px") |
||||||
|
.attr("transform", "translate(" + (cfg.w/2-levelFactor) + ", " + (cfg.h/2-levelFactor) + ")"); |
||||||
|
} |
||||||
|
|
||||||
|
//Text indicating at what % each level is
|
||||||
|
for(var j=0; j<cfg.levels; j++){ |
||||||
|
var levelFactor = cfg.factor*radius*((j+1)/cfg.levels); |
||||||
|
svg.selectAll(".levels") |
||||||
|
.data([1]) //dummy data
|
||||||
|
.enter() |
||||||
|
.append("svg:text") |
||||||
|
.attr("x", function(d){return levelFactor*(1-cfg.factor*Math.sin(0));}) |
||||||
|
.attr("y", function(d){return levelFactor*(1-cfg.factor*Math.cos(0));}) |
||||||
|
.attr("class", "legend") |
||||||
|
.style("font-family", "sans-serif") |
||||||
|
.style("font-size", "10px") |
||||||
|
.attr("transform", "translate(" + (cfg.w/2-levelFactor + cfg.ToRight) + ", " + (cfg.h/2-levelFactor) + ")") |
||||||
|
.attr("fill", "#737373") |
||||||
|
.text(Format((j+1)*cfg.maxValue/cfg.levels)); |
||||||
|
} |
||||||
|
|
||||||
|
var axis = svg.selectAll(".axis") |
||||||
|
.data(allAxis) |
||||||
|
.enter() |
||||||
|
.append("g") |
||||||
|
.attr("class", "axis"); |
||||||
|
|
||||||
|
axis.append("line") |
||||||
|
.attr("x1", cfg.w/2) |
||||||
|
.attr("y1", cfg.h/2) |
||||||
|
.attr("x2", function(d, i){return cfg.w/2*(1-cfg.factor*Math.sin(i*cfg.radians/total));}) |
||||||
|
.attr("y2", function(d, i){return cfg.h/2*(1-cfg.factor*Math.cos(i*cfg.radians/total));}) |
||||||
|
.attr("class", "line") |
||||||
|
.style("stroke", "grey") |
||||||
|
.style("stroke-width", "1px"); |
||||||
|
|
||||||
|
axis.append("text") |
||||||
|
.attr("class", "legend") |
||||||
|
.text(function(d){return d}) |
||||||
|
.style("font-family", "sans-serif") |
||||||
|
.style("font-size", "11px") |
||||||
|
.attr("text-anchor", "middle") |
||||||
|
.attr("dy", "1.5em") |
||||||
|
.attr("transform", function(d, i){return "translate(0, -10)"}) |
||||||
|
.attr("x", function(d, i){return cfg.w/2*(1-cfg.factorLegend*Math.sin(i*cfg.radians/total))-60*Math.sin(i*cfg.radians/total);}) |
||||||
|
.attr("y", function(d, i){return cfg.h/2*(1-Math.cos(i*cfg.radians/total))-20*Math.cos(i*cfg.radians/total);}); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
series = 0; |
||||||
|
|
||||||
|
// for each series...
|
||||||
|
//
|
||||||
|
//
|
||||||
|
// what is this stupid nodes thing
|
||||||
|
// and where does it come from
|
||||||
|
// and why doesn't it show up
|
||||||
|
// because this is the key to getting this
|
||||||
|
// whole stupid chart to work
|
||||||
|
|
||||||
|
dataValues = []; |
||||||
|
|
||||||
|
//svg.selectAll(".mylines")
|
||||||
|
svg.selectAll(".nodes") |
||||||
|
.data(y, function(j, i){ |
||||||
|
dataValues.push([ |
||||||
|
cfg.w/2*(1-(parseFloat(Math.max(i, 0))/cfg.maxValue)*cfg.factor*Math.sin(i*cfg.radians/total)), |
||||||
|
cfg.h/2*(1-(parseFloat(Math.max(i, 0))/cfg.maxValue)*cfg.factor*Math.cos(i*cfg.radians/total)) |
||||||
|
//
|
||||||
|
// j.value is undefined, causing nans.
|
||||||
|
//cfg.w/2*(1-(parseFloat(Math.max(j.value, 0))/cfg.maxValue)*cfg.factor*Math.sin(i*cfg.radians/total)),
|
||||||
|
//cfg.h/2*(1-(parseFloat(Math.max(j.value, 0))/cfg.maxValue)*cfg.factor*Math.cos(i*cfg.radians/total))
|
||||||
|
]); |
||||||
|
}); |
||||||
|
dataValues.push(dataValues[0]); |
||||||
|
|
||||||
|
|
||||||
|
console.log(dataValues); |
||||||
|
|
||||||
|
|
||||||
|
svg.selectAll(".area") |
||||||
|
.data(dataValues) |
||||||
|
.enter() |
||||||
|
.append("polygon") |
||||||
|
.attr("class", "radar-chart-series"+series) |
||||||
|
.style("stroke-width", "2px") |
||||||
|
.style("stroke", cfg.color(series)) |
||||||
|
.attr("points",function(d) { |
||||||
|
var str=""; |
||||||
|
for(var pti=0;pti<d.length;pti++){ |
||||||
|
str=str+d[pti][0]+","+d[pti][1]+" "; |
||||||
|
} |
||||||
|
return str; |
||||||
|
}) |
||||||
|
.style("fill", function(j, i){ |
||||||
|
|
||||||
|
console.log(series); |
||||||
|
console.log(cfg.color(series)); |
||||||
|
|
||||||
|
return cfg.color(series)}) |
||||||
|
.style("fill-opacity", cfg.opacityArea) |
||||||
|
.on('mouseover', function (d){ |
||||||
|
z = "polygon."+d3.select(this).attr("class"); |
||||||
|
svg.selectAll("polygon") |
||||||
|
.transition(200) |
||||||
|
.style("fill-opacity", 0.1); |
||||||
|
svg.selectAll(z) |
||||||
|
.transition(200) |
||||||
|
.style("fill-opacity", .7); |
||||||
|
}) |
||||||
|
.on('mouseout', function(){ |
||||||
|
svg.selectAll("polygon") |
||||||
|
.transition(200) |
||||||
|
.style("fill-opacity", cfg.opacityArea); |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//svg.selectAll(".mylines")
|
||||||
|
svg.selectAll(".nodes") |
||||||
|
.data(y,function(d) { |
||||||
|
console.log('hello?'); |
||||||
|
}) |
||||||
|
.enter() |
||||||
|
.append("svg:circle") |
||||||
|
.attr("class", "radar-chart-series"+series) |
||||||
|
.attr('r', cfg.radius) |
||||||
|
.attr("alt", function(j){return Math.max(j.value, 0)}) |
||||||
|
.attr("cx", function(j, i){ |
||||||
|
console.log('hello?'); |
||||||
|
dataValues.push([ |
||||||
|
cfg.w/2*(1-(parseFloat(Math.max(j.value, 0))/cfg.maxValue)*cfg.factor*Math.sin(i*cfg.radians/total)), |
||||||
|
cfg.h/2*(1-(parseFloat(Math.max(j.value, 0))/cfg.maxValue)*cfg.factor*Math.cos(i*cfg.radians/total)) |
||||||
|
]); |
||||||
|
return cfg.w/2*(1-(Math.max(j.value, 0)/cfg.maxValue)*cfg.factor*Math.sin(i*cfg.radians/total)); |
||||||
|
}) |
||||||
|
.attr("cy", function(j, i){ |
||||||
|
return cfg.h/2*(1-(Math.max(j.value, 0)/cfg.maxValue)*cfg.factor*Math.cos(i*cfg.radians/total)); |
||||||
|
}) |
||||||
|
.attr("data-id", function(j){return j.axis}) |
||||||
|
.style("fill", cfg.color(series)).style("fill-opacity", .9) |
||||||
|
.on('mouseover', function (d){ |
||||||
|
newX = parseFloat(d3.select(this).attr('cx')) - 10; |
||||||
|
newY = parseFloat(d3.select(this).attr('cy')) - 5; |
||||||
|
|
||||||
|
tooltip |
||||||
|
.attr('x', newX) |
||||||
|
.attr('y', newY) |
||||||
|
.text(Format(d.value)) |
||||||
|
.transition(200) |
||||||
|
.style('opacity', 1); |
||||||
|
|
||||||
|
z = "polygon."+d3.select(this).attr("class"); |
||||||
|
svg.selectAll("polygon") |
||||||
|
.transition(200) |
||||||
|
.style("fill-opacity", 0.1); |
||||||
|
svg.selectAll(z) |
||||||
|
.transition(200) |
||||||
|
.style("fill-opacity", .7); |
||||||
|
}) |
||||||
|
.on('mouseout', function(){ |
||||||
|
tooltip |
||||||
|
.transition(200) |
||||||
|
.style('opacity', 0); |
||||||
|
svg.selectAll("polygon") |
||||||
|
.transition(200) |
||||||
|
.style("fill-opacity", cfg.opacityArea); |
||||||
|
}) |
||||||
|
.append("svg:title") |
||||||
|
.text(function(j){return Math.max(j.value, 0)}); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
return { |
||||||
|
link: link, |
||||||
|
restrict: "E", |
||||||
|
scope: { } |
||||||
|
}; |
||||||
|
}); |
||||||
|
dir.push(ng); |
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,76 @@ |
|||||||
|
///////////////////////////////////////
|
||||||
|
//
|
||||||
|
// radar1
|
||||||
|
//
|
||||||
|
// Module/Controller
|
||||||
|
//
|
||||||
|
|
||||||
|
var a = angular.module("radar1App", [], function($interpolateProvider) { |
||||||
|
$interpolateProvider.startSymbol('[['); |
||||||
|
$interpolateProvider.endSymbol(']]'); |
||||||
|
} |
||||||
|
); |
||||||
|
|
||||||
|
var datafactory = a.factory('datafactory', function($http, $q) { |
||||||
|
|
||||||
|
return { |
||||||
|
getradar1data: function() { |
||||||
|
var deferred = $q.defer(); |
||||||
|
|
||||||
|
var json_file = 'radar_mon.json'; |
||||||
|
|
||||||
|
$http.get(json_file).success(function(data) { |
||||||
|
deferred.resolve(data); |
||||||
|
}).error(function(){ |
||||||
|
console.log('error loading json file: '+json_file); |
||||||
|
deferred.reject(); |
||||||
|
}); |
||||||
|
|
||||||
|
return deferred.promise; |
||||||
|
}, |
||||||
|
|
||||||
|
getCodeData: function() { |
||||||
|
var deferred = $q.defer(); |
||||||
|
|
||||||
|
$http.get('icd10codes.json').success(function(data) { |
||||||
|
deferred.resolve(data); |
||||||
|
}).error(function(){ |
||||||
|
console.log('error loading icd10codes.json'); |
||||||
|
deferred.reject(); |
||||||
|
}); |
||||||
|
|
||||||
|
return deferred.promise; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
function radar1Controller($scope,datafactory) { |
||||||
|
|
||||||
|
$scope.initialize = function() { |
||||||
|
|
||||||
|
$scope.icd10code="S324"; |
||||||
|
$scope.donutFemale = 0; |
||||||
|
$scope.donutMale = 0; |
||||||
|
|
||||||
|
datafactory.getradar1data().then( |
||||||
|
function(data) { |
||||||
|
$scope.radar1data = data; |
||||||
|
} |
||||||
|
); |
||||||
|
|
||||||
|
datafactory.getCodeData().then( |
||||||
|
function(data) { |
||||||
|
$scope.icd10codes_all = data; |
||||||
|
var descr = $scope.icd10codes_all[$scope.icd10code]; |
||||||
|
$scope.description = descr; |
||||||
|
} |
||||||
|
); |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
// the first few arguments of the list should correspond to the Angular-namespace stuff to feed to controller
|
||||||
|
var c = a.controller("radar1Controller", ["$scope", "datafactory", radar1Controller]); |
||||||
@ -0,0 +1,81 @@ |
|||||||
|
.area { |
||||||
|
fill: #FFD700; |
||||||
|
} |
||||||
|
.radar-chart .area { |
||||||
|
fill-opacity: 0.3; |
||||||
|
} |
||||||
|
.radar-chart.focus .area { |
||||||
|
fill-opacity: 0.3; |
||||||
|
} |
||||||
|
.radar-chart.focus .area.focused { |
||||||
|
fill-opacity: 0.9; |
||||||
|
fill: #FFD700; |
||||||
|
stroke: none; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* |
||||||
|
* from https://rawgit.com/tpreusse/radar-chart-d3/master/src/radar-chart.css |
||||||
|
* and https://github.com/alangrafu/radar-chart-d3 |
||||||
|
*/ |
||||||
|
.radar-chart .level { |
||||||
|
stroke: grey; |
||||||
|
stroke-width: 0.5; |
||||||
|
} |
||||||
|
|
||||||
|
.radar-chart .axis line { |
||||||
|
stroke: grey; |
||||||
|
stroke-width: 1; |
||||||
|
} |
||||||
|
.radar-chart .axis .legend { |
||||||
|
font-family: sans-serif; |
||||||
|
font-size: 10px; |
||||||
|
} |
||||||
|
.radar-chart .axis .legend.top { |
||||||
|
dy:1em; |
||||||
|
} |
||||||
|
.radar-chart .axis .legend.left { |
||||||
|
text-anchor: start; |
||||||
|
} |
||||||
|
.radar-chart .axis .legend.middle { |
||||||
|
text-anchor: middle; |
||||||
|
} |
||||||
|
.radar-chart .axis .legend.right { |
||||||
|
text-anchor: end; |
||||||
|
} |
||||||
|
|
||||||
|
.radar-chart .tooltip { |
||||||
|
font-family: sans-serif; |
||||||
|
font-size: 13px; |
||||||
|
transition: opacity 200ms; |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
.radar-chart .tooltip.visible { |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
|
||||||
|
/* area transition when hovering */ |
||||||
|
.radar-chart .area { |
||||||
|
stroke-width: 2; |
||||||
|
fill-opacity: 0.5; |
||||||
|
} |
||||||
|
.radar-chart.focus .area { |
||||||
|
fill-opacity: 0.1; |
||||||
|
} |
||||||
|
.radar-chart.focus .area.focused { |
||||||
|
fill-opacity: 0.7; |
||||||
|
} |
||||||
|
|
||||||
|
.radar-chart .circle { |
||||||
|
fill-opacity: 0.9; |
||||||
|
} |
||||||
|
|
||||||
|
/* transitions */ |
||||||
|
.radar-chart .area, .radar-chart .circle { |
||||||
|
transition: opacity 300ms, fill-opacity 200ms; |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
.radar-chart .d3-enter, .radar-chart .d3-exit { |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
@ -0,0 +1,176 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<title>radar2 Chart</title> |
||||||
|
<meta charset="utf-8" /> |
||||||
|
|
||||||
|
<!-- |
||||||
|
my CSS styles |
||||||
|
--> |
||||||
|
<link href="/theme/css/bootstrap.css" rel="stylesheet" type="text/css"> |
||||||
|
<link href="/theme/css/main.css" rel="stylesheet" type="text/css"> |
||||||
|
|
||||||
|
<link href="/theme/css/cosmo.css" rel="stylesheet" type="text/css"> |
||||||
|
<link href="/theme/css/font-awesome.css" rel="stylesheet" type="text/css"/> |
||||||
|
<link href="/theme/css/pygment.css" rel="stylesheet" type="text/css"/> |
||||||
|
|
||||||
|
<!-- |
||||||
|
include Angular first |
||||||
|
--> |
||||||
|
<script type="text/javascript" src="/theme/js/angular-1.3.15.js"></script> |
||||||
|
</head> |
||||||
|
|
||||||
|
<body id="index" class="home"> |
||||||
|
<div class="container"> |
||||||
|
<h1><a href="/">dang-sunburst <strong></strong></a></h1> |
||||||
|
<hr /> |
||||||
|
|
||||||
|
|
||||||
|
<link href="/radar/radar2.css" rel="stylesheet" stype="text/css" /> |
||||||
|
|
||||||
|
<div ng-app="radar2App"> |
||||||
|
|
||||||
|
<div ng-controller="radar2Controller" ng-init="initialize()"> |
||||||
|
|
||||||
|
|
||||||
|
<div class="row"> |
||||||
|
<div class="col-sm-12" id="radar2_title"> |
||||||
|
<radar2head></radar2head> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="row"> |
||||||
|
<div class="col-sm-10" id="radar2_controls"> |
||||||
|
<radar2controls></radar2controls> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
<div class="row"> |
||||||
|
<div class="col-sm-6" id="radar2_charts"> |
||||||
|
<div class="row" id="radar2_chart"> |
||||||
|
<radar2chart></radar2chart> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="col-sm-6" id="radar2_panels"> |
||||||
|
<div class="row" id="radar2_panel"> |
||||||
|
<radar2panel></radar2panel> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="row"> |
||||||
|
|
||||||
|
<div class="col-sm-10" id="radar2_text"> |
||||||
|
<div class="row" id="radar2_md"> |
||||||
|
This chart uses a radar chart that's defined as a single, standalone Javacsript object, |
||||||
|
which expects data in a particular structure. Some settings cannot be changed and are implemented as is, |
||||||
|
while other options can be configured using a dictionary. |
||||||
|
|
||||||
|
<br /> |
||||||
|
<br /> |
||||||
|
|
||||||
|
The radar chart is connected to data about the month of death, |
||||||
|
organized in a hierarchical way, similar to the organization for |
||||||
|
the bar and donut charts. The difference is that this time, |
||||||
|
the pre-defined RadarChart object was used, which expected |
||||||
|
particular data labels. |
||||||
|
|
||||||
|
<br/> |
||||||
|
<br/> |
||||||
|
|
||||||
|
Here is how the data looks for this example: |
||||||
|
|
||||||
|
<pre style="font-size: 8px;"> |
||||||
|
[ |
||||||
|
{ "className": "S324", |
||||||
|
"axes": [ |
||||||
|
{"value": 1, "axis": "January"}, |
||||||
|
{"value": 0, "axis": "February"}, |
||||||
|
|
||||||
|
... |
||||||
|
|
||||||
|
{"value": 0, "axis": "December"} |
||||||
|
] |
||||||
|
}, |
||||||
|
{ "className": "S328", |
||||||
|
"axes": [ |
||||||
|
{"value": 1, "axis": "January"}, |
||||||
|
{"value": 1, "axis": "February"}, |
||||||
|
|
||||||
|
... |
||||||
|
|
||||||
|
{"value": 2, "axis": "December"} |
||||||
|
] |
||||||
|
}, |
||||||
|
{ "className": "Y15", |
||||||
|
"axes": [ |
||||||
|
{"value": 3, "axis": "January"}, |
||||||
|
{"value": 2, "axis": "February"}, |
||||||
|
|
||||||
|
... |
||||||
|
|
||||||
|
{"value": 1, "axis": "December"} |
||||||
|
] |
||||||
|
} |
||||||
|
] |
||||||
|
</pre> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
<script src="http://d3js.org/d3.v3.js"></script> |
||||||
|
<script type="text/javascript" src="/radar/radar-chart.js"></script> |
||||||
|
<script type="text/javascript" src="/theme/js/uvcharts.js"></script> |
||||||
|
<script type="text/javascript" src="/radar/radar2_modcontrol.js"></script> |
||||||
|
<script type="text/javascript" src="/radar/radar2_chart.js"></script> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
<footer id="contentinfo" class="body"> |
||||||
|
<hr /> |
||||||
|
<p style="text-align: center"> |
||||||
|
<span class="fa-stack fa-lg"> |
||||||
|
<i class="fa fa-square fa-stack-2x"></i> |
||||||
|
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i> |
||||||
|
</span> |
||||||
|
Made from the command line with vim by |
||||||
|
<a href="http://charlesreid1.com">charlesreid1</a>. |
||||||
|
</p> |
||||||
|
|
||||||
|
<p style="text-align: center;">Made with HTML ( |
||||||
|
<a href="http://http://bootstrap.org/">Bootstrap</a>, |
||||||
|
<a href="http://bootswatch.com">Bootswatch</a>), |
||||||
|
Javascript ( |
||||||
|
<a href="http://http://d3js.org/">D3.js</a>, |
||||||
|
<a href=https://angularjs.org/">Angular.js</a>, |
||||||
|
<a href="https://jquery.com/">jQuery</a>), |
||||||
|
and Python ( |
||||||
|
<a href="http://getpelican.com">Pelican</a>, |
||||||
|
<a href="http://http://stanford.edu/~mwaskom/software/seaborn/">Seaborn</a>, |
||||||
|
<a href="http://matplotlib.org">Matplotlib</a>, |
||||||
|
<a href="http://numpy.org">Numpy</a>). |
||||||
|
</p> |
||||||
|
|
||||||
|
<script type="text/javascript" src="/theme/js/jquery-1.11.2.js"></script> |
||||||
|
<script type="text/javascript" src="/theme/js/bootstrap-3.3.4.js"></script> |
||||||
|
<script type="text/javascript" src="/theme/js/d3-3.5.5.js"></script> |
||||||
|
<!-- |
||||||
|
<script type="text/javascript" src="/theme/js/leaflet-0.7.3.js"></script> |
||||||
|
<script type="text/javascript" src="/theme/js/leaflet.ajax.min.js"></script> |
||||||
|
--> |
||||||
|
</footer><!-- /#contentinfo --> |
||||||
|
|
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
[{"donut": [{"value": 0, "label": "M"}, {"value": 1, "label": "F"}], "code": "S324", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 2, "label": "M"}, {"value": 3, "label": "F"}], "code": "S328", "modbars": [{"value": 1, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 4, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 1, "label": "M"}, {"value": 0, "label": "F"}], "code": "Y15", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 1, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 1, "label": "M"}, {"value": 4, "label": "F"}], "code": "Y14", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 5, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 9, "label": "M"}, {"value": 14, "label": "F"}], "code": "I120", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 23, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 0, "label": "M"}, {"value": 2, "label": "F"}], "code": "I129", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 2, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 1, "label": "M"}, {"value": 0, "label": "F"}], "code": "A051", "modbars": [{"value": 1, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 1, "label": "M"}, {"value": 3, "label": "F"}], "code": "W19", "modbars": [{"value": 2, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 2, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 1, "label": "M"}, {"value": 1, "label": "F"}], "code": "T465", "modbars": [{"value": 0, "label": "Accident"}, {"value": 2, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 2, "label": "M"}, {"value": 0, "label": "F"}], "code": "C449", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 2, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 2, "label": "M"}, {"value": 1, "label": "F"}], "code": "C119", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 3, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 0, "label": "M"}, {"value": 1, "label": "F"}], "code": "C444", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 3, "label": "M"}, {"value": 2, "label": "F"}], "code": "T519", "modbars": [{"value": 2, "label": "Accident"}, {"value": 1, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 1, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 30, "label": "M"}, {"value": 12, "label": "F"}], "code": "T510", "modbars": [{"value": 37, "label": "Accident"}, {"value": 2, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 3, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 2, "label": "M"}, {"value": 0, "label": "F"}], "code": "T511", "modbars": [{"value": 2, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 0, "label": "M"}, {"value": 1, "label": "F"}], "code": "K117", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}] |
||||||
@ -0,0 +1,413 @@ |
|||||||
|
var ng; |
||||||
|
dir = []; |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//////////////////////////////////////
|
||||||
|
// Chart Directives
|
||||||
|
//
|
||||||
|
// This file defines Angular directives
|
||||||
|
// that use D3 to draw charts.
|
||||||
|
//
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
///////////////////////////////////////
|
||||||
|
// Header Directives:
|
||||||
|
//
|
||||||
|
// Print out instructions, title, etc.
|
||||||
|
|
||||||
|
|
||||||
|
ng = a.directive('radar2head', function($compile) { |
||||||
|
|
||||||
|
function link(scope, element, attr) { |
||||||
|
|
||||||
|
var el = element[0]; |
||||||
|
|
||||||
|
$(el).empty(); |
||||||
|
|
||||||
|
var dir = $("div#radar2_title"); |
||||||
|
|
||||||
|
var h1 = $("<h1 />"); |
||||||
|
|
||||||
|
var b = $("<b />") |
||||||
|
.text("Radar Chart Example") |
||||||
|
.appendTo(h1); |
||||||
|
|
||||||
|
h1.appendTo(dir); |
||||||
|
|
||||||
|
|
||||||
|
var p = $("<p />", { |
||||||
|
"class" : "normal" }) |
||||||
|
.html("A fancy little radar chart.") |
||||||
|
.appendTo(dir); |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
return { |
||||||
|
restrict: "E", |
||||||
|
link: link, |
||||||
|
scope: {} |
||||||
|
} |
||||||
|
}); |
||||||
|
dir.push(ng); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
///////////////////////////////////////////////
|
||||||
|
// Chart Controls Directives
|
||||||
|
|
||||||
|
ng = a.directive('radar2controls', function($compile) { |
||||||
|
|
||||||
|
function link(scope, element, attr) { |
||||||
|
|
||||||
|
// wait to build the buttons until we've loaded the data,
|
||||||
|
// since the buttons come from the data.
|
||||||
|
scope.$parent.$watch('radar2data',doStuff); |
||||||
|
|
||||||
|
function doStuff() { |
||||||
|
if(!scope.$parent.radar2data) { return; } |
||||||
|
buildButtons(element, scope.$parent); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
}; |
||||||
|
|
||||||
|
function buildButtons(element,pscope) { |
||||||
|
|
||||||
|
var mydiv = "div#radar2_controls"; |
||||||
|
|
||||||
|
var el = $(mydiv); |
||||||
|
|
||||||
|
var div = $("<div />"); |
||||||
|
|
||||||
|
|
||||||
|
// ------------------------------------
|
||||||
|
// Add ICD 10 code buttons
|
||||||
|
//
|
||||||
|
var btn_grp = $("<div />", { |
||||||
|
"id" : "codebtns", |
||||||
|
"class" : "btn-group" |
||||||
|
}); |
||||||
|
|
||||||
|
for( var i = 0; i < pscope.radar2data.length; i++ ) { |
||||||
|
var this_code = pscope.radar2data[i]['className'] |
||||||
|
var code = $("<a />", { |
||||||
|
"class" : "btn btn-code btn-large btn-primary", |
||||||
|
"changecode" : "", |
||||||
|
"id" : "btn_"+this_code, |
||||||
|
"code" : this_code, |
||||||
|
}) |
||||||
|
.html( this_code ) |
||||||
|
.appendTo(btn_grp); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// to make buttons in this btn group active,
|
||||||
|
// you have to use D3's classed() method
|
||||||
|
// after you add the elements to the document
|
||||||
|
// (i.e., after you call $compile)
|
||||||
|
|
||||||
|
angular.element(el).append($compile(btn_grp)(pscope)); |
||||||
|
|
||||||
|
|
||||||
|
pscope.updateCode = function() { |
||||||
|
|
||||||
|
// -----------------------------
|
||||||
|
// make button for active icd 10 code
|
||||||
|
|
||||||
|
d3.selectAll("a.btn-code").classed('active',false); |
||||||
|
var btnlabel = "a#btn_"+pscope.icd10code; |
||||||
|
d3.selectAll(btnlabel).classed('active',true); |
||||||
|
|
||||||
|
}; |
||||||
|
|
||||||
|
pscope.$watch('icd10code',pscope.updateCode); |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
return { |
||||||
|
restrict: "E", |
||||||
|
link: link, |
||||||
|
scope: {} |
||||||
|
} |
||||||
|
}); |
||||||
|
dir.push(ng); |
||||||
|
|
||||||
|
|
||||||
|
//////////////////////////////////
|
||||||
|
// Action directive:
|
||||||
|
// What to do when the user changes the ICD 10 code
|
||||||
|
// by clicking an ICD 10 code button
|
||||||
|
|
||||||
|
ng = a.directive("changecode", function($compile) { |
||||||
|
|
||||||
|
return function(pscope, element, attrs){ |
||||||
|
element.bind("click", function(){ |
||||||
|
|
||||||
|
// first, update the scope variable
|
||||||
|
// that holds the current icd 10 code
|
||||||
|
// (no need to load any new data)
|
||||||
|
|
||||||
|
|
||||||
|
// This is the ICD 10 code the user has selected.
|
||||||
|
var this_code = attrs['code']; |
||||||
|
var this_description = pscope.icd10codes_all[this_code] |
||||||
|
|
||||||
|
//console.log('Changed icd 10 code, updating description:');
|
||||||
|
//console.log(this_code);
|
||||||
|
//console.log(this_description);
|
||||||
|
|
||||||
|
|
||||||
|
// !!!!!!!!!!!!!!!!!!!!!!!!
|
||||||
|
// NOTE
|
||||||
|
// The lines below - this $apply() method -
|
||||||
|
// this is the way you change the variable
|
||||||
|
// at the controller level, and get the
|
||||||
|
// various watchers to detect changes.
|
||||||
|
// !!!!!!!!!!!!!!!!!!!!!!!!!!
|
||||||
|
pscope.$apply(function() { |
||||||
|
pscope.icd10code = this_code; |
||||||
|
}); |
||||||
|
|
||||||
|
pscope.$apply(function() { |
||||||
|
pscope.description = this_description; |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
//// This is some weak-sauce,
|
||||||
|
//// its not even changing value of variable
|
||||||
|
//pscope.update_icd10code(attrs['code']);
|
||||||
|
//// ...
|
||||||
|
//// .......
|
||||||
|
//// seriously.
|
||||||
|
//// all we needed was just
|
||||||
|
//// pscope.$apply()
|
||||||
|
////
|
||||||
|
//// smh.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//// then run the donut chart update function
|
||||||
|
//pscope.updateradar2();
|
||||||
|
|
||||||
|
// then run the button controllers update function
|
||||||
|
pscope.updateCode(); |
||||||
|
|
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
///////////////////////////////////////////////
|
||||||
|
// Panels:
|
||||||
|
// Display useful information in a pretty box
|
||||||
|
|
||||||
|
|
||||||
|
ng = a.directive('radar2panel', function($compile) { |
||||||
|
|
||||||
|
|
||||||
|
function link(scope, element, attr) { |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
var el = element[0]; |
||||||
|
|
||||||
|
var pscope = scope.$parent; |
||||||
|
|
||||||
|
// --------------------------
|
||||||
|
// add display for details
|
||||||
|
|
||||||
|
// assemble the tags,
|
||||||
|
// then compile the html
|
||||||
|
// select element of interest with angular.element
|
||||||
|
// and append the compiled tags
|
||||||
|
//
|
||||||
|
var br = $("<br />").appendTo(el); |
||||||
|
|
||||||
|
var panel = $("<div />", { |
||||||
|
"class" : "panel panel-primary", |
||||||
|
"id" : "first" |
||||||
|
}); |
||||||
|
|
||||||
|
var panelhead = $("<div />", { |
||||||
|
"class" : "panel-heading" |
||||||
|
}).appendTo(panel); |
||||||
|
|
||||||
|
var h3 = $("<h3 />", { |
||||||
|
"class" : "panel-title" |
||||||
|
}).text("Current ICD 10 Code") |
||||||
|
.appendTo(panelhead); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
var panelbody = $("<div />", { |
||||||
|
"class" : "panel-body" |
||||||
|
}).appendTo(panel); |
||||||
|
|
||||||
|
var maindiv = $("<div />", { |
||||||
|
}).appendTo(panelbody); |
||||||
|
|
||||||
|
var h = $("<h3 />") |
||||||
|
.html("ICD 10 Code: [[icd10code]]") |
||||||
|
.appendTo(maindiv); |
||||||
|
|
||||||
|
var de = $("<p />", { |
||||||
|
"class" : "lead" }) |
||||||
|
.html("Description: [[description]]") |
||||||
|
.appendTo(maindiv); |
||||||
|
|
||||||
|
angular.element(el).prepend($compile(panel)(pscope)); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
return { |
||||||
|
link: link, |
||||||
|
restrict: "E", |
||||||
|
scope: { } |
||||||
|
}; |
||||||
|
}); |
||||||
|
dir.push(ng); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
///////////////////////////////////////////////
|
||||||
|
// radar2 Chart
|
||||||
|
//
|
||||||
|
// This is the actual donut chart, of gender ratios.
|
||||||
|
|
||||||
|
ng = a.directive('radar2chart', function($compile) { |
||||||
|
|
||||||
|
function link(scope, element, attr) { |
||||||
|
|
||||||
|
scope.$parent.$watch('radar2data',doStuff); |
||||||
|
|
||||||
|
function doStuff() { |
||||||
|
if(!scope.$parent.radar2data) { return; } |
||||||
|
buildradar2(element, scope.$parent); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
}; |
||||||
|
|
||||||
|
function buildradar2(element,pscope) { |
||||||
|
|
||||||
|
var mydiv = "div#radar2_chart"; |
||||||
|
|
||||||
|
/////////////////////////////////////////
|
||||||
|
// Create chart
|
||||||
|
//
|
||||||
|
// data has not been loaded yet.
|
||||||
|
// start by initializing variables
|
||||||
|
// that don't depend on the data.
|
||||||
|
//
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
var el = element[0]; |
||||||
|
$(el).empty(); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/////////////////////////////////////////////////////
|
||||||
|
// update radar chart
|
||||||
|
//
|
||||||
|
pscope.updateradar2 = function() { |
||||||
|
|
||||||
|
var all_data = pscope.radar2data; |
||||||
|
|
||||||
|
// ----------------------------------
|
||||||
|
// Get chart data
|
||||||
|
//
|
||||||
|
// Here, we have all donut data
|
||||||
|
// available to us.
|
||||||
|
//
|
||||||
|
// We use the currently-selected ICD 10 code
|
||||||
|
// to filter which donut data is being plotted.
|
||||||
|
//
|
||||||
|
// Where to keep track of current code?
|
||||||
|
// In the controller (available via pscope).
|
||||||
|
// pscope.icd10code
|
||||||
|
//
|
||||||
|
var code; |
||||||
|
var data; |
||||||
|
for( var jj=0; jj < all_data.length; jj++ ) { |
||||||
|
// set excpetion handling:
|
||||||
|
// if no icd10code is set, problems occur.
|
||||||
|
if(all_data[jj]['className'] == pscope.icd10code) { |
||||||
|
code = all_data[jj]['className']; |
||||||
|
data = all_data[jj] |
||||||
|
break; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
if(data==null) { |
||||||
|
console.log("Error. Check that ICD 10 code is in data set: "+pscope.icd10code); |
||||||
|
console.log(pscope.icd10code); |
||||||
|
console.log(all_data); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
// finished; use data
|
||||||
|
// ---------------------------------
|
||||||
|
|
||||||
|
|
||||||
|
///////////////////////////////////
|
||||||
|
// now draw the svg with d3
|
||||||
|
//
|
||||||
|
|
||||||
|
d3.select(mydiv).selectAll(".uv-chart-div").remove(); |
||||||
|
|
||||||
|
var graphdef = { |
||||||
|
categories : ['mycode'], |
||||||
|
dataset : { |
||||||
|
// This is the most idiotic implementation ever.
|
||||||
|
// The key, above, is a string. Great. We have string variables.
|
||||||
|
// But the key below *cannot* be a string.
|
||||||
|
// Really??? What genius came up with this one?
|
||||||
|
mycode : [ |
||||||
|
{ name : '2009', value : 55+Math.random() }, |
||||||
|
{ name : '2010', value : 61+Math.random() }, |
||||||
|
{ name : '2011', value : 93+Math.random() }, |
||||||
|
{ name : '2012', value : 96+Math.random() }, |
||||||
|
{ name : '2013', value : 120+Math.random() } |
||||||
|
] |
||||||
|
} |
||||||
|
} |
||||||
|
var chart = uv.chart('Bar', graphdef, { |
||||||
|
effects : {duration : 3.0}, |
||||||
|
meta : { position : '#radar2_chart' }, |
||||||
|
legend : { showlegends : false } |
||||||
|
}); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
pscope.$watch('icd10code',pscope.updateradar2); |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
return { |
||||||
|
link: link, |
||||||
|
restrict: "E", |
||||||
|
scope: { } |
||||||
|
}; |
||||||
|
}); |
||||||
|
dir.push(ng); |
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,76 @@ |
|||||||
|
///////////////////////////////////////
|
||||||
|
//
|
||||||
|
// radar2
|
||||||
|
//
|
||||||
|
// Module/Controller
|
||||||
|
//
|
||||||
|
|
||||||
|
var a = angular.module("radar2App", [], function($interpolateProvider) { |
||||||
|
$interpolateProvider.startSymbol('[['); |
||||||
|
$interpolateProvider.endSymbol(']]'); |
||||||
|
} |
||||||
|
); |
||||||
|
|
||||||
|
var datafactory = a.factory('datafactory', function($http, $q) { |
||||||
|
|
||||||
|
return { |
||||||
|
getradar2data: function() { |
||||||
|
var deferred = $q.defer(); |
||||||
|
|
||||||
|
var json_file = 'radar_mon.json'; |
||||||
|
|
||||||
|
$http.get(json_file).success(function(data) { |
||||||
|
deferred.resolve(data); |
||||||
|
}).error(function(){ |
||||||
|
console.log('error loading json file: '+json_file); |
||||||
|
deferred.reject(); |
||||||
|
}); |
||||||
|
|
||||||
|
return deferred.promise; |
||||||
|
}, |
||||||
|
|
||||||
|
getCodeData: function() { |
||||||
|
var deferred = $q.defer(); |
||||||
|
|
||||||
|
$http.get('icd10codes.json').success(function(data) { |
||||||
|
deferred.resolve(data); |
||||||
|
}).error(function(){ |
||||||
|
console.log('error loading icd10codes.json'); |
||||||
|
deferred.reject(); |
||||||
|
}); |
||||||
|
|
||||||
|
return deferred.promise; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
function radar2Controller($scope,datafactory) { |
||||||
|
|
||||||
|
$scope.initialize = function() { |
||||||
|
|
||||||
|
$scope.icd10code="S324"; |
||||||
|
$scope.donutFemale = 0; |
||||||
|
$scope.donutMale = 0; |
||||||
|
|
||||||
|
datafactory.getradar2data().then( |
||||||
|
function(data) { |
||||||
|
$scope.radar2data = data; |
||||||
|
} |
||||||
|
); |
||||||
|
|
||||||
|
datafactory.getCodeData().then( |
||||||
|
function(data) { |
||||||
|
$scope.icd10codes_all = data; |
||||||
|
var descr = $scope.icd10codes_all[$scope.icd10code]; |
||||||
|
$scope.description = descr; |
||||||
|
} |
||||||
|
); |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
// the first few arguments of the list should correspond to the Angular-namespace stuff to feed to controller
|
||||||
|
var c = a.controller("radar2Controller", ["$scope", "datafactory", radar2Controller]); |
||||||
@ -0,0 +1,72 @@ |
|||||||
|
[{"className": "S324", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 1, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "S328", "axes": [{"value": 1, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 4, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "Y15", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 1, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 0, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "Y14", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 5, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 0, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "I120", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 23, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "I129", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 2, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "A051", "axes": [{"value": 1, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 0, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "W19", "axes": [{"value": 2, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 2, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "T465", "axes": [{"value": 0, "axis": "Accident"}, {"value": 2, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 0, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "C449", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 2, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "C119", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 3, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "C444", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 1, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "T519", "axes": [{"value": 2, "axis": "Accident"}, {"value": 1, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 1, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 1, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "T510", "axes": [{"value": 37, "axis": "Accident"}, {"value": 2, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 3, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "T511", "axes": [{"value": 2, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 0, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "K117", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 1, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "W18", "axes": [{"value": 13, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 0, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "C781", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 1, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "I38", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 18, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "M109", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 5, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "G610", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 1, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "J159", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 3, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "J150", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 1, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "J151", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 2, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "J152", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 6, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "C259", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 49, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "I829", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 2, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "T983", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 1, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "R402", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 2, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "C254", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 1, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "F059", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 4, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "F051", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 2, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "C341", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 2, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "K909", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 1, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "J90", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 13, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "T443", "axes": [{"value": 1, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 0, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "J969", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 141, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "J961", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 29, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "J960", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 55, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "V439", "axes": [{"value": 1, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 0, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "K137", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 1, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "S061", "axes": [{"value": 2, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 0, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "S060", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 1, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "R090", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 28, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "R092", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 48, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "R098", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 3, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "S066", "axes": [{"value": 3, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 0, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "S065", "axes": [{"value": 8, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 1, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 1, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "T794", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 1, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "I698", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 8, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "I694", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 18, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "I690", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 1, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "D693", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 1, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "D695", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 2, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "D696", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 4, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "D699", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 1, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "K739", "axes": [{"value": 2, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 2, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "X78", "axes": [{"value": 0, "axis": "Accident"}, {"value": 2, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 0, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "X74", "axes": [{"value": 0, "axis": "Accident"}, {"value": 35, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 0, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "I10", "axes": [{"value": 2, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 246, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "C099", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 1, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "P236", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 1, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "K922", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 66, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "K920", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 1, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "Q938", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 1, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "D487", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 4, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "Q200", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 1, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "C151", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 1, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "C159", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 25, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "X94", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 1, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 0, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "V224", "axes": [{"value": 1, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 0, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||||
|
{"className": "G409", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 2, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}] |
||||||
@ -0,0 +1,72 @@ |
|||||||
|
[{"className": "S324", "axes": [{"value": 1, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "S328", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 2, "axis": "June"}, {"value": 2, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 1, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "Y15", "axes": [{"value": 1, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "Y14", "axes": [{"value": 2, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 1, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 1, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 1, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "I120", "axes": [{"value": 2, "axis": "January"}, {"value": 2, "axis": "February"}, {"value": 2, "axis": "March"}, {"value": 2, "axis": "April"}, {"value": 2, "axis": "May"}, {"value": 1, "axis": "June"}, {"value": 6, "axis": "July"}, {"value": 2, "axis": "August"}, {"value": 1, "axis": "September"}, {"value": 3, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "I129", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 1, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 1, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "A051", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 1, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "W19", "axes": [{"value": 1, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 2, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 1, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "T465", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 1, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 1, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "C449", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 1, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 1, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "C119", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 1, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 1, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 1, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "C444", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 1, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "T519", "axes": [{"value": 1, "axis": "January"}, {"value": 1, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 1, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 1, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 1, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "T510", "axes": [{"value": 3, "axis": "January"}, {"value": 1, "axis": "February"}, {"value": 6, "axis": "March"}, {"value": 5, "axis": "April"}, {"value": 5, "axis": "May"}, {"value": 6, "axis": "June"}, {"value": 6, "axis": "July"}, {"value": 1, "axis": "August"}, {"value": 8, "axis": "September"}, {"value": 1, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "T511", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 1, "axis": "May"}, {"value": 1, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "K117", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 1, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "W18", "axes": [{"value": 2, "axis": "January"}, {"value": 1, "axis": "February"}, {"value": 1, "axis": "March"}, {"value": 2, "axis": "April"}, {"value": 1, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 1, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 2, "axis": "September"}, {"value": 2, "axis": "October"}, {"value": 1, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "C781", "axes": [{"value": 0, "axis": "January"}, {"value": 1, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "I38", "axes": [{"value": 3, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 1, "axis": "March"}, {"value": 2, "axis": "April"}, {"value": 2, "axis": "May"}, {"value": 3, "axis": "June"}, {"value": 3, "axis": "July"}, {"value": 1, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 2, "axis": "October"}, {"value": 1, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "M109", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 2, "axis": "June"}, {"value": 1, "axis": "July"}, {"value": 1, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 1, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "G610", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 1, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "J159", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 1, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 1, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 1, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "J150", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 1, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "J151", "axes": [{"value": 1, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 1, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "J152", "axes": [{"value": 1, "axis": "January"}, {"value": 1, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 1, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 1, "axis": "September"}, {"value": 2, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "C259", "axes": [{"value": 4, "axis": "January"}, {"value": 4, "axis": "February"}, {"value": 4, "axis": "March"}, {"value": 3, "axis": "April"}, {"value": 2, "axis": "May"}, {"value": 5, "axis": "June"}, {"value": 6, "axis": "July"}, {"value": 7, "axis": "August"}, {"value": 6, "axis": "September"}, {"value": 5, "axis": "October"}, {"value": 3, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "I829", "axes": [{"value": 0, "axis": "January"}, {"value": 1, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 1, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "T983", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 1, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "R402", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 1, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 1, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "C254", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 1, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "F059", "axes": [{"value": 0, "axis": "January"}, {"value": 1, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 1, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 1, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 1, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "F051", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 1, "axis": "September"}, {"value": 1, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "C341", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 1, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 1, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "K909", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 1, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "J90", "axes": [{"value": 1, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 2, "axis": "April"}, {"value": 2, "axis": "May"}, {"value": 1, "axis": "June"}, {"value": 2, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 2, "axis": "September"}, {"value": 2, "axis": "October"}, {"value": 1, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "T443", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 1, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "J969", "axes": [{"value": 11, "axis": "January"}, {"value": 10, "axis": "February"}, {"value": 13, "axis": "March"}, {"value": 13, "axis": "April"}, {"value": 17, "axis": "May"}, {"value": 13, "axis": "June"}, {"value": 16, "axis": "July"}, {"value": 21, "axis": "August"}, {"value": 11, "axis": "September"}, {"value": 12, "axis": "October"}, {"value": 4, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "J961", "axes": [{"value": 4, "axis": "January"}, {"value": 3, "axis": "February"}, {"value": 4, "axis": "March"}, {"value": 1, "axis": "April"}, {"value": 3, "axis": "May"}, {"value": 4, "axis": "June"}, {"value": 2, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 4, "axis": "September"}, {"value": 3, "axis": "October"}, {"value": 1, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "J960", "axes": [{"value": 5, "axis": "January"}, {"value": 2, "axis": "February"}, {"value": 8, "axis": "March"}, {"value": 6, "axis": "April"}, {"value": 5, "axis": "May"}, {"value": 4, "axis": "June"}, {"value": 7, "axis": "July"}, {"value": 2, "axis": "August"}, {"value": 9, "axis": "September"}, {"value": 6, "axis": "October"}, {"value": 1, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "V439", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 1, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "K137", "axes": [{"value": 1, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "S061", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 1, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 1, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "S060", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 1, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "R090", "axes": [{"value": 2, "axis": "January"}, {"value": 2, "axis": "February"}, {"value": 5, "axis": "March"}, {"value": 2, "axis": "April"}, {"value": 2, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 3, "axis": "July"}, {"value": 4, "axis": "August"}, {"value": 4, "axis": "September"}, {"value": 3, "axis": "October"}, {"value": 1, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "R092", "axes": [{"value": 6, "axis": "January"}, {"value": 5, "axis": "February"}, {"value": 7, "axis": "March"}, {"value": 1, "axis": "April"}, {"value": 5, "axis": "May"}, {"value": 2, "axis": "June"}, {"value": 8, "axis": "July"}, {"value": 5, "axis": "August"}, {"value": 4, "axis": "September"}, {"value": 4, "axis": "October"}, {"value": 1, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "R098", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 1, "axis": "August"}, {"value": 2, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "S066", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 1, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 1, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 1, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "S065", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 3, "axis": "April"}, {"value": 2, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 3, "axis": "September"}, {"value": 2, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "T794", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 1, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "I698", "axes": [{"value": 2, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 1, "axis": "April"}, {"value": 1, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 3, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 1, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "I694", "axes": [{"value": 4, "axis": "January"}, {"value": 1, "axis": "February"}, {"value": 3, "axis": "March"}, {"value": 1, "axis": "April"}, {"value": 2, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 2, "axis": "July"}, {"value": 2, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 2, "axis": "October"}, {"value": 1, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "I690", "axes": [{"value": 1, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "D693", "axes": [{"value": 1, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "D695", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 1, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 1, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "D696", "axes": [{"value": 0, "axis": "January"}, {"value": 2, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 1, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 1, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "D699", "axes": [{"value": 0, "axis": "January"}, {"value": 1, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "K739", "axes": [{"value": 0, "axis": "January"}, {"value": 2, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 1, "axis": "May"}, {"value": 1, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "X78", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 1, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 1, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "X74", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 2, "axis": "May"}, {"value": 4, "axis": "June"}, {"value": 8, "axis": "July"}, {"value": 7, "axis": "August"}, {"value": 6, "axis": "September"}, {"value": 7, "axis": "October"}, {"value": 1, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "I10", "axes": [{"value": 33, "axis": "January"}, {"value": 17, "axis": "February"}, {"value": 32, "axis": "March"}, {"value": 22, "axis": "April"}, {"value": 22, "axis": "May"}, {"value": 24, "axis": "June"}, {"value": 22, "axis": "July"}, {"value": 30, "axis": "August"}, {"value": 20, "axis": "September"}, {"value": 18, "axis": "October"}, {"value": 8, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "C099", "axes": [{"value": 0, "axis": "January"}, {"value": 1, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "P236", "axes": [{"value": 1, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "K922", "axes": [{"value": 8, "axis": "January"}, {"value": 5, "axis": "February"}, {"value": 5, "axis": "March"}, {"value": 5, "axis": "April"}, {"value": 10, "axis": "May"}, {"value": 7, "axis": "June"}, {"value": 5, "axis": "July"}, {"value": 5, "axis": "August"}, {"value": 7, "axis": "September"}, {"value": 8, "axis": "October"}, {"value": 1, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "K920", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 1, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "Q938", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 1, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "D487", "axes": [{"value": 0, "axis": "January"}, {"value": 1, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 2, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 1, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "Q200", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 1, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "C151", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 1, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "C159", "axes": [{"value": 7, "axis": "January"}, {"value": 1, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 1, "axis": "April"}, {"value": 5, "axis": "May"}, {"value": 2, "axis": "June"}, {"value": 3, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 2, "axis": "September"}, {"value": 4, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "X94", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 1, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "V224", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 1, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||||
|
{"className": "G409", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 1, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 1, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}] |
||||||
@ -0,0 +1,38 @@ |
|||||||
|
path { |
||||||
|
stroke: white; |
||||||
|
stroke-width: 0.5; |
||||||
|
} |
||||||
|
|
||||||
|
div#mouseoverPointPanel, |
||||||
|
div#clickedPointPanel { |
||||||
|
width: 300px; |
||||||
|
} |
||||||
|
|
||||||
|
.fade { |
||||||
|
opacity: 0; |
||||||
|
-webkit-transition: opacity 0.85s linear; |
||||||
|
-moz-transition: opacity 0.85s linear; |
||||||
|
-o-transition: opacity 0.85s linear; |
||||||
|
transition: opacity 0.85s linear; |
||||||
|
} |
||||||
|
|
||||||
|
.fade.in { |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
|
||||||
|
.active { |
||||||
|
stroke: black; |
||||||
|
stroke-width: 2.0; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.axis path, |
||||||
|
.axis line { |
||||||
|
fill: none; |
||||||
|
stroke: #000; |
||||||
|
shape-rendering: crispEdges; |
||||||
|
} |
||||||
|
|
||||||
|
.x.axis path { |
||||||
|
display: none; |
||||||
|
} |
||||||
@ -0,0 +1,191 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<title>Bar Donut Chart</title> |
||||||
|
<meta charset="utf-8" /> |
||||||
|
|
||||||
|
<!-- |
||||||
|
my CSS styles |
||||||
|
--> |
||||||
|
<link href="/theme/css/bootstrap.css" rel="stylesheet" type="text/css"> |
||||||
|
<link href="/theme/css/main.css" rel="stylesheet" type="text/css"> |
||||||
|
|
||||||
|
<link href="/theme/css/cosmo.css" rel="stylesheet" type="text/css"> |
||||||
|
<link href="/theme/css/font-awesome.css" rel="stylesheet" type="text/css"/> |
||||||
|
<link href="/theme/css/pygment.css" rel="stylesheet" type="text/css"/> |
||||||
|
|
||||||
|
<!-- |
||||||
|
include Angular first |
||||||
|
--> |
||||||
|
<script type="text/javascript" src="/theme/js/angular-1.3.15.js"></script> |
||||||
|
<script src="//d3js.org/d3.v3.min.js"></script> |
||||||
|
</head> |
||||||
|
|
||||||
|
<body id="index" class="home"> |
||||||
|
<div class="container"> |
||||||
|
<h1><a href="/">dang-sunburst <strong></strong></a></h1> |
||||||
|
<hr /> |
||||||
|
|
||||||
|
|
||||||
|
<link href="/simpledonut/bardonut.css" rel="stylesheet" stype="text/css" /> |
||||||
|
|
||||||
|
<div ng-app="pickerApp"> |
||||||
|
|
||||||
|
<div ng-controller="mainController" ng-init="initialize()"> |
||||||
|
|
||||||
|
|
||||||
|
<div class="row"> |
||||||
|
<div class="col-sm-12" id="donut_title"> |
||||||
|
<bardonuthead></bardonuthead> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="row"> |
||||||
|
<div class="col-sm-10" id="donut_controls"> |
||||||
|
<bardonutcontrols></bardonutcontrols> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
<div class="row"> |
||||||
|
<div class="col-sm-4" id="donut_chart"> |
||||||
|
<div class="row" id="donutpicker_chart"> |
||||||
|
<donutpickerchart></donutpickerchart> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="col-sm-4" id="bar_chart"> |
||||||
|
<div class="row" id="modbar_chart"> |
||||||
|
<modbarchart></modbarchart> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="col-sm-4" id="donut_text"> |
||||||
|
<div class="row" id="donut_panels"> |
||||||
|
<bardonutpanel></bardonutpanel> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="row"> |
||||||
|
|
||||||
|
<div class="col-sm-10" id="more_donut_text"> |
||||||
|
<div class="row" id="bardonut_md"> |
||||||
|
This chart demonstrates linking a donut chart with a bar chart, |
||||||
|
so that a single controller filters data on both. |
||||||
|
It also effectively implements the "folding up" technique |
||||||
|
demonstrated with the Donut Picker chart. |
||||||
|
|
||||||
|
<br /> |
||||||
|
<br /> |
||||||
|
|
||||||
|
The data visualized are death records from the United States in 2014. |
||||||
|
Death records are anonymized and classified by many variables, |
||||||
|
including gender and manner of death, and released to the public. |
||||||
|
Statistics about these variables are counted up for different ICD 10 codes, |
||||||
|
which indicate various circumstances present at death, and visualized above. |
||||||
|
|
||||||
|
<br/> |
||||||
|
<br/> |
||||||
|
|
||||||
|
Here, we bundle bar and donut plot data together by ICD 10 code. |
||||||
|
When the user picks an ICD 10 code using buttons, we filter the data |
||||||
|
plotted by the bar and donut plots. |
||||||
|
|
||||||
|
<pre style="font-size: 8px;"> |
||||||
|
[ |
||||||
|
{ |
||||||
|
"code": "T510"}, |
||||||
|
"donut": |
||||||
|
[ |
||||||
|
{"value": 17, "label": "M"}, |
||||||
|
{"value": 4, "label": "F"} |
||||||
|
], |
||||||
|
"bar": |
||||||
|
[ |
||||||
|
{"value": 10, "label": "Accident"}, |
||||||
|
{"value": 0, "label": "Suicide"}, |
||||||
|
{"value": 0, "label": "Homicide"}, |
||||||
|
{"value": 3, "label": "Natural"} |
||||||
|
] |
||||||
|
}, |
||||||
|
{ |
||||||
|
"code": "Y14"}, |
||||||
|
"donut": |
||||||
|
[ |
||||||
|
{"value": 1, "label": "M"}, |
||||||
|
{"value": 3, "label": "F"} |
||||||
|
], |
||||||
|
"bar": |
||||||
|
[ |
||||||
|
{"value": 4, "label": "Accident"}, |
||||||
|
{"value": 2, "label": "Suicide"}, |
||||||
|
{"value": 0, "label": "Homicide"}, |
||||||
|
{"value": 2, "label": "Natural"} |
||||||
|
] |
||||||
|
}, |
||||||
|
|
||||||
|
... |
||||||
|
] |
||||||
|
</pre> |
||||||
|
|
||||||
|
Once we filter on "code", we get the "donut" array, and pass it to the D3 pie chart object, |
||||||
|
which renders the d ata structure into the donut chart on the left. Likewise, the "bar" array |
||||||
|
is sent to the bar chart and visualized accordingly. |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
<script type="text/javascript" src="/simpledonut/bardonut_modcontrol.js"></script> |
||||||
|
<script type="text/javascript" src="/simpledonut/bardonut_chart.js"></script> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
<footer id="contentinfo" class="body"> |
||||||
|
<hr /> |
||||||
|
<p style="text-align: center"> |
||||||
|
<span class="fa-stack fa-lg"> |
||||||
|
<i class="fa fa-square fa-stack-2x"></i> |
||||||
|
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i> |
||||||
|
</span> |
||||||
|
Made from the command line with vim by |
||||||
|
<a href="http://charlesreid1.com">charlesreid1</a>. |
||||||
|
</p> |
||||||
|
|
||||||
|
<p style="text-align: center;">Made with HTML ( |
||||||
|
<a href="http://http://bootstrap.org/">Bootstrap</a>, |
||||||
|
<a href="http://bootswatch.com">Bootswatch</a>), |
||||||
|
Javascript ( |
||||||
|
<a href="http://http://d3js.org/">D3.js</a>, |
||||||
|
<a href=https://angularjs.org/">Angular.js</a>, |
||||||
|
<a href="https://jquery.com/">jQuery</a>), |
||||||
|
and Python ( |
||||||
|
<a href="http://pydata.org">Pandas</a>, |
||||||
|
<a href="http://getpelican.com">Pelican</a>, |
||||||
|
<a href="http://ipython.org">Jupyter Notebooks</a>). |
||||||
|
</p> |
||||||
|
|
||||||
|
<script type="text/javascript" src="/theme/js/jquery-1.11.2.js"></script> |
||||||
|
<script type="text/javascript" src="/theme/js/bootstrap-3.3.4.js"></script> |
||||||
|
<!-- |
||||||
|
<script type="text/javascript" src="/theme/js/d3-3.5.5.js"></script> |
||||||
|
<script type="text/javascript" src="/theme/js/leaflet-0.7.3.js"></script> |
||||||
|
<script type="text/javascript" src="/theme/js/leaflet.ajax.min.js"></script> |
||||||
|
--> |
||||||
|
</footer><!-- /#contentinfo --> |
||||||
|
|
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
[{"donut": [{"value": 0, "label": "M"}, {"value": 1, "label": "F"}], "code": "S324", "modbars": [{"value": 1, "label": "Natural"}]}, |
||||||
|
{"donut": [{"value": 2, "label": "M"}, {"value": 3, "label": "F"}], "code": "S328", "modbars": [{"value": 1, "label": "Accident"}, {"value": 4, "label": "Natural"}]}, |
||||||
|
{"donut": [{"value": 1, "label": "M"}, {"value": 0, "label": "F"}], "code": "Y15", "modbars": [{"value": 1, "label": "Could not determine"}]}, |
||||||
|
{"donut": [{"value": 1, "label": "M"}, {"value": 4, "label": "F"}], "code": "Y14", "modbars": [{"value": 5, "label": "Could not determine"}]}, |
||||||
|
{"donut": [{"value": 9, "label": "M"}, {"value": 14, "label": "F"}], "code": "I120", "modbars": [{"value": 23, "label": "Natural"}]}, |
||||||
|
{"donut": [{"value": 0, "label": "M"}, {"value": 2, "label": "F"}], "code": "I129", "modbars": [{"value": 2, "label": "Natural"}]}, |
||||||
|
{"donut": [{"value": 1, "label": "M"}, {"value": 0, "label": "F"}], "code": "A051", "modbars": [{"value": 1, "label": "Accident"}]}, |
||||||
|
{"donut": [{"value": 1, "label": "M"}, {"value": 3, "label": "F"}], "code": "W19", "modbars": [{"value": 2, "label": "Accident"}, {"value": 2, "label": "Natural"}]}, |
||||||
|
{"donut": [{"value": 1, "label": "M"}, {"value": 1, "label": "F"}], "code": "T465", "modbars": [{"value": 2, "label": "Suicide"}]}, |
||||||
|
{"donut": [{"value": 2, "label": "M"}, {"value": 0, "label": "F"}], "code": "C449", "modbars": [{"value": 2, "label": "Natural"}]}, |
||||||
|
{"donut": [{"value": 2, "label": "M"}, {"value": 1, "label": "F"}], "code": "C119", "modbars": [{"value": 3, "label": "Natural"}]}, |
||||||
|
{"donut": [{"value": 0, "label": "M"}, {"value": 1, "label": "F"}], "code": "C444", "modbars": [{"value": 1, "label": "Natural"}]}, |
||||||
|
{"donut": [{"value": 3, "label": "M"}, {"value": 2, "label": "F"}], "code": "T519", "modbars": [{"value": 2, "label": "Accident"}, {"value": 1, "label": "Suicide"}, {"value": 1, "label": "Could not determine"}, {"value": 1, "label": "Natural"}]}, |
||||||
|
{"donut": [{"value": 30, "label": "M"}, {"value": 12, "label": "F"}], "code": "T510", "modbars": [{"value": 37, "label": "Accident"}, {"value": 2, "label": "Suicide"}, {"value": 3, "label": "Natural"}]}, |
||||||
|
{"donut": [{"value": 2, "label": "M"}, {"value": 0, "label": "F"}], "code": "T511", "modbars": [{"value": 2, "label": "Accident"}]}, |
||||||
|
{"donut": [{"value": 0, "label": "M"}, {"value": 1, "label": "F"}], "code": "K117", "modbars": [{"value": 1, "label": "Natural"}]}] |
||||||
@ -0,0 +1,61 @@ |
|||||||
|
This chart demonstrates linking a donut chart with a bar chart, |
||||||
|
so that a single controller filters data on both. |
||||||
|
It also effectively implements the "folding up" technique |
||||||
|
demonstrated with the Donut Picker chart. |
||||||
|
|
||||||
|
<br /> |
||||||
|
<br /> |
||||||
|
|
||||||
|
The data visualized are death records from the United States in 2014. |
||||||
|
Death records are anonymized and classified by many variables, |
||||||
|
including gender and manner of death, and released to the public. |
||||||
|
Statistics about these variables are counted up for different ICD 10 codes, |
||||||
|
which indicate various circumstances present at death, and visualized above. |
||||||
|
|
||||||
|
<br/> |
||||||
|
<br/> |
||||||
|
|
||||||
|
Here, we bundle bar and donut plot data together by ICD 10 code. |
||||||
|
When the user picks an ICD 10 code using buttons, we filter the data |
||||||
|
plotted by the bar and donut plots. |
||||||
|
|
||||||
|
<pre style="font-size: 8px;"> |
||||||
|
[ |
||||||
|
{ |
||||||
|
"code": "T510"}, |
||||||
|
"donut": |
||||||
|
[ |
||||||
|
{"value": 17, "label": "M"}, |
||||||
|
{"value": 4, "label": "F"} |
||||||
|
], |
||||||
|
"bar": |
||||||
|
[ |
||||||
|
{"value": 10, "label": "Accident"}, |
||||||
|
{"value": 0, "label": "Suicide"}, |
||||||
|
{"value": 0, "label": "Homicide"}, |
||||||
|
{"value": 3, "label": "Natural"} |
||||||
|
] |
||||||
|
}, |
||||||
|
{ |
||||||
|
"code": "Y14"}, |
||||||
|
"donut": |
||||||
|
[ |
||||||
|
{"value": 1, "label": "M"}, |
||||||
|
{"value": 3, "label": "F"} |
||||||
|
], |
||||||
|
"bar": |
||||||
|
[ |
||||||
|
{"value": 4, "label": "Accident"}, |
||||||
|
{"value": 2, "label": "Suicide"}, |
||||||
|
{"value": 0, "label": "Homicide"}, |
||||||
|
{"value": 2, "label": "Natural"} |
||||||
|
] |
||||||
|
}, |
||||||
|
|
||||||
|
... |
||||||
|
] |
||||||
|
</pre> |
||||||
|
|
||||||
|
Once we filter on "code", we get the "donut" array, and pass it to the D3 pie chart object, |
||||||
|
which renders the d ata structure into the donut chart on the left. Likewise, the "bar" array |
||||||
|
is sent to the bar chart and visualized accordingly. |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
[{"donut": [{"value": 0, "label": "M"}, {"value": 1, "label": "F"}], "code": "S324", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 2, "label": "M"}, {"value": 3, "label": "F"}], "code": "S328", "modbars": [{"value": 1, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 4, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 1, "label": "M"}, {"value": 0, "label": "F"}], "code": "Y15", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 1, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 1, "label": "M"}, {"value": 4, "label": "F"}], "code": "Y14", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 5, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 9, "label": "M"}, {"value": 14, "label": "F"}], "code": "I120", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 23, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 0, "label": "M"}, {"value": 2, "label": "F"}], "code": "I129", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 2, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 1, "label": "M"}, {"value": 0, "label": "F"}], "code": "A051", "modbars": [{"value": 1, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 1, "label": "M"}, {"value": 3, "label": "F"}], "code": "W19", "modbars": [{"value": 2, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 2, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 1, "label": "M"}, {"value": 1, "label": "F"}], "code": "T465", "modbars": [{"value": 0, "label": "Accident"}, {"value": 2, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 2, "label": "M"}, {"value": 0, "label": "F"}], "code": "C449", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 2, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 2, "label": "M"}, {"value": 1, "label": "F"}], "code": "C119", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 3, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 0, "label": "M"}, {"value": 1, "label": "F"}], "code": "C444", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 3, "label": "M"}, {"value": 2, "label": "F"}], "code": "T519", "modbars": [{"value": 2, "label": "Accident"}, {"value": 1, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 1, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 30, "label": "M"}, {"value": 12, "label": "F"}], "code": "T510", "modbars": [{"value": 37, "label": "Accident"}, {"value": 2, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 3, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 2, "label": "M"}, {"value": 0, "label": "F"}], "code": "T511", "modbars": [{"value": 2, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||||
|
{"donut": [{"value": 0, "label": "M"}, {"value": 1, "label": "F"}], "code": "K117", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}] |
||||||
@ -0,0 +1,732 @@ |
|||||||
|
var ng; |
||||||
|
dir = []; |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//////////////////////////////////////
|
||||||
|
// Chart Directives
|
||||||
|
//
|
||||||
|
// This file defines Angular directives
|
||||||
|
// that use D3 to draw charts.
|
||||||
|
//
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
///////////////////////////////////////
|
||||||
|
// Header Directives:
|
||||||
|
//
|
||||||
|
// Print out instructions, title, etc.
|
||||||
|
|
||||||
|
|
||||||
|
ng = a.directive('bardonuthead', function($compile) { |
||||||
|
|
||||||
|
function link(scope, element, attr) { |
||||||
|
|
||||||
|
var el = element[0]; |
||||||
|
|
||||||
|
$(el).empty(); |
||||||
|
|
||||||
|
var dir = $("div#donut_title"); |
||||||
|
|
||||||
|
var h1 = $("<h1 />"); |
||||||
|
|
||||||
|
var b = $("<b />") |
||||||
|
.text("Donut Picker Chart Example") |
||||||
|
.appendTo(h1); |
||||||
|
|
||||||
|
h1.appendTo(dir); |
||||||
|
|
||||||
|
|
||||||
|
var p = $("<p />", { |
||||||
|
"class" : "normal" }) |
||||||
|
.html("The following charts show statistics about death records, classified by ICD 10 code. Select an ICD 10 code to view statistics about gender and manner of death.") |
||||||
|
.appendTo(dir); |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
return { |
||||||
|
restrict: "E", |
||||||
|
link: link, |
||||||
|
scope: {} |
||||||
|
} |
||||||
|
}); |
||||||
|
dir.push(ng); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
///////////////////////////////////////////////
|
||||||
|
// Chart Controls Directives
|
||||||
|
|
||||||
|
ng = a.directive('bardonutcontrols', function($compile) { |
||||||
|
|
||||||
|
function link(scope, element, attr) { |
||||||
|
|
||||||
|
// wait to build the buttons until we've loaded the data,
|
||||||
|
// since the buttons come from the data.
|
||||||
|
scope.$parent.$watch('pickerData',doStuff); |
||||||
|
|
||||||
|
function doStuff() { |
||||||
|
if(!scope.$parent.pickerData) { return; } |
||||||
|
buildButtons(element, scope.$parent); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
}; |
||||||
|
|
||||||
|
function buildButtons(element,pscope) { |
||||||
|
|
||||||
|
var mydiv = "div#donut_controls"; |
||||||
|
|
||||||
|
var el = $(mydiv); |
||||||
|
|
||||||
|
var div = $("<div />"); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// ------------------------------------
|
||||||
|
// Add ICD 10 code buttons
|
||||||
|
//
|
||||||
|
var btn_grp = $("<div />", { |
||||||
|
"id" : "codebtns", |
||||||
|
"class" : "btn-group" |
||||||
|
}); |
||||||
|
|
||||||
|
for( var i = 0; i < pscope.pickerData.length; i++ ) { |
||||||
|
var this_code = pscope.pickerData[i]['code'] |
||||||
|
var code = $("<a />", { |
||||||
|
"class" : "btn btn-code btn-large btn-primary", |
||||||
|
"changecode" : "", |
||||||
|
"id" : "btn_"+this_code, |
||||||
|
"code" : this_code, |
||||||
|
}) |
||||||
|
.html( this_code ) |
||||||
|
.appendTo(btn_grp); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// to make buttons in this btn group active,
|
||||||
|
// you have to use D3's classed() method
|
||||||
|
// after you add the elements to the document
|
||||||
|
// (i.e., after you call $compile)
|
||||||
|
|
||||||
|
angular.element(el).append($compile(btn_grp)(pscope)); |
||||||
|
|
||||||
|
|
||||||
|
pscope.updateCode = function() { |
||||||
|
|
||||||
|
// -----------------------------
|
||||||
|
// make button for active icd 10 code
|
||||||
|
|
||||||
|
d3.selectAll("a.btn-code").classed('active',false); |
||||||
|
var btnlabel = "a#btn_"+pscope.icd10code; |
||||||
|
d3.selectAll(btnlabel).classed('active',true); |
||||||
|
|
||||||
|
}; |
||||||
|
|
||||||
|
pscope.$watch('icd10code',pscope.updateCode); |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
return { |
||||||
|
restrict: "E", |
||||||
|
link: link, |
||||||
|
scope: {} |
||||||
|
} |
||||||
|
}); |
||||||
|
dir.push(ng); |
||||||
|
|
||||||
|
|
||||||
|
//////////////////////////////////
|
||||||
|
// Action directive:
|
||||||
|
// What to do when the user changes the ICD 10 code
|
||||||
|
// by clicking an ICD 10 code button
|
||||||
|
|
||||||
|
ng = a.directive("changecode", function($compile) { |
||||||
|
|
||||||
|
return function(pscope, element, attrs){ |
||||||
|
element.bind("click", function(){ |
||||||
|
|
||||||
|
// first, update the scope variable
|
||||||
|
// that holds the current icd 10 code
|
||||||
|
// (no need to load any new data)
|
||||||
|
|
||||||
|
|
||||||
|
// This is the ICD 10 code the user has selected.
|
||||||
|
var this_code = attrs['code']; |
||||||
|
var this_description = pscope.icd10codes_all[this_code] |
||||||
|
|
||||||
|
//console.log('Changed icd 10 code, updating description:');
|
||||||
|
//console.log(this_code);
|
||||||
|
//console.log(this_description);
|
||||||
|
|
||||||
|
|
||||||
|
// !!!!!!!!!!!!!!!!!!!!!!!!
|
||||||
|
// NOTE
|
||||||
|
// The lines below - this $apply() method -
|
||||||
|
// this is the way you change the variable
|
||||||
|
// at the controller level, and get the
|
||||||
|
// various watchers to detect changes.
|
||||||
|
// !!!!!!!!!!!!!!!!!!!!!!!!!!
|
||||||
|
pscope.$apply(function() { |
||||||
|
pscope.icd10code = this_code; |
||||||
|
}); |
||||||
|
|
||||||
|
pscope.$apply(function() { |
||||||
|
pscope.description = this_description; |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
//// This is some weak-sauce,
|
||||||
|
//// its not even changing value of variable
|
||||||
|
//pscope.update_icd10code(attrs['code']);
|
||||||
|
//// ...
|
||||||
|
//// .......
|
||||||
|
//// seriously.
|
||||||
|
//// all we needed was just
|
||||||
|
//// pscope.$apply()
|
||||||
|
////
|
||||||
|
//// smh.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// then run the donut chart update function
|
||||||
|
pscope.updateDonut(); |
||||||
|
|
||||||
|
// then run the button controllers update function
|
||||||
|
pscope.updateCode(); |
||||||
|
|
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
///////////////////////////////////////////////
|
||||||
|
// Panels:
|
||||||
|
// Display useful information in a pretty box
|
||||||
|
|
||||||
|
|
||||||
|
ng = a.directive('bardonutpanel', function($compile) { |
||||||
|
|
||||||
|
function link(scope, element, attr) { |
||||||
|
|
||||||
|
var el = element[0]; |
||||||
|
|
||||||
|
var pscope = scope.$parent; |
||||||
|
|
||||||
|
// --------------------------
|
||||||
|
// add display for details
|
||||||
|
|
||||||
|
// assemble the tags,
|
||||||
|
// then compile the html
|
||||||
|
// select element of interest with angular.element
|
||||||
|
// and append the compiled tags
|
||||||
|
//
|
||||||
|
var br = $("<br />").appendTo(el); |
||||||
|
|
||||||
|
var panel = $("<div />", { |
||||||
|
"class" : "panel panel-primary", |
||||||
|
"id" : "first" |
||||||
|
}); |
||||||
|
|
||||||
|
var panelhead = $("<div />", { |
||||||
|
"class" : "panel-heading" |
||||||
|
}).appendTo(panel); |
||||||
|
|
||||||
|
var h3 = $("<h3 />", { |
||||||
|
"class" : "panel-title" |
||||||
|
}).text("Current ICD 10 Code") |
||||||
|
.appendTo(panelhead); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
var panelbody = $("<div />", { |
||||||
|
"class" : "panel-body" |
||||||
|
}).appendTo(panel); |
||||||
|
|
||||||
|
var maindiv = $("<div />", { |
||||||
|
}).appendTo(panelbody); |
||||||
|
|
||||||
|
var h = $("<h3 />") |
||||||
|
.html("ICD 10 Code: [[icd10code]]") |
||||||
|
.appendTo(maindiv); |
||||||
|
|
||||||
|
var de = $("<p />", { |
||||||
|
"class" : "lead" }) |
||||||
|
.html("Description: [[description]]") |
||||||
|
.appendTo(maindiv); |
||||||
|
|
||||||
|
angular.element(el).prepend($compile(panel)(pscope)); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
return { |
||||||
|
link: link, |
||||||
|
restrict: "E", |
||||||
|
scope: { } |
||||||
|
}; |
||||||
|
}); |
||||||
|
dir.push(ng); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
///////////////////////////////////////////////
|
||||||
|
// Donut Picker Chart
|
||||||
|
//
|
||||||
|
// This is the actual donut chart, of gender ratios.
|
||||||
|
|
||||||
|
ng = a.directive('donutpickerchart', function($compile) { |
||||||
|
|
||||||
|
function link(scope, element, attr) { |
||||||
|
|
||||||
|
scope.$parent.$watch('pickerData',doStuff); |
||||||
|
|
||||||
|
function doStuff() { |
||||||
|
if(!scope.$parent.pickerData) { return; } |
||||||
|
buildDonut(element, scope.$parent); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
}; |
||||||
|
|
||||||
|
function buildDonut(element,pscope) { |
||||||
|
|
||||||
|
var mydiv = "div#donutpicker_chart"; |
||||||
|
|
||||||
|
/////////////////////////////////////////
|
||||||
|
// Create chart
|
||||||
|
//
|
||||||
|
// data has not been loaded yet.
|
||||||
|
// start by initializing variables
|
||||||
|
// that don't depend on the data.
|
||||||
|
|
||||||
|
var el = element[0]; |
||||||
|
$(el).empty(); |
||||||
|
|
||||||
|
|
||||||
|
///////////////////////////////////
|
||||||
|
// now draw the svg with d3
|
||||||
|
|
||||||
|
// ---------------
|
||||||
|
// the chart itself:
|
||||||
|
|
||||||
|
var margin = { |
||||||
|
top: 10, |
||||||
|
right: 10, |
||||||
|
bottom: 10, |
||||||
|
left: 10 |
||||||
|
}; |
||||||
|
|
||||||
|
var w = 300, |
||||||
|
h = 300; |
||||||
|
|
||||||
|
var width = w - margin.right - margin.left, |
||||||
|
height = h - margin.top - margin.bottom; |
||||||
|
|
||||||
|
var radius = Math.min(width, height) / 2; |
||||||
|
|
||||||
|
var x = d3.scale.linear() |
||||||
|
.range([0, 2 * Math.PI]); |
||||||
|
|
||||||
|
var y = d3.scale.sqrt() |
||||||
|
.range([0, radius]); |
||||||
|
|
||||||
|
var svg = d3.select(mydiv) |
||||||
|
.append("svg") |
||||||
|
.attr("width", width) |
||||||
|
.attr("height", height) |
||||||
|
.append("g") |
||||||
|
.attr("transform", "translate(" + width / 2 + "," + (height / 2 + 10) + ")"); |
||||||
|
|
||||||
|
|
||||||
|
// ---------------
|
||||||
|
// chart-specific,
|
||||||
|
// data-independent variables
|
||||||
|
//
|
||||||
|
// Example:
|
||||||
|
// * sort method
|
||||||
|
// * tween function
|
||||||
|
// * colors (maybe)
|
||||||
|
//
|
||||||
|
|
||||||
|
// This would be nice. but, donutMale and donutFemale aren't working.
|
||||||
|
// And once they are working, they aren't positioned correctly.
|
||||||
|
// And adding them as d3 text elements makes them... not appear.
|
||||||
|
// Just shoe-horning in the value on the pie chart label. Better anyway.
|
||||||
|
/////////var text = svg.append("text")
|
||||||
|
///////// .attr("class", "title")
|
||||||
|
///////// .attr('transform', 'translate(90,0)')
|
||||||
|
///////// .attr("x", w - 70)
|
||||||
|
///////// .attr("y", 10)
|
||||||
|
///////// .attr("font-size", "12px")
|
||||||
|
///////// .attr("fill", "#404040")
|
||||||
|
///////// .html("Females: [[donutFemale]]<br />Males: [[donutMale]]");
|
||||||
|
|
||||||
|
|
||||||
|
// Sunburst needs these to be functions,
|
||||||
|
// donut chart does not.
|
||||||
|
var arc = d3.svg.arc() |
||||||
|
.outerRadius(radius - 10) |
||||||
|
.innerRadius(radius - 70); |
||||||
|
|
||||||
|
var colors = { |
||||||
|
"M" : "#5687d1", |
||||||
|
"F" : "#e377c2", |
||||||
|
"None" : "#bbbbbb" |
||||||
|
}; |
||||||
|
|
||||||
|
// if animating, more stuff goes here.
|
||||||
|
|
||||||
|
pscope.updateDonut = function() { |
||||||
|
|
||||||
|
var all_data = pscope.pickerData; |
||||||
|
|
||||||
|
// ----------------------------------
|
||||||
|
// Get pie chart data
|
||||||
|
//
|
||||||
|
// Here, we have all donut data
|
||||||
|
// available to us.
|
||||||
|
//
|
||||||
|
// We use the currently-selected ICD 10 code
|
||||||
|
// to filter which donut data is being plotted.
|
||||||
|
//
|
||||||
|
// Where to keep track of current code?
|
||||||
|
// In the controller (available via pscope).
|
||||||
|
// pscope.icd10code
|
||||||
|
//
|
||||||
|
var code; |
||||||
|
var data; |
||||||
|
for( var i=0; i < all_data.length; i++ ) { |
||||||
|
|
||||||
|
// set excpetion handling:
|
||||||
|
// if no icd10code is set, problems occur.
|
||||||
|
if(all_data[i]['code'] == pscope.icd10code) { |
||||||
|
code = all_data[i]['code']; |
||||||
|
data = all_data[i]['donut']; |
||||||
|
break; |
||||||
|
} |
||||||
|
} |
||||||
|
// finished; use data
|
||||||
|
// ---------------------------------
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// ----------------------------
|
||||||
|
// Start with counts of
|
||||||
|
// donut chart males/females
|
||||||
|
|
||||||
|
var donutFemale = 0, |
||||||
|
donutMale = 0; |
||||||
|
|
||||||
|
for(var i=0; i<data.length; i++) { |
||||||
|
if(data[i].label=="M"){ |
||||||
|
donutMale = data[i].value; |
||||||
|
} |
||||||
|
if( data[i].label=="F") { |
||||||
|
donutFemale = data[i].value; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
////////////////
|
||||||
|
// UUUUGGGGGGGGHHHHHHHHHHHH
|
||||||
|
//
|
||||||
|
// can't use pscope.$apply() here.
|
||||||
|
//
|
||||||
|
// ?????
|
||||||
|
//
|
||||||
|
// also, this does not update these variables.
|
||||||
|
// WTFH
|
||||||
|
//pscope.donutFemale = donutFemale;
|
||||||
|
//pscope.donutMale = donutMale;
|
||||||
|
|
||||||
|
// ----------------------------
|
||||||
|
|
||||||
|
|
||||||
|
var g = svg.datum(data) |
||||||
|
.selectAll("g") |
||||||
|
.data(data) |
||||||
|
.enter(); |
||||||
|
|
||||||
|
|
||||||
|
var pie = d3.layout.pie() |
||||||
|
.sort(null) |
||||||
|
.value(function(d) { |
||||||
|
return +d.value; |
||||||
|
}); |
||||||
|
|
||||||
|
var g = svg.selectAll(".arc") |
||||||
|
.data(pie(data)) |
||||||
|
.enter(); |
||||||
|
|
||||||
|
// !!!!!!!!!!!!!!!!!!
|
||||||
|
// note: if you add .append("g")
|
||||||
|
// to the above var g,
|
||||||
|
// drawing the arcs will only
|
||||||
|
// work the first time you do it,
|
||||||
|
// after that they'll disappear
|
||||||
|
// and g will be an array of nulls.
|
||||||
|
// so don't do this!
|
||||||
|
//
|
||||||
|
// .append("g");
|
||||||
|
// !!!!!!!!!!!!!!!!!!
|
||||||
|
|
||||||
|
g.append("path") |
||||||
|
.attr("d", arc) |
||||||
|
.style("fill", function(d) { |
||||||
|
return colors[d.data.label]; |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
// clear away old labels
|
||||||
|
svg.selectAll("text").remove(); |
||||||
|
|
||||||
|
|
||||||
|
g.append("text") |
||||||
|
.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; }) |
||||||
|
.attr("dy", ".35em") |
||||||
|
.style("text-anchor", "middle") |
||||||
|
.text(function(d) { |
||||||
|
if (d.data.value > 0) { |
||||||
|
if(d.data.label=="M") { |
||||||
|
fancylabel = "Males"; |
||||||
|
} else if(d.data.label=="F") { |
||||||
|
fancylabel = "Females"; |
||||||
|
} |
||||||
|
var biglabel = fancylabel + ": " + d.data.value; |
||||||
|
return biglabel; |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// ------------------
|
||||||
|
// if you build it,
|
||||||
|
// you must update it.
|
||||||
|
pscope.updateDonut(); |
||||||
|
|
||||||
|
pscope.$watch('icd10code',pscope.updateDonut); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
return { |
||||||
|
link: link, |
||||||
|
restrict: "E", |
||||||
|
scope: { } |
||||||
|
}; |
||||||
|
}); |
||||||
|
dir.push(ng); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
///////////////////////////////////////////////
|
||||||
|
// Manner of Death Bar Chart
|
||||||
|
//
|
||||||
|
// This is a bar chart for manner of death.
|
||||||
|
|
||||||
|
ng = a.directive('modbarchart', function($compile) { |
||||||
|
|
||||||
|
function link(scope, element, attr) { |
||||||
|
|
||||||
|
scope.$parent.$watch('pickerData',doStuff); |
||||||
|
scope.$parent.$watch('icd10code',doStuff); |
||||||
|
|
||||||
|
function doStuff() { |
||||||
|
if(!scope.$parent.pickerData) { return; } |
||||||
|
if(!scope.$parent.icd10code) { return; } |
||||||
|
buildBar(element, scope.$parent); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
}; |
||||||
|
|
||||||
|
function buildBar(element,pscope) { |
||||||
|
|
||||||
|
//
|
||||||
|
// If you draw any parts of the bar plot
|
||||||
|
// outside of the updateBar() function,
|
||||||
|
// the bar plot will not actually change.
|
||||||
|
//
|
||||||
|
|
||||||
|
pscope.updateBar = function() { |
||||||
|
|
||||||
|
//console.log('in update bar');
|
||||||
|
|
||||||
|
var mydiv = "div#modbar_chart"; |
||||||
|
|
||||||
|
/////////////////////////////////////////
|
||||||
|
// Create chart
|
||||||
|
//
|
||||||
|
// data has not been loaded yet.
|
||||||
|
// start by initializing variables
|
||||||
|
// that don't depend on the data.
|
||||||
|
|
||||||
|
var chart = $(mydiv); |
||||||
|
chart.empty(); |
||||||
|
|
||||||
|
///////////////////////////////////
|
||||||
|
// now draw the svg with d3
|
||||||
|
|
||||||
|
// ---------------
|
||||||
|
// the chart itself:
|
||||||
|
|
||||||
|
var margin = { |
||||||
|
top: 10, |
||||||
|
bottom: 100, |
||||||
|
|
||||||
|
right: 30, |
||||||
|
left: 50 |
||||||
|
}; |
||||||
|
|
||||||
|
var w = 400; |
||||||
|
var h = 400; |
||||||
|
|
||||||
|
var barwidth = w - margin.left - margin.right; |
||||||
|
var barheight = h - margin.top - margin.bottom; |
||||||
|
|
||||||
|
var x = d3.scale.ordinal() |
||||||
|
.rangeRoundBands([0, barwidth], .1); |
||||||
|
|
||||||
|
var y = d3.scale.linear() |
||||||
|
.range([barheight, 0]); |
||||||
|
|
||||||
|
var xAxis = d3.svg.axis() |
||||||
|
.scale(x) |
||||||
|
.orient("bottom"); |
||||||
|
|
||||||
|
var yAxis = d3.svg.axis() |
||||||
|
.scale(y) |
||||||
|
.orient("left") |
||||||
|
.ticks(10) |
||||||
|
|
||||||
|
var svg = d3.select(mydiv) |
||||||
|
.append("svg") |
||||||
|
.attr("width", w) |
||||||
|
.attr("height", h) |
||||||
|
.append("g") |
||||||
|
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); |
||||||
|
|
||||||
|
|
||||||
|
/////////////////
|
||||||
|
// Data-specific stuff
|
||||||
|
|
||||||
|
|
||||||
|
// Start by loading the data
|
||||||
|
//
|
||||||
|
var all_data = pscope.pickerData; |
||||||
|
|
||||||
|
var code; |
||||||
|
var data; |
||||||
|
for( var i=0; i < all_data.length; i++ ) { |
||||||
|
|
||||||
|
// set excpetion handling:
|
||||||
|
// if no icd10code is set, problems occur.
|
||||||
|
if(all_data[i]['code'] == pscope.icd10code) { |
||||||
|
code = all_data[i]['code']; |
||||||
|
data = all_data[i]['modbars']; |
||||||
|
break; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
//// data looks good
|
||||||
|
//console.log(data);
|
||||||
|
|
||||||
|
if( data!=null ){ |
||||||
|
|
||||||
|
|
||||||
|
// if you wanna show categories that are zero,
|
||||||
|
// modify your data. too complicated to fill in here.
|
||||||
|
|
||||||
|
x.domain(data.map(function(d) { return d.label; })); |
||||||
|
|
||||||
|
y.domain([0, d3.max(data, function(d) { return d.value; })]); |
||||||
|
|
||||||
|
//svg.selectAll("path").remove();
|
||||||
|
|
||||||
|
svg.append("g") |
||||||
|
.attr("class", "x axis") |
||||||
|
.attr("transform", function(d,i) { |
||||||
|
return "translate(0,"+ (barheight) + ")"; |
||||||
|
}) |
||||||
|
.call(xAxis) |
||||||
|
.selectAll("text") |
||||||
|
.attr("class", "x axis label") |
||||||
|
.attr("transform", "rotate(90)" ) |
||||||
|
.style("text-anchor", "start") |
||||||
|
.attr("dx", "0.5em") |
||||||
|
.attr("dy", "-1em"); |
||||||
|
|
||||||
|
|
||||||
|
svg.append("g") |
||||||
|
.attr("class", "y axis") |
||||||
|
.call(yAxis) |
||||||
|
.append("text") |
||||||
|
.attr("class", "y axis label") |
||||||
|
.attr("transform", "rotate(90)") |
||||||
|
.style("text-anchor", "start") |
||||||
|
.attr("y", 6) |
||||||
|
.attr("dy", "3.5em") |
||||||
|
.text("Number of Death Records"); |
||||||
|
|
||||||
|
|
||||||
|
var color2 = d3.scale.category20b(); |
||||||
|
|
||||||
|
svg.selectAll(".bar") |
||||||
|
.data(data) |
||||||
|
.enter().append("rect") |
||||||
|
.attr("class", "bar") |
||||||
|
.attr("fill",function(d,i) { |
||||||
|
return color2(d.label) |
||||||
|
}) |
||||||
|
.attr("x", function(d) { return x(d.label); }) |
||||||
|
.attr("width", x.rangeBand()) |
||||||
|
.attr("y", function(d) { return y(d.value); }) |
||||||
|
.attr("height", function(d) { |
||||||
|
var toptobottom = (barheight); |
||||||
|
var toptobartop = y(d.value); |
||||||
|
var ht = toptobottom - toptobartop |
||||||
|
return ht; |
||||||
|
}); |
||||||
|
|
||||||
|
function type(d) { |
||||||
|
d.value = +d.value; |
||||||
|
return d; |
||||||
|
} |
||||||
|
|
||||||
|
// else: "No Data" label
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
// ------------------
|
||||||
|
// if you build it,
|
||||||
|
// you must update it.
|
||||||
|
pscope.updateBar(); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
return { |
||||||
|
link: link, |
||||||
|
restrict: "E", |
||||||
|
scope: { } |
||||||
|
}; |
||||||
|
}); |
||||||
|
dir.push(ng); |
||||||
@ -0,0 +1,87 @@ |
|||||||
|
///////////////////////////////////////
|
||||||
|
//
|
||||||
|
// Picker
|
||||||
|
//
|
||||||
|
// Module/Controller
|
||||||
|
//
|
||||||
|
|
||||||
|
var a = angular.module("pickerApp", [], function($interpolateProvider) { |
||||||
|
$interpolateProvider.startSymbol('[['); |
||||||
|
$interpolateProvider.endSymbol(']]'); |
||||||
|
} |
||||||
|
); |
||||||
|
|
||||||
|
var datafactory = a.factory('datafactory', function($http, $q) { |
||||||
|
|
||||||
|
return { |
||||||
|
getPickerData: function() { |
||||||
|
var deferred = $q.defer(); |
||||||
|
|
||||||
|
var json_file = 'bardonut_allcategories.json'; |
||||||
|
|
||||||
|
$http.get(json_file).success(function(data) { |
||||||
|
deferred.resolve(data); |
||||||
|
}).error(function(){ |
||||||
|
console.log('error loading json file: '+json_file); |
||||||
|
deferred.reject(); |
||||||
|
}); |
||||||
|
|
||||||
|
return deferred.promise; |
||||||
|
}, |
||||||
|
|
||||||
|
getCodeData: function() { |
||||||
|
var deferred = $q.defer(); |
||||||
|
|
||||||
|
$http.get('icd10codes.json').success(function(data) { |
||||||
|
deferred.resolve(data); |
||||||
|
}).error(function(){ |
||||||
|
console.log('error loading icd10codes.json'); |
||||||
|
deferred.reject(); |
||||||
|
}); |
||||||
|
|
||||||
|
return deferred.promise; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
function MainController($scope,datafactory) { |
||||||
|
|
||||||
|
$scope.initialize = function() { |
||||||
|
|
||||||
|
$scope.icd10code="S328"; |
||||||
|
$scope.donutFemale = 0; |
||||||
|
$scope.donutMale = 0; |
||||||
|
|
||||||
|
datafactory.getPickerData().then( |
||||||
|
function(data) { |
||||||
|
$scope.pickerData = data; |
||||||
|
} |
||||||
|
); |
||||||
|
|
||||||
|
datafactory.getCodeData().then( |
||||||
|
function(data) { |
||||||
|
$scope.icd10codes_all = data; |
||||||
|
var descr = $scope.icd10codes_all[$scope.icd10code]; |
||||||
|
$scope.description = descr; |
||||||
|
} |
||||||
|
); |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
/* |
||||||
|
// This does not change the value of this
|
||||||
|
// variable in everyone's parent scope.
|
||||||
|
// UUUUGGGGHHHHH. Stupid code.
|
||||||
|
$scope.update_icd10code = function(code) { |
||||||
|
$scope.icd10code = code; |
||||||
|
console.log("from update_icd10code:"+$scope.icd10code); |
||||||
|
} |
||||||
|
*/ |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
// the first few arguments of the list should correspond to the Angular-namespace stuff to feed to PickerController
|
||||||
|
var c = a.controller("mainController", ["$scope", "datafactory", MainController]); |
||||||
@ -0,0 +1,26 @@ |
|||||||
|
path { |
||||||
|
stroke: white; |
||||||
|
stroke-width: 0.5; |
||||||
|
} |
||||||
|
|
||||||
|
div#mouseoverPointPanel, |
||||||
|
div#clickedPointPanel { |
||||||
|
width: 300px; |
||||||
|
} |
||||||
|
|
||||||
|
.fade { |
||||||
|
opacity: 0; |
||||||
|
-webkit-transition: opacity 0.85s linear; |
||||||
|
-moz-transition: opacity 0.85s linear; |
||||||
|
-o-transition: opacity 0.85s linear; |
||||||
|
transition: opacity 0.85s linear; |
||||||
|
} |
||||||
|
|
||||||
|
.fade.in { |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
|
||||||
|
.active { |
||||||
|
stroke: black; |
||||||
|
stroke-width: 2.0; |
||||||
|
} |
||||||
@ -0,0 +1,174 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<title>Donut Picker Chart</title> |
||||||
|
<meta charset="utf-8" /> |
||||||
|
|
||||||
|
<!-- |
||||||
|
my CSS styles |
||||||
|
--> |
||||||
|
<link href="/theme/css/bootstrap.css" rel="stylesheet" type="text/css"> |
||||||
|
<link href="/theme/css/main.css" rel="stylesheet" type="text/css"> |
||||||
|
|
||||||
|
<link href="/theme/css/cosmo.css" rel="stylesheet" type="text/css"> |
||||||
|
<link href="/theme/css/font-awesome.css" rel="stylesheet" type="text/css"/> |
||||||
|
<link href="/theme/css/pygment.css" rel="stylesheet" type="text/css"/> |
||||||
|
|
||||||
|
<!-- |
||||||
|
include Angular first |
||||||
|
--> |
||||||
|
<script type="text/javascript" src="/theme/js/angular-1.3.15.js"></script> |
||||||
|
<script src="//d3js.org/d3.v3.min.js"></script> |
||||||
|
</head> |
||||||
|
|
||||||
|
<body id="index" class="home"> |
||||||
|
<div class="container"> |
||||||
|
<h1><a href="/">dang-sunburst <strong></strong></a></h1> |
||||||
|
<hr /> |
||||||
|
|
||||||
|
|
||||||
|
<link href="/simpledonut/donutpicker.css" rel="stylesheet" stype="text/css" /> |
||||||
|
|
||||||
|
<div ng-app="pickerApp"> |
||||||
|
|
||||||
|
<div ng-controller="mainController" ng-init="initialize()"> |
||||||
|
|
||||||
|
|
||||||
|
<div class="row"> |
||||||
|
<div class="col-sm-12" id="donut_title"> |
||||||
|
<donut-picker-head></donut-picker-head> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="row"> |
||||||
|
<div class="col-sm-10" id="donut_controls"> |
||||||
|
<donut-picker-controls></donut-picker-controls> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
<div class="row"> |
||||||
|
<div class="col-sm-4" id="donut_chart"> |
||||||
|
<div class="row" id="donutpicker_chart"> |
||||||
|
<donut-picker-chart></donut-picker-chart> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="col-sm-6" id="donut_text"> |
||||||
|
<div class="row" id="donut_panels"> |
||||||
|
<donut-picker-panels></donut-picker-panels> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
<div class="row"> |
||||||
|
|
||||||
|
<div class="col-sm-10" id="more_donut_text"> |
||||||
|
<div class="row" id="donutpicker_md"> |
||||||
|
This is a donut chart with buttons enabling you to pick different |
||||||
|
categories of data. This chart is intended to demonstrate how to fold up |
||||||
|
high dimensional data into a JSON container that ca be served up and |
||||||
|
easily filtered with D3. |
||||||
|
|
||||||
|
<br /> |
||||||
|
<br /> |
||||||
|
|
||||||
|
This data shows statistics about death records from the United States in |
||||||
|
2014, in particular the ratio of males to females whose death records |
||||||
|
were tagged with these particular ICD 10 codes. The ICD 10 codes indicate |
||||||
|
circumstances present at time of death, though not necessarily |
||||||
|
the cause of death. |
||||||
|
|
||||||
|
<br/> |
||||||
|
<br/> |
||||||
|
|
||||||
|
The key is to add one additional layer of hierarchy to the dictionary containing the data: |
||||||
|
data for any pie chart consists of a list of dictionaries, as with the static pie chart, |
||||||
|
but this time we add one additional layer to the JSON, which is the code. |
||||||
|
|
||||||
|
The user is then able to select different codes using buttons. Clicking those buttons |
||||||
|
sets the filter criteria in the visualization controller, and that change is detected |
||||||
|
and propagated, so that the pie chart data is updated and the pie chart re-drawn. |
||||||
|
|
||||||
|
<pre style="font-size: 8px;"> |
||||||
|
[ |
||||||
|
{ |
||||||
|
"code": "T510"}, |
||||||
|
"donut": |
||||||
|
[ |
||||||
|
{"value": 17, "label": "M"}, |
||||||
|
{"value": 4, "label": "F"} |
||||||
|
] |
||||||
|
}, |
||||||
|
{ |
||||||
|
"code": "Y14"}, |
||||||
|
"donut": |
||||||
|
[ |
||||||
|
{"value": 1, "label": "M"}, |
||||||
|
{"value": 3, "label": "F"} |
||||||
|
] |
||||||
|
}, |
||||||
|
{ |
||||||
|
"code": "S328"}, |
||||||
|
"donut": |
||||||
|
[ |
||||||
|
{"value": 2, "label": "M"}, |
||||||
|
{"value": 3, "label": "F"} |
||||||
|
] |
||||||
|
}, |
||||||
|
|
||||||
|
... |
||||||
|
] |
||||||
|
</pre> |
||||||
|
|
||||||
|
Once we filter on "code", we get the "donut" array, and pass it to the D3 pie chart object, |
||||||
|
which renders the d ata structure into the donut chart on the left. |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
<script type="text/javascript" src="/simpledonut/donutpicker_modcontrol.js"></script> |
||||||
|
<script type="text/javascript" src="/simpledonut/donutpicker_chart.js"></script> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
<footer id="contentinfo" class="body"> |
||||||
|
<hr /> |
||||||
|
<p style="text-align: center"> |
||||||
|
<span class="fa-stack fa-lg"> |
||||||
|
<i class="fa fa-square fa-stack-2x"></i> |
||||||
|
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i> |
||||||
|
</span> |
||||||
|
Made from the command line with vim by |
||||||
|
<a href="http://charlesreid1.com">charlesreid1</a>. |
||||||
|
</p> |
||||||
|
|
||||||
|
<p style="text-align: center;">Made with HTML ( |
||||||
|
<a href="http://http://bootstrap.org/">Bootstrap</a>, |
||||||
|
<a href="http://bootswatch.com">Bootswatch</a>), |
||||||
|
Javascript ( |
||||||
|
<a href="http://http://d3js.org/">D3.js</a>, |
||||||
|
<a href=https://angularjs.org/">Angular.js</a>, |
||||||
|
<a href="https://jquery.com/">jQuery</a>), |
||||||
|
and Python ( |
||||||
|
<a href="http://pydata.org">Pandas</a>, |
||||||
|
<a href="http://getpelican.com">Pelican</a>, |
||||||
|
<a href="http://ipython.org">Jupyter Notebooks</a>). |
||||||
|
</p> |
||||||
|
|
||||||
|
<script type="text/javascript" src="/theme/js/jquery-1.11.2.js"></script> |
||||||
|
<script type="text/javascript" src="/theme/js/bootstrap-3.3.4.js"></script> |
||||||
|
<!-- |
||||||
|
<script type="text/javascript" src="/theme/js/d3-3.5.5.js"></script> |
||||||
|
<script type="text/javascript" src="/theme/js/leaflet-0.7.3.js"></script> |
||||||
|
<script type="text/javascript" src="/theme/js/leaflet.ajax.min.js"></script> |
||||||
|
--> |
||||||
|
</footer><!-- /#contentinfo --> |
||||||
|
|
||||||
|
</body> |
||||||
|
</html> |
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue