Compare commits
No commits in common. 'master' and 'gh-pages' have entirely different histories.
334 changed files with 447 additions and 58852 deletions
@ -1,6 +0,0 @@ |
|||||||
# Ignore pelican output directories |
|
||||||
pelican/cache |
|
||||||
pelican/output |
|
||||||
|
|
||||||
# Python |
|
||||||
*.pyc |
|
||||||
@ -1,22 +0,0 @@ |
|||||||
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. |
|
||||||
|
|
||||||
@ -1,2 +0,0 @@ |
|||||||
# dang-sunburst |
|
||||||
Exploring D3 sunburst charts with D3 + Angular + Pelican. |
|
||||||
@ -0,0 +1,68 @@ |
|||||||
|
<!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> |
||||||
@ -1,68 +0,0 @@ |
|||||||
<!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> |
|
||||||
@ -1,161 +0,0 @@ |
|||||||
<!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> |
|
||||||
@ -1,72 +0,0 @@ |
|||||||
[{"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"}]}] |
|
||||||
@ -1,516 +0,0 @@ |
|||||||
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;
|
|
||||||
// };
|
|
||||||
//
|
|
||||||
//
|
|
||||||
// */
|
|
||||||
@ -1,76 +0,0 @@ |
|||||||
///////////////////////////////////////
|
|
||||||
//
|
|
||||||
// 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
|
Before Width: | Height: | Size: 99 KiB |
|
Before Width: | Height: | Size: 63 KiB |
|
Before Width: | Height: | Size: 70 KiB |
|
Before Width: | Height: | Size: 106 KiB |
|
Before Width: | Height: | Size: 58 KiB |
@ -1,86 +0,0 @@ |
|||||||
<!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> |
|
||||||
@ -1,86 +0,0 @@ |
|||||||
<!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> |
|
||||||
@ -1,84 +0,0 @@ |
|||||||
<!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> |
|
||||||
@ -1,414 +0,0 @@ |
|||||||
/* |
|
||||||
* 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
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -1,38 +0,0 @@ |
|||||||
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; |
|
||||||
} |
|
||||||
@ -1,186 +0,0 @@ |
|||||||
<!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> |
|
||||||
@ -1,72 +0,0 @@ |
|||||||
[{"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"}]}] |
|
||||||
@ -1,398 +0,0 @@ |
|||||||
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); |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -1,86 +0,0 @@ |
|||||||
///////////////////////////////////////
|
|
||||||
//
|
|
||||||
// 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
@ -1,69 +0,0 @@ |
|||||||
<!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> |
|
||||||
@ -1,16 +0,0 @@ |
|||||||
[{"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"}]}] |
|
||||||
@ -1,127 +0,0 @@ |
|||||||
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); |
|
||||||
@ -1,55 +0,0 @@ |
|||||||
///////////////////////////////////////
|
|
||||||
//
|
|
||||||
// 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]); |
|
||||||
@ -1,28 +0,0 @@ |
|||||||
<!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> |
|
||||||
@ -1,292 +0,0 @@ |
|||||||
/* |
|
||||||
* 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); |
|
||||||
} |
|
||||||
}; |
|
||||||
@ -1,81 +0,0 @@ |
|||||||
.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; |
|
||||||
} |
|
||||||
@ -1,175 +0,0 @@ |
|||||||
<!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> |
|
||||||
@ -1,16 +0,0 @@ |
|||||||
[{"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"}]}] |
|
||||||
@ -1,700 +0,0 @@ |
|||||||
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); |
|
||||||
|
|
||||||
|
|
||||||
@ -1,76 +0,0 @@ |
|||||||
///////////////////////////////////////
|
|
||||||
//
|
|
||||||
// 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]); |
|
||||||
@ -1,81 +0,0 @@ |
|||||||
.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; |
|
||||||
} |
|
||||||
@ -1,176 +0,0 @@ |
|||||||
<!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> |
|
||||||
@ -1,16 +0,0 @@ |
|||||||
[{"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"}]}] |
|
||||||
@ -1,413 +0,0 @@ |
|||||||
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); |
|
||||||
|
|
||||||
|
|
||||||
@ -1,76 +0,0 @@ |
|||||||
///////////////////////////////////////
|
|
||||||
//
|
|
||||||
// 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]); |
|
||||||
@ -1,72 +0,0 @@ |
|||||||
[{"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"}]}] |
|
||||||
@ -1,72 +0,0 @@ |
|||||||
[{"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"}]}] |
|
||||||
@ -1,38 +0,0 @@ |
|||||||
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; |
|
||||||
} |
|
||||||
@ -1,191 +0,0 @@ |
|||||||
<!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> |
|
||||||
@ -1,16 +0,0 @@ |
|||||||
[{"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"}]}] |
|
||||||
@ -1,61 +0,0 @@ |
|||||||
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. |
|
||||||
@ -1,16 +0,0 @@ |
|||||||
[{"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"}]}] |
|
||||||
@ -1,732 +0,0 @@ |
|||||||
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); |
|
||||||
@ -1,87 +0,0 @@ |
|||||||
///////////////////////////////////////
|
|
||||||
//
|
|
||||||
// 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]); |
|
||||||
@ -1,26 +0,0 @@ |
|||||||
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; |
|
||||||
} |
|
||||||
@ -1,174 +0,0 @@ |
|||||||
<!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> |
|
||||||
@ -1,5 +0,0 @@ |
|||||||
[{"donut": [{"value": 2, "label": "M"}, {"value": 3, "label": "F"}], "code": "S328"}, |
|
||||||
{"donut": [{"value": 1, "label": "M"}, {"value": 4, "label": "F"}], "code": "Y14"}, |
|
||||||
{"donut": [{"value": 9, "label": "M"}, {"value": 14, "label": "F"}], "code": "I120"}, |
|
||||||
{"donut": [{"value": 30, "label": "M"}, {"value": 12, "label": "F"}], "code": "T510"}, |
|
||||||
{"donut": [{"value": 2, "label": "M"}, {"value": 1, "label": "F"}], "code": "C119"}] |
|
||||||
@ -1,58 +0,0 @@ |
|||||||
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. |
|
||||||
@ -1,449 +0,0 @@ |
|||||||
var ng; |
|
||||||
dir = []; |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//////////////////////////////////////
|
|
||||||
// Chart Directives
|
|
||||||
//
|
|
||||||
// This file defines Angular directives
|
|
||||||
// that use D3 to draw charts.
|
|
||||||
//
|
|
||||||
|
|
||||||
ng = a.directive('donutPickerHead', 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); |
|
||||||
|
|
||||||
|
|
||||||
} |
|
||||||
return { |
|
||||||
restrict: "E", |
|
||||||
link: link, |
|
||||||
scope: {} |
|
||||||
} |
|
||||||
}); |
|
||||||
dir.push(ng); |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
///////////////////////////////////////////////
|
|
||||||
// Chart Controls
|
|
||||||
|
|
||||||
ng = a.directive('donutPickerControls', 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']);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// then run the donut chart update function
|
|
||||||
updateChart(); |
|
||||||
|
|
||||||
// then run the button controllers update function
|
|
||||||
pscope.updateCode(); |
|
||||||
|
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
}); |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
///////////////////////////////////////////////
|
|
||||||
// Panels
|
|
||||||
|
|
||||||
|
|
||||||
ng = a.directive('donutPickerPanels', 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); |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
///////////////////////////////////////////////
|
|
||||||
// Chart
|
|
||||||
|
|
||||||
ng = a.directive('donutPickerChart', function($compile) { |
|
||||||
|
|
||||||
function link(scope, element, attr) { |
|
||||||
|
|
||||||
scope.$parent.$watch('pickerData',doStuff); |
|
||||||
|
|
||||||
function doStuff() { |
|
||||||
if(!scope.$parent.pickerData) { return; } |
|
||||||
buildChart(element, scope.$parent); |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
}; |
|
||||||
|
|
||||||
function buildChart(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 chart = $(mydiv); |
|
||||||
chart.empty(); |
|
||||||
|
|
||||||
///////////////////////////////////
|
|
||||||
// now draw the svg with d3
|
|
||||||
|
|
||||||
// ---------------
|
|
||||||
// the chart itself:
|
|
||||||
|
|
||||||
var margin = { |
|
||||||
top: 10, |
|
||||||
right: 40, |
|
||||||
bottom: 10, |
|
||||||
left: 40 |
|
||||||
}; |
|
||||||
|
|
||||||
var width = 400 - margin.right - margin.left, |
|
||||||
height = 400 - 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)
|
|
||||||
//
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// 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.
|
|
||||||
|
|
||||||
|
|
||||||
updateChart = 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
|
|
||||||
// ---------------------------------
|
|
||||||
|
|
||||||
|
|
||||||
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]; |
|
||||||
}); |
|
||||||
|
|
||||||
g.append("text") |
|
||||||
.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; }) |
|
||||||
.attr("dy", ".35em") |
|
||||||
.text(function(d) { return d.data.label; }); |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// ------------------
|
|
||||||
// if you build it,
|
|
||||||
// you must update it.
|
|
||||||
updateChart(); |
|
||||||
|
|
||||||
pscope.$watch('icd10code',updateChart); |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
return { |
|
||||||
link: link, |
|
||||||
restrict: "E", |
|
||||||
scope: { } |
|
||||||
}; |
|
||||||
}); |
|
||||||
dir.push(ng); |
|
||||||
|
|
||||||
|
|
||||||
@ -1,82 +0,0 @@ |
|||||||
///////////////////////////////////////
|
|
||||||
//
|
|
||||||
// Picker Interactive Sunburst
|
|
||||||
//
|
|
||||||
// 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(); |
|
||||||
|
|
||||||
$http.get('donutpicker.json').success(function(data) { |
|
||||||
deferred.resolve(data); |
|
||||||
}).error(function(){ |
|
||||||
console.log('error loading donutpicker.json'); |
|
||||||
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"; |
|
||||||
|
|
||||||
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]); |
|
||||||
File diff suppressed because one or more lines are too long
@ -1,26 +0,0 @@ |
|||||||
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; |
|
||||||
} |
|
||||||
@ -1,154 +0,0 @@ |
|||||||
<!DOCTYPE html> |
|
||||||
<html lang="en"> |
|
||||||
<head> |
|
||||||
<title>Static 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/staticdonut.css" rel="stylesheet" stype="text/css" /> |
|
||||||
|
|
||||||
<div ng-app="staticApp"> |
|
||||||
|
|
||||||
<div ng-controller="StaticController" ng-init="initialize()"> |
|
||||||
|
|
||||||
|
|
||||||
<div class="row"> |
|
||||||
<div class="col-sm-12" id="donut_title"> |
|
||||||
<static-donut-head></static-donut-head> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
|
|
||||||
<div class="row"> |
|
||||||
<div class="col-sm-4" id="donut_chart"> |
|
||||||
<div class="row" id="staticdonut_chart"> |
|
||||||
<static-donut-chart></static-donut-chart> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="col-sm-6" id="donut_text"> |
|
||||||
<div class="row" id="donut_panels"> |
|
||||||
<static-donut-panels></static-donut-panels> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="row"> |
|
||||||
|
|
||||||
<div class="col-sm-10" id="more_donut_text"> |
|
||||||
<div class="row" id="staticdonut_md"> |
|
||||||
This static donut chart illustrates how to store data |
|
||||||
in JSON format to load in a donut chart and visualize |
|
||||||
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. In this case, the death records are limited to |
|
||||||
those tagged with T401, heroin poisoning. |
|
||||||
|
|
||||||
<br/> |
|
||||||
<br/> |
|
||||||
|
|
||||||
Remember that D3 thinks about a single dictionary or JSON array |
|
||||||
as a single data observation - as opposed to the normal approach |
|
||||||
of using keys to store data labels, and values to store the data itself, |
|
||||||
and bundling everything into a single dictionary. |
|
||||||
|
|
||||||
<br/> |
|
||||||
<br/> |
|
||||||
|
|
||||||
The D3 donut chart is bound to underlying JSON data based on |
|
||||||
the index "label" (which is used to label each piece) |
|
||||||
and the index "value" (which is used to determine size of each piece). |
|
||||||
|
|
||||||
<pre style="font-size: 8px;"> |
|
||||||
[ |
|
||||||
{ |
|
||||||
"label" : "M", |
|
||||||
"value" : 15 |
|
||||||
}, |
|
||||||
{ |
|
||||||
"label" : "F", |
|
||||||
"value" : 4 |
|
||||||
} |
|
||||||
] |
|
||||||
</pre> |
|
||||||
|
|
||||||
D3 renders this data structure into the donut chart on the left. |
|
||||||
</div> |
|
||||||
|
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
</div> |
|
||||||
|
|
||||||
</div> |
|
||||||
|
|
||||||
<script type="text/javascript" src="/simpledonut/staticdonut_modcontrol.js"></script> |
|
||||||
<script type="text/javascript" src="/simpledonut/staticdonut_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> |
|
||||||
@ -1 +0,0 @@ |
|||||||
[{"value": 15, "label": "M"}, {"value": 4, "label": "F"}] |
|
||||||
@ -1,43 +0,0 @@ |
|||||||
This static donut chart illustrates how to store data |
|
||||||
in JSON format to load in a donut chart and visualize |
|
||||||
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. In this case, the death records are limited to |
|
||||||
those tagged with T401, heroin poisoning. |
|
||||||
|
|
||||||
<br/> |
|
||||||
<br/> |
|
||||||
|
|
||||||
Remember that D3 thinks about a single dictionary or JSON array |
|
||||||
as a single data observation - as opposed to the normal approach |
|
||||||
of using keys to store data labels, and values to store the data itself, |
|
||||||
and bundling everything into a single dictionary. |
|
||||||
|
|
||||||
<br/> |
|
||||||
<br/> |
|
||||||
|
|
||||||
The D3 donut chart is bound to underlying JSON data based on |
|
||||||
the index "label" (which is used to label each piece) |
|
||||||
and the index "value" (which is used to determine size of each piece). |
|
||||||
|
|
||||||
<pre style="font-size: 8px;"> |
|
||||||
[ |
|
||||||
{ |
|
||||||
"label" : "M", |
|
||||||
"value" : 15 |
|
||||||
}, |
|
||||||
{ |
|
||||||
"label" : "F", |
|
||||||
"value" : 4 |
|
||||||
} |
|
||||||
] |
|
||||||
</pre> |
|
||||||
|
|
||||||
D3 renders this data structure into the donut chart on the left. |
|
||||||
@ -1,328 +0,0 @@ |
|||||||
var ng; |
|
||||||
dir = []; |
|
||||||
|
|
||||||
//////////////////////////////////////
|
|
||||||
// Chart Directives
|
|
||||||
//
|
|
||||||
// This file defines Angular directives
|
|
||||||
// that use D3 to draw charts.
|
|
||||||
//
|
|
||||||
|
|
||||||
ng = a.directive('staticDonutHead', 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("Static Donut Chart Example") |
|
||||||
.appendTo(h1); |
|
||||||
|
|
||||||
h1.appendTo(dir); |
|
||||||
|
|
||||||
|
|
||||||
} |
|
||||||
return { |
|
||||||
restrict: "E", |
|
||||||
link: link, |
|
||||||
scope: {} |
|
||||||
} |
|
||||||
}); |
|
||||||
dir.push(ng); |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* |
|
||||||
///////////////////////////////////////////////
|
|
||||||
// Plain Chart Controls
|
|
||||||
|
|
||||||
ng = a.directive('staticDonutControlssliderSunburstControls', function($compile) { |
|
||||||
|
|
||||||
function link(scope, element, attr) { |
|
||||||
|
|
||||||
pscope = scope.$parent; |
|
||||||
|
|
||||||
var el = $("div#sunburst_controls"); |
|
||||||
|
|
||||||
pscope.countval_btn = "count"; |
|
||||||
pscope.countval_current = "magnitude"; |
|
||||||
|
|
||||||
|
|
||||||
var div = $("<div />"); |
|
||||||
|
|
||||||
var alrt_t = $("<p />") |
|
||||||
.html("Data is currently binned by [[countval_current]].") |
|
||||||
.appendTo(div); |
|
||||||
|
|
||||||
var alrt_p = $("<p />").appendTo(alrt_t); |
|
||||||
|
|
||||||
var alrt_b = $("<a />", { |
|
||||||
"class" : "btn btn-large btn-default", |
|
||||||
"countval" : "" |
|
||||||
}) |
|
||||||
.html("Group by [[countval_btn]]") |
|
||||||
.appendTo(alrt_p); |
|
||||||
|
|
||||||
angular.element(el).append($compile(div)(pscope)); |
|
||||||
|
|
||||||
|
|
||||||
} |
|
||||||
return { |
|
||||||
restrict: "E", |
|
||||||
link: link, |
|
||||||
scope: {} |
|
||||||
} |
|
||||||
}); |
|
||||||
dir.push(ng); |
|
||||||
*/ |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* |
|
||||||
|
|
||||||
///////////////////////////////////////////////
|
|
||||||
// Plain Sunburst Control action directive
|
|
||||||
|
|
||||||
ng = a.directive("countval", function($compile){ |
|
||||||
return function(pscope, element, attrs){ |
|
||||||
element.bind("click", function(){ |
|
||||||
|
|
||||||
console.log('clicked countval switch.'); |
|
||||||
|
|
||||||
if( pscope.countval_btn=="magnitude" ) { |
|
||||||
pscope.countval_btn = "count"; |
|
||||||
} else if( pscope.countval_btn=="count" ) { |
|
||||||
pscope.countval_btn = "magnitude"; |
|
||||||
} |
|
||||||
|
|
||||||
if( pscope.countval_current=="magnitude" ) { |
|
||||||
pscope.countval_current = "count"; |
|
||||||
} else if( pscope.countval_current=="count" ) { |
|
||||||
pscope.countval_current = "magnitude"; |
|
||||||
} |
|
||||||
|
|
||||||
var key = pscope.countval_current; |
|
||||||
|
|
||||||
console.log('updating filter on key '+key); |
|
||||||
|
|
||||||
pscope.updateFilter(key) |
|
||||||
|
|
||||||
pscope.$apply(); |
|
||||||
|
|
||||||
}); |
|
||||||
} |
|
||||||
}); |
|
||||||
dir.push(ng); |
|
||||||
|
|
||||||
*/ |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
///////////////////////////////////////////////
|
|
||||||
// Panels
|
|
||||||
|
|
||||||
|
|
||||||
ng = a.directive('staticDonutPanels', function($compile) { |
|
||||||
|
|
||||||
function link(scope, element, attr) { |
|
||||||
|
|
||||||
var el = element[0]; |
|
||||||
|
|
||||||
var pscope = scope.$parent; |
|
||||||
|
|
||||||
|
|
||||||
// --------------------------
|
|
||||||
// add display for details
|
|
||||||
// about current mouseover selection
|
|
||||||
|
|
||||||
// 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); |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
///////////////////////////////////////////////
|
|
||||||
// Chart
|
|
||||||
|
|
||||||
ng = a.directive('staticDonutChart', function($compile) { |
|
||||||
|
|
||||||
function link(scope, element, attr) { |
|
||||||
|
|
||||||
scope.$parent.$watch('staticData',doStuff); |
|
||||||
|
|
||||||
function doStuff() { |
|
||||||
if(!scope.$parent.staticData) { return } |
|
||||||
buildChart(element, scope.$parent); |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
}; |
|
||||||
|
|
||||||
function buildChart(element,pscope) { |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/////////////////////////////////////////
|
|
||||||
// Create chart
|
|
||||||
//
|
|
||||||
// data has not been loaded yet.
|
|
||||||
// start by initializing variables
|
|
||||||
// that don't depend on the data.
|
|
||||||
|
|
||||||
var chart = $("div#staticdonut_chart"); |
|
||||||
chart.empty(); |
|
||||||
|
|
||||||
///////////////////////////////////
|
|
||||||
// now draw the svg with d3
|
|
||||||
|
|
||||||
// ---------------
|
|
||||||
// the chart itself:
|
|
||||||
|
|
||||||
var margin = { |
|
||||||
top: 10, |
|
||||||
right: 40, |
|
||||||
bottom: 10, |
|
||||||
left: 40 |
|
||||||
}; |
|
||||||
|
|
||||||
var width = 400 - margin.right - margin.left, |
|
||||||
height = 400 - 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("div#staticdonut_chart").append("svg") |
|
||||||
.attr("width", width) |
|
||||||
.attr("height", height) |
|
||||||
.append("g") |
|
||||||
.attr("transform", "translate(" + width / 2 + "," + (height / 2 + 10) + ")"); |
|
||||||
|
|
||||||
// ---------------
|
|
||||||
// chart-specific,
|
|
||||||
// data-independent variables:
|
|
||||||
|
|
||||||
// (example: if you have a custom sort method...)
|
|
||||||
|
|
||||||
// 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 you build it,
|
|
||||||
// you must update it.
|
|
||||||
updateChart(); |
|
||||||
|
|
||||||
|
|
||||||
// ------------------
|
|
||||||
// update chart
|
|
||||||
function updateChart() { |
|
||||||
|
|
||||||
|
|
||||||
var data = pscope.staticData; |
|
||||||
|
|
||||||
var pie = d3.layout.pie() |
|
||||||
.sort(null) |
|
||||||
.value(function(d) { |
|
||||||
return +d.value; |
|
||||||
}); |
|
||||||
|
|
||||||
var g = svg.selectAll(".arc") |
|
||||||
.data(pie(data)) |
|
||||||
.enter().append("g") |
|
||||||
.attr("class", "arc"); |
|
||||||
|
|
||||||
g.append("path") |
|
||||||
.attr("d", arc) |
|
||||||
.style("fill", function(d) { return colors[d.data.label]; }) |
|
||||||
|
|
||||||
g.append("text") |
|
||||||
.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; }) |
|
||||||
.attr("dy", ".35em") |
|
||||||
.text(function(d) { return d.data.label; }); |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
return { |
|
||||||
link: link, |
|
||||||
restrict: "E", |
|
||||||
scope: { } |
|
||||||
}; |
|
||||||
}); |
|
||||||
dir.push(ng); |
|
||||||
|
|
||||||
|
|
||||||
@ -1,61 +0,0 @@ |
|||||||
///////////////////////////////////////
|
|
||||||
//
|
|
||||||
// Static Interactive Sunburst
|
|
||||||
//
|
|
||||||
// Module/Controller
|
|
||||||
//
|
|
||||||
|
|
||||||
var a = angular.module("staticApp", [], function($interpolateProvider) { |
|
||||||
$interpolateProvider.startSymbol('[['); |
|
||||||
$interpolateProvider.endSymbol(']]'); |
|
||||||
} |
|
||||||
); |
|
||||||
|
|
||||||
var datafactory = a.factory('datafactory', function($http, $q) { |
|
||||||
|
|
||||||
return { |
|
||||||
getStaticData: function() { |
|
||||||
var deferred = $q.defer(); |
|
||||||
|
|
||||||
$http.get('staticdonut.json').success(function(data) { |
|
||||||
deferred.resolve(data); |
|
||||||
}).error(function(){ |
|
||||||
console.log('error loading staticdonut.json'); |
|
||||||
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 StaticController($scope,datafactory) { |
|
||||||
$scope.initialize = function() { |
|
||||||
$scope.icd10code="T401"; |
|
||||||
datafactory.getStaticData().then( |
|
||||||
function(data) { |
|
||||||
$scope.staticData = 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 StaticController
|
|
||||||
var c = a.controller("StaticController", ["$scope", "datafactory", StaticController]); |
|
||||||
File diff suppressed because one or more lines are too long
@ -1,38 +0,0 @@ |
|||||||
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; |
|
||||||
} |
|
||||||
@ -1,155 +0,0 @@ |
|||||||
<!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> |
|
||||||
</head> |
|
||||||
|
|
||||||
<body id="index" class="home"> |
|
||||||
<div class="container"> |
|
||||||
<h1><a href="/">dang-sunburst <strong></strong></a></h1> |
|
||||||
<hr /> |
|
||||||
|
|
||||||
|
|
||||||
<link href="/trulia/trulia.css" rel="stylesheet" stype="text/css" /> |
|
||||||
|
|
||||||
<div ng-app="truliaapp"> |
|
||||||
|
|
||||||
<div ng-controller="truliacontroller" ng-init="initialize()"> |
|
||||||
|
|
||||||
<div class="row"> |
|
||||||
<div class="col-sm-12" id="donut_title"> |
|
||||||
<trulia></trulia> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="row"> |
|
||||||
|
|
||||||
<div class="col-sm-10" id="more_donut_text"> |
|
||||||
<div class="row" id="trulia_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="/trulia/trulia_modcontrol.js"></script> |
|
||||||
<script type="text/javascript" src="/trulia/trulia_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> |
|
||||||
@ -1,16 +0,0 @@ |
|||||||
[{"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"}]}] |
|
||||||
@ -1,653 +0,0 @@ |
|||||||
var ng; |
|
||||||
dir = []; |
|
||||||
|
|
||||||
//////////////////////////////////////
|
|
||||||
// Chart Directives
|
|
||||||
//
|
|
||||||
//
|
|
||||||
ng = a.directive('truliahead', function($compile) { |
|
||||||
|
|
||||||
function link(scope, element, attr) { |
|
||||||
|
|
||||||
|
|
||||||
// Fix map for IE
|
|
||||||
if (!('map' in Array.prototype)) { |
|
||||||
Array.prototype.map = function (mapper, that /*opt*/) { |
|
||||||
var other = new Array(this.length); |
|
||||||
for (var i = 0, n = this.length; i < n; i++) |
|
||||||
if (i in this) |
|
||||||
other[i] = mapper.call(that, this[i], i, this); |
|
||||||
return other; |
|
||||||
}; |
|
||||||
}; |
|
||||||
|
|
||||||
var mapSVG = { |
|
||||||
states: ['AK', 'AL', 'AR', 'AZ', 'CA', 'CO', 'CT', 'DE', 'FL', 'GA', 'HI', 'IA', 'ID', 'IL', 'IN', 'KS', 'KY', 'LA', 'MA', 'MD', 'ME', 'MI', 'MN', 'MO', 'MS', 'MT', 'NC', 'ND', 'NE', 'NH', 'NJ', 'NM', 'NV', 'NY', 'OH', 'OK', 'OR', 'PA', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VA', 'VT', 'WA', 'WI', 'WV', 'WY'], |
|
||||||
HI: "M177.865,490.46l1.341-2.46l1.565-0.224l0.223,0.558l-1.453,2.125H177.865z M184.908,487.889l4.248,1.788l1.454-0.225l1.118-2.683l-0.448-2.346l-2.907-0.338l-2.795,1.23L184.908,487.889L184.908,487.889z M206.149,494.819l2.572,3.802l1.677-0.225l0.782-0.336l1.006,0.895l2.572-0.112l0.67-1.006l-2.012-1.23l-1.341-2.572l-1.454-2.458 l-4.024,2.012L206.149,494.819L206.149,494.819z M220.124,500.969l0.894-1.341l3.242,0.671l0.447-0.336l4.249,0.447l-0.225,0.894 l-1.788,1.007l-3.017-0.225L220.124,500.969z M223.813,504.546l1.342,2.685l2.125-0.784l0.223-1.118l-1.118-1.452l-2.572-0.225 V504.546L223.813,504.546z M228.62,503.763l1.565-2.011l3.242,1.676l3.019,0.784l3.018,1.9v1.341l-2.459,1.23l-3.355,0.67 l-1.677-1.005L228.62,503.763L228.62,503.763z M240.135,514.497l1.118-0.895l2.348,1.118l5.254,2.46l2.348,1.454l1.118,1.677 l1.342,3.018l2.795,1.79l-0.223,0.893l-2.684,2.237l-2.907,1.005l-1.005-0.447l-2.124,1.23l-1.677,2.237l-1.565,2.012l-1.23-0.112 l-2.46-1.788l-0.223-3.132l0.446-1.677l-1.119-3.912l-1.452-1.23l-0.112-1.787l1.565-0.672l1.454-2.125l0.335-0.67l-1.117-1.229 L240.135,514.497L240.135,514.497z", |
|
||||||
AK: "M125.991,445.07l-0.223,59.029l1.117,0.672l2.125,0.11l1.006-0.782h1.789 l0.111,2.013l4.808,4.696l0.335,1.787l2.348-1.339l0.447-0.112l0.224-2.124l1.006-1.118l0.782-0.112l1.342-1.005l2.124,1.453 l0.447,2.012l1.342,0.782l0.782,1.678l2.684,1.229l2.347,4.137l1.9,2.682l1.565,1.902l1.006,2.57l3.465,1.229l3.577,1.456 l0.671,3.017l0.335,2.124l-0.67,2.348l-1.23,1.565l-1.118-0.558l-1.006-2.124l-1.9-1.008l-1.23-0.781l-0.559,0.558l1.006,1.9 l0.112,2.572l-0.782,0.336l-1.342-1.343l-1.453-0.892l0.335,1.118l0.895,1.23l-0.559,0.557c0,0-0.559-0.223-0.895-0.67 c-0.335-0.448-1.453-2.349-1.453-2.349l-0.671-1.564c0,0-0.224,0.895-0.67,0.671c-0.447-0.225-0.895-1.006-0.895-1.006l1.23-1.342 l-1.006-1.007V527.8h-0.559l-0.559,2.347l-0.782,0.336l-0.671-2.57l-0.447-2.572l-0.559-0.335l0.224,3.911v0.784l-1.006-0.895 l-2.46-4.134l-1.454-0.337l-0.447-2.571l-1.118-2.012l-1.118-0.783v-1.565l1.453-0.893l-0.335-0.225l-1.789,0.446l-2.347-1.676 l-1.79-2.012l-3.354-1.788l-2.795-1.789l0.894-2.235v-1.119l-1.229,1.119l-2.013,0.782l-2.571-0.782l-3.913-1.677h-3.802 l-0.447,0.335l-4.472-2.684l-1.453-0.223l-1.901-4.025l-2.459,0.223l-2.46,1.007l0.335,3.13l0.783-2.013l0.67,0.225l-1.005,3.018 l2.236-1.9l0.447,1.117l-2.682,3.02l-0.896-0.225l-0.335-1.342l-0.895-0.558l-0.894,0.783l-1.9-1.229l-2.124,1.452l-1.23,1.454 l-2.348,1.454l-3.243-0.112l-0.334-1.453l2.571-0.447v-0.895l-1.565-0.447l0.67-1.676l1.565-2.684v-1.229l0.111-0.558l3.019-1.566 l0.671,0.894h1.9l-0.894-1.788l-2.571-0.224l-3.466,1.901l-1.677,2.347l-1.229,1.788l-0.782,1.566l-2.907,1.007l-2.124,1.789 l-0.224,1.117l1.565,0.671l0.559,1.454l-1.9,2.236l-4.472,2.907l-5.365,2.907l-1.454,0.781l-3.689,0.784l-3.689,1.564l1.23,0.895 l-1.006,1.005l-0.335,0.784l-1.9-0.673l-2.235,0.112l-0.559,1.565h-0.671l0.223-1.677l-2.459,0.895l-2.012,0.671l-2.348-0.893 l-2.012,1.34h-2.236l-1.454,0.894l-1.118,0.559l-1.454-0.225l-1.789-0.782l-1.565,0.447l-0.67,0.67l-1.118-0.781v-1.34l2.124-0.895 l4.361,0.447l3.018-1.119l1.454-1.453l2.013-0.448l1.229-0.559l1.901,0.112l1.118,0.895l0.671-0.224l1.565-1.902l2.124-0.671 l2.348-0.446l0.894-0.223l0.448,0.335h0.559l0.894-2.571l2.795-1.005l1.341-2.572l1.565-3.13l1.118-1.007l0.224-1.789l-1.118,0.895 l-2.348,0.446l-0.447-1.676l-0.894-0.224l-0.671,0.671l-0.112,2.012l-1.006-0.112l-1.006-4.024l-0.895,0.894l-0.782-0.335 l-0.224-1.342l-2.795,0.111l-1.453,0.783l-1.789-0.223l1.007-1.007l0.335-1.788l-0.448-1.341l1.006-0.671l0.894-0.113l-0.447-1.229 v-3.019l-0.671-0.67l-0.559,1.005h-4.248l-1.006-0.893l-0.448-2.683l-1.453-2.461v-0.67l1.453-0.559l0.112-1.454l0.783-0.782 l-0.559-0.335l-0.895,0.335l-0.782-1.902l0.671-3.465l3.13-2.236l1.789-1.119l1.342-2.569l1.9-0.895l1.789,0.783l0.223,1.676 l1.677-0.225l2.236-1.676l1.118,0.446l0.671,0.448h1.118l1.565-0.894l0.559-3.019c0,0,0.224-2.012,0.671-2.347 c0.447-0.337,0.67-0.672,0.67-0.672l-0.782-1.341l-1.789,0.558l-2.236,0.56l-1.341-0.336l-2.46-1.23l-3.465-0.111l-2.46-2.572 l0.335-2.683l0.447-1.676l-1.454-1.23l-1.341-2.572l0.335-0.557l4.695-0.335h1.453l0.671,0.67h0.448l-0.112-1.118l2.683-0.447 l1.789,0.223l1.006,0.783l-1.006,1.454l-0.335,1.006l1.9,1.119l3.466,1.228l1.23-0.67l-1.565-3.018l-0.671-2.237l0.671-0.559 l-2.348-1.341l-0.335-0.782l0.335-1.119l-0.559-2.683l-2.012-3.241l-1.677-2.908l2.013-1.342h2.236l1.23,0.448l2.906-0.111 l2.572-2.459l0.783-2.124l2.571-1.678l1.118,0.672l1.901-0.448l2.571-1.454l0.783-0.111l0.67,0.56l3.13-0.112l1.9-2.124h0.783 l2.459,1.676l1.342,1.456l-0.335,0.781l0.447,0.783l1.118-1.118l2.683,0.223l0.224,2.572l1.342,1.006l4.919,0.447l4.36,2.907 l1.006-0.671l3.577,1.788l1.453-0.447l1.342-0.557l3.354,1.34l3.018,2.014V445.07z M46.392,465.082l1.453,3.688l-0.112,0.671 l-2.013-0.223l-1.229-2.794l-1.23-1.007h-1.677l-0.111-1.788l1.23-1.678l0.782,1.678l1.006,1.006L46.392,465.082z M44.603,488.224 l2.572,0.559l2.571,0.67l0.559,0.673l-1.118,2.57l-2.125-0.11l-2.348-2.459L44.603,488.224z M30.292,478.497l0.783,1.79 l0.782,1.117l-0.782,0.559l-1.454-2.124v-1.342H30.292z M20.79,529.03l2.348-1.565l2.347-0.673l1.789,0.226l0.335,1.118 l1.341,0.335l1.341-1.34l-0.224-1.119l1.9-0.448l2.013,1.789l-0.782,1.23l-3.019,0.783l-1.9-0.336l-2.572-0.782l-3.018,1.005 l-1.118,0.224L20.79,529.03z M54.664,525.9l1.118,1.34l1.453-1.118l-1.006-0.894L54.664,525.9z M56.676,528.023l0.783-1.566 l1.453,0.225l-0.559,1.341H56.676z M72.999,526.682l1.006,1.231l0.67-0.783l-0.559-1.342L72.999,526.682z M79.036,518.075 l0.783,4.024l2.013,0.559l3.465-2.012l3.019-1.79l-1.118-1.676l0.335-1.677l-1.453,0.894l-2.012-0.559l1.118-0.782l1.342,0.559 l2.682-1.23l0.336-1.006l-1.677-0.557l0.559-1.343l-1.9,1.343l-3.242,2.459l-3.354,2.012L79.036,518.075z M108.327,504.323 l1.677-1.007l-0.67-1.23l-1.23,0.672L108.327,504.323z", |
|
||||||
FL: "M539.191,438.81l1.444,5.672l2.581,6.737l3.689,6.485l2.57,4.36l3.356,3.802 l2.795,2.569l1.118,2.013l-0.784,0.894l-0.557,0.895l2.011,5.141l2.013,2.013l1.789,3.689l2.458,4.024l3.131,5.702l0.896,5.256 l0.336,8.272l0.446,1.23l-0.226,2.348l-1.674,0.894l0.223,1.342l-0.446,1.341l0.224,1.676l0.333,1.342l-1.9,2.237l-2.124,1.005 l-2.682,0.112l-1.008,1.118l-1.676,0.671l-0.895-0.336l-0.783-0.67l-0.223-2.013l-0.559-2.347l-2.349-3.578l-2.458-1.566 l-2.683-0.223l-0.56,0.895l-2.124-3.02l-0.446-2.46l-1.79-2.795l-1.229-0.782l-1.118,1.454l-1.229-0.224l-1.455-3.467l-2.012-2.683 l-2.012-3.688l-1.788-2.125l-2.46-2.57l1.452-1.677l2.235-3.802l-0.111-1.117l-3.131-0.67l-1.116,0.447l0.223,0.445l1.788,0.672 l-1.004,3.13l-0.56,0.336l-1.229-2.794l-0.894-3.355l-0.225-1.9l1.005-3.242v-6.596l-2.122-2.57l-0.896-2.123l-3.578-0.895 l-1.343-0.448l-1.116-1.788l-2.348-1.119l-0.783-2.347l-1.9-0.671l-1.677-2.571l-2.907-1.007l-2.012-1.007h-1.788l-2.796,0.559 l-0.113,1.339l0.561,0.673l-0.336,0.783l-2.123-0.112l-2.572,2.459l-2.46,1.341h-2.682l-2.237,0.894l-0.224-1.901l-1.118-1.341 l-2.013-0.783l-1.118-1.006l-5.589-2.684l-5.255-1.229l-3.017,0.447l-4.138,0.337l-4.137,1.453l-2.405,0.423l-0.163-5.567 l-1.79-1.341l-1.229-1.228l0.223-2.125l7.044-0.895l17.665-2.012l4.695-0.447l4.247-0.11l1.79,2.682l1.006,1.006l5.478,0.112 l7.482-0.446l14.876-0.895l3.767-0.465l3.165,0.019l0.111,2.012l1.79,0.558l0.223-3.018l-1.117-3.132l0.782-1.118l4.027,0.56 L539.191,438.81L539.191,438.81z M547.745,530.987l1.676-0.447l0.896-0.167l1.004-1.622l1.622-1.118l0.895,0.335l1.175,0.226 l0.28,0.724l-2.406,0.84l-2.906,1.006l-1.621,0.84L547.745,530.987z M557.078,527.52l0.84,0.728l1.9-1.454l3.69-2.906l2.57-2.685 l1.735-4.583l0.67-1.175l0.113-2.346l-0.505,0.334l-0.67,1.957l-1.006,3.186l-2.235,3.634l-3.018,2.907l-2.347,1.339 L557.078,527.52z", |
|
||||||
SC: "M543.103,416.897l-1.229,0.671l-1.788-0.893l-0.448-1.455l-0.893-2.459 l-1.565-1.453l-1.79-0.448l-1.116-3.353l-1.901-4.136l-2.906-1.341l-1.454-1.341l-0.894-1.789l-1.454-1.34l-1.565-0.895 l-1.565-2.011l-2.125-1.566l-3.131-1.229l-0.333-1.007l-1.677-2.013l-0.335-1.005l-2.347-3.579l-2.35,0.112l-2.793-1.676 l-0.896-0.893l-0.224-1.23l0.56-1.342l1.565-0.673l-0.225-1.452l4.246-1.789l6.262-3.131l5.031-0.558l11.404-0.335l1.565,1.341 l1.118,2.238l3.017-0.338l8.72-1.006l2.013,0.558l8.719,5.256l6.991,5.616l-3.749,3.774l-1.788,4.248l-0.335,4.361l-1.118,0.559 l-0.782,1.899l-1.676,0.447l-1.455,2.46l-1.9,1.902l-1.565,2.348l-1.118,0.557l-2.46,2.349l-2.011,0.111l0.671,2.237l-3.465,3.801 L543.103,416.897L543.103,416.897z", |
|
||||||
GA: "M493.578,378.887l-3.354,0.558l-5.815,0.782l-5.924,0.616v1.51l0.112,1.455 l0.447,2.347l2.347,5.478l1.677,6.819l1.006,4.249l1.118,3.354l1.006,4.806l1.452,4.36l1.79,2.348l0.335,2.35l1.342,0.557 l0.112,1.455l-1.23,3.352l-0.335,2.237l-0.111,1.341l1.117,3.019l0.223,3.689l-0.557,1.677l0.446,0.559l1.006,0.558l0.445,2.347 l1.79,2.684l1.006,1.006l5.478,0.112l7.482-0.446l14.876-0.895l3.767-0.465l3.165,0.017l0.111,2.014l1.79,0.558l0.223-3.018 l-1.117-3.132l0.782-1.118l4.027,0.56l3.442,0.219l-0.539-4.356l1.566-6.931l1.005-2.907l-0.335-1.788l2.796-4.807l-0.416-1.12 l-1.261,0.671l-1.788-0.893l-0.448-1.455l-0.893-2.459l-1.565-1.453l-1.79-0.448l-1.116-3.353l-1.901-4.136l-2.906-1.341 l-1.454-1.341l-0.894-1.789l-1.454-1.34l-1.565-0.895l-1.565-2.011l-2.125-1.566l-3.131-1.229l-0.333-1.007l-1.677-2.013 l-0.335-1.005l-2.347-3.579l-2.35,0.112l-2.793-1.676l-0.896-0.895l-0.224-1.23l0.56-1.34l1.565-0.673l-0.113-1.579l-1.229,0.351 l-4.027,0.67l-4.805,0.558L493.578,378.887L493.578,378.887z", |
|
||||||
AL: "M449.306,454.127l-1.118-10.51l-1.9-12.968l0.112-9.725l0.559-21.465 l-0.111-11.517l0.115-4.438l5.363-0.255l19.228-1.789l7.034-0.616l-0.102,1.51l0.112,1.453l0.447,2.349l2.347,5.478l1.677,6.819 l1.006,4.249l1.118,3.354l1.006,4.806l1.452,4.36l1.79,2.348l0.335,2.35l1.342,0.557l0.112,1.455l-1.23,3.352l-0.335,2.237 l-0.111,1.341l1.117,3.019l0.223,3.689l-0.557,1.677l0.446,0.559l1.006,0.558l0.558,2.459h-4.36l-4.695,0.447l-17.665,2.012 l-7.044,0.895l-0.223,2.125l1.229,1.228l1.79,1.341l0.402,5.488l-4.539,1.78l-1.902-0.225l1.902-1.34v-0.672l-2.125-4.136 l-1.565-0.448l-1.006,3.02l-0.896,1.9l-0.445-0.111H449.306L449.306,454.127z", |
|
||||||
NC: "M592.116,337.739l1.182,3.249l2.461,4.472l1.677,1.677l0.446,1.565l-1.676,0.112 l0.559,0.448l-0.225,2.906l-1.789,0.893l-0.446,1.455l-0.896,2.013l-2.57,1.117l-1.677-0.223l-1.006-0.112l-1.118-0.895 l0.224,0.895v0.67h1.343l0.558,0.895l-1.342,4.36h2.908l0.445,1.119l1.565-1.565l0.895-0.336l-1.341,2.46l-2.126,3.354h-0.894 l-0.782-0.335l-1.902,0.448l-3.576,1.677l-4.473,3.689l-2.348,3.241l-1.341,4.473l-0.335,1.675l-3.242,0.337l-4.076,1.534 l-6.878-5.671l-8.721-5.255l-2.013-0.558l-8.72,1.006l-3.017,0.338l-1.118-2.238l-1.565-1.341l-11.404,0.333l-5.031,0.56 l-6.262,3.131l-4.246,1.789l-1.117,0.224l-4.027,0.67l-4.805,0.558l-4.696,0.337l0.223-3.353l1.231-1.007l1.9-0.447l0.447-2.57 l2.906-1.902l2.685-1.005l2.907-2.461l3.016-1.453l0.448-2.123l2.683-2.685l0.445-0.111c0,0,0,0.783,0.561,0.783 c0.56,0,1.341,0.223,1.341,0.223l1.566-2.459l1.452-0.448l1.565,0.225l1.12-2.46l2.011-1.79l0.337-1.453v-2.739l3.13,0.504 l4.934-0.893l10.94-1.342l11.851-1.79l14.247-2.607l13.255-2.645l7.938-2.012L592.116,337.739L592.116,337.739z M594.81,360.551 l1.789-1.732l2.181-1.789l1.061-0.447l0.112-1.397l-0.445-4.249l-1.007-1.622l-0.447-1.285l0.503-0.167l1.902,3.802l0.279,3.074 l-0.113,2.348l-2.347,1.062l-1.957,1.677l-0.782,0.838L594.81,360.551z", |
|
||||||
TN: "M498.722,353.061l-35.889,3.468l-10.898,1.23l-3.195,0.354l-2.676-0.018v2.681 l-5.813,0.335l-4.808,0.448l-7.673,0.037l-0.183,4.036l-1.479,4.339l-0.687,2.087l-0.932,3.03l-0.224,1.788l-2.795,1.565 l1.004,2.46l-0.671,3.018l-1.061,1.174l5.645-0.056l16.658-1.34l3.69-0.113l5.59-0.335l19.228-1.789l7.034-0.558l5.821-0.673 l5.815-0.782l3.354-0.558l0.223-3.353l1.231-1.007l1.9-0.447l0.447-2.57l2.906-1.902l2.685-1.005l2.907-2.461l3.016-1.453 l0.448-2.123l2.683-2.685l0.445-0.111c0,0,0,0.783,0.561,0.783c0.56,0,1.341,0.223,1.341,0.223l1.566-2.459l1.452-0.448 l1.565,0.225l1.12-2.46l2.011-1.79l0.337-1.453l0.122-2.72l-1.576,0.037l-1.677,1.341l-5.478,0.114l-8.296,1.313L498.722,353.061 L498.722,353.061z", |
|
||||||
RI: "M621.136,255.688l-0.333-2.908l-0.557-3.019l-1.175-4.08l3.967-1.063l1.119,0.782 l2.347,3.019l2.012,3.075l-2.013,1.062l-0.895-0.111l-0.782,1.229l-1.677,1.342L621.136,255.688L621.136,255.688z", |
|
||||||
CT: "M621.473,255.688l-0.671-2.908l-0.557-3.019l-1.119-4.136l-3.577,0.782 l-15.093,3.298l0.448,2.292l1.005,5.031v5.59l-0.784,1.565l1.268,1.458l3.428-2.352l2.458-2.236l1.344-1.454l0.558,0.448 l1.899-1.007l3.578-0.782L621.473,255.688L621.473,255.688z", |
|
||||||
MA: "M639.052,251.558l1.502-0.474l0.316-1.187l0.711,0.079l0.713,1.581l-0.868,0.316 l-2.689,0.079L639.052,251.558L639.052,251.558z M632.571,252.111l1.581-1.818h1.106l1.265,1.028l-1.659,0.711l-1.503,0.712 L632.571,252.111L632.571,252.111z M608.505,236.905l12.075-2.907l1.565-0.447l1.455-2.237l2.583-1.15l1.999,3.052l-1.677,3.577 l-0.225,1.006l1.342,1.789l0.784-0.559h1.23l1.565,1.788l2.683,4.136l2.459,0.335l1.565-0.671l1.229-1.229l-0.559-1.901 l-1.454-1.118l-1.004,0.559l-0.67-0.894l0.333-0.335l1.453-0.112l1.23,0.559l1.341,1.677l0.671,2.012l0.225,1.677l-2.905,1.007 l-2.685,1.341l-2.683,3.13l-1.342,1.006v-0.671l1.676-1.007l0.336-1.23l-0.558-2.124l-2.013,1.006l-0.557,1.007l0.333,1.565 l-1.9,1.006l-1.9-3.13l-2.347-3.019l-1.119-0.782l-3.967,1.063l-3.522,0.726l-15.093,3.298l-0.671-3.968l0.447-7.323l3.579-0.615 L608.505,236.905", |
|
||||||
ME: "M655.123,184.809l1.343,1.453l1.565,2.571v1.342l-1.454,3.242l-1.343,0.447 l-2.347,2.124l-3.354,3.801c0,0-0.447,0-0.894,0c-0.449,0-0.672-1.454-0.672-1.454l-1.229,0.112l-0.671,1.006l-1.678,1.006 l-0.67,1.007l1.119,1.007l-0.335,0.447l-0.337,1.9l-1.34-0.112v-1.118l-0.225-0.894l-1.005,0.224l-1.23-2.236l-1.454,0.894 l0.894,1.006l0.226,0.783l-0.559,0.894l0.223,2.124l0.111,1.118l-1.117,1.788l-2.013,0.336l-0.224,2.012l-3.689,2.124l-0.894,0.336 l-1.118-1.006l-2.124,2.46l0.67,2.236l-1.006,0.894l-0.111,3.019l-1.091,5.271l-1.703-0.799l-0.336-2.124l-2.684-0.782 l-0.223-1.901l-5.03-16.21l-3.297-10.218l1.69-0.239l1.046,0.284v-1.788l0.56-3.801l1.787-3.243l1.006-2.794l-1.342-1.678v-4.136 l0.559-0.671l0.56-1.901l-0.111-1.006l-0.114-3.354l1.23-3.354l2.013-6.148l1.454-2.906h0.894l0.895,0.111v0.782l0.896,1.565 l1.899,0.448l0.559-0.559v-0.671l2.795-2.013l1.229-1.23l1.006,0.112l4.137,1.677l1.341,0.671l6.262,20.683h4.136l0.558,1.341 l0.114,3.354l2.011,1.565h0.559l0.113-0.335l-0.335-0.782L655.123,184.809L655.123,184.809z M640.646,205.658l1.064-1.063 l0.951,0.727l0.391,1.677l-1.175,0.615L640.646,205.658L640.646,205.658z M645.287,201.577l1.231,1.285 c0,0,0.893,0.057,0.893-0.167c0-0.223,0.167-1.397,0.167-1.397l0.617-0.559l-0.56-1.23l-1.397,0.503L645.287,201.577z", |
|
||||||
NH: "M626.183,230.138l0.208-1.058l0.754-2.276l-1.758-0.632l-0.336-2.124 l-2.684-0.782l-0.223-1.901l-5.03-16.21l-3.183-10.058l-0.62-0.003l-0.447,1.118l-0.448-0.335l-0.67-0.671l-1.006,1.342 l-0.661,3.794l0.218,3.919l1.34,1.9v2.795l-2.572,2.795l-1.79,0.782v0.783l0.784,1.23v5.925l-0.559,6.372l-0.111,3.354l0.67,0.894 l-0.112,3.13l-0.335,1.23l1.008,1.398l11.961-2.851l1.565-0.447l1.455-2.237L626.183,230.138L626.183,230.138z", |
|
||||||
VT: "M600.343,238.582l-0.558-3.913l-2.123-7.602l-0.449-0.225l-2.011-0.893 l0.558-2.013l-0.558-1.454l-1.79-3.13l0.672-2.684l-0.559-3.578l-1.676-4.471l-0.558-3.404l18.78-4.98l0.226,4.024l1.34,1.9v2.795 l-2.572,2.795l-1.79,0.782v0.783l0.784,1.23v5.926l-0.559,6.371l-0.111,3.354l0.67,0.894l-0.112,3.13l-0.335,1.23l1.008,1.398 l-4.807,0.95L600.343,238.582L600.343,238.582z", |
|
||||||
NY: "M589.389,262.954l-0.784-0.671l-1.787-0.111l-1.565-1.342l-1.677-3.688 l-2.077-0.644l-1.614-1.481l-12.854,2.794l-29.738,6.037l-6.148,1.007l-0.511-4.787l1.852-1.249l0.894-0.783l0.67-1.117 l1.229-0.782l1.343-1.23l0.335-1.118l1.454-1.901l0.782-0.67l-0.11-0.671l-0.895-2.124l-1.231-0.112l-1.341-4.248l2.012-1.23 l3.02-1.006l2.794-0.895l2.236-0.336l4.36-0.111l1.341,0.894l1.117,0.112l1.454-0.895l1.789-0.782l3.577-0.336l1.453-1.23 l1.23-2.236l1.119-1.341h1.453l1.34-0.783l0.113-1.565l-1.006-1.454l-0.223-1.006l0.783-1.454v-1.007h-1.231l-1.228-0.558 l-0.559-0.782l-0.113-1.788l4.026-3.801l0.445-0.559l1.007-2.013l2.013-3.131l1.901-2.57l1.453-1.678l1.669-1.262l2.131-0.861 l3.801-0.895l2.236,0.112l3.129-1.007l5.232-1.432l0.361,3.444l1.676,4.471l0.558,3.578l-0.671,2.684l1.79,3.13l0.558,1.454 l-0.558,2.013l2.011,0.893l0.449,0.225l2.123,7.602l0.335,3.577l-0.335,7.49l0.558,3.801l0.561,2.459l1.005,5.031v5.59 l-0.784,1.565l1.273,1.378l-0.155,1.082l-1.341,1.23l0.221,0.894l0.896-0.223l1.006-0.895l1.565-1.789l0.783-0.447l1.119,0.447 l1.565,0.112l5.478-2.683l2.011-1.901l0.896-1.006l2.906,1.118l-2.349,2.46l-2.682,2.013l-4.919,3.689l-1.79,0.671l-4.024,1.341 l-2.794,0.783l-1.049-0.369l-0.402-2.315l0.334-1.901l-0.114-1.453l-1.787-0.783l-3.13-0.671l-2.684-0.782L589.389,262.954 L589.389,262.954z", |
|
||||||
NJ: "M589.389,262.954l-1.455,1.677v2.124l-1.341,2.124l-0.111,1.118l0.895,0.894 l-0.113,1.677l-1.566,0.782l0.56,1.901l0.113,0.782l1.9,0.224l0.672,1.789l2.458,1.676l1.677,1.118v0.559l-2.237,2.124 l-1.116,1.565l-1.006,1.9l-1.565,0.894l-0.838,0.503l-0.168,0.839l-0.422,1.803l0.756,1.552l2.235,2.012l3.354,1.565l2.796,0.447 l0.111,1.007l-0.557,0.67l0.223,1.9h0.559l1.452-1.677l0.56-3.354l1.901-2.795l2.124-4.472l0.783-3.801l-0.445-0.783l-0.115-6.484 l-1.116-2.348l-0.784,0.559l-1.899,0.224l-0.335-0.336l0.782-0.671l1.453-1.341l0.045-0.757l-0.264-2.374l0.334-1.901l-0.114-1.453 l-1.787-0.782l-3.13-0.671l-2.684-0.782L589.389,262.954L589.389,262.954z", |
|
||||||
PA: "M586.37,288.332l0.782-0.448l1.565-0.894l1.006-1.9l1.116-1.565l2.237-2.124 v-0.559l-1.677-1.118l-2.458-1.677l-0.672-1.789l-1.9-0.224l-0.113-0.782l-0.56-1.901l1.566-0.782l0.113-1.677l-0.895-0.895 l0.111-1.118l1.341-2.124v-2.124l1.622-1.677l-0.951-0.671l-1.787-0.111l-1.565-1.342l-1.677-3.689l-2.077-0.644l-1.614-1.481 l-12.854,2.794l-29.738,6.037l-6.148,1.007l-0.343-4.899l-3.794,3.893l-0.896,0.335l-2.906,2.081l2.013,13.235l1.168,7.434 l2.47,13.321l3.202-0.52l8.259-1.038l26.229-5.302l10.288-1.953l5.739-1.122l0.893-0.871l1.452-1.118H586.37L586.37,288.332z", |
|
||||||
DE: "M585.585,290.68l0.561-1.454l0.168-0.894h-1.398l-1.452,1.118l-1.008,1.006 l1.008,2.907l1.565,3.913l1.454,6.707l1.117,4.36l3.465-0.112l4.248-0.838l-1.566-5.087l-0.671,0.336l-2.458-1.677l-1.231-3.243 l-1.342-2.46l-1.565-0.671l-1.454-2.459L585.585,290.68L585.585,290.68z", |
|
||||||
MD: "M595.312,307.337l-4.247,0.894l-3.465,0.112l-1.117-4.36l-1.454-6.707 l-1.565-3.913l-0.893-3.042l-5.739,1.122l-10.288,1.953l-25.9,5.222l0.782,3.466l0.673,3.913l0.223-0.224l1.454-1.677l1.563-2.124 l1.677-0.111l1.007-1.007l1.23-1.789l0.894,0.448l2.014-0.224l1.787-1.454l1.388-1.006l1.277-0.334l1.14,0.781l2.01,1.007 l1.342,1.23l0.84,1.062l2.849,1.173v2.013l3.802,0.894l1.341,0.894l0.67-1.341l1.565,1.118l-1.004,2.236l-0.225,1.901l-1.229,1.789 v1.454l0.447,1.23l3.501,0.936l2.981-0.043l2.125,0.671l1.454,0.224l0.67-1.454l-1.006-1.453v-1.23l-1.677-1.453l-1.454-3.801 l0.896-3.689l-0.112-1.454l-0.895-0.894c0,0,1.006-1.118,1.006-1.565c0-0.448,0.336-1.454,0.336-1.454l1.341-0.894l1.343-1.118 l0.335,0.671l-1.006,1.118l-0.894,2.571l0.223,0.783l1.231,0.224l0.335,3.801l-1.453,0.671l0.224,2.46l0.334-0.112l0.782-1.342 l1.12,1.23l-1.12,0.895l-0.222,2.348l1.787,2.348l2.684,0.335l1.119-0.559l2.236,3.577l1.229,0.336v2.46l-1.566,3.352l-0.335,4.808 l1.006,2.348l1.006,0.112l1.341-2.907l0.56-2.459l0.111-4.919l2.126-3.355l1.453-4.807V307.337L595.312,307.337z M583.969,314.1 l0.781,1.733l0.112,1.229l0.782,1.286c0,0,0.616-0.614,0.616-0.839c0-0.223-0.504-2.124-0.504-2.124l-0.503-1.621L583.969,314.1z", |
|
||||||
WV: "M540.657,298.664l0.769,3.419l0.673,3.913l0.223-0.224l1.454-1.677l1.563-2.125 l1.677-0.111l1.007-1.007l1.23-1.789l0.894,0.448l2.014-0.224l1.787-1.454l1.388-1.006l1.277-0.334l1.14,0.781l2.01,1.007 l1.342,1.23l0.952,0.894l-0.727,3.466l-3.915-2.124l-3.129-1.23l-0.114,3.689l-0.333,1.453l-1.118,1.901l-0.445,1.118l-2.127,1.677 l-0.335,1.565l-2.347,0.223l-0.225,2.125l-0.781,3.801h-1.79l-0.894-0.56l-1.118-1.9l-1.231,0.112l-0.223,3.018l-1.453,4.584 l-3.467,7.491l0.56,0.895l-0.112,1.899l-1.455,1.342l-1.004-0.225l-2.237,1.678l-1.788-0.671l-1.231,3.241 c0,0-2.569,0.558-3.017,0.672c-0.446,0.112-1.677-0.895-1.677-0.895l-1.676,1.565l-1.789,0.447l-2.013-0.558l-0.896-0.894 l-1.515-2.091l-2.172-1.374l-1.791-1.901l-2.01-2.572l-0.446-1.565l-1.79-1.006l-0.559-1.118l-0.168-3.635l1.509-0.055l1.343-0.559 l0.112-1.901l1.118-1.006l0.111-3.466l0.672-2.683l0.893-0.447l0.894,0.782l0.336,1.23l1.229-0.671l0.336-1.117l-0.782-1.23v-1.677 l0.671-0.894l1.565-2.347l0.896-1.007l1.452,0.335l1.565-1.118l2.125-2.347l1.564-2.683l0.225-3.913l0.336-3.465v-3.243 l-0.782-2.124l0.67-1.006l0.887-0.895l2.414,13.712l3.202-0.52L540.657,298.664L540.657,298.664z", |
|
||||||
VA: "M516.608,336.852l1.34,2.459l0.896,0.894l2.013,0.558l1.789-0.446l1.676-1.566 c0,0,1.231,1.007,1.677,0.895c0.447-0.114,3.017-0.672,3.017-0.672l1.231-3.241l1.788,0.671l2.237-1.678l1.004,0.225l1.455-1.342 l0.112-1.899l-0.56-0.895l3.467-7.491l1.453-4.584l0.223-3.018l1.231-0.112l1.118,1.902l0.894,0.558h1.788l0.783-3.801l0.225-2.125 l2.347-0.223l0.335-1.565l2.127-1.677l0.445-1.118l1.118-1.901l0.333-1.453l0.114-3.689l3.129,1.23l3.915,2.124l0.557-3.522 l2.907,1.397v2.013l3.802,0.894l1.341,0.894l0.67-1.341l1.565,1.118l-1.004,2.236l-0.225,1.901l-1.229,1.789v1.454l0.447,1.23 l3.501,0.937l1.304,1.075l3.577,0.224l1.789,1.565l2.236,0.447l0.895,0.895l-0.337,3.131l0.672,0.67l0.112,1.565l0.895,1.452 l-0.113,1.231l-2.236-0.782v0.671l1.343,1.118v0.782l1.006,0.782l0.894,1.118l0.113,1.564l-1.565,1.007l0.224,0.335l1.787-0.335 l2.237-0.449l0.782-0.111l2.819,4.86l-3.378,1.178l-7.936,2.012l-13.255,2.645l-14.247,2.607l-11.851,1.79l-10.94,1.342 l-4.934,0.893l-3.12-0.426l-1.464-0.021l-1.676,1.341l-5.478,0.114l-8.296,1.313l-6.913,0.645l1.906-0.954l3.913-2.347l2.684-1.453 v-1.454l1.229-1.23l3.131-3.69l2.905-2.461L516.608,336.852L516.608,336.852z", |
|
||||||
KY: "M516.528,337.365l-2.157,2.168l-2.905,2.461l-3.131,3.69l-1.229,1.23v1.454 l-2.684,1.453l-3.913,2.347l-1.806,0.972l-35.871,3.389l-10.898,1.23l-3.195,0.354l-2.676-0.018v2.681l-5.813,0.335l-4.808,0.448 l-7.212,0.143l0.693-0.86l1.508-1.219l1.424-0.789l0.158-2.214l0.632-1.264l-1.109-1.756l0.553-1.318l1.566-1.231l1.452-0.446 l1.902,0.895l2.46,0.893l0.782-0.224l0.112-1.564l-0.894-1.678l0.223-1.565l1.343-1.006l1.786-0.448l1.12-0.447l-0.559-1.229 l-0.448-1.342l0.783-0.558l0.727-2.292l2.068-1.174l4.023-0.671l2.46-0.335l1.007,1.342l1.229,0.559l1.232-2.237l2.01-1.006 l1.344,1.118l0.558,0.781l1.452-0.335l-0.111-2.347l2.013-1.119l0.784-0.559l0.782,1.118h3.241l0.56-1.452l-0.224-1.566 l2.013-2.459l3.241-2.683l0.335-3.131l1.902-0.224l2.683-1.23l1.902-1.341l-0.225-1.341l-1.006-1.007l0.39-1.508l2.852-0.168 l1.676-0.558l2.012,1.117l1.119,3.019l4.025,0.225l1.229,1.229l1.452,0.112l1.679-1.006l2.125,0.335l0.893,1.006l1.902-1.788 l1.229-0.894h1.118l0.447,1.901l1.23,0.67l2.46,1.454l0.111,3.801l0.559,1.118l1.79,1.006l0.446,1.565l2.01,2.572l1.791,1.901 L516.528,337.365z", |
|
||||||
OH: "M523.206,266.11l-4.92,2.882l-2.685,1.565l-2.347,2.571l-2.796,2.683 l-2.235,0.559l-2.012,0.335l-3.803,1.789l-1.453,0.112l-2.346-2.124l-3.577,0.447l-1.79-1.006l-1.646-0.934l-3.385,0.486 l-7.043,1.118l-5.365,0.839l0.894,10.117l1.231,9.503l1.789,16.21l0.39,3.969l2.852-0.168l1.676-0.558l2.012,1.117l1.119,3.019 l4.025,0.225l1.229,1.229l1.452,0.112l1.679-1.006l2.125,0.335l0.893,1.006l1.902-1.788l1.229-0.894h1.118l0.446,1.901l1.231,0.67 l2.403,1.621l1.509-0.055l1.343-0.559l0.112-1.901l1.118-1.006l0.111-3.466l0.672-2.683l0.893-0.447l0.894,0.782l0.336,1.23 l1.229-0.671l0.336-1.118l-0.782-1.229v-1.677l0.671-0.894l1.565-2.347l0.896-1.007l1.452,0.335l1.565-1.118l2.124-2.347 l1.565-2.683l0.225-3.913l0.336-3.465v-3.243l-0.782-2.124l0.67-1.006l0.95-0.503l-1.286-7.434L523.206,266.11L523.206,266.11z", |
|
||||||
MI: "M418.892,188.079l1.264-1.423l1.505-0.554l3.713-2.688l1.582-0.395l0.316,0.316 l-3.557,3.557l-2.294,1.344l-1.423,0.632L418.892,188.079L418.892,188.079z M478.488,210.297l0.445,1.733l2.236,0.112l0.895-0.838 c0,0-0.056-1.007-0.279-1.118c-0.226-0.112-1.119-1.286-1.119-1.286l-1.508,0.168l-1.119,0.111l-0.223,0.782L478.488,210.297z M499.279,253.899l-2.236-5.702l-1.565-6.26l-1.677-2.236l-1.788-1.23l-1.118,0.782l-2.684,1.23l-1.342,3.466l-1.9,2.571 l-0.782,0.447l-1.006-0.447c0,0-1.79-1.007-1.677-1.453c0.112-0.448,0.336-3.466,0.336-3.466l2.347-0.894l0.559-2.348l0.446-1.788 l1.676-1.118l-0.223-6.932l-1.118-1.565l-0.895-0.559l-0.557-1.453l0.557-0.559l1.119,0.224l0.11-1.118l-1.675-1.565l-0.895-1.788 h-1.789l-3.131-1.006l-3.801-2.348h-1.901l-0.445,0.447l-0.671-0.335l-2.127-1.565l-2.011,1.23l-2.011,1.565l0.221,2.46 l0.672,0.224l1.455,0.336l0.333,0.558l-1.788,0.559l-1.788,0.223l-1.006,1.23l-0.224,1.453l0.224,1.118l0.225,3.801l-2.46,1.453 l-0.448-0.112v-2.907l0.894-1.677l0.45-1.677l-0.561-0.558l-1.341,0.558l-0.671,2.907l-1.901,0.782l-1.229,1.341l-0.113,0.671 l0.448,0.559l-0.448,1.789l-1.565,0.335v0.782l0.558,1.677l-0.783,4.249l-1.116,2.795l0.445,3.242l0.337,0.782l-0.56,1.677 l-0.223,0.559l-0.225,1.901l2.461,4.136l2.011,4.472l1.006,3.354l-0.559,3.242l-0.671,4.136l-1.676,3.577l-0.225,1.9l-2.13,2.151 l-0.514,0.532l3.205-0.112l15.206-1.565l4.247-0.448l0.224,0.839l5.365-0.839l7.043-1.118l3.608-0.318l-0.925-0.799l0.112-1.007 l1.454-2.571l1.384-1.202l-0.155-3.494l1.104-1.104l0.755-0.237l0.155-2.46l1.062-2.097l0.727,0.419l0.111,0.448l0.559,0.112 l1.342-0.671L499.279,253.899z M408.338,208.555l1.282-0.715l1.9-0.559l2.458-1.564v-0.672l0.449-0.446l4.135-0.672l1.677-1.341 l3.017-1.453l0.113-0.894l1.342-2.013l1.231-0.559l0.893-1.23l1.565-1.565l3.018-1.677l3.244-0.336l0.781,0.783l-0.224,0.671 l-2.572,0.671l-1.005,2.124l-1.565,0.559l-0.335,1.677l-1.676,2.236l-0.226,1.789l0.561,0.335l0.671-0.782l2.46-2.013l0.896,0.894 h1.563l2.236,0.671l1.006,0.782l1.006,2.124l1.902,1.9l2.681-0.112l1.006-0.67l1.118,0.894l1.118,0.335l0.895-0.559h0.783 l1.119-0.67l2.793-2.46l2.347-0.782l4.585-0.224l3.129-1.342l1.79-0.894l1.006,0.112v3.913l0.334,0.223l2.013,0.559l1.341-0.335 l4.25-1.118l0.783-0.782l1.004,0.335v4.807l2.236,2.124l0.895,0.447l0.895,0.671l-0.895,0.224l-0.559-0.224l-2.572-0.335 l-1.453,0.448l-1.565-0.112l-2.235,1.007h-1.229l-4.025-0.894l-3.578,0.111l-1.342,1.788L454,214.211l-1.676,0.558l-0.783,2.125 l-0.895,0.783l-0.335-0.112l-1.006-1.118l-3.131,1.677h-0.445l-0.784-1.118l-0.558,0.112l-1.342,3.019l-0.672,2.795l-2.593,5.626 l-1.126-0.794l-0.95-0.948l-1.107-7.115l-2.528-0.791l-0.95-1.581l-8.694-1.898l-1.74-0.79l-5.691-1.581l-5.692-0.79 L408.338,208.555L408.338,208.555z", |
|
||||||
WY: "M262.322,230.87l-7.961-0.67l-22.191-2.279l-11.225-1.423l-19.605-2.846 l-13.755-2.055l-0.982,7.729l-2.656,16.778l-3.637,21.027l-1.058,7.272l-1.155,8.222l4.512,0.642l11.678,1.581l6.108,0.814 l14.224,1.706l25.771,2.846l16.917,1.423l3.004-30.672l1.107-17.549L262.322,230.87L262.322,230.87z", |
|
||||||
MT: "M263.884,216.222l0.56-8.044l1.562-17.252l0.949-10.435l0.872-9.842l-22.1-2.274 l-20.235-2.459l-20.235-2.795l-22.36-3.689l-12.744-2.348l-22.63-4.794l-3.098,14.763l2.372,5.217l-0.948,3.162l1.265,3.162 l2.213,0.949l2.53,7.114l2.529,2.529l0.316,0.791l2.372,0.791l0.316,1.423l-4.902,12.174v1.739l1.739,2.213h0.632l3.321-2.055 l0.475-0.791l1.106,0.474l-0.158,3.637l1.897,8.696l2.056,1.739l0.632,0.474l1.265,1.581l-0.316,2.371l0.474,2.372l0.791,0.632 l1.582-1.581h1.897l2.214,1.107l1.74-0.632h2.846l2.529,1.106l1.899-0.316l0.316-2.055l2.056-0.475l0.949,0.949l0.316,2.214 l1.786,1.72l1.061-7.887l13.755,2.055l19.605,2.846l11.225,1.422l22.191,2.279l7.933,0.832l1.171-11.001L263.884,216.222 L263.884,216.222z", |
|
||||||
ID: "M113.945,254.13l3.283-12.77l3.004-12.253l0.949-2.925l1.74-4.11l-0.87-1.581 l-1.74,0.079l-0.553-0.712l0.316-0.79l0.237-2.134l3.083-3.794l1.265-0.316l0.791-0.791l0.395-2.213l0.633-0.474l2.688-4.031 l2.688-3.005l0.158-2.608l-2.372-1.819l-0.91-3.043l0.277-6.68l2.53-11.384l3.082-14.387l2.609-9.328l0.527-2.63l9.765,1.859 l-3.098,14.763l2.372,5.217l-0.948,3.162l1.265,3.162l2.213,0.949l2.53,7.114l2.529,2.529l0.316,0.791l2.372,0.791l0.316,1.423 l-4.902,12.174v1.739l1.739,2.213h0.632l3.321-2.055l0.475-0.791l1.106,0.474l-0.158,3.637l1.897,8.696l2.056,1.739l0.632,0.474 l1.265,1.581l-0.316,2.371l0.474,2.372l0.791,0.632l1.582-1.581h1.897l2.214,1.107l1.74-0.632h2.846l2.529,1.106l1.899-0.316 l0.316-2.056l2.056-0.474l0.949,0.948l0.316,2.214l1.818,1.423l-2.609,16.918l-3.557,20.948l-3.321-0.553l-5.77-0.949l-7.115-1.264 l-8.3-1.423l-8.775-1.621l-5.533-1.383l-6.403-1.265l-6.719-1.344L113.945,254.13L113.945,254.13z", |
|
||||||
WA: "M81.383,135.73l3.019,1.006l6.708,1.901l5.926,1.341l13.862,3.913l15.876,3.913 l11.15,2.569l-0.694,2.686l-2.609,9.328l-3.082,14.388l-2.53,11.384l-0.132,6.708l-9.671-2.36l-10.435-2.45l-10.672,0.079 l-0.316-0.949l-3.794,1.423l-3.083-0.395l-1.66-1.107l-0.87,0.475l-3.241-0.158l-1.186-0.948l-3.636-1.423l-0.553,0.079 l-3.004-1.028l-1.344,1.264l-4.269-0.237l-4.111-2.846l0.475-0.554l0.158-5.375l-1.581-2.688l-2.846-0.396l-0.475-1.739 l-1.627-0.323l-1.327-1.036l-1.23,0.671l-1.565-2.013l0.223-2.013l1.901-0.223l1.118-2.795l-1.789-0.783l0.112-2.571l3.018-0.447 l-1.9-1.901l-1.006-4.919l0.448-2.012v-5.478l-1.23-2.237l1.565-6.484l1.454,0.335l1.677,2.013l1.901,1.788l2.235,1.341l3.13,1.453 l2.124,0.448l2.013,1.006l2.347,0.671l1.565-0.112v-1.677l0.895-0.783l1.453-0.894l0.224,0.782l0.223,1.23l-1.565,0.336 l-0.224,1.453l1.23,1.007l0.782,1.677l0.447,1.342l1.006-0.112l0.112-0.895l-0.671-0.894l-0.335-2.236l0.559-1.23l-0.447-1.007 v-1.565l1.23-2.46l-0.783-1.788l-1.677-3.354l0.224-0.559L81.383,135.73L81.383,135.73z M74.844,139.865l1.398-0.112l0.335,0.95 l1.062-1.118h1.621l0.559,1.062l-1.062,1.174l0.447,0.559l-0.503,1.397l-0.95,0.28c0,0-0.615,0.055-0.615-0.168 c0-0.224,1.005-1.789,1.005-1.789l-1.174-0.391l-0.224,1.006l-0.503,0.447l-1.062-1.565L74.844,139.865L74.844,139.865z", |
|
||||||
TX: "M263.594,361.876l15.691,0.75l21.503,0.79l-0.949,16.444l-0.317,12.332 l0.159,1.107l3.003,2.531l1.424,0.789l0.475-0.158l0.473-1.422l0.948,1.264h1.425v-0.948l1.896,0.948l-0.317,2.689l2.847,0.158 l1.738,0.791l2.847,0.474l1.74,1.265l1.58-1.424l2.372,0.475l1.74,2.37h0.632v1.583l1.582,0.473l1.582-1.581l1.264,0.474h1.74 l0.633,1.74l3.32,1.264l0.949-0.473l1.265-2.846h0.79l0.792,1.423l2.847,0.475l2.528,0.948l2.057,0.631l1.264-0.631l0.474-1.74 h3.005l1.422,0.633l1.899-1.424h0.79l0.475,1.107h2.845l1.108-1.423l1.265,0.315l1.422,1.74l2.213,1.264l2.214,0.632l1.897,0.87 l1.582,1.344l2.055-0.948l1.896,0.79l0.467,7.678l0.009,6.711l0.475,6.48l0.473,2.689l1.741,2.846l0.632,3.477l3.004,3.794 l0.158,2.215l0.475,0.474l-0.475,5.849l-2.055,3.478l1.106,1.424l-0.475,1.738l-0.474,5.06l-0.948,2.213l0.195,2.479l-4.472,1.207 l-6.82,3.131l-0.671,1.342l-1.787,1.339l-1.455,1.007l-0.894,0.56l-3.913,3.687l-1.901,1.455l-3.688,2.235l-3.915,1.677 l-4.36,2.347l-1.23,1.007l-4.024,2.46l-2.349,0.448l-2.682,3.8l-2.796,0.225l-0.67,1.342l1.565,1.34l-1.006,3.801l-0.895,3.13 l-0.782,2.684l-0.559,3.13l0.559,1.678l1.23,4.807l0.672,4.247l1.229,1.901l-0.67,1.006l-2.125,1.341l-3.913-2.683l-3.801-0.782 l-0.896,0.335l-2.235-0.447l-2.906-2.124l-3.578-0.783l-5.255-2.347l-1.452-2.684l-0.895-4.472l-2.235-1.34l-0.448-1.565 l0.448-0.447l0.223-2.349l-0.894-0.447l-0.447-0.67l0.895-3.019l-1.118-1.567l-2.235-0.892l-2.349-3.02l-2.459-4.585l-2.906-1.787 l0.111-1.342l-3.689-8.496l-0.559-2.907l-1.229-1.341l-0.113-1.007l-4.135-3.688l-1.789-2.124v-0.784l-1.789-1.452l-4.695-0.783 l-5.143-0.446l-2.124-1.566l-3.13,1.23l-2.461,1.005l-1.565,2.237l-0.671,2.571l-3.018,4.25l-1.677,1.676l-1.789-0.673 l-1.231-0.781l-1.34-0.448l-2.683-1.565v-0.447l-1.23-1.341l-3.578-1.454l-5.142-5.366l-1.565-3.242v-5.589l-2.236-4.472 l-0.336-1.901l-1.118-0.671l-0.782-1.454l-3.466-1.453l-0.894-1.118l-4.919-5.478l-0.895-2.238l-3.242-1.565l-1.006-3.018 l-1.789-2.012l-1.34-0.337l-0.449-3.234l5.533,0.474l20.079,1.898l20.08,1.107l1.581-16.444l2.688-38.419l1.107-12.963l0.949,0.019 M332.871,523.664l-0.391-4.919l-1.901-4.974l-0.391-4.864l1.063-5.701l2.291-4.75l2.404-3.746l2.181-2.459l0.445,0.168 L335.275,497l-3.019,4.528l-1.397,4.583l-0.223,3.578l0.616,4.248l1.788,4.974l0.336,3.58l0.11,1.004L332.871,523.664z", |
|
||||||
CA: "M111.68,399.235l2.861-0.56l1.027-1.502l0.395-1.898l-2.529-0.394l-0.316-0.555 l0.316-1.186l0.078-4.031l1.423-0.475l1.976-1.898l0.396-3.399l1.028-2.53l1.343-1.343l2.372-1.185l1.106-0.948l0.079-1.583 l-0.712-0.395l-0.553-0.711l-0.869-4.031l-1.898-3.4l0.4-2.259l-1.744-2.245l-10.04-15.734l-13.438-20.078l-15.732-23.399 l-8.562-12.85l1.131-4.541l4.823-17.945l5.612-21.74l-9.328-2.53l-9.328-2.371l-8.696-2.846l-5.218-1.423l-7.905-2.055 l-4.876-1.668l-1.093,3.267l-0.111,5.143l-3.577,8.161l-2.124,1.788l-0.224,0.783l-1.23,0.559l-1.006,2.907l-0.559,2.236l1.9,2.907 l1.118,2.907l0.782,2.46l-0.223,4.471l-1.231,2.125l-0.447,4.024l-0.671,2.572l1.23,2.683l1.9,3.131l1.565,3.353l0.895,2.795 l-0.224,2.236l-0.223,0.335v1.453l3.912,4.36l-0.335,1.677l-0.447,1.565l-0.447,1.342l0.111,5.701L37,313.04l1.342,1.788l1.9,0.336 l0.671,1.9l-0.783,2.46l-1.454,1.119h-0.782l-0.559,2.682l0.335,2.012l2.236,3.02l1.118,3.689l1.006,3.242l0.895,2.125l2.348,4.024 l1.006,1.789l0.335,2.012l1.118,0.67v1.678l-0.559,1.342l-1.23,4.918l-0.335,1.342l1.677,1.9l2.907,0.336l3.13,1.229l2.683,1.453 h2.012l2.012,2.125l1.789,3.353l0.783,1.565l2.683,1.453l3.354,0.56l1.006,1.452l0.448,2.237l-1.006,0.447l0.224,0.671l2.236,0.559 l1.9,0.11l2.012,3.241l2.683,2.908l0.559,1.565l1.79,2.907l0.223,2.237v6.483l0.335,1.23l6.931,1.006l13.639,1.901L111.68,399.235 L111.68,399.235z M50.416,364.408l0.894,1.063l-0.112,0.895l-2.236-0.055l-0.39-0.84l-0.448-1.006L50.416,364.408L50.416,364.408z M51.758,364.408l0.839-0.448l2.46,1.455l2.124,0.837l-0.615,0.449l-3.13-0.167l-1.118-1.118L51.758,364.408z M66.067,378.103 l1.231,1.622l0.559,0.671l1.062,0.392l0.391-1.008l-0.67-1.23l-1.845-1.397l-0.727,0.112V378.103z M65.062,384.085l1.229,2.18 l0.839,1.342l-1.006,0.167l-0.894-0.839c0,0-0.503-1.006-0.503-1.286c0-0.279,0-1.509,0-1.509L65.062,384.085L65.062,384.085z", |
|
||||||
AZ: "M111.932,399.307l-1.816,1.492l-0.224,1.006l0.335,0.673l13.081,7.378 l8.385,5.253l10.173,5.926l11.627,6.931l8.497,1.678l18.488,2.424l1.416-9.205l2.596-18.617l4.817-36.791l2.944-21.305 l-17.787-2.654l-18.815-3.162l-23.118-4.371l-2.021,12.513l-0.316,0.314l-1.186,1.819l-1.739-0.08l-0.87-1.896l-1.897-0.237 l-0.632-0.791h-0.633l-0.632,0.396l-1.344,0.711l-0.079,4.822l-0.158,1.186l-0.395,8.695l-1.028,1.503l-0.395,2.292l1.898,3.4 l0.869,4.031l0.553,0.711l0.712,0.395l-0.079,1.583l-1.106,0.948l-2.372,1.185l-1.343,1.343l-1.028,2.53l-0.396,3.399l-1.976,1.898 l-1.423,0.475l-0.078,4.031l-0.316,1.186l0.316,0.555l2.529,0.394l-0.395,1.898l-1.027,1.502L111.932,399.307L111.932,399.307z", |
|
||||||
NV: "M113.945,254.13l14.509,3.12l6.719,1.344l6.403,1.265l5.573,1.462l-0.83,3.833 l-2.45,12.096l-2.609,14.151l-1.344,6.166l-1.502,9.407l-2.293,11.463l-2.214,10.514l-1.361,7.263l-2.038,12.264l-0.316,0.314 l-1.186,1.819l-1.739-0.08l-0.87-1.896l-1.897-0.237l-0.632-0.791h-0.633l-0.632,0.396l-1.344,0.711l-0.079,4.822l-0.158,1.186 l-0.395,8.695l-1.025,1.52l-1.741-2.229l-10.04-15.734l-13.438-20.078l-15.732-23.399l-8.562-12.85l1.131-4.541l4.823-17.944 l5.454-21.679l23.242,5.631l9.486,2.055", |
|
||||||
UT: "M192.17,346.343l-17.708-2.846l-18.815-3.162l-23.171-4.276l1.431-7.109 l2.214-10.514l2.293-11.463l1.502-9.407l1.344-6.166l2.609-14.151l2.45-12.096l0.772-3.853l8.794,1.562l8.3,1.423l7.115,1.264 l5.77,0.949l3.321,0.553l-1.138,7.351l-1.155,8.222l4.512,0.642l11.679,1.581l6.344,0.814l-2.14,15.303l-2.213,15.494 l-2.594,19.353l-1.042,7.683L192.17,346.343L192.17,346.343z", |
|
||||||
CO: "M276.44,354.563l2.846-45.533l1.107-15.495l-23.083-1.897l-16.917-1.423 l-25.771-2.846l-14.308-1.739l-1.819,15.336l-2.213,15.494l-2.594,19.353l-1.042,7.683l-0.395,2.688l23.795,2.846l25.545,3.061 l22.657,1.523l4.606,0.476l7.905,0.394", |
|
||||||
NM: "M212.968,429.531l-0.561-3.347l5.533,0.474l20.079,1.898l20.08,1.107 l1.582-16.444l2.688-38.419l1.107-12.963l0.949,0.019l-0.01-8.104l-22.825-1.661l-25.545-3.062l-23.834-2.845l-2.904,21.268 l-4.817,36.793l-2.596,18.617l-1.416,9.205l10.691,1.375l0.895-6.929l11.515,1.787L212.968,429.531L212.968,429.531z", |
|
||||||
OR: "M114.145,253.851l3.083-12.49l3.004-12.253l0.949-2.925l1.74-4.11l-0.87-1.581 l-1.74,0.079l-0.553-0.712l0.316-0.79l0.237-2.134l3.083-3.794l1.265-0.316l0.791-0.791l0.395-2.213l0.633-0.474l2.688-4.031 l2.688-3.005l0.158-2.608l-2.372-1.819l-0.725-2.897l-9.71-2.479l-10.435-2.45l-10.672,0.079l-0.316-0.949l-3.794,1.423 l-3.083-0.395l-1.66-1.107l-0.87,0.475l-3.241-0.158l-1.186-0.949l-3.636-1.423l-0.553,0.079l-3.004-1.028l-1.344,1.264 l-4.269-0.237l-4.111-2.847l0.475-0.553l0.158-5.375l-1.581-2.688l-2.846-0.396l-0.475-1.739l-1.627-0.323l-4.01,1.424 l-1.565,4.472l-2.236,6.931l-2.236,4.472l-3.465,9.726l-4.472,9.391l-5.59,8.72l-1.341,2.012l-0.559,5.925l-0.895,4.137l1.54,3.105 l4.876,1.668l7.905,2.055l5.218,1.423l8.696,2.846l9.328,2.371l9.328,2.688 M113.945,254.13l-32.448-7.649l23.242,5.631 l9.486,2.055", |
|
||||||
ND: "M343.16,220.175l-0.475-5.85l-1.265-5.059l-1.266-9.329l-0.315-6.798 l-1.265-2.372l-1.107-3.478v-7.115l0.474-2.688l-1.352-3.802l-20.321-0.39l-12.858-0.447l-18.335-0.895l-17.251-1.303l-0.872,9.842 l-0.949,10.435l-1.562,17.252l-0.447,8.398l38.846,2.493L343.16,220.175L343.16,220.175z", |
|
||||||
SD: "M344.192,272.396l-0.66-1.413l-1.163-1.953l1.265-3.004l0.95-3.952l-1.898-1.424 l-0.317-1.896l0.633-1.74h1.265l0.317-4.743l-0.159-21.028l-0.316-2.055l-2.844-2.372l-0.792-1.265v-1.106l1.423-1.107l0.948-0.949 l0.236-2.213l-40.236-1.107l-38.846-2.688l-0.531,3.651l-1.115,10.973l-0.931,12.411l-1.107,17.787l10.751,0.711l13.914,0.791 l12.332,0.79l16.442,0.791l7.432-0.316l1.423,1.581l3.32,2.056l0.792,0.632l3.003-0.948l2.689-0.316l1.897-0.158l1.265,0.949 l3.478,1.107l2.056,1.107l0.316,1.106l0.633,1.423h1.265L344.192,272.396L344.192,272.396z", |
|
||||||
NE: "M352.329,301.915l0.949,1.74l-0.158,1.581l1.739,2.688l2.213,2.846h-4.27 l-30.513-0.316l-27.985-0.949l-15.099-0.554l1.185-15.415l-23.083-1.897l3.004-30.435l10.751,0.711l13.914,0.791l12.332,0.79 l16.442,0.791l7.432-0.317l1.423,1.581l3.32,2.056l0.792,0.632l3.003-0.948l2.689-0.316l1.897-0.159l1.265,0.949l3.478,1.107 l2.056,1.107l0.316,1.107l0.633,1.423h1.265l1.106-0.079l0.79,3.715l1.898,5.218l0.633,3.32l1.581,2.53l0.475,3.636l1.105,2.846 l0.16,4.584l1.339,3.804", |
|
||||||
IA: "M409.209,270.61l0.039,1.265l1.581,0.474l0.632,0.791l0.316,1.265l2.688,2.372 l0.474,1.58l-0.474,2.373l-1.264,2.529l-0.475,1.74l-1.581,1.265l-1.264,0.474l-3.639,0.948l-0.474,1.265l-0.473,1.423l0.473,0.949 l1.266,1.107l-0.159,2.845l-1.265,1.107l-0.475,1.107v1.897l-1.264,0.316l-1.106,0.79l-0.16,0.949l0.16,1.423l-1.187,1.226 l-2.293-2.333l-0.79-1.581l-5.376,0.474l-6.798,0.316l-17.549,0.632l-9.33,0.158l-6.482,0.158l-0.752,0.084l-1.144-3.721 l-0.16-4.584l-1.105-2.846l-0.475-3.636l-1.581-2.53l-0.633-3.321l-1.898-5.217l-0.79-3.715l-0.949-1.502l-1.107-1.897l1.265-3.004 l0.95-3.952l-1.898-1.424l-0.317-1.896l0.633-1.74h1.185h7.985l34.308-0.474l12.491-0.474l2.845-0.079l0.475,2.293l1.581,1.106 l0.159,0.949l-1.425,2.372l0.16,2.213l1.737,2.688l1.74,0.79l2.056,0.317L409.209,270.61L409.209,270.61z", |
|
||||||
MS: "M449.215,454.264l-0.804,0.869h-3.577l-1.006-0.558l-1.454-0.225l-4.695,1.341 l-1.231-0.558l-1.786,2.907l-0.763,0.538l-0.779-1.721l-0.789-2.689l-2.374-2.213l0.793-5.217l-0.475-0.632l-1.265,0.157 l-5.693,0.475l-16.758,0.474l-0.318-1.106l0.475-5.535l2.372-4.268l3.638-6.324l-0.632-1.424h0.79l0.475-2.212l-1.581-1.266 l0.159-1.266l-1.423-3.162l-0.199-3.696l0.949-1.838l-0.277-3.003l-0.949-2.056l0.949-0.948l-0.949-1.424l0.318-1.265l0.631-4.269 l2.057-1.897l-0.475-1.423l2.531-3.636l1.897-0.634v-1.738l-0.475-0.949l1.898-3.635l1.897-0.791l0.074-2.359l5.998-0.054 l16.658-1.34l3.797-0.159l0.005,4.404l0.111,11.517l-0.559,21.465l-0.112,9.725l1.9,12.968L449.215,454.264L449.215,454.264z", |
|
||||||
IN: "M444.5,340.093l-0.113-2.681l0.335-3.131l1.565-2.012l1.23-2.683l1.788-2.907 l-0.335-4.025l-1.228-1.901l-0.225-2.236l0.561-3.801l-0.336-4.808l-0.895-11.067l-0.896-10.621l-0.671-8.105l2.125,0.615 l1.005,0.671l0.784-0.223l1.452-1.342l1.956-1.118l3.523-0.112l15.206-1.565l4.247-0.448l0.111,0.783l1.006,10.173l1.231,9.503 l1.789,16.21l0.335,3.913l-0.335,1.565l1.006,1.007l0.223,1.341l-1.9,1.341l-2.683,1.23l-1.902,0.224l-0.335,3.131l-3.241,2.683 l-2.013,2.459l0.224,1.566l-0.56,1.452h-3.241l-0.782-1.118l-0.784,0.559l-2.013,1.119l0.111,2.347l-1.452,0.335l-0.558-0.781 l-1.344-1.118l-2.01,1.006l-1.232,2.237l-1.229-0.559l-1.007-1.342l-2.46,0.335l-4.023,0.671L444.5,340.093L444.5,340.093z", |
|
||||||
IL: "M444.388,339.982v-2.57l0.335-3.131l1.565-2.012l1.23-2.683l1.788-2.907 l-0.335-4.025l-1.228-1.901l-0.225-2.236l0.561-3.801l-0.336-4.808l-0.895-11.067l-0.896-10.621l-0.559-8.049l-0.895-0.559 l-0.559-1.788l-0.894-2.571l-1.119-1.23l-1.005-1.789l-0.161-3.796l-6.849,0.907l-18.812,1.186l-6.01-0.296l0.159,1.64l1.581,0.473 l0.632,0.791l0.316,1.265l2.688,2.372l0.474,1.58l-0.474,2.373l-1.264,2.529l-0.475,1.74l-1.581,1.265l-1.264,0.474l-3.639,0.948 l-0.474,1.265l-0.473,1.423l0.473,0.949l1.266,1.107l-0.159,2.846l-1.265,1.107l-0.475,1.107v1.897l-1.264,0.316l-1.106,0.79 l-0.16,0.949l0.16,1.423l-1.187,0.909l-0.711,1.937l0.314,2.529l1.584,5.06l5.057,5.217l3.796,2.53l-0.158,3.005l0.633,0.948 l4.426,0.315l1.898,0.948l-0.475,2.53l-1.581,4.11l-0.473,2.213l1.579,2.689l4.428,3.636l3.162,0.474l1.423,3.478l1.423,2.213 l-0.632,2.055l1.107,2.846l1.264,1.424l2.051-0.234l0.397-1.418l1.566-1.231l1.454-0.446l1.9,0.895l2.46,0.893l0.782-0.224 l0.112-1.564l-0.894-1.678l0.223-1.565l1.343-1.006l1.786-0.448l1.12-0.447l-0.559-1.229l-0.448-1.342l0.783-0.558L444.388,339.982 L444.388,339.982z", |
|
||||||
MN: "M343.001,220.175l-0.316-5.85l-1.265-5.059l-1.266-9.329l-0.315-6.798 l-1.265-2.372l-1.107-3.478v-7.115l0.474-2.688l-1.258-3.77l20.837,0.025l0.225-5.702l0.446-0.111l1.565,0.335l1.344,0.559 l0.557,3.801l1.006,4.249l1.118,1.118h3.354l0.224,1.007l4.361,0.223v1.454h3.354l0.224-0.894l0.781-0.782l1.566-0.448l0.895,0.671 h2.012l2.683,1.789l3.691,1.677l1.675,0.336l0.335-0.671l1.007-0.336l0.334,2.013l1.79,0.895l0.336-0.336l0.894,0.111v1.454 l1.788,0.671h2.125l1.118-0.559l2.235-2.236l1.788-0.336l0.559,1.231l0.335,0.894h0.671l0.67-0.559l6.149-0.224l1.23,2.124h0.447 l0.494-0.75l3.071-0.256l-0.424,1.577l-2.723,1.27l-6.394,2.808l-3.302,1.388l-2.125,1.788l-1.676,2.459l-1.566,2.684l-1.231,0.559 l-3.129,3.466l-0.895,0.112l-2.347,2.124l0.476,0.375l-1.948,1.872l-0.158,1.897v5.849l-0.791,1.107l-3.636,2.688l-1.582,4.111 l0.317,0.158l1.74,1.423l0.474,2.214l-1.266,2.213v2.688l0.318,4.585l2.055,2.055h2.372l1.265,2.213l2.371,0.316l2.688,3.953 l4.903,2.845l1.421,1.897l0.634,5.218h-2.845l-12.491,0.474l-34.308,0.474h-7.985l0.397-4.743l-0.159-21.028l-0.316-2.055 l-2.844-2.372l-0.792-1.265v-1.106l1.423-1.107l0.948-0.949L343.001,220.175L343.001,220.175z", |
|
||||||
WI: "M440.71,268.555l0.1-2.917l-1.12-3.13l-0.445-4.248l-0.784-1.677l0.671-2.124 l0.558-2.012l1.006-1.789l-0.445-2.348l-0.449-2.46l0.338-1.23l1.34-1.677l0.112-1.901l-0.559-0.894l0.447-1.789l0.336-2.236 l1.9-3.912l2.013-4.696l0.112-1.565l-0.225-0.671l-0.56,0.336l-2.905,4.36l-1.9,2.795l-1.342,1.229l-0.56,1.565l-1.006,0.559 l-0.784,1.342l-1.004-0.224l-0.112-1.23l0.896-1.677l1.453-3.242l1.229-1.118l0.76-1.585l-1.126-0.626l-0.95-0.948l-1.107-7.115 l-2.528-0.791l-0.95-1.581l-8.694-1.898l-1.74-0.79l-5.691-1.581l-5.692-0.79l-2.885-3.738l-0.366,0.872l-0.781-0.112l-0.45-0.782 l-1.899-0.559l-0.782,0.112l-1.231,0.671l-0.671-0.447l0.448-1.341l1.342-2.124l0.782-0.782l-1.341-1.006l-1.456,0.558 l-2.011,1.342l-5.143,2.236l-2.012,0.448l-2.012-0.335l-0.681-0.607l-1.462,1.961l-0.158,1.897v5.849l-0.791,1.107l-3.636,2.688 l-1.582,4.111l0.317,0.158l1.74,1.423l0.474,2.214l-1.266,2.213v2.688l0.318,4.585l2.055,2.055h2.372l1.265,2.213l2.371,0.316 l2.688,3.953l4.903,2.845l1.421,1.897l0.634,5.139l0.475,2.293l1.581,1.106l0.159,0.949l-1.425,2.372l0.16,2.213l1.738,2.688 l1.739,0.79l2.057,0.317l0.85,1.739l6.344,0l18.418-1.107L440.71,268.555L440.71,268.555z", |
|
||||||
MO: "M401.501,303.97l-2.215-2.213l-0.79-1.581l-5.376,0.474l-6.798,0.316 l-17.549,0.632l-9.33,0.158l-5.454,0.079l-1.581,0.079l0.869,1.74l-0.158,1.581l1.739,2.688l2.135,2.846l2.134,1.897l1.579,0.158 l0.951,0.632v2.056l-1.265,1.106l-0.318,1.581l1.424,2.372l1.739,2.055l1.74,1.265l0.948,8.063l-0.473,24.427l0.157,3.24 l0.316,4.744l16.126-0.316l16.126-0.475l14.39-0.632l7.586-0.316l1.266,2.055l-0.317,1.579l-2.213,1.899l-0.474,2.055l4.269,0.316 l3.478-0.475l1.423-4.426l-0.098-3.895l1.996-1.007l0.947-1.108l1.424-0.789l0.158-2.214l0.632-1.264l-0.948-1.68l-2.056,0.257 l-1.264-1.424l-1.107-2.846l0.632-2.055l-1.423-2.213l-1.423-3.478l-3.162-0.474l-4.428-3.636l-1.579-2.689l0.473-2.213l1.581-4.11 l0.475-2.53l-1.898-0.948l-4.426-0.315l-0.633-0.948l0.158-3.005l-3.796-2.53l-5.057-5.217l-1.584-5.06l-0.314-2.529 L401.501,303.97L401.501,303.97z", |
|
||||||
AR: "M426.053,369.883l-3.366,0.649l-4.269-0.316l0.474-2.055l2.213-1.899l0.317-1.579 l-1.266-2.057l-7.588,0.317l-14.388,0.632l-16.126,0.475l-16.128,0.316l1.108,4.742v5.693l0.949,7.589l0.158,26.166l1.582,1.344 l2.055-0.948l1.896,0.79l0.457,7.768l15.354-0.019l13.282-0.633l7.468,0.098l1.029-1.838l-0.277-3.003l-0.949-2.056l0.949-0.948 l-0.949-1.424l0.318-1.265l0.631-4.269l2.057-1.897l-0.475-1.423l2.531-3.636l1.897-0.634v-1.738l-0.475-0.948l1.898-3.636 l1.897-0.791l-0.206-2.528l1.695-0.779l0.671-3.242l-1.004-2.46l2.795-1.565l0.223-1.788l0.933-3.03L426.053,369.883 L426.053,369.883z", |
|
||||||
OK: "M276.241,354.406l-7.39-0.316l-4.447-0.337l0.178,0.139l-0.376,7.984l15.079,0.75 l21.503,0.79l-0.949,16.444l-0.317,12.332l0.159,1.107l3.003,2.531l1.424,0.789l0.475-0.158l0.473-1.422l0.948,1.264h1.425v-0.948 l1.896,0.948l-0.317,2.689l2.847,0.158l1.738,0.791l2.847,0.474l1.74,1.265l1.58-1.424l2.372,0.475l1.74,2.37h0.632v1.583 l1.582,0.473l1.582-1.581l1.264,0.474h1.74l0.633,1.74l3.32,1.264l0.949-0.473l1.265-2.846h0.79l0.792,1.423l2.847,0.475 l2.528,0.948l2.057,0.631l1.264-0.631l0.474-1.74h3.005l1.422,0.633l1.899-1.424h0.79l0.475,1.107h2.845l1.108-1.423l1.265,0.315 l1.422,1.74l2.213,1.264l2.214,0.632l1.897,1.107l-0.158-26.403l-0.949-7.589v-5.693l-1.107-4.742l-0.316-4.744l-0.157-3.082 l-9.172,0.554l-32.094-0.317l-31.147-1.422L276.241,354.406L276.241,354.406z", |
|
||||||
KS: "M365.454,356.618l-9.172,0.475l-32.094-0.317l-31.147-1.422l-16.7-0.87 l2.866-45.534l15.099,0.554l27.985,0.949l30.513,0.316h4.192l2.134,1.897l1.579,0.158l0.951,0.632v2.056l-1.265,1.106l-0.318,1.581 l1.424,2.372l1.739,2.055l1.74,1.265l0.948,8.063L365.454,356.618L365.454,356.618z", |
|
||||||
LA: "M433.989,458.431l-0.869-1.574l-0.789-2.689l-2.374-2.213l0.793-5.217 l-0.475-0.632l-1.265,0.157l-5.693,0.475l-16.758,0.474l-0.318-1.106l0.475-5.535l2.372-4.268l3.638-6.324l-0.632-1.424h0.79 l0.475-2.212l-1.581-1.266l0.159-1.266l-1.423-3.162l-0.239-3.794h-7.508l-13.282,0.633l-15.354,0.019l0.018,6.622l0.475,6.48 l0.473,2.689l1.741,2.846l0.632,3.477l3.004,3.794l0.158,2.215l0.475,0.474l-0.475,5.849l-2.055,3.478l1.106,1.424l-0.475,1.738 l-0.474,5.06l-0.948,2.213l0.084,2.501l3.243-1.052l5.589-0.222l7.156,2.458l4.472,0.784l2.571-1.007l2.236,0.783l2.235,0.671 l0.558-1.454l-2.235-0.783l-1.788,0.336l-1.901-1.118c0,0,0.111-0.894,0.559-1.006c0.447-0.112,2.125-0.672,2.125-0.672 l1.229,1.007l1.229-0.672l2.237,0.447l1.005,1.676l0.224,1.566l3.13,0.225l1.229,1.229l-0.558,1.118l-0.894,0.559l1.117,1.119 l5.813,2.458l2.46-0.894l0.671-1.678l1.787-0.446l1.232-1.006l0.893,0.671l0.561,2.012l-1.565,0.559l0.446,0.446l2.348-0.893 l1.564-2.348l0.559-0.337l-1.452-0.223l0.558-1.118l-0.111-1.007l1.454-0.335l0.782-0.895l0.445,0.559c0,0-0.111,2.124,0.45,2.124 c0.557,0,2.905,0.448,2.905,0.448l2.796,1.34l0.672,1.007h2.011l0.782,0.671l1.566-2.124v-1.006h-0.896l-2.347-1.902l-4.025-0.558 l-2.235-1.565l0.782-1.901l1.565,0.224l0.112-0.447l-1.23-0.671v-0.336h2.236l1.229-2.123l-0.896-1.341l-0.221-1.902l-1.006,0.111 l-1.343,1.455l-0.447,1.788l-2.124-0.447l-0.671-1.229l1.229-1.341l1.398-1.229L433.989,458.431L433.989,458.431z" |
|
||||||
} |
|
||||||
|
|
||||||
var browser = BrowserDetect; |
|
||||||
|
|
||||||
if (isOldBrowser()) { |
|
||||||
$('#old_browser_msg').show(); |
|
||||||
$('#wtf').hide(); |
|
||||||
$('fieldset#state').addClass('ff3'); |
|
||||||
$('#ie8_percents').addClass('ff3'); |
|
||||||
$('#share2').addClass('ff3'); |
|
||||||
$('#poweredby.old_browsers').show(); |
|
||||||
} |
|
||||||
|
|
||||||
var buckets = 11, |
|
||||||
colorScheme = 'rbow2', |
|
||||||
days = [ |
|
||||||
{ name: 'Monday', abbr: 'Mo' }, |
|
||||||
{ name: 'Tuesday', abbr: 'Tu' }, |
|
||||||
{ name: 'Wednesday', abbr: 'We' }, |
|
||||||
{ name: 'Thursday', abbr: 'Th' }, |
|
||||||
{ name: 'Friday', abbr: 'Fr' }, |
|
||||||
{ name: 'Saturday', abbr: 'Sa' }, |
|
||||||
{ name: 'Sunday', abbr: 'Su' } |
|
||||||
], |
|
||||||
types = { |
|
||||||
all: 'All', |
|
||||||
pc: 'Computer', |
|
||||||
mob: 'Mobile' |
|
||||||
}, |
|
||||||
hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a', '7a', '8a', '9a', '10a', '11a', '12p', '1p', '2p', '3p', '4p', '5p', '6p', '7p', '8p', '9p', '10p', '11p'], |
|
||||||
stateAbbrs = ['all', 'AK', 'AL', 'AR', 'AZ', 'CA', 'CO', 'CT', 'DC', 'DE', 'FL', 'GA', 'HI', 'IA', 'ID', 'IL', 'IN', 'KS', 'KY', 'LA', 'MA', 'MD', 'ME', 'MI', 'MN', 'MO', 'MS', 'MT', 'NC', 'ND', 'NE', 'NH', 'NJ', 'NM', 'NV', 'NY', 'OH', 'OK', 'OR', 'PA', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VA', 'VT', 'WA', 'WI', 'WV', 'WY'], |
|
||||||
states = { |
|
||||||
all: { name: 'All States', abbr: 'all', offset: 0 }, |
|
||||||
AK: { name: 'Alaska', abbr: 'AK', offset: -1 }, |
|
||||||
AL: { name: 'Alabama', abbr: 'AL', offset: 2 }, |
|
||||||
AR: { name: 'Arkansas', abbr: 'AR', offset: 2 }, |
|
||||||
AZ: { name: 'Arizona', abbr: 'AZ', offset: 0 }, |
|
||||||
CA: { name: 'California', abbr: 'CA', offset: 0 }, |
|
||||||
CO: { name: 'Colorado', abbr: 'CO', offset: 1 }, |
|
||||||
CT: { name: 'Connecticut', abbr: 'CT', offset: 3 }, |
|
||||||
DC: { name: 'Washington D.C.', abbr: 'DC', offset: 3 }, |
|
||||||
DE: { name: 'Delaware', abbr: 'DE', offset: 3 }, |
|
||||||
FL: { name: 'Florida', abbr: 'FL', offset: 3 }, |
|
||||||
GA: { name: 'Georgia', abbr: 'GA', offset: 3 }, |
|
||||||
HI: { name: 'Hawaii', abbr: 'HI', offset: -3 }, |
|
||||||
IA: { name: 'Iowa', abbr: 'IA', offset: 2 }, |
|
||||||
ID: { name: 'Idaho', abbr: 'ID', offset: 1 }, |
|
||||||
IL: { name: 'Illinois', abbr: 'IL', offset: 2 }, |
|
||||||
IN: { name: 'Indiana', abbr: 'IN', offset: 3 }, |
|
||||||
KS: { name: 'Kansas', abbr: 'KS', offset: 2 }, |
|
||||||
KY: { name: 'Kentucky', abbr: 'KY', offset: 3 }, |
|
||||||
LA: { name: 'Louisiana', abbr: 'LA', offset: 2 }, |
|
||||||
MA: { name: 'Massachusetts', abbr: 'MA', offset: 3 }, |
|
||||||
MD: { name: 'Maryland', abbr: 'MD', offset: 3 }, |
|
||||||
ME: { name: 'Maine', abbr: 'ME', offset: 3 }, |
|
||||||
MI: { name: 'Michigan', abbr: 'MI', offset: 3 }, |
|
||||||
MN: { name: 'Minnesota', abbr: 'MN', offset: 2 }, |
|
||||||
MO: { name: 'Missouri', abbr: 'MO', offset: 2 }, |
|
||||||
MS: { name: 'Missippippi', abbr: 'MS', offset: 2 }, |
|
||||||
MT: { name: 'Montana', abbr: 'MT', offset: 1 }, |
|
||||||
NC: { name: 'North Carolina', abbr: 'NC', offset: 3 }, |
|
||||||
ND: { name: 'North Dakota', abbr: 'ND', offset: 2 }, |
|
||||||
NE: { name: 'Nebraska', abbr: 'NE', offset: 2 }, |
|
||||||
NH: { name: 'New Hampshire', abbr: 'NH', offset: 3 }, |
|
||||||
NJ: { name: 'New Jersey', abbr: 'NJ', offset: 3 }, |
|
||||||
NM: { name: 'New Mexico', abbr: 'NM', offset: 1 }, |
|
||||||
NV: { name: 'Nevada', abbr: 'NV', offset: 0 }, |
|
||||||
NY: { name: 'New York', abbr: 'NY', offset: 3 }, |
|
||||||
OH: { name: 'Ohio', abbr: 'OH', offset: 3 }, |
|
||||||
OK: { name: 'Oklahoma', abbr: 'OK', offset: 2 }, |
|
||||||
OR: { name: 'Oregon', abbr: 'OR', offset: 0 }, |
|
||||||
PA: { name: 'Pennsylvania', abbr: 'PA', offset: 3 }, |
|
||||||
RI: { name: 'Rhode Island', abbr: 'RI', offset: 3 }, |
|
||||||
SC: { name: 'South Carolina', abbr: 'SC', offset: 3 }, |
|
||||||
SD: { name: 'South Dakota', abbr: 'SD', offset: 2 }, |
|
||||||
TN: { name: 'Tennessee', abbr: 'TN', offset: 2 }, |
|
||||||
TX: { name: 'Texas', abbr: 'TX', offset: 2 }, |
|
||||||
UT: { name: 'Utah', abbr: 'UT', offset: 1 }, |
|
||||||
VA: { name: 'Virginia', abbr: 'VA', offset: 3 }, |
|
||||||
VT: { name: 'Vermont', abbr: 'VT', offset: 3 }, |
|
||||||
WA: { name: 'Washington', abbr: 'WA', offset: 0 }, |
|
||||||
WI: { name: 'Wisconsin', abbr: 'WI', offset: 2 }, |
|
||||||
WV: { name: 'West Virginia', abbr: 'WV', offset: 3 }, |
|
||||||
WY: { name: 'Wyoming', abbr: 'WY', offset: 1 } |
|
||||||
}; |
|
||||||
|
|
||||||
var data; |
|
||||||
|
|
||||||
if (isOldBrowser() === false) { |
|
||||||
createMap(); |
|
||||||
} |
|
||||||
addStateButtons(); |
|
||||||
|
|
||||||
d3.select('#vis').classed(colorScheme, true); |
|
||||||
|
|
||||||
d3.json('tru247.json', function(json) { |
|
||||||
|
|
||||||
data = json; |
|
||||||
|
|
||||||
createTiles(); |
|
||||||
reColorTiles('all', 'all'); |
|
||||||
|
|
||||||
if (isOldBrowser() === false) { |
|
||||||
drawMobilePie('all'); |
|
||||||
} |
|
||||||
|
|
||||||
/* ************************** */ |
|
||||||
|
|
||||||
// State map click events
|
|
||||||
d3.selectAll('#map path.state').on('click', function() { |
|
||||||
var $sel = d3.select('path.state.sel'), |
|
||||||
prevState, currState; |
|
||||||
|
|
||||||
if ($sel.empty()) { |
|
||||||
prevState = ''; |
|
||||||
} else { |
|
||||||
prevState = $sel.attr('id'); |
|
||||||
} |
|
||||||
|
|
||||||
currState = d3.select(this).attr('id'); |
|
||||||
|
|
||||||
if (prevState !== currState) { |
|
||||||
var type = d3.select('#type label.sel span').attr('class'); |
|
||||||
reColorTiles(currState, type); |
|
||||||
drawMobilePie(currState); |
|
||||||
} |
|
||||||
|
|
||||||
d3.selectAll('#map path.state').classed('sel', false); |
|
||||||
d3.select(this).classed('sel', true); |
|
||||||
d3.select('#show_all_states').classed('sel', false); |
|
||||||
d3.select('#wtf h2').html(states[currState].name); |
|
||||||
d3.select('fieldset#state label.sel').classed('sel', false); |
|
||||||
d3.select('fieldset#state label[for="state_' + currState + '"]').classed('sel', true); |
|
||||||
}); |
|
||||||
|
|
||||||
/* ************************** */ |
|
||||||
|
|
||||||
// All, PC, Mobile control event listener
|
|
||||||
$('input[name="type"]').change(function() { |
|
||||||
|
|
||||||
var type = $(this).val(), |
|
||||||
$sel = d3.select('#map path.state.sel'); |
|
||||||
|
|
||||||
d3.selectAll('fieldset#type label').classed('sel', false); |
|
||||||
d3.select('label[for="type_' + type + '"]').classed('sel', true); |
|
||||||
|
|
||||||
if ($sel.empty()) { |
|
||||||
var state = 'all'; |
|
||||||
} else { |
|
||||||
var state = $sel.attr('id'); |
|
||||||
} |
|
||||||
|
|
||||||
reColorTiles(state, type); |
|
||||||
d3.select('#pc2mob').attr('class', type); |
|
||||||
|
|
||||||
var type = types[selectedType()]; |
|
||||||
d3.select('#wtf .subtitle').html(type + ' traffic daily'); |
|
||||||
}); |
|
||||||
|
|
||||||
/* ************************** */ |
|
||||||
|
|
||||||
// All States click
|
|
||||||
$('label[for="state_all"]').click(function() { |
|
||||||
|
|
||||||
d3.selectAll('fieldset#state label').classed('sel', false); |
|
||||||
$(this).addClass('sel'); |
|
||||||
var type = d3.select('input[name="type"]').property('value'); |
|
||||||
|
|
||||||
d3.selectAll('#map path.state').classed('sel', false); |
|
||||||
|
|
||||||
reColorTiles('all', type); |
|
||||||
drawMobilePie('all'); |
|
||||||
|
|
||||||
d3.select('#wtf h2').html('All States'); |
|
||||||
}); |
|
||||||
|
|
||||||
/* ************************** */ |
|
||||||
|
|
||||||
// Text States list event listener
|
|
||||||
$('input[name="state"]').change(function() { |
|
||||||
|
|
||||||
var state = $(this).val(), |
|
||||||
type = d3.select('input[name="type"]').property('value'); |
|
||||||
|
|
||||||
d3.selectAll('fieldset#state label').classed('sel', false); |
|
||||||
d3.select('label[for="state_' + state + '"]').classed('sel', true); |
|
||||||
|
|
||||||
reColorTiles(state, type); |
|
||||||
updateIE8percents(state); |
|
||||||
}); |
|
||||||
|
|
||||||
/* ************************** */ |
|
||||||
|
|
||||||
// tiles mouseover events
|
|
||||||
$('#tiles td').hover(function() { |
|
||||||
|
|
||||||
$(this).addClass('sel'); |
|
||||||
|
|
||||||
var tmp = $(this).attr('id').split('d').join('').split('h'), |
|
||||||
day = parseInt(tmp[0]), |
|
||||||
hour = parseInt(tmp[1]); |
|
||||||
|
|
||||||
var $sel = d3.select('#map path.state.sel'); |
|
||||||
|
|
||||||
if ($sel.empty()) { |
|
||||||
var state = 'all'; |
|
||||||
} else { |
|
||||||
var state = $sel.attr('id'); |
|
||||||
} |
|
||||||
|
|
||||||
var view = 'all'; |
|
||||||
|
|
||||||
if (isOldBrowser() === false) { |
|
||||||
drawHourlyChart(state, day); |
|
||||||
selectHourlyChartBar(hour); |
|
||||||
} |
|
||||||
|
|
||||||
var type = types[selectedType()]; |
|
||||||
d3.select('#wtf .subtitle').html(type + ' traffic on ' + days[day].name + 's'); |
|
||||||
|
|
||||||
}, function() { |
|
||||||
|
|
||||||
$(this).removeClass('sel'); |
|
||||||
|
|
||||||
var $sel = d3.select('#map path.state.sel'); |
|
||||||
|
|
||||||
if ($sel.empty()) { |
|
||||||
var state = 'all'; |
|
||||||
} else { |
|
||||||
var state = $sel.attr('id'); |
|
||||||
} |
|
||||||
if (isOldBrowser() === false) { |
|
||||||
drawHourlyChart(state, 3); |
|
||||||
} |
|
||||||
var type = types[selectedType()]; |
|
||||||
d3.select('#wtf .subtitle').html(type + ' traffic daily'); |
|
||||||
}); |
|
||||||
}); |
|
||||||
|
|
||||||
/* ************************** */ |
|
||||||
|
|
||||||
function isOldBrowser() { |
|
||||||
|
|
||||||
var result = false; |
|
||||||
if (browser.browser === 'Explorer' && browser.version < 9) { |
|
||||||
result = true; |
|
||||||
} else if (browser.browser === 'Firefox' && browser.version < 4) { |
|
||||||
result = true; |
|
||||||
} |
|
||||||
|
|
||||||
//console.log(result);
|
|
||||||
|
|
||||||
return result; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
/* ************************** */ |
|
||||||
|
|
||||||
function selectedType() { |
|
||||||
|
|
||||||
//return d3.select('input[name="type"]:checked').property('value'); // IE8 doesn't like this
|
|
||||||
return $('input[name="type"]:checked').val(); |
|
||||||
} |
|
||||||
|
|
||||||
/* ************************** */ |
|
||||||
|
|
||||||
function addStateButtons() { |
|
||||||
|
|
||||||
for (var i = 1; i < stateAbbrs.length; i++) { |
|
||||||
var abbr = stateAbbrs[i]; |
|
||||||
var html = '<input type="radio" id="state_' + abbr + '" name="state" value="' + abbr + '"/><label for="state_' + abbr + '"><span class="' + abbr + '">' + abbr + '</span></label>'; |
|
||||||
|
|
||||||
$('fieldset#state').append(html); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/* ************************** */ |
|
||||||
|
|
||||||
function getCalcs(state, view) { |
|
||||||
|
|
||||||
var min = 1, |
|
||||||
max = -1; |
|
||||||
|
|
||||||
// calculate min + max
|
|
||||||
for (var d = 0; d < data[state].views.length; d++) { |
|
||||||
for (var h = 0; h < data[state].views[d].length; h++) { |
|
||||||
|
|
||||||
if (view === 'all') { |
|
||||||
var tot = data[state].views[d][h].pc + data[state].views[d][h].mob; |
|
||||||
} else { |
|
||||||
var tot = data[state].views[d][h][view]; |
|
||||||
} |
|
||||||
|
|
||||||
if (tot > max) { |
|
||||||
max = tot; |
|
||||||
} |
|
||||||
|
|
||||||
if (tot < min) { |
|
||||||
min = tot; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
return {'min': min, 'max': max}; |
|
||||||
}; |
|
||||||
|
|
||||||
/* ************************** */ |
|
||||||
|
|
||||||
function reColorTiles(state, view) { |
|
||||||
|
|
||||||
var calcs = getCalcs(state, view), |
|
||||||
range = []; |
|
||||||
|
|
||||||
for (var i = 1; i <= buckets; i++) { |
|
||||||
range.push(i); |
|
||||||
} |
|
||||||
|
|
||||||
var bucket = d3.scale.quantize().domain([0, calcs.max > 0 ? calcs.max : 1]).range(range), |
|
||||||
side = d3.select('#tiles').attr('class'); |
|
||||||
|
|
||||||
|
|
||||||
if (side === 'front') { |
|
||||||
side = 'back'; |
|
||||||
} else { |
|
||||||
side = 'front'; |
|
||||||
} |
|
||||||
|
|
||||||
for (var d = 0; d < data[state].views.length; d++) { |
|
||||||
for (var h = 0; h < data[state].views[d].length; h++) { |
|
||||||
|
|
||||||
var sel = '#d' + d + 'h' + h + ' .tile .' + side, |
|
||||||
val = data[state].views[d][h].pc + data[state].views[d][h].mob; |
|
||||||
|
|
||||||
if (view !== 'all') { |
|
||||||
val = data[state].views[d][h][view]; |
|
||||||
} |
|
||||||
|
|
||||||
// erase all previous bucket designations on this cell
|
|
||||||
for (var i = 1; i <= buckets; i++) { |
|
||||||
var cls = 'q' + i + '-' + buckets; |
|
||||||
d3.select(sel).classed(cls , false); |
|
||||||
} |
|
||||||
|
|
||||||
// set new bucket designation for this cell
|
|
||||||
var cls = 'q' + (val > 0 ? bucket(val) : 0) + '-' + buckets; |
|
||||||
d3.select(sel).classed(cls, true); |
|
||||||
} |
|
||||||
} |
|
||||||
flipTiles(); |
|
||||||
if (isOldBrowser() === false) { |
|
||||||
drawHourlyChart(state, 3); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/* ************************** */ |
|
||||||
|
|
||||||
function flipTiles() { |
|
||||||
|
|
||||||
var oldSide = d3.select('#tiles').attr('class'), |
|
||||||
newSide = ''; |
|
||||||
|
|
||||||
if (oldSide == 'front') { |
|
||||||
newSide = 'back'; |
|
||||||
} else { |
|
||||||
newSide = 'front'; |
|
||||||
} |
|
||||||
|
|
||||||
var flipper = function(h, d, side) { |
|
||||||
return function() { |
|
||||||
var sel = '#d' + d + 'h' + h + ' .tile', |
|
||||||
rotateY = 'rotateY(180deg)'; |
|
||||||
|
|
||||||
if (side === 'back') { |
|
||||||
rotateY = 'rotateY(0deg)'; |
|
||||||
} |
|
||||||
if (browser.browser === 'Safari' || browser.browser === 'Chrome') { |
|
||||||
d3.select(sel).style('-webkit-transform', rotateY); |
|
||||||
} else { |
|
||||||
d3.select(sel).select('.' + oldSide).classed('hidden', true); |
|
||||||
d3.select(sel).select('.' + newSide).classed('hidden', false); |
|
||||||
} |
|
||||||
|
|
||||||
}; |
|
||||||
}; |
|
||||||
|
|
||||||
for (var h = 0; h < hours.length; h++) { |
|
||||||
for (var d = 0; d < days.length; d++) { |
|
||||||
var side = d3.select('#tiles').attr('class'); |
|
||||||
setTimeout(flipper(h, d, side), (h * 20) + (d * 20) + (Math.random() * 100)); |
|
||||||
} |
|
||||||
} |
|
||||||
d3.select('#tiles').attr('class', newSide); |
|
||||||
} |
|
||||||
|
|
||||||
/* ************************** */ |
|
||||||
|
|
||||||
function drawHourlyChart(state, day) { |
|
||||||
|
|
||||||
d3.selectAll('#hourly_values svg').remove(); |
|
||||||
|
|
||||||
var w = 300, |
|
||||||
h = 150; |
|
||||||
|
|
||||||
var weeklyData = data[state].views[day], |
|
||||||
view = d3.select('#type label.sel span').attr('class'); |
|
||||||
|
|
||||||
|
|
||||||
var y = d3.scale.linear() |
|
||||||
.domain([0, d3.max(weeklyData, function(d) { return (view === 'all') ? d.pc + d.mob : d[view] })]) |
|
||||||
.range([0, h]); |
|
||||||
|
|
||||||
|
|
||||||
var chart = d3.select('#hourly_values .svg') |
|
||||||
.append('svg:svg') |
|
||||||
.attr('class', 'chart') |
|
||||||
.attr('width', 300) |
|
||||||
.attr('height', 170); |
|
||||||
|
|
||||||
var rect = chart.selectAll('rect'), |
|
||||||
text = chart.selectAll('text'); |
|
||||||
|
|
||||||
rect.data(weeklyData) |
|
||||||
.enter() |
|
||||||
.append('svg:rect') |
|
||||||
.attr('x', function(d, i) { return i * 12; }) |
|
||||||
.attr('y', function(d) { return (view === 'all') ? h - y(d.pc + d.mob) : h - y(d[view]) }) |
|
||||||
.attr('height', function(d) { return (view === 'all') ? y(d.pc + d.mob) : y(d[view]) }) |
|
||||||
.attr('width', 10) |
|
||||||
.attr('class', function(d, i) { return 'hr' + i}); |
|
||||||
|
|
||||||
text.data(hours) |
|
||||||
.enter() |
|
||||||
.append('svg:text') |
|
||||||
.attr('class', function(d, i) { return (i % 3) ? 'hidden hr' + i : 'visible hr' + i }) |
|
||||||
.attr("x", function(d, i) { return i * 12 }) |
|
||||||
.attr("y", 166) |
|
||||||
.attr("text-anchor", 'left') |
|
||||||
.text(String); |
|
||||||
} |
|
||||||
|
|
||||||
/* ************************** */ |
|
||||||
|
|
||||||
function drawMobilePie(state) { |
|
||||||
|
|
||||||
var w = 150, |
|
||||||
h = 150, |
|
||||||
r = Math.min(w, h) / 2, |
|
||||||
pieData = [1, data[state].pc2mob], |
|
||||||
pie = d3.layout.pie(), |
|
||||||
arc = d3.svg.arc().innerRadius(0).outerRadius(r), |
|
||||||
type = selectedType(); |
|
||||||
|
|
||||||
d3.select('#pc2mob').attr('class', type); |
|
||||||
d3.selectAll('#pc2mob svg').remove(); |
|
||||||
|
|
||||||
var chart = d3.select("#pc2mob .svg").append('svg:svg') |
|
||||||
.data([pieData]) |
|
||||||
.attr("width", w) |
|
||||||
.attr("height", h); |
|
||||||
|
|
||||||
var arcs = chart.selectAll('g') |
|
||||||
.data(pie) |
|
||||||
.enter().append('svg:g') |
|
||||||
.attr("transform", "translate(" + r + "," + r + ")"); |
|
||||||
|
|
||||||
arcs.append('svg:path') |
|
||||||
.attr('d', arc) |
|
||||||
.attr('class', function(d, i) { return i === 0 ? 'mob' : 'pc' }); |
|
||||||
|
|
||||||
var rawMobPercent = 100 / (data[state].pc2mob + 1); |
|
||||||
|
|
||||||
if (rawMobPercent < 1) { |
|
||||||
var mobPercent = '< 1', |
|
||||||
pcPercent = '> 99'; |
|
||||||
} else { |
|
||||||
var mobPercent = Math.round(rawMobPercent), |
|
||||||
pcPercent = 100 - mobPercent; |
|
||||||
} |
|
||||||
|
|
||||||
d3.select('#pc2mob .pc span').html(pcPercent + '%'); |
|
||||||
d3.select('#pc2mob .mob span').html(mobPercent + '%'); |
|
||||||
|
|
||||||
var html = d3.select('#pc2mob ul').html(); |
|
||||||
d3.select('#ie8_percents').html(html); |
|
||||||
} |
|
||||||
|
|
||||||
/* ************************** */ |
|
||||||
|
|
||||||
function updateIE8percents(state) { |
|
||||||
|
|
||||||
var rawMobPercent = 100 / (data[state].pc2mob + 1); |
|
||||||
|
|
||||||
if (rawMobPercent < 1) { |
|
||||||
var mobPercent = '< 1', |
|
||||||
pcPercent = '> 99'; |
|
||||||
} else { |
|
||||||
var mobPercent = Math.round(rawMobPercent), |
|
||||||
pcPercent = 100 - mobPercent; |
|
||||||
} |
|
||||||
|
|
||||||
d3.select('#pc2mob .pc span').html(pcPercent + '%'); |
|
||||||
d3.select('#pc2mob .mob span').html(mobPercent + '%'); |
|
||||||
|
|
||||||
var html = d3.select('#pc2mob ul').html(); |
|
||||||
d3.select('#ie8_percents').html(html); |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* ************************** */ |
|
||||||
|
|
||||||
function createTiles() { |
|
||||||
|
|
||||||
var html = '<table id="tiles" class="front">'; |
|
||||||
|
|
||||||
html += '<tr><th><div> </div></th>'; |
|
||||||
|
|
||||||
for (var h = 0; h < hours.length; h++) { |
|
||||||
html += '<th class="h' + h + '">' + hours[h] + '</th>'; |
|
||||||
} |
|
||||||
|
|
||||||
html += '</tr>'; |
|
||||||
|
|
||||||
for (var d = 0; d < days.length; d++) { |
|
||||||
html += '<tr class="d' + d + '">'; |
|
||||||
html += '<th>' + days[d].abbr + '</th>'; |
|
||||||
for (var h = 0; h < hours.length; h++) { |
|
||||||
html += '<td id="d' + d + 'h' + h + '" class="d' + d + ' h' + h + '"><div class="tile"><div class="face front"></div><div class="face back"></div></div></td>'; |
|
||||||
} |
|
||||||
html += '</tr>'; |
|
||||||
} |
|
||||||
|
|
||||||
html += '</table>'; |
|
||||||
d3.select('#vis').html(html); |
|
||||||
} |
|
||||||
|
|
||||||
/* ************************** */ |
|
||||||
|
|
||||||
function selectHourlyChartBar(hour) { |
|
||||||
|
|
||||||
d3.selectAll('#hourly_values .chart rect').classed('sel', false); |
|
||||||
d3.selectAll('#hourly_values .chart rect.hr' + hour).classed('sel', true); |
|
||||||
|
|
||||||
d3.selectAll('#hourly_values .chart text').classed('hidden', true); |
|
||||||
d3.selectAll('#hourly_values .chart text.hr' + hour).classed('hidden', false); |
|
||||||
|
|
||||||
}; |
|
||||||
|
|
||||||
/* ************************** */ |
|
||||||
|
|
||||||
function createMap() { |
|
||||||
var svg = d3.select("#map").append('svg:svg') |
|
||||||
.attr('width', 320) |
|
||||||
.attr('height', 202); |
|
||||||
|
|
||||||
var g = svg.append('svg:g') |
|
||||||
.attr('transform', 'scale(0.5) translate(-27, -134)'); |
|
||||||
|
|
||||||
for (s = 0; s < mapSVG.states.length; s++ ) { |
|
||||||
var state = mapSVG.states[s]; |
|
||||||
|
|
||||||
var path = g.append('svg:path') |
|
||||||
.attr('id', state) |
|
||||||
.attr('class', 'state') |
|
||||||
.attr('d', mapSVG[state]); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
} |
|
||||||
return { |
|
||||||
restrict: "E", |
|
||||||
link: link, |
|
||||||
scope: {} |
|
||||||
} |
|
||||||
}); |
|
||||||
dir.push(ng); |
|
||||||
@ -1,32 +0,0 @@ |
|||||||
///////////////////////////////////////
|
|
||||||
//
|
|
||||||
// trulia
|
|
||||||
//
|
|
||||||
// Module/Controller
|
|
||||||
//
|
|
||||||
|
|
||||||
var a = angular.module("truliaapp", [], function($interpolateProvider) { |
|
||||||
$interpolateProvider.startSymbol('[['); |
|
||||||
$interpolateProvider.endSymbol(']]'); |
|
||||||
} |
|
||||||
); |
|
||||||
|
|
||||||
var datafactory = a.factory('datafactory', function($http, $q) { |
|
||||||
|
|
||||||
return { |
|
||||||
|
|
||||||
} |
|
||||||
}); |
|
||||||
|
|
||||||
function truliacontroller($scope,datafactory) { |
|
||||||
|
|
||||||
$scope.initialize = function() { |
|
||||||
|
|
||||||
//$scope.truliaData = data;
|
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
// the first few arguments of the list should correspond to the Angular-namespace stuff to feed to truliaController
|
|
||||||
var c = a.controller("truliacontroller", ["$scope", "datafactory", truliacontroller]); |
|
||||||
|
Before Width: | Height: | Size: 115 KiB After Width: | Height: | Size: 115 KiB |
|
Before Width: | Height: | Size: 106 KiB After Width: | Height: | Size: 106 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue