Compare commits
No commits in common. 'gh-pages' and 'master' have entirely different histories.
334 changed files with 58852 additions and 447 deletions
@ -0,0 +1,6 @@
@@ -0,0 +1,6 @@
|
||||
# Ignore pelican output directories |
||||
pelican/cache |
||||
pelican/output |
||||
|
||||
# Python |
||||
*.pyc |
||||
@ -0,0 +1,22 @@
@@ -0,0 +1,22 @@
|
||||
The MIT License (MIT) |
||||
|
||||
Copyright (c) 2015 Charles Reid |
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy |
||||
of this software and associated documentation files (the "Software"), to deal |
||||
in the Software without restriction, including without limitation the rights |
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
||||
copies of the Software, and to permit persons to whom the Software is |
||||
furnished to do so, subject to the following conditions: |
||||
|
||||
The above copyright notice and this permission notice shall be included in all |
||||
copies or substantial portions of the Software. |
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE |
||||
SOFTWARE. |
||||
|
||||
@ -0,0 +1,2 @@
@@ -0,0 +1,2 @@
|
||||
# dang-sunburst |
||||
Exploring D3 sunburst charts with D3 + Angular + Pelican. |
||||
@ -1,68 +0,0 @@
@@ -1,68 +0,0 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<title>dang-sunburst - Authors</title> |
||||
<meta charset="utf-8" /> |
||||
|
||||
<!-- |
||||
my CSS styles |
||||
--> |
||||
<link href="/dang-sunburst/theme/css/bootstrap.css" rel="stylesheet" type="text/css"> |
||||
<link href="/dang-sunburst/theme/css/main.css" rel="stylesheet" type="text/css"> |
||||
|
||||
<link href="/dang-sunburst/theme/css/cosmo.css" rel="stylesheet" type="text/css"> |
||||
<link href="/dang-sunburst/theme/css/font-awesome.css" rel="stylesheet" type="text/css"/> |
||||
<link href="/dang-sunburst/theme/css/pygment.css" rel="stylesheet" type="text/css"/> |
||||
|
||||
<!-- |
||||
include Angular first |
||||
--> |
||||
<script type="text/javascript" src="/dang-sunburst/theme/js/angular-1.3.15.js"></script> |
||||
</head> |
||||
|
||||
<body id="index" class="home"> |
||||
<div class="container"> |
||||
<h1><a href="/dang-sunburst/">dang-sunburst <strong></strong></a></h1> |
||||
<hr /> |
||||
|
||||
<h1>Authors on dang-sunburst</h1> |
||||
|
||||
<ul> </ul> |
||||
</div> |
||||
|
||||
<footer id="contentinfo" class="body"> |
||||
<hr /> |
||||
<p style="text-align: center"> |
||||
<span class="fa-stack fa-lg"> |
||||
<i class="fa fa-square fa-stack-2x"></i> |
||||
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i> |
||||
</span> |
||||
Made from the command line with vim by |
||||
<a href="http://charlesreid1.com">charlesreid1</a>. |
||||
</p> |
||||
|
||||
<p style="text-align: center;">Made with HTML ( |
||||
<a href="http://http://bootstrap.org/">Bootstrap</a>, |
||||
<a href="http://bootswatch.com">Bootswatch</a>), |
||||
Javascript ( |
||||
<a href="http://http://d3js.org/">D3.js</a>, |
||||
<a href=https://angularjs.org/">Angular.js</a>, |
||||
<a href="https://jquery.com/">jQuery</a>), |
||||
and Python ( |
||||
<a href="http://getpelican.com">Pelican</a>, |
||||
<a href="http://http://stanford.edu/~mwaskom/software/seaborn/">Seaborn</a>, |
||||
<a href="http://matplotlib.org">Matplotlib</a>, |
||||
<a href="http://numpy.org">Numpy</a>). |
||||
</p> |
||||
|
||||
<script type="text/javascript" src="/dang-sunburst/theme/js/jquery-1.11.2.js"></script> |
||||
<script type="text/javascript" src="/dang-sunburst/theme/js/bootstrap-3.3.4.js"></script> |
||||
<script type="text/javascript" src="/dang-sunburst/theme/js/d3-3.5.5.js"></script> |
||||
<!-- |
||||
<script type="text/javascript" src="/dang-sunburst/theme/js/leaflet-0.7.3.js"></script> |
||||
<script type="text/javascript" src="/dang-sunburst/theme/js/leaflet.ajax.min.js"></script> |
||||
--> |
||||
</footer><!-- /#contentinfo --> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,68 @@
@@ -0,0 +1,68 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<title>dang-sunburst - Authors</title> |
||||
<meta charset="utf-8" /> |
||||
|
||||
<!-- |
||||
my CSS styles |
||||
--> |
||||
<link href="/theme/css/bootstrap.css" rel="stylesheet" type="text/css"> |
||||
<link href="/theme/css/main.css" rel="stylesheet" type="text/css"> |
||||
|
||||
<link href="/theme/css/cosmo.css" rel="stylesheet" type="text/css"> |
||||
<link href="/theme/css/font-awesome.css" rel="stylesheet" type="text/css"/> |
||||
<link href="/theme/css/pygment.css" rel="stylesheet" type="text/css"/> |
||||
|
||||
<!-- |
||||
include Angular first |
||||
--> |
||||
<script type="text/javascript" src="/theme/js/angular-1.3.15.js"></script> |
||||
<script src="//d3js.org/d3.v3.min.js"></script> |
||||
</head> |
||||
|
||||
<body id="index" class="home"> |
||||
<div class="container"> |
||||
<h1><a href="/">dang-sunburst <strong></strong></a></h1> |
||||
<hr /> |
||||
|
||||
<h1>Authors on dang-sunburst</h1> |
||||
|
||||
<ul> </ul> |
||||
</div> |
||||
|
||||
<footer id="contentinfo" class="body"> |
||||
<hr /> |
||||
<p style="text-align: center"> |
||||
<span class="fa-stack fa-lg"> |
||||
<i class="fa fa-square fa-stack-2x"></i> |
||||
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i> |
||||
</span> |
||||
Made from the command line with vim by |
||||
<a href="http://charlesreid1.com">charlesreid1</a>. |
||||
</p> |
||||
|
||||
<p style="text-align: center;">Made with HTML ( |
||||
<a href="http://http://bootstrap.org/">Bootstrap</a>, |
||||
<a href="http://bootswatch.com">Bootswatch</a>), |
||||
Javascript ( |
||||
<a href="http://http://d3js.org/">D3.js</a>, |
||||
<a href=https://angularjs.org/">Angular.js</a>, |
||||
<a href="https://jquery.com/">jQuery</a>), |
||||
and Python ( |
||||
<a href="http://pydata.org">Pandas</a>, |
||||
<a href="http://getpelican.com">Pelican</a>, |
||||
<a href="http://ipython.org">Jupyter Notebooks</a>). |
||||
</p> |
||||
|
||||
<script type="text/javascript" src="/theme/js/jquery-1.11.2.js"></script> |
||||
<script type="text/javascript" src="/theme/js/bootstrap-3.3.4.js"></script> |
||||
<!-- |
||||
<script type="text/javascript" src="/theme/js/d3-3.5.5.js"></script> |
||||
<script type="text/javascript" src="/theme/js/leaflet-0.7.3.js"></script> |
||||
<script type="text/javascript" src="/theme/js/leaflet.ajax.min.js"></script> |
||||
--> |
||||
</footer><!-- /#contentinfo --> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,161 @@
@@ -0,0 +1,161 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<title>bubbles Chart</title> |
||||
<meta charset="utf-8" /> |
||||
|
||||
<!-- |
||||
my CSS styles |
||||
--> |
||||
<link href="/theme/css/bootstrap.css" rel="stylesheet" type="text/css"> |
||||
<link href="/theme/css/main.css" rel="stylesheet" type="text/css"> |
||||
|
||||
<link href="/theme/css/cosmo.css" rel="stylesheet" type="text/css"> |
||||
<link href="/theme/css/font-awesome.css" rel="stylesheet" type="text/css"/> |
||||
<link href="/theme/css/pygment.css" rel="stylesheet" type="text/css"/> |
||||
|
||||
<!-- |
||||
include Angular first |
||||
--> |
||||
<script type="text/javascript" src="/theme/js/angular-1.3.15.js"></script> |
||||
<script src="//d3js.org/d3.v3.min.js"></script> |
||||
</head> |
||||
|
||||
<body id="index" class="home"> |
||||
<div class="container"> |
||||
<h1><a href="/">dang-sunburst <strong></strong></a></h1> |
||||
<hr /> |
||||
|
||||
|
||||
<link href="/bubbles/bubbles.css" rel="stylesheet" stype="text/css" /> |
||||
|
||||
<div ng-app="bubblesApp"> |
||||
|
||||
<div ng-controller="bubblesController" ng-init="initialize()"> |
||||
|
||||
|
||||
<div class="row"> |
||||
<div class="col-sm-12" id="bubbles_title"> |
||||
<bubbleshead></bubbleshead> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="row"> |
||||
<div class="col-sm-10" id="bubbles_controls"> |
||||
<bubblescontrols></bubblescontrols> |
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
<div class="row"> |
||||
<div class="col-sm-6" id="bubbles_charts"> |
||||
<div class="row" id="bubbles_chart"> |
||||
<bubbleschart></bubbleschart> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="col-sm-6" id="bubbles_panels"> |
||||
<div class="row" id="bubbles_panel"> |
||||
<bubblespanel></bubblespanel> |
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
</div> |
||||
|
||||
|
||||
|
||||
<div class="row"> |
||||
|
||||
<div class="col-sm-10" id="bubbles_text"> |
||||
<div class="row" id="bubbles_md"> |
||||
Bubble chart. |
||||
|
||||
<br /> |
||||
<br /> |
||||
|
||||
<pre style="font-size: 8px;"> |
||||
[ |
||||
{ "className": "S324", |
||||
"axes": [ |
||||
{"value": 1, "axis": "January"}, |
||||
{"value": 0, "axis": "February"}, |
||||
|
||||
... |
||||
|
||||
{"value": 0, "axis": "December"} |
||||
] |
||||
}, |
||||
{ "className": "S328", |
||||
"axes": [ |
||||
{"value": 1, "axis": "January"}, |
||||
{"value": 1, "axis": "February"}, |
||||
|
||||
... |
||||
|
||||
{"value": 2, "axis": "December"} |
||||
] |
||||
}, |
||||
{ "className": "Y15", |
||||
"axes": [ |
||||
{"value": 3, "axis": "January"}, |
||||
{"value": 2, "axis": "February"}, |
||||
|
||||
... |
||||
|
||||
{"value": 1, "axis": "December"} |
||||
] |
||||
} |
||||
] |
||||
</pre> |
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
<script src="http://d3js.org/d3.v3.js"></script> |
||||
<script type="text/javascript" src="/bubbles/bubbles_modcontrol.js"></script> |
||||
<script type="text/javascript" src="/bubbles/bubbles_chart.js"></script> |
||||
|
||||
</div> |
||||
|
||||
<footer id="contentinfo" class="body"> |
||||
<hr /> |
||||
<p style="text-align: center"> |
||||
<span class="fa-stack fa-lg"> |
||||
<i class="fa fa-square fa-stack-2x"></i> |
||||
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i> |
||||
</span> |
||||
Made from the command line with vim by |
||||
<a href="http://charlesreid1.com">charlesreid1</a>. |
||||
</p> |
||||
|
||||
<p style="text-align: center;">Made with HTML ( |
||||
<a href="http://http://bootstrap.org/">Bootstrap</a>, |
||||
<a href="http://bootswatch.com">Bootswatch</a>), |
||||
Javascript ( |
||||
<a href="http://http://d3js.org/">D3.js</a>, |
||||
<a href=https://angularjs.org/">Angular.js</a>, |
||||
<a href="https://jquery.com/">jQuery</a>), |
||||
and Python ( |
||||
<a href="http://pydata.org">Pandas</a>, |
||||
<a href="http://getpelican.com">Pelican</a>, |
||||
<a href="http://ipython.org">Jupyter Notebooks</a>). |
||||
</p> |
||||
|
||||
<script type="text/javascript" src="/theme/js/jquery-1.11.2.js"></script> |
||||
<script type="text/javascript" src="/theme/js/bootstrap-3.3.4.js"></script> |
||||
<!-- |
||||
<script type="text/javascript" src="/theme/js/d3-3.5.5.js"></script> |
||||
<script type="text/javascript" src="/theme/js/leaflet-0.7.3.js"></script> |
||||
<script type="text/javascript" src="/theme/js/leaflet.ajax.min.js"></script> |
||||
--> |
||||
</footer><!-- /#contentinfo --> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,72 @@
@@ -0,0 +1,72 @@
|
||||
[{"labels": "S324", "values": [{"value": 1, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "S328", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 2, "label": "June"}, {"value": 2, "label": "July"}, {"value": 0, "label": "August"}, {"value": 1, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "Y15", "values": [{"value": 1, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "Y14", "values": [{"value": 2, "label": "January"}, {"value": 0, "label": "February"}, {"value": 1, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 1, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 1, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "I120", "values": [{"value": 2, "label": "January"}, {"value": 2, "label": "February"}, {"value": 2, "label": "March"}, {"value": 2, "label": "April"}, {"value": 2, "label": "May"}, {"value": 1, "label": "June"}, {"value": 6, "label": "July"}, {"value": 2, "label": "August"}, {"value": 1, "label": "September"}, {"value": 3, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "I129", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 1, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 1, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "A051", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 1, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "W19", "values": [{"value": 1, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 2, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 1, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "T465", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 1, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 1, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "C449", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 1, "label": "August"}, {"value": 0, "label": "September"}, {"value": 1, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "C119", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 1, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 1, "label": "September"}, {"value": 0, "label": "October"}, {"value": 1, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "C444", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 1, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "T519", "values": [{"value": 1, "label": "January"}, {"value": 1, "label": "February"}, {"value": 0, "label": "March"}, {"value": 1, "label": "April"}, {"value": 0, "label": "May"}, {"value": 1, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 1, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "T510", "values": [{"value": 3, "label": "January"}, {"value": 1, "label": "February"}, {"value": 6, "label": "March"}, {"value": 5, "label": "April"}, {"value": 5, "label": "May"}, {"value": 6, "label": "June"}, {"value": 6, "label": "July"}, {"value": 1, "label": "August"}, {"value": 8, "label": "September"}, {"value": 1, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "T511", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 1, "label": "May"}, {"value": 1, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "K117", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 1, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "W18", "values": [{"value": 2, "label": "January"}, {"value": 1, "label": "February"}, {"value": 1, "label": "March"}, {"value": 2, "label": "April"}, {"value": 1, "label": "May"}, {"value": 0, "label": "June"}, {"value": 1, "label": "July"}, {"value": 0, "label": "August"}, {"value": 2, "label": "September"}, {"value": 2, "label": "October"}, {"value": 1, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "C781", "values": [{"value": 0, "label": "January"}, {"value": 1, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "I38", "values": [{"value": 3, "label": "January"}, {"value": 0, "label": "February"}, {"value": 1, "label": "March"}, {"value": 2, "label": "April"}, {"value": 2, "label": "May"}, {"value": 3, "label": "June"}, {"value": 3, "label": "July"}, {"value": 1, "label": "August"}, {"value": 0, "label": "September"}, {"value": 2, "label": "October"}, {"value": 1, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "M109", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 2, "label": "June"}, {"value": 1, "label": "July"}, {"value": 1, "label": "August"}, {"value": 0, "label": "September"}, {"value": 1, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "G610", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 1, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "J159", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 1, "label": "March"}, {"value": 0, "label": "April"}, {"value": 1, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 1, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "J150", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 1, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "J151", "values": [{"value": 1, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 1, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "J152", "values": [{"value": 1, "label": "January"}, {"value": 1, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 1, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 1, "label": "September"}, {"value": 2, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "C259", "values": [{"value": 4, "label": "January"}, {"value": 4, "label": "February"}, {"value": 4, "label": "March"}, {"value": 3, "label": "April"}, {"value": 2, "label": "May"}, {"value": 5, "label": "June"}, {"value": 6, "label": "July"}, {"value": 7, "label": "August"}, {"value": 6, "label": "September"}, {"value": 5, "label": "October"}, {"value": 3, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "I829", "values": [{"value": 0, "label": "January"}, {"value": 1, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 1, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "T983", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 1, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "R402", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 1, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 1, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "C254", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 1, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "F059", "values": [{"value": 0, "label": "January"}, {"value": 1, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 1, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 1, "label": "August"}, {"value": 0, "label": "September"}, {"value": 1, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "F051", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 1, "label": "September"}, {"value": 1, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "C341", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 1, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 1, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "K909", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 1, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "J90", "values": [{"value": 1, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 2, "label": "April"}, {"value": 2, "label": "May"}, {"value": 1, "label": "June"}, {"value": 2, "label": "July"}, {"value": 0, "label": "August"}, {"value": 2, "label": "September"}, {"value": 2, "label": "October"}, {"value": 1, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "T443", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 1, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "J969", "values": [{"value": 11, "label": "January"}, {"value": 10, "label": "February"}, {"value": 13, "label": "March"}, {"value": 13, "label": "April"}, {"value": 17, "label": "May"}, {"value": 13, "label": "June"}, {"value": 16, "label": "July"}, {"value": 21, "label": "August"}, {"value": 11, "label": "September"}, {"value": 12, "label": "October"}, {"value": 4, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "J961", "values": [{"value": 4, "label": "January"}, {"value": 3, "label": "February"}, {"value": 4, "label": "March"}, {"value": 1, "label": "April"}, {"value": 3, "label": "May"}, {"value": 4, "label": "June"}, {"value": 2, "label": "July"}, {"value": 0, "label": "August"}, {"value": 4, "label": "September"}, {"value": 3, "label": "October"}, {"value": 1, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "J960", "values": [{"value": 5, "label": "January"}, {"value": 2, "label": "February"}, {"value": 8, "label": "March"}, {"value": 6, "label": "April"}, {"value": 5, "label": "May"}, {"value": 4, "label": "June"}, {"value": 7, "label": "July"}, {"value": 2, "label": "August"}, {"value": 9, "label": "September"}, {"value": 6, "label": "October"}, {"value": 1, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "V439", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 1, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "K137", "values": [{"value": 1, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "S061", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 1, "label": "July"}, {"value": 0, "label": "August"}, {"value": 1, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "S060", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 1, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "R090", "values": [{"value": 2, "label": "January"}, {"value": 2, "label": "February"}, {"value": 5, "label": "March"}, {"value": 2, "label": "April"}, {"value": 2, "label": "May"}, {"value": 0, "label": "June"}, {"value": 3, "label": "July"}, {"value": 4, "label": "August"}, {"value": 4, "label": "September"}, {"value": 3, "label": "October"}, {"value": 1, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "R092", "values": [{"value": 6, "label": "January"}, {"value": 5, "label": "February"}, {"value": 7, "label": "March"}, {"value": 1, "label": "April"}, {"value": 5, "label": "May"}, {"value": 2, "label": "June"}, {"value": 8, "label": "July"}, {"value": 5, "label": "August"}, {"value": 4, "label": "September"}, {"value": 4, "label": "October"}, {"value": 1, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "R098", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 1, "label": "August"}, {"value": 2, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "S066", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 1, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 1, "label": "July"}, {"value": 0, "label": "August"}, {"value": 1, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "S065", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 3, "label": "April"}, {"value": 2, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 3, "label": "September"}, {"value": 2, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "T794", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 1, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "I698", "values": [{"value": 2, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 1, "label": "April"}, {"value": 1, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 3, "label": "August"}, {"value": 0, "label": "September"}, {"value": 1, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "I694", "values": [{"value": 4, "label": "January"}, {"value": 1, "label": "February"}, {"value": 3, "label": "March"}, {"value": 1, "label": "April"}, {"value": 2, "label": "May"}, {"value": 0, "label": "June"}, {"value": 2, "label": "July"}, {"value": 2, "label": "August"}, {"value": 0, "label": "September"}, {"value": 2, "label": "October"}, {"value": 1, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "I690", "values": [{"value": 1, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "D693", "values": [{"value": 1, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "D695", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 1, "label": "August"}, {"value": 0, "label": "September"}, {"value": 1, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "D696", "values": [{"value": 0, "label": "January"}, {"value": 2, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 1, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 1, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "D699", "values": [{"value": 0, "label": "January"}, {"value": 1, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "K739", "values": [{"value": 0, "label": "January"}, {"value": 2, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 1, "label": "May"}, {"value": 1, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "X78", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 1, "label": "June"}, {"value": 0, "label": "July"}, {"value": 1, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "X74", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 2, "label": "May"}, {"value": 4, "label": "June"}, {"value": 8, "label": "July"}, {"value": 7, "label": "August"}, {"value": 6, "label": "September"}, {"value": 7, "label": "October"}, {"value": 1, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "I10", "values": [{"value": 33, "label": "January"}, {"value": 17, "label": "February"}, {"value": 32, "label": "March"}, {"value": 22, "label": "April"}, {"value": 22, "label": "May"}, {"value": 24, "label": "June"}, {"value": 22, "label": "July"}, {"value": 30, "label": "August"}, {"value": 20, "label": "September"}, {"value": 18, "label": "October"}, {"value": 8, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "C099", "values": [{"value": 0, "label": "January"}, {"value": 1, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "P236", "values": [{"value": 1, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "K922", "values": [{"value": 8, "label": "January"}, {"value": 5, "label": "February"}, {"value": 5, "label": "March"}, {"value": 5, "label": "April"}, {"value": 10, "label": "May"}, {"value": 7, "label": "June"}, {"value": 5, "label": "July"}, {"value": 5, "label": "August"}, {"value": 7, "label": "September"}, {"value": 8, "label": "October"}, {"value": 1, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "K920", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 1, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "Q938", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 1, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "D487", "values": [{"value": 0, "label": "January"}, {"value": 1, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 2, "label": "July"}, {"value": 0, "label": "August"}, {"value": 1, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "Q200", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 1, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "C151", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 1, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "C159", "values": [{"value": 7, "label": "January"}, {"value": 1, "label": "February"}, {"value": 0, "label": "March"}, {"value": 1, "label": "April"}, {"value": 5, "label": "May"}, {"value": 2, "label": "June"}, {"value": 3, "label": "July"}, {"value": 0, "label": "August"}, {"value": 2, "label": "September"}, {"value": 4, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "X94", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 1, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "V224", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 0, "label": "March"}, {"value": 0, "label": "April"}, {"value": 1, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 0, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}, |
||||
{"labels": "G409", "values": [{"value": 0, "label": "January"}, {"value": 0, "label": "February"}, {"value": 1, "label": "March"}, {"value": 0, "label": "April"}, {"value": 0, "label": "May"}, {"value": 0, "label": "June"}, {"value": 0, "label": "July"}, {"value": 0, "label": "August"}, {"value": 1, "label": "September"}, {"value": 0, "label": "October"}, {"value": 0, "label": "November"}, {"value": 0, "label": "December"}]}] |
||||
@ -0,0 +1,516 @@
@@ -0,0 +1,516 @@
|
||||
var ng; |
||||
dir = []; |
||||
|
||||
//////////////////////////////////////
|
||||
// Chart Directives
|
||||
//
|
||||
// This file defines Angular directives
|
||||
// that use D3 to draw charts.
|
||||
//
|
||||
|
||||
///////////////////////////////////////
|
||||
// Header Directives:
|
||||
//
|
||||
// Print out instructions, title, etc.
|
||||
|
||||
|
||||
ng = a.directive('bubbleshead', function($compile) { |
||||
|
||||
function link(scope, element, attr) { |
||||
|
||||
var el = element[0]; |
||||
|
||||
$(el).empty(); |
||||
|
||||
var dir = $("div#bubbles_title"); |
||||
|
||||
var h1 = $("<h1 />"); |
||||
|
||||
var b = $("<b />") |
||||
.text("bubble chart example") |
||||
.appendTo(h1); |
||||
|
||||
h1.appendTo(dir); |
||||
|
||||
|
||||
var p = $("<p />", { |
||||
"class" : "normal" }) |
||||
.html("A fancy little bubble chart.") |
||||
.appendTo(dir); |
||||
|
||||
|
||||
} |
||||
return { |
||||
restrict: "E", |
||||
link: link, |
||||
scope: {} |
||||
} |
||||
}); |
||||
dir.push(ng); |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
///////////////////////////////////////////////
|
||||
// Chart Controls Directives
|
||||
|
||||
ng = a.directive('bubblescontrols', function($compile) { |
||||
|
||||
function link(scope, element, attr) { |
||||
|
||||
// wait to build the buttons until we've loaded the data,
|
||||
// since the buttons come from the data.
|
||||
scope.$parent.$watch('bubblesdata',doStuff); |
||||
|
||||
function doStuff() { |
||||
if(!scope.$parent.bubblesdata) { return; } |
||||
buildButtons(element, scope.$parent); |
||||
} |
||||
|
||||
|
||||
}; |
||||
|
||||
function buildButtons(element,pscope) { |
||||
|
||||
var mydiv = "div#bubbles_controls"; |
||||
|
||||
var el = $(mydiv); |
||||
|
||||
var div = $("<div />"); |
||||
|
||||
|
||||
// ------------------------------------
|
||||
// Add ICD 10 code buttons
|
||||
//
|
||||
var btn_grp = $("<div />", { |
||||
"id" : "codebtns", |
||||
"class" : "btn-group" |
||||
}); |
||||
|
||||
for( var i = 0; i < pscope.bubblesdata.length; i++ ) { |
||||
var this_code = pscope.bubblesdata[i]['labels'] |
||||
var code = $("<a />", { |
||||
"class" : "btn btn-code btn-large btn-primary", |
||||
"changecode" : "", |
||||
"id" : "btn_"+this_code, |
||||
"code" : this_code, |
||||
}) |
||||
.html( this_code ) |
||||
.appendTo(btn_grp); |
||||
} |
||||
|
||||
|
||||
// to make buttons in this btn group active,
|
||||
// you have to use D3's classed() method
|
||||
// after you add the elements to the document
|
||||
// (i.e., after you call $compile)
|
||||
|
||||
angular.element(el).append($compile(btn_grp)(pscope)); |
||||
|
||||
|
||||
pscope.updateCode = function() { |
||||
|
||||
// -----------------------------
|
||||
// make button for active icd 10 code
|
||||
|
||||
d3.selectAll("a.btn-code").classed('active',false); |
||||
var btnlabel = "a#btn_"+pscope.icd10code; |
||||
d3.selectAll(btnlabel).classed('active',true); |
||||
|
||||
}; |
||||
|
||||
pscope.$watch('icd10code',pscope.updateCode); |
||||
|
||||
|
||||
} |
||||
return { |
||||
restrict: "E", |
||||
link: link, |
||||
scope: {} |
||||
} |
||||
}); |
||||
dir.push(ng); |
||||
|
||||
|
||||
//////////////////////////////////
|
||||
// Action directive:
|
||||
// What to do when the user changes the ICD 10 code
|
||||
// by clicking an ICD 10 code button
|
||||
|
||||
ng = a.directive("changecode", function($compile) { |
||||
|
||||
return function(pscope, element, attrs){ |
||||
element.bind("click", function(){ |
||||
|
||||
// first, update the scope variable
|
||||
// that holds the current icd 10 code
|
||||
// (no need to load any new data)
|
||||
|
||||
|
||||
// This is the ICD 10 code the user has selected.
|
||||
var this_code = attrs['code']; |
||||
var this_description = pscope.icd10codes_all[this_code] |
||||
|
||||
//console.log('Changed icd 10 code, updating description:');
|
||||
//console.log(this_code);
|
||||
//console.log(this_description);
|
||||
|
||||
|
||||
// !!!!!!!!!!!!!!!!!!!!!!!!
|
||||
// NOTE
|
||||
// The lines below - this $apply() method -
|
||||
// this is the way you change the variable
|
||||
// at the controller level, and get the
|
||||
// various watchers to detect changes.
|
||||
// !!!!!!!!!!!!!!!!!!!!!!!!!!
|
||||
pscope.$apply(function() { |
||||
pscope.icd10code = this_code; |
||||
}); |
||||
|
||||
pscope.$apply(function() { |
||||
pscope.description = this_description; |
||||
}); |
||||
|
||||
|
||||
//// This is some weak-sauce,
|
||||
//// its not even changing value of variable
|
||||
//pscope.update_icd10code(attrs['code']);
|
||||
//// ...
|
||||
//// .......
|
||||
//// seriously.
|
||||
//// all we needed was just
|
||||
//// pscope.$apply()
|
||||
////
|
||||
//// smh.
|
||||
|
||||
|
||||
|
||||
|
||||
//// then run the donut chart update function
|
||||
//pscope.updatebubbles();
|
||||
|
||||
// then run the button controllers update function
|
||||
pscope.updateCode(); |
||||
|
||||
}); |
||||
} |
||||
|
||||
}); |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
///////////////////////////////////////////////
|
||||
// Panels:
|
||||
// Display useful information in a pretty box
|
||||
|
||||
|
||||
ng = a.directive('bubblespanel', function($compile) { |
||||
|
||||
|
||||
function link(scope, element, attr) { |
||||
|
||||
|
||||
|
||||
var el = element[0]; |
||||
|
||||
var pscope = scope.$parent; |
||||
|
||||
// --------------------------
|
||||
// add display for details
|
||||
|
||||
// assemble the tags,
|
||||
// then compile the html
|
||||
// select element of interest with angular.element
|
||||
// and append the compiled tags
|
||||
//
|
||||
var br = $("<br />").appendTo(el); |
||||
|
||||
var panel = $("<div />", { |
||||
"class" : "panel panel-primary", |
||||
"id" : "first" |
||||
}); |
||||
|
||||
var panelhead = $("<div />", { |
||||
"class" : "panel-heading" |
||||
}).appendTo(panel); |
||||
|
||||
var h3 = $("<h3 />", { |
||||
"class" : "panel-title" |
||||
}).text("Current ICD 10 Code") |
||||
.appendTo(panelhead); |
||||
|
||||
|
||||
|
||||
var panelbody = $("<div />", { |
||||
"class" : "panel-body" |
||||
}).appendTo(panel); |
||||
|
||||
var maindiv = $("<div />", { |
||||
}).appendTo(panelbody); |
||||
|
||||
var h = $("<h3 />") |
||||
.html("ICD 10 Code: [[icd10code]]") |
||||
.appendTo(maindiv); |
||||
|
||||
var de = $("<p />", { |
||||
"class" : "lead" }) |
||||
.html("Description: [[description]]") |
||||
.appendTo(maindiv); |
||||
|
||||
angular.element(el).prepend($compile(panel)(pscope)); |
||||
|
||||
} |
||||
|
||||
return { |
||||
link: link, |
||||
restrict: "E", |
||||
scope: { } |
||||
}; |
||||
}); |
||||
dir.push(ng); |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
///////////////////////////////////////////////
|
||||
// bubbles Chart
|
||||
//
|
||||
// This is the actual donut chart, of gender ratios.
|
||||
|
||||
ng = a.directive('bubbleschart', function($compile) { |
||||
|
||||
function link(scope, element, attr) { |
||||
|
||||
scope.$parent.$watch('bubblesdata',doStuff); |
||||
|
||||
function doStuff() { |
||||
if(!scope.$parent.bubblesdata) { return; } |
||||
buildbubbles(element, scope.$parent); |
||||
} |
||||
|
||||
|
||||
}; |
||||
|
||||
function buildbubbles(element,pscope) { |
||||
|
||||
var mydiv = "div#bubbles_chart"; |
||||
|
||||
|
||||
var diameter = 500, //max size of the bubbles
|
||||
color = d3.scale.category20b(); //color category
|
||||
|
||||
var bubble = d3.layout.pack() |
||||
.sort(null) |
||||
.size([diameter, diameter]) |
||||
.padding(1.5); |
||||
|
||||
var svg = d3.select(mydiv).append("svg") |
||||
.attr("width", diameter) |
||||
.attr("height", diameter) |
||||
.attr("class", "bubble"); |
||||
|
||||
|
||||
|
||||
pscope.updatebubbles = function() { |
||||
|
||||
console.log('update bubbles'); |
||||
|
||||
var all_data = pscope.bubblesdata; |
||||
|
||||
// ----------------------------------
|
||||
// Get pie chart data
|
||||
//
|
||||
// Here, we have all donut data
|
||||
// available to us.
|
||||
//
|
||||
// We use the currently-selected ICD 10 code
|
||||
// to filter which donut data is being plotted.
|
||||
//
|
||||
// Where to keep track of current code?
|
||||
// In the controller (available via pscope).
|
||||
// pscope.icd10code
|
||||
//
|
||||
var code; |
||||
var data; |
||||
for( var i=0; i < all_data.length; i++ ) { |
||||
|
||||
// set excpetion handling:
|
||||
// if no icd10code is set, problems occur.
|
||||
if(all_data[i]['labels'] == pscope.icd10code) { |
||||
code = all_data[i]['labels']; |
||||
data = all_data[i]['values']; |
||||
break; |
||||
} |
||||
} |
||||
|
||||
// finished; use data
|
||||
// ---------------------------------
|
||||
|
||||
svg.selectAll("circle").remove() |
||||
svg.selectAll(".bubblelabels").remove() |
||||
|
||||
/////////////////////////////////////////
|
||||
// Create chart
|
||||
//
|
||||
//
|
||||
|
||||
//bubbles needs very specific format, convert data to this.
|
||||
var nodes = bubble.nodes({children:data}).filter(function(d) { return !d.children; }); |
||||
|
||||
var g = svg.selectAll("circle") |
||||
.data(nodes, function(d) { |
||||
return d.label; |
||||
}) |
||||
.enter(); |
||||
|
||||
g.append("circle") |
||||
.attr("r", function(d) { |
||||
return +d.value*10; |
||||
}) |
||||
.attr("cx", function(d){ return d.x; }) |
||||
.attr("cy", function(d){ return d.y; }) |
||||
.attr("class","node") |
||||
.style("fill", function(d) { return color(d.label); }); |
||||
g.append("text") |
||||
.text(function(d){ |
||||
if( +d.value > 0 ) { |
||||
return d.label; |
||||
} |
||||
}) |
||||
.attr("class","bubblelabels") |
||||
.attr("x", function(d){ return d.x; }) |
||||
.attr("y", function(d){ return d.y; }) |
||||
|
||||
/* |
||||
//format the text for each bubble
|
||||
circles.append("text") |
||||
//.attr("x", function(d){ return d.x; })
|
||||
//.attr("y", function(d){ return d.y; })
|
||||
.attr("text-anchor", "middle") |
||||
.text(function(d){ |
||||
console.log(d.label); |
||||
return d.label; }) |
||||
.style({ |
||||
"color" : "red", |
||||
"font-family":"Helvetica Neue, Helvetica, Arial, san-serif", |
||||
"font-size": "12px" |
||||
}); |
||||
*/ |
||||
|
||||
|
||||
} |
||||
|
||||
pscope.$watch('icd10code',pscope.updatebubbles); |
||||
} |
||||
|
||||
return { |
||||
link: link, |
||||
restrict: "E", |
||||
scope: { } |
||||
}; |
||||
}); |
||||
dir.push(ng); |
||||
|
||||
|
||||
|
||||
|
||||
// BubbleChart = function(){
|
||||
//
|
||||
// var diameter;
|
||||
//
|
||||
// /**
|
||||
// * Create a bubble chart
|
||||
// *
|
||||
// * @param {data} array of objects with name/value keys
|
||||
// * @param {elm} string the element which to put this chart
|
||||
// * @param {size} object with width/height keys
|
||||
// * @param {pallet} array | undefined of hex codes for the bubble colors
|
||||
// */
|
||||
// this.createChart = function(data, elm, size, pallet) {
|
||||
//
|
||||
// pallet = pallet || ["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"];
|
||||
// var domain = [],
|
||||
// sorted = [];
|
||||
//
|
||||
// data = data.sort(function(a, b){ return b.value - a.value});
|
||||
//
|
||||
//
|
||||
// for(var i=0; i<data.length; ++i){
|
||||
// domain.push(data[i].value);
|
||||
// }
|
||||
//
|
||||
// var diameter = Math.min(size.width, size.height),
|
||||
// color = d3.scale.ordinal().domain(domain).range(pallet);
|
||||
//
|
||||
// var bubble = d3.layout.pack()
|
||||
// .sort(null)
|
||||
// .size([size.width, size.height])
|
||||
// .padding(1.5);
|
||||
//
|
||||
// var svg = d3.select(elm).append("svg")
|
||||
// .attr("width", size.width)
|
||||
// .attr("height", size.height)
|
||||
// .attr("class", "bubble");
|
||||
//
|
||||
// nodes = bubble.nodes({children:data}).filter(function(d) { return !d.children; });
|
||||
//
|
||||
// var circles = svg.selectAll("circle")
|
||||
// .data(nodes, function(d){return d.name;})
|
||||
// .enter()
|
||||
// .append("circle")
|
||||
// .attr("r", 0)
|
||||
// .style("fill", function(d) { console.log(d); return color(d.value); })
|
||||
// .attr("cx", function(d){ return d.x;})
|
||||
// .attr("cy", function(d){ return d.y;})
|
||||
// .attr("class", "node");
|
||||
//
|
||||
// circles.transition()
|
||||
// .duration(1000)
|
||||
// .attr("r", function(d) { return d.r; })
|
||||
// .each('end', function(){ display_text();});
|
||||
//
|
||||
// function display_text() {
|
||||
// var text = svg
|
||||
// .selectAll(".text")
|
||||
// .data(nodes, function(d){return d.name;});
|
||||
//
|
||||
// text.enter().append("text")
|
||||
// .attr("class", "text")
|
||||
// .style("font-size", "10px")
|
||||
// .attr("x", function(d) { return d.x; })
|
||||
// .attr("y", function(d) { return d.y; })
|
||||
// .attr("dy", ".3em")
|
||||
// .attr("text-anchor", "middle")
|
||||
// .text(function(d) { return d.name.substring(0, d.r / 3); });
|
||||
// }
|
||||
//
|
||||
// function hide_text() {
|
||||
// var text = svg.selectAll(".text").remove();
|
||||
// }
|
||||
//
|
||||
// this.changeData = function(newData){
|
||||
// hide_text();
|
||||
// nodes = bubble.nodes({children:newData}).filter(function(d) { return !d.children; });
|
||||
// circles = circles.data(nodes);
|
||||
// circles.transition().duration(1000)
|
||||
// .attr("r", function(d){ return d.r;})
|
||||
// .attr("cx", function(d){ return d.x;})
|
||||
// .attr("cy", function(d){ return d.y;})
|
||||
// .each('end', function(){ display_text();});
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// d3.select(self.frameElement).style("height", diameter + "px");
|
||||
//
|
||||
// return this;
|
||||
// };
|
||||
//
|
||||
//
|
||||
// */
|
||||
@ -0,0 +1,76 @@
@@ -0,0 +1,76 @@
|
||||
///////////////////////////////////////
|
||||
//
|
||||
// bubbles
|
||||
//
|
||||
// Module/Controller
|
||||
//
|
||||
|
||||
var a = angular.module("bubblesApp", [], function($interpolateProvider) { |
||||
$interpolateProvider.startSymbol('[['); |
||||
$interpolateProvider.endSymbol(']]'); |
||||
} |
||||
); |
||||
|
||||
var datafactory = a.factory('datafactory', function($http, $q) { |
||||
|
||||
return { |
||||
getbubblesdata: function() { |
||||
var deferred = $q.defer(); |
||||
|
||||
var json_file = 'bubbles.json'; |
||||
|
||||
$http.get(json_file).success(function(data) { |
||||
deferred.resolve(data); |
||||
}).error(function(){ |
||||
console.log('error loading json file: '+json_file); |
||||
deferred.reject(); |
||||
}); |
||||
|
||||
return deferred.promise; |
||||
}, |
||||
|
||||
getCodeData: function() { |
||||
var deferred = $q.defer(); |
||||
|
||||
$http.get('icd10codes.json').success(function(data) { |
||||
deferred.resolve(data); |
||||
}).error(function(){ |
||||
console.log('error loading icd10codes.json'); |
||||
deferred.reject(); |
||||
}); |
||||
|
||||
return deferred.promise; |
||||
} |
||||
|
||||
} |
||||
}); |
||||
|
||||
function bubblesController($scope,datafactory) { |
||||
|
||||
$scope.initialize = function() { |
||||
|
||||
$scope.icd10code="S324"; |
||||
$scope.donutFemale = 0; |
||||
$scope.donutMale = 0; |
||||
|
||||
datafactory.getbubblesdata().then( |
||||
function(data) { |
||||
$scope.bubblesdata = data; |
||||
} |
||||
); |
||||
|
||||
datafactory.getCodeData().then( |
||||
function(data) { |
||||
$scope.icd10codes_all = data; |
||||
var descr = $scope.icd10codes_all[$scope.icd10code]; |
||||
$scope.description = descr; |
||||
} |
||||
); |
||||
|
||||
|
||||
} |
||||
|
||||
} |
||||
|
||||
// the first few arguments of the list should correspond to the Angular-namespace stuff to feed to controller
|
||||
var c = a.controller("bubblesController", ["$scope", "datafactory", bubblesController]); |
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 99 KiB |
|
Before Width: | Height: | Size: 115 KiB After Width: | Height: | Size: 115 KiB |
|
After Width: | Height: | Size: 63 KiB |
|
After Width: | Height: | Size: 70 KiB |
|
Before Width: | Height: | Size: 106 KiB After Width: | Height: | Size: 106 KiB |
|
Before Width: | Height: | Size: 90 KiB After Width: | Height: | Size: 90 KiB |
|
Before Width: | Height: | Size: 105 KiB After Width: | Height: | Size: 105 KiB |
|
Before Width: | Height: | Size: 129 KiB After Width: | Height: | Size: 129 KiB |
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 3.8 KiB |
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 50 KiB |
|
Before Width: | Height: | Size: 115 KiB After Width: | Height: | Size: 115 KiB |
|
After Width: | Height: | Size: 106 KiB |
|
After Width: | Height: | Size: 58 KiB |
|
Before Width: | Height: | Size: 6.3 KiB After Width: | Height: | Size: 6.3 KiB |
@ -0,0 +1,86 @@
@@ -0,0 +1,86 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<title>Sunburst Chart: Bigrams</title> |
||||
<meta charset="utf-8" /> |
||||
|
||||
<!-- |
||||
my CSS styles |
||||
--> |
||||
<link href="/theme/css/bootstrap.css" rel="stylesheet" type="text/css"> |
||||
<link href="/theme/css/main.css" rel="stylesheet" type="text/css"> |
||||
|
||||
<link href="/theme/css/cosmo.css" rel="stylesheet" type="text/css"> |
||||
<link href="/theme/css/font-awesome.css" rel="stylesheet" type="text/css"/> |
||||
<link href="/theme/css/pygment.css" rel="stylesheet" type="text/css"/> |
||||
|
||||
<!-- |
||||
include Angular first |
||||
--> |
||||
<script type="text/javascript" src="/theme/js/angular-1.3.15.js"></script> |
||||
<script src="//d3js.org/d3.v3.min.js"></script> |
||||
</head> |
||||
|
||||
<body id="index" class="home"> |
||||
<div class="container"> |
||||
<h1><a href="/">dang-sunburst <strong></strong></a></h1> |
||||
<hr /> |
||||
|
||||
|
||||
<link href="/letters/bigrams.css" rel="stylesheet" stype="text/css" /> |
||||
|
||||
<div ng-app="bigramsApp"> |
||||
|
||||
<div ng-controller="HelloController" ng-init="initialize()"> |
||||
|
||||
<p> |
||||
<bigram-sunburst-head></bigram-sunburst-head> |
||||
<bigram-sunburst-controls></bigram-sunburst-controls> |
||||
<bigram-sunburst-chart></bigram-sunburst-chart> |
||||
</p> |
||||
|
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
<script type="text/javascript" src="/letters/bigrams_modcontrol.js"></script> |
||||
<script type="text/javascript" src="/letters/bigrams_sunburst.js"></script> |
||||
|
||||
</div> |
||||
|
||||
<footer id="contentinfo" class="body"> |
||||
<hr /> |
||||
<p style="text-align: center"> |
||||
<span class="fa-stack fa-lg"> |
||||
<i class="fa fa-square fa-stack-2x"></i> |
||||
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i> |
||||
</span> |
||||
Made from the command line with vim by |
||||
<a href="http://charlesreid1.com">charlesreid1</a>. |
||||
</p> |
||||
|
||||
<p style="text-align: center;">Made with HTML ( |
||||
<a href="http://http://bootstrap.org/">Bootstrap</a>, |
||||
<a href="http://bootswatch.com">Bootswatch</a>), |
||||
Javascript ( |
||||
<a href="http://http://d3js.org/">D3.js</a>, |
||||
<a href=https://angularjs.org/">Angular.js</a>, |
||||
<a href="https://jquery.com/">jQuery</a>), |
||||
and Python ( |
||||
<a href="http://pydata.org">Pandas</a>, |
||||
<a href="http://getpelican.com">Pelican</a>, |
||||
<a href="http://ipython.org">Jupyter Notebooks</a>). |
||||
</p> |
||||
|
||||
<script type="text/javascript" src="/theme/js/jquery-1.11.2.js"></script> |
||||
<script type="text/javascript" src="/theme/js/bootstrap-3.3.4.js"></script> |
||||
<!-- |
||||
<script type="text/javascript" src="/theme/js/d3-3.5.5.js"></script> |
||||
<script type="text/javascript" src="/theme/js/leaflet-0.7.3.js"></script> |
||||
<script type="text/javascript" src="/theme/js/leaflet.ajax.min.js"></script> |
||||
--> |
||||
</footer><!-- /#contentinfo --> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,86 @@
@@ -0,0 +1,86 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<title>Interactive Sunburst Chart: Bigrams</title> |
||||
<meta charset="utf-8" /> |
||||
|
||||
<!-- |
||||
my CSS styles |
||||
--> |
||||
<link href="/theme/css/bootstrap.css" rel="stylesheet" type="text/css"> |
||||
<link href="/theme/css/main.css" rel="stylesheet" type="text/css"> |
||||
|
||||
<link href="/theme/css/cosmo.css" rel="stylesheet" type="text/css"> |
||||
<link href="/theme/css/font-awesome.css" rel="stylesheet" type="text/css"/> |
||||
<link href="/theme/css/pygment.css" rel="stylesheet" type="text/css"/> |
||||
|
||||
<!-- |
||||
include Angular first |
||||
--> |
||||
<script type="text/javascript" src="/theme/js/angular-1.3.15.js"></script> |
||||
<script src="//d3js.org/d3.v3.min.js"></script> |
||||
</head> |
||||
|
||||
<body id="index" class="home"> |
||||
<div class="container"> |
||||
<h1><a href="/">dang-sunburst <strong></strong></a></h1> |
||||
<hr /> |
||||
|
||||
|
||||
<link href="/letters/bigrams2.css" rel="stylesheet" stype="text/css" /> |
||||
|
||||
<div ng-app="bigramsApp"> |
||||
|
||||
<div ng-controller="Bigram2Controller" ng-init="initialize()"> |
||||
|
||||
<p> |
||||
<bigram2-sunburst-head></bigram2-sunburst-head> |
||||
<bigram2-sunburst-controls></bigram2-sunburst-controls> |
||||
<bigram2-sunburst-chart></bigram2-sunburst-chart> |
||||
</p> |
||||
|
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
<script type="text/javascript" src="/letters/bigrams2_modcontrol.js"></script> |
||||
<script type="text/javascript" src="/letters/bigrams2_sunburst.js"></script> |
||||
|
||||
</div> |
||||
|
||||
<footer id="contentinfo" class="body"> |
||||
<hr /> |
||||
<p style="text-align: center"> |
||||
<span class="fa-stack fa-lg"> |
||||
<i class="fa fa-square fa-stack-2x"></i> |
||||
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i> |
||||
</span> |
||||
Made from the command line with vim by |
||||
<a href="http://charlesreid1.com">charlesreid1</a>. |
||||
</p> |
||||
|
||||
<p style="text-align: center;">Made with HTML ( |
||||
<a href="http://http://bootstrap.org/">Bootstrap</a>, |
||||
<a href="http://bootswatch.com">Bootswatch</a>), |
||||
Javascript ( |
||||
<a href="http://http://d3js.org/">D3.js</a>, |
||||
<a href=https://angularjs.org/">Angular.js</a>, |
||||
<a href="https://jquery.com/">jQuery</a>), |
||||
and Python ( |
||||
<a href="http://pydata.org">Pandas</a>, |
||||
<a href="http://getpelican.com">Pelican</a>, |
||||
<a href="http://ipython.org">Jupyter Notebooks</a>). |
||||
</p> |
||||
|
||||
<script type="text/javascript" src="/theme/js/jquery-1.11.2.js"></script> |
||||
<script type="text/javascript" src="/theme/js/bootstrap-3.3.4.js"></script> |
||||
<!-- |
||||
<script type="text/javascript" src="/theme/js/d3-3.5.5.js"></script> |
||||
<script type="text/javascript" src="/theme/js/leaflet-0.7.3.js"></script> |
||||
<script type="text/javascript" src="/theme/js/leaflet.ajax.min.js"></script> |
||||
--> |
||||
</footer><!-- /#contentinfo --> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,84 @@
@@ -0,0 +1,84 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<title>Hello</title> |
||||
<meta charset="utf-8" /> |
||||
|
||||
<!-- |
||||
my CSS styles |
||||
--> |
||||
<link href="/theme/css/bootstrap.css" rel="stylesheet" type="text/css"> |
||||
<link href="/theme/css/main.css" rel="stylesheet" type="text/css"> |
||||
|
||||
<link href="/theme/css/cosmo.css" rel="stylesheet" type="text/css"> |
||||
<link href="/theme/css/font-awesome.css" rel="stylesheet" type="text/css"/> |
||||
<link href="/theme/css/pygment.css" rel="stylesheet" type="text/css"/> |
||||
|
||||
<!-- |
||||
include Angular first |
||||
--> |
||||
<script type="text/javascript" src="/theme/js/angular-1.3.15.js"></script> |
||||
<script src="//d3js.org/d3.v3.min.js"></script> |
||||
</head> |
||||
|
||||
<body id="index" class="home"> |
||||
<div class="container"> |
||||
<h1><a href="/">dang-sunburst <strong></strong></a></h1> |
||||
<hr /> |
||||
|
||||
|
||||
<div ng-app="lettersApp"> |
||||
|
||||
<div ng-controller="HelloController" ng-init="initialize()"> |
||||
|
||||
<p> |
||||
<plain-sunburst-head></plain-sunburst-head> |
||||
<plain-sunburst-controls></plain-sunburst-controls> |
||||
<plain-sunburst-chart></plain-sunburst-chart> |
||||
</p> |
||||
|
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
<script type="text/javascript" src="/letters/plain_modcontrol.js"></script> |
||||
<script type="text/javascript" src="/letters/plain_sunburst.js"></script> |
||||
|
||||
</div> |
||||
|
||||
<footer id="contentinfo" class="body"> |
||||
<hr /> |
||||
<p style="text-align: center"> |
||||
<span class="fa-stack fa-lg"> |
||||
<i class="fa fa-square fa-stack-2x"></i> |
||||
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i> |
||||
</span> |
||||
Made from the command line with vim by |
||||
<a href="http://charlesreid1.com">charlesreid1</a>. |
||||
</p> |
||||
|
||||
<p style="text-align: center;">Made with HTML ( |
||||
<a href="http://http://bootstrap.org/">Bootstrap</a>, |
||||
<a href="http://bootswatch.com">Bootswatch</a>), |
||||
Javascript ( |
||||
<a href="http://http://d3js.org/">D3.js</a>, |
||||
<a href=https://angularjs.org/">Angular.js</a>, |
||||
<a href="https://jquery.com/">jQuery</a>), |
||||
and Python ( |
||||
<a href="http://pydata.org">Pandas</a>, |
||||
<a href="http://getpelican.com">Pelican</a>, |
||||
<a href="http://ipython.org">Jupyter Notebooks</a>). |
||||
</p> |
||||
|
||||
<script type="text/javascript" src="/theme/js/jquery-1.11.2.js"></script> |
||||
<script type="text/javascript" src="/theme/js/bootstrap-3.3.4.js"></script> |
||||
<!-- |
||||
<script type="text/javascript" src="/theme/js/d3-3.5.5.js"></script> |
||||
<script type="text/javascript" src="/theme/js/leaflet-0.7.3.js"></script> |
||||
<script type="text/javascript" src="/theme/js/leaflet.ajax.min.js"></script> |
||||
--> |
||||
</footer><!-- /#contentinfo --> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,414 @@
@@ -0,0 +1,414 @@
|
||||
/* |
||||
* author: charles reid |
||||
|
||||
var data = [ |
||||
{ |
||||
groupName: 'group1', // optional, can be used for styling
|
||||
values: [ |
||||
{label: "asdf", value: 21}, |
||||
{label: "qwerty", value: 19}, |
||||
{label: "woieru", value: 11}, |
||||
{label: "nxcb", value: 13} |
||||
] |
||||
}, |
||||
{ |
||||
groupName: 'group2', // optional, can be used for styling
|
||||
values: [ |
||||
{label: "asdf", value: 21}, |
||||
{label: "qwerty", value: 19}, |
||||
{label: "woieru", value: 11}, |
||||
{label: "nxcb", value: 13} |
||||
] |
||||
} |
||||
]; |
||||
|
||||
*/ |
||||
var BarChart = { |
||||
|
||||
defaultConfig: { |
||||
containerClass: 'bar-chart', |
||||
w: 600, |
||||
h: 600, |
||||
maxValue: 0, |
||||
color: d3.scale.category10(), |
||||
axisLine: true, |
||||
axisText: true, |
||||
axisJoin: function(d, i) { |
||||
return d.className || i; |
||||
}, |
||||
transitionDuration: 300 |
||||
}, |
||||
chartSetup: function() { |
||||
|
||||
// default config
|
||||
var cfg = Object.create(BarChart.defaultConfig); |
||||
|
||||
function bar(selection) { |
||||
|
||||
selection.each(function(both_data) { |
||||
|
||||
var code = both_data[0]['className']; |
||||
var data = both_data[0]['axes'] |
||||
|
||||
var container = d3.select(this); |
||||
|
||||
console.log('from a special place:'); |
||||
console.log(data); |
||||
|
||||
//container.empty();
|
||||
|
||||
//container.classed(cfg.containerClass, 1);
|
||||
|
||||
///////////////////////////////////
|
||||
// now draw the svg with d3
|
||||
|
||||
// ---------------
|
||||
// the chart itself:
|
||||
|
||||
var margin = { |
||||
top: 10, |
||||
bottom: 100, |
||||
|
||||
right: 30, |
||||
left: 50 |
||||
}; |
||||
|
||||
var w = cfg.w; |
||||
var h = cfg.h; |
||||
|
||||
var barwidth = w - margin.left - margin.right; |
||||
var barheight = h - margin.top - margin.bottom; |
||||
|
||||
var x = d3.scale.ordinal() |
||||
.rangeRoundBands([0, barwidth], .1); |
||||
|
||||
var y = d3.scale.linear() |
||||
.range([barheight, 0]); |
||||
|
||||
var xAxis = d3.svg.axis() |
||||
.scale(x) |
||||
.orient("bottom"); |
||||
|
||||
var yAxis = d3.svg.axis() |
||||
.scale(y) |
||||
.orient("left") |
||||
.ticks(10) |
||||
|
||||
|
||||
|
||||
x.domain(data.map(function(d) { return d.label; })); |
||||
|
||||
y.domain([0, d3.max(data, function(d) { return d.value; })]); |
||||
|
||||
container.append("g") |
||||
.attr("class", "x axis") |
||||
.attr("transform", function(d,i) { |
||||
return "translate(0,"+ (barheight) + ")"; |
||||
}) |
||||
.call(xAxis) |
||||
.selectAll("text") |
||||
.attr("class", "x axis label") |
||||
.attr("transform", "rotate(90)" ) |
||||
.style("text-anchor", "start") |
||||
.attr("dx", "0.5em") |
||||
.attr("dy", "-1em"); |
||||
|
||||
container.append("g") |
||||
.attr("class", "y axis") |
||||
.call(yAxis) |
||||
.append("text") |
||||
.attr("class", "y axis label") |
||||
.attr("transform", "rotate(90)") |
||||
.style("text-anchor", "start") |
||||
.attr("y", 6) |
||||
.attr("dy", "3.5em"); |
||||
//.text("Number of Death Records");
|
||||
|
||||
var color = d3.scale.category10(); |
||||
container.selectAll(".bar") |
||||
.data(data) |
||||
.enter().append("rect") |
||||
.attr("class", "bar") |
||||
.attr("fill",function(d,i) { |
||||
///////////////////////////////////
|
||||
// uuuugggghhhhhh fiixxxxx
|
||||
return color(d.label) |
||||
///////////////////////////////////
|
||||
}) |
||||
.attr("x", function(d) { return x(d.label); }) |
||||
.attr("width", x.rangeBand()) |
||||
.attr("y", function(d) { return y(d.value); }) |
||||
.attr("height", function(d) { |
||||
var toptobottom = (barheight); |
||||
var toptobartop = y(d.value); |
||||
var ht = toptobottom - toptobartop |
||||
return ht; |
||||
}); |
||||
|
||||
function type(d) { |
||||
d.value = +d.value; |
||||
return d; |
||||
} |
||||
|
||||
// else: "No Data" label
|
||||
|
||||
}); |
||||
} |
||||
|
||||
bar.config = function(value) { |
||||
if(!arguments.length) { |
||||
return cfg; |
||||
} |
||||
if(arguments.length > 1) { |
||||
cfg[arguments[0]] = arguments[1]; |
||||
} |
||||
else { |
||||
d3.entries(value || {}).forEach(function(option) { |
||||
cfg[option.key] = option.value; |
||||
}); |
||||
} |
||||
return bar; |
||||
}; |
||||
|
||||
return bar; |
||||
|
||||
}, |
||||
|
||||
draw: function(id, d, options) { |
||||
var chart = BarChart.chart().config(options); |
||||
var cfg = chart.config(); |
||||
|
||||
d3.select(id).select('svg').remove(); |
||||
d3.select(id) |
||||
.append("svg") |
||||
.attr("width", cfg.w) |
||||
.attr("height", cfg.h) |
||||
.datum(d) |
||||
.call(chart); |
||||
} |
||||
|
||||
|
||||
}; |
||||
|
||||
|
||||
|
||||
|
||||
/* |
||||
* A special bar chart |
||||
* from Mike Bostock |
||||
* |
||||
* http://bl.ocks.org/mbostock/3885304
|
||||
|
||||
original data is a TSV in this format: |
||||
|
||||
letter frequency |
||||
A .08167 |
||||
B .01492 |
||||
C .02782 |
||||
D .04253 |
||||
E .12702 |
||||
F .02288 |
||||
G .02015 |
||||
H .06094 |
||||
I .06966 |
||||
J .00153 |
||||
K .00772 |
||||
L .04025 |
||||
M .02406 |
||||
N .06749 |
||||
O .07507 |
||||
P .01929 |
||||
Q .00095 |
||||
R .05987 |
||||
S .06327 |
||||
T .09056 |
||||
U .02758 |
||||
V .00978 |
||||
W .02360 |
||||
X .00150 |
||||
Y .01974 |
||||
Z .00074 |
||||
|
||||
|
||||
Alternative 1: |
||||
(Use this one!) |
||||
-------------- |
||||
Single series/univariate bar chart: |
||||
|
||||
[ |
||||
{ |
||||
'letter' : 'A', |
||||
'frequency' : 0.08167 |
||||
}, |
||||
{ |
||||
'letter' : 'B', |
||||
'frequency' : 0.01492 |
||||
} |
||||
... |
||||
] |
||||
|
||||
(A bit verbose, but good to stick with this |
||||
because it's a structure D3 likes.) |
||||
|
||||
Alternative 2: |
||||
(XXXXXX don't use XXXXXXX) |
||||
---------------- |
||||
|
||||
{ |
||||
'letter' : ['A','B','C','D', .... ], |
||||
'frequency' : [0.08167, 0.01492, ... ] |
||||
} |
||||
|
||||
More compact, but requires some untangling. |
||||
Not keen on doing this with Javascript. |
||||
|
||||
*/ |
||||
var BostockBarChart = { |
||||
|
||||
defaultConfig: { |
||||
containerClass: 'bostock-bar-chart', |
||||
parentDiv: 'bar2_chart', |
||||
w: 400, |
||||
h: 400, |
||||
maxValue: 0, |
||||
color: d3.scale.category10(1), |
||||
hovercolor: d3.scale.category10(2) |
||||
}, //end defaultConfig
|
||||
|
||||
/* static chart, easy peasy */ |
||||
chart: function() { |
||||
|
||||
|
||||
// default config
|
||||
var cfg = Object.create(BostockBarChart.defaultConfig); |
||||
|
||||
|
||||
function bar(selection) { |
||||
|
||||
data = selection.data()[0]; |
||||
|
||||
var container = d3.select(this); |
||||
|
||||
// ---------8<-----------
|
||||
// commence copy and paste from
|
||||
// http://bl.ocks.org/mbostock/3310560
|
||||
|
||||
var margin = {top: 20, right: 30, bottom: 30, left: 40}, |
||||
width = 960 - margin.left - margin.right, |
||||
height = 500 - margin.top - margin.bottom; |
||||
|
||||
var x = d3.scale.ordinal() |
||||
.rangeRoundBands([0, width], 0.1, 0.2); |
||||
|
||||
var y = d3.scale.linear() |
||||
.range([height, 0]); |
||||
|
||||
var svg = container.append("svg") |
||||
.attr("width", width + margin.left + margin.right) |
||||
.attr("height", height + margin.top + margin.bottom) |
||||
.append("g") |
||||
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); |
||||
|
||||
// function(error, data)
|
||||
// if (error) throw error;
|
||||
|
||||
x.domain( data.map(function(d) { return d.letter; })); |
||||
y.domain([0, d3.max(data, function(d) { return d.frequency; })]); |
||||
|
||||
svg.append("g") |
||||
.attr("class", "x axis") |
||||
.attr("transform", "translate(0," + height + ")") |
||||
.call(d3.svg.axis().scale(x).orient("bottom")); |
||||
|
||||
svg.append("g") |
||||
.attr("class", "y axis") |
||||
.call(d3.svg.axis().scale(y).orient("left")); |
||||
/* |
||||
.append("text") |
||||
.attr("transform", "rotate(-90)") |
||||
.attr("y", 6) |
||||
.attr("dy", "0.71em") |
||||
.attr("text-anchor", "end") |
||||
.text("Frequency"); |
||||
*/ |
||||
|
||||
svg.selectAll(".bar") |
||||
.data(data) |
||||
.enter().append("rect") |
||||
.attr("class", "bar") |
||||
.attr("x", function(d) { return x(d.label); }) |
||||
.attr("width", x.rangeBand()) |
||||
.attr("y", function(d) { return y(d.value); }) |
||||
.attr("height", function(d) { return height - y(d.value); }); |
||||
|
||||
|
||||
svg.selectAll(".bar") |
||||
.attr("fill","steelblue"); |
||||
svg.selectAll(".bar:hover") |
||||
.attr("fill","darkred"); |
||||
|
||||
function type(d) { |
||||
d.frequency = +d.frequency; |
||||
return d; |
||||
} |
||||
|
||||
// ---------8<-----------
|
||||
|
||||
} |
||||
|
||||
bar.config = function(value) { |
||||
if(!arguments.length) { |
||||
return cfg; |
||||
} |
||||
if(arguments.length > 1) { |
||||
cfg[arguments[0]] = arguments[1]; |
||||
} |
||||
else { |
||||
d3.entries(value || {}).forEach(function(option) { |
||||
cfg[option.key] = option.value; |
||||
}); |
||||
} |
||||
return bar; |
||||
}; |
||||
|
||||
return bar; |
||||
|
||||
}, //end chart()
|
||||
|
||||
draw: function(id, d, options) { |
||||
var chart = BostockBarChart.chart().config(options); |
||||
var cfg = chart.config(); |
||||
|
||||
d3.select(id).select('svg').remove(); |
||||
d3.select(id) |
||||
.append("svg") |
||||
.attr("width", cfg.w) |
||||
.attr("height", cfg.h) |
||||
.datum(d) |
||||
.call(chart); |
||||
} |
||||
|
||||
}//end BostockBarChart
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,38 @@
@@ -0,0 +1,38 @@
|
||||
path { |
||||
stroke: white; |
||||
stroke-width: 0.5; |
||||
} |
||||
|
||||
div#mouseoverPointPanel, |
||||
div#clickedPointPanel { |
||||
width: 300px; |
||||
} |
||||
|
||||
.fade { |
||||
opacity: 0; |
||||
-webkit-transition: opacity 0.85s linear; |
||||
-moz-transition: opacity 0.85s linear; |
||||
-o-transition: opacity 0.85s linear; |
||||
transition: opacity 0.85s linear; |
||||
} |
||||
|
||||
.fade.in { |
||||
opacity: 1; |
||||
} |
||||
|
||||
.active { |
||||
stroke: black; |
||||
stroke-width: 2.0; |
||||
} |
||||
|
||||
|
||||
.axis path, |
||||
.axis line { |
||||
fill: none; |
||||
stroke: #000; |
||||
shape-rendering: crispEdges; |
||||
} |
||||
|
||||
.x.axis path { |
||||
display: none; |
||||
} |
||||
@ -0,0 +1,186 @@
@@ -0,0 +1,186 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<title>Bar Donut Chart</title> |
||||
<meta charset="utf-8" /> |
||||
|
||||
<!-- |
||||
my CSS styles |
||||
--> |
||||
<link href="/theme/css/bootstrap.css" rel="stylesheet" type="text/css"> |
||||
<link href="/theme/css/main.css" rel="stylesheet" type="text/css"> |
||||
|
||||
<link href="/theme/css/cosmo.css" rel="stylesheet" type="text/css"> |
||||
<link href="/theme/css/font-awesome.css" rel="stylesheet" type="text/css"/> |
||||
<link href="/theme/css/pygment.css" rel="stylesheet" type="text/css"/> |
||||
|
||||
<!-- |
||||
include Angular first |
||||
--> |
||||
<script type="text/javascript" src="/theme/js/angular-1.3.15.js"></script> |
||||
<script src="//d3js.org/d3.v3.min.js"></script> |
||||
</head> |
||||
|
||||
<body id="index" class="home"> |
||||
<div class="container"> |
||||
<h1><a href="/">dang-sunburst <strong></strong></a></h1> |
||||
<hr /> |
||||
|
||||
|
||||
<link href="/objects/bar1.css" rel="stylesheet" stype="text/css" /> |
||||
|
||||
<div ng-app="bar1app"> |
||||
|
||||
<div ng-controller="bar1controller" ng-init="initialize()"> |
||||
|
||||
|
||||
<div class="row"> |
||||
<div class="col-sm-12" id="bar1_title"> |
||||
<bar1head></bar1head> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="row"> |
||||
<div class="col-sm-10" id="bar1_controls"> |
||||
<bar1controls></bar1controls> |
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
<div class="row"> |
||||
|
||||
<div class="col-sm-4" id="bar1_charts"> |
||||
<div class="row" id="bar1_chart"> |
||||
<bar1chart></bar1chart> |
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
|
||||
<div class="col-sm-4" id="bar1_text"> |
||||
<div class="row" id="bar1_panels"> |
||||
<bar1panel></bar1panel> |
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
</div> |
||||
|
||||
|
||||
|
||||
<div class="row"> |
||||
|
||||
<div class="col-sm-10" id="bar1_moretext"> |
||||
<div class="row" id="bar1_md"> |
||||
This chart demonstrates linking a donut chart with a bar chart, |
||||
so that a single controller filters data on both. |
||||
It also effectively implements the "folding up" technique |
||||
demonstrated with the Donut Picker chart. |
||||
|
||||
<br /> |
||||
<br /> |
||||
|
||||
The data visualized are death records from the United States in 2014. |
||||
Death records are anonymized and classified by many variables, |
||||
including gender and manner of death, and released to the public. |
||||
Statistics about these variables are counted up for different ICD 10 codes, |
||||
which indicate various circumstances present at death, and visualized above. |
||||
|
||||
<br/> |
||||
<br/> |
||||
|
||||
Here, we bundle bar and donut plot data together by ICD 10 code. |
||||
When the user picks an ICD 10 code using buttons, we filter the data |
||||
plotted by the bar and donut plots. |
||||
|
||||
<pre style="font-size: 8px;"> |
||||
[ |
||||
{ |
||||
"code": "T510"}, |
||||
"donut": |
||||
[ |
||||
{"value": 17, "label": "M"}, |
||||
{"value": 4, "label": "F"} |
||||
], |
||||
"bar": |
||||
[ |
||||
{"value": 10, "label": "Accident"}, |
||||
{"value": 0, "label": "Suicide"}, |
||||
{"value": 0, "label": "Homicide"}, |
||||
{"value": 3, "label": "Natural"} |
||||
] |
||||
}, |
||||
{ |
||||
"code": "Y14"}, |
||||
"donut": |
||||
[ |
||||
{"value": 1, "label": "M"}, |
||||
{"value": 3, "label": "F"} |
||||
], |
||||
"bar": |
||||
[ |
||||
{"value": 4, "label": "Accident"}, |
||||
{"value": 2, "label": "Suicide"}, |
||||
{"value": 0, "label": "Homicide"}, |
||||
{"value": 2, "label": "Natural"} |
||||
] |
||||
}, |
||||
|
||||
... |
||||
] |
||||
</pre> |
||||
|
||||
Once we filter on "code", we get the "donut" array, and pass it to the D3 pie chart object, |
||||
which renders the d ata structure into the donut chart on the left. Likewise, the "bar" array |
||||
is sent to the bar chart and visualized accordingly. |
||||
</div> |
||||
|
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
<script src="http://d3js.org/d3.v3.js"></script> |
||||
<script type="text/javascript" src="/objects/bar1_modcontrol.js"></script> |
||||
<script type="text/javascript" src="/objects/bar1_chart.js"></script> |
||||
<script type="text/javascript" src="/objects/bar-chart.js"></script> |
||||
|
||||
</div> |
||||
|
||||
<footer id="contentinfo" class="body"> |
||||
<hr /> |
||||
<p style="text-align: center"> |
||||
<span class="fa-stack fa-lg"> |
||||
<i class="fa fa-square fa-stack-2x"></i> |
||||
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i> |
||||
</span> |
||||
Made from the command line with vim by |
||||
<a href="http://charlesreid1.com">charlesreid1</a>. |
||||
</p> |
||||
|
||||
<p style="text-align: center;">Made with HTML ( |
||||
<a href="http://http://bootstrap.org/">Bootstrap</a>, |
||||
<a href="http://bootswatch.com">Bootswatch</a>), |
||||
Javascript ( |
||||
<a href="http://http://d3js.org/">D3.js</a>, |
||||
<a href=https://angularjs.org/">Angular.js</a>, |
||||
<a href="https://jquery.com/">jQuery</a>), |
||||
and Python ( |
||||
<a href="http://pydata.org">Pandas</a>, |
||||
<a href="http://getpelican.com">Pelican</a>, |
||||
<a href="http://ipython.org">Jupyter Notebooks</a>). |
||||
</p> |
||||
|
||||
<script type="text/javascript" src="/theme/js/jquery-1.11.2.js"></script> |
||||
<script type="text/javascript" src="/theme/js/bootstrap-3.3.4.js"></script> |
||||
<!-- |
||||
<script type="text/javascript" src="/theme/js/d3-3.5.5.js"></script> |
||||
<script type="text/javascript" src="/theme/js/leaflet-0.7.3.js"></script> |
||||
<script type="text/javascript" src="/theme/js/leaflet.ajax.min.js"></script> |
||||
--> |
||||
</footer><!-- /#contentinfo --> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,72 @@
@@ -0,0 +1,72 @@
|
||||
[{"className": "S324", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "S328", "axes": [{"value": 1, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 4, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "Y15", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 1, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "Y14", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 5, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "I120", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 23, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "I129", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 2, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "A051", "axes": [{"value": 1, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "W19", "axes": [{"value": 2, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 2, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "T465", "axes": [{"value": 0, "label": "Accident"}, {"value": 2, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "C449", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 2, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "C119", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 3, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "C444", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "T519", "axes": [{"value": 2, "label": "Accident"}, {"value": 1, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 1, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "T510", "axes": [{"value": 37, "label": "Accident"}, {"value": 2, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 3, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "T511", "axes": [{"value": 2, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "K117", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "W18", "axes": [{"value": 13, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "C781", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "I38", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 18, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "M109", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 5, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "G610", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "J159", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 3, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "J150", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "J151", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 2, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "J152", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 6, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "C259", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 49, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "I829", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 2, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "T983", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "R402", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 2, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "C254", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "F059", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 4, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "F051", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 2, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "C341", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 2, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "K909", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "J90", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 13, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "T443", "axes": [{"value": 1, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "J969", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 141, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "J961", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 29, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "J960", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 55, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "V439", "axes": [{"value": 1, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "K137", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "S061", "axes": [{"value": 2, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "S060", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "R090", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 28, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "R092", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 48, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "R098", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 3, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "S066", "axes": [{"value": 3, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "S065", "axes": [{"value": 8, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 1, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "T794", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "I698", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 8, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "I694", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 18, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "I690", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "D693", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "D695", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 2, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "D696", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 4, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "D699", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "K739", "axes": [{"value": 2, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 2, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "X78", "axes": [{"value": 0, "label": "Accident"}, {"value": 2, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "X74", "axes": [{"value": 0, "label": "Accident"}, {"value": 35, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "I10", "axes": [{"value": 2, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 246, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "C099", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "P236", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "K922", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 66, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "K920", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "Q938", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "D487", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 4, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "Q200", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "C151", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "C159", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 25, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "X94", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 1, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "V224", "axes": [{"value": 1, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"className": "G409", "axes": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 2, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}] |
||||
@ -0,0 +1,398 @@
@@ -0,0 +1,398 @@
|
||||
var ng; |
||||
dir = []; |
||||
|
||||
|
||||
|
||||
|
||||
//////////////////////////////////////
|
||||
// Chart Directives
|
||||
//
|
||||
// This file defines Angular directives
|
||||
// that use D3 to draw charts.
|
||||
//
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
///////////////////////////////////////
|
||||
// Header Directives:
|
||||
//
|
||||
// Print out instructions, title, etc.
|
||||
|
||||
|
||||
ng = a.directive('bar1head', function($compile) { |
||||
|
||||
function link(scope, element, attr) { |
||||
|
||||
var el = element[0]; |
||||
|
||||
$(el).empty(); |
||||
|
||||
var dir = $("div#bar1_title"); |
||||
|
||||
var h1 = $("<h1 />"); |
||||
|
||||
var b = $("<b />") |
||||
.text("bar1 Chart Example") |
||||
.appendTo(h1); |
||||
|
||||
h1.appendTo(dir); |
||||
|
||||
|
||||
var p = $("<p />", { |
||||
"class" : "normal" }) |
||||
.html("The following charts show statistics about death records, classified by ICD 10 code. Select an ICD 10 code to view statistics about gender and manner of death.") |
||||
.appendTo(dir); |
||||
|
||||
|
||||
} |
||||
return { |
||||
restrict: "E", |
||||
link: link, |
||||
scope: {} |
||||
} |
||||
}); |
||||
dir.push(ng); |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
///////////////////////////////////////////////
|
||||
// Chart Controls Directives
|
||||
|
||||
ng = a.directive('bar1controls', function($compile) { |
||||
|
||||
function link(scope, element, attr) { |
||||
|
||||
// wait to build the buttons until we've loaded the data,
|
||||
// since the buttons come from the data.
|
||||
scope.$parent.$watch('pickerData',doStuff); |
||||
|
||||
function doStuff() { |
||||
if(!scope.$parent.pickerData) { return; } |
||||
buildButtons(element, scope.$parent); |
||||
} |
||||
|
||||
|
||||
}; |
||||
|
||||
function buildButtons(element,pscope) { |
||||
|
||||
var mydiv = "div#bar1_controls"; |
||||
|
||||
var el = $(mydiv); |
||||
|
||||
var div = $("<div />"); |
||||
|
||||
|
||||
|
||||
// ------------------------------------
|
||||
// Add ICD 10 code buttons
|
||||
//
|
||||
var btn_grp = $("<div />", { |
||||
"id" : "codebtns", |
||||
"class" : "btn-group" |
||||
}); |
||||
|
||||
for( var i = 0; i < pscope.pickerData.length; i++ ) { |
||||
var this_code = pscope.pickerData[i]['code'] |
||||
var code = $("<a />", { |
||||
"class" : "btn btn-code btn-large btn-primary", |
||||
"changecode" : "", |
||||
"id" : "btn_"+this_code, |
||||
"code" : this_code, |
||||
}) |
||||
.html( this_code ) |
||||
.appendTo(btn_grp); |
||||
} |
||||
|
||||
|
||||
// to make buttons in this btn group active,
|
||||
// you have to use D3's classed() method
|
||||
// after you add the elements to the document
|
||||
// (i.e., after you call $compile)
|
||||
|
||||
angular.element(el).append($compile(btn_grp)(pscope)); |
||||
|
||||
|
||||
pscope.updateCode = function() { |
||||
|
||||
// -----------------------------
|
||||
// make button for active icd 10 code
|
||||
|
||||
d3.selectAll("a.btn-code").classed('active',false); |
||||
var btnlabel = "a#btn_"+pscope.icd10code; |
||||
d3.selectAll(btnlabel).classed('active',true); |
||||
|
||||
}; |
||||
|
||||
pscope.$watch('icd10code',pscope.updateCode); |
||||
|
||||
|
||||
} |
||||
return { |
||||
restrict: "E", |
||||
link: link, |
||||
scope: {} |
||||
} |
||||
}); |
||||
dir.push(ng); |
||||
|
||||
|
||||
//////////////////////////////////
|
||||
// Action directive:
|
||||
// What to do when the user changes the ICD 10 code
|
||||
// by clicking an ICD 10 code button
|
||||
|
||||
ng = a.directive("changecode", function($compile) { |
||||
|
||||
return function(pscope, element, attrs){ |
||||
element.bind("click", function(){ |
||||
|
||||
// first, update the scope variable
|
||||
// that holds the current icd 10 code
|
||||
// (no need to load any new data)
|
||||
|
||||
|
||||
// This is the ICD 10 code the user has selected.
|
||||
var this_code = attrs['code']; |
||||
var this_description = pscope.icd10codes_all[this_code] |
||||
|
||||
//console.log('Changed icd 10 code, updating description:');
|
||||
//console.log(this_code);
|
||||
//console.log(this_description);
|
||||
|
||||
|
||||
// !!!!!!!!!!!!!!!!!!!!!!!!
|
||||
// NOTE
|
||||
// The lines below - this $apply() method -
|
||||
// this is the way you change the variable
|
||||
// at the controller level, and get the
|
||||
// various watchers to detect changes.
|
||||
// !!!!!!!!!!!!!!!!!!!!!!!!!!
|
||||
pscope.$apply(function() { |
||||
pscope.icd10code = this_code; |
||||
}); |
||||
|
||||
pscope.$apply(function() { |
||||
pscope.description = this_description; |
||||
}); |
||||
|
||||
|
||||
//// This is some weak-sauce,
|
||||
//// its not even changing value of variable
|
||||
//pscope.update_icd10code(attrs['code']);
|
||||
//// ...
|
||||
//// .......
|
||||
//// seriously.
|
||||
//// all we needed was just
|
||||
//// pscope.$apply()
|
||||
////
|
||||
//// smh.
|
||||
|
||||
|
||||
// then run the button controllers update function
|
||||
pscope.updateCode(); |
||||
|
||||
}); |
||||
} |
||||
|
||||
}); |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
///////////////////////////////////////////////
|
||||
// Panels:
|
||||
// Display useful information in a pretty box
|
||||
|
||||
|
||||
ng = a.directive('bar1panel', function($compile) { |
||||
|
||||
function link(scope, element, attr) { |
||||
|
||||
var el = element[0]; |
||||
|
||||
var pscope = scope.$parent; |
||||
|
||||
// --------------------------
|
||||
// add display for details
|
||||
|
||||
// assemble the tags,
|
||||
// then compile the html
|
||||
// select element of interest with angular.element
|
||||
// and append the compiled tags
|
||||
//
|
||||
var br = $("<br />").appendTo(el); |
||||
|
||||
var panel = $("<div />", { |
||||
"class" : "panel panel-primary", |
||||
"id" : "first" |
||||
}); |
||||
|
||||
var panelhead = $("<div />", { |
||||
"class" : "panel-heading" |
||||
}).appendTo(panel); |
||||
|
||||
var h3 = $("<h3 />", { |
||||
"class" : "panel-title" |
||||
}).text("Current ICD 10 Code") |
||||
.appendTo(panelhead); |
||||
|
||||
|
||||
|
||||
var panelbody = $("<div />", { |
||||
"class" : "panel-body" |
||||
}).appendTo(panel); |
||||
|
||||
var maindiv = $("<div />", { |
||||
}).appendTo(panelbody); |
||||
|
||||
var h = $("<h3 />") |
||||
.html("ICD 10 Code: [[icd10code]]") |
||||
.appendTo(maindiv); |
||||
|
||||
var de = $("<p />", { |
||||
"class" : "lead" }) |
||||
.html("Description: [[description]]") |
||||
.appendTo(maindiv); |
||||
|
||||
angular.element(el).prepend($compile(panel)(pscope)); |
||||
|
||||
} |
||||
|
||||
return { |
||||
link: link, |
||||
restrict: "E", |
||||
scope: { } |
||||
}; |
||||
}); |
||||
dir.push(ng); |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
///////////////////////////////////////////////
|
||||
// bar1 chart
|
||||
//
|
||||
// This is a bar chart for manner of death.
|
||||
|
||||
ng = a.directive('bar1chart', function($compile) { |
||||
|
||||
function link(scope, element, attr) { |
||||
|
||||
scope.$parent.$watch('bar1data',doStuff); |
||||
scope.$parent.$watch('icd10code',doStuff); |
||||
|
||||
function doStuff() { |
||||
if(!scope.$parent.bar1data) { return; } |
||||
if(!scope.$parent.icd10code) { return; } |
||||
buildBar(element, scope.$parent); |
||||
} |
||||
|
||||
|
||||
}; |
||||
|
||||
function buildBar(element,pscope) { |
||||
|
||||
BarChart.defaultConfig.color = function() {}; |
||||
BarChart.defaultConfig.w = 400; |
||||
BarChart.defaultConfig.h = 400; |
||||
|
||||
var chart = BarChart.chartSetup(); |
||||
|
||||
var cfg = chart.config(); // retrieve default config
|
||||
|
||||
var mydiv = "div#bar1_chart"; |
||||
|
||||
var svg = d3.select(mydiv).append('svg') |
||||
.attr('width', cfg.w + cfg.w + 50) |
||||
.attr('height', cfg.h + cfg.h / 4); |
||||
|
||||
|
||||
|
||||
/////////////////////////////////////////////////////
|
||||
// update bar chart
|
||||
//
|
||||
pscope.updatebar1 = function() { |
||||
|
||||
var all_data = pscope.bar1data; |
||||
|
||||
// ----------------------------------
|
||||
// Get chart data
|
||||
//
|
||||
// Here, we have all donut data
|
||||
// available to us.
|
||||
//
|
||||
// We use the currently-selected ICD 10 code
|
||||
// to filter which donut data is being plotted.
|
||||
//
|
||||
// Where to keep track of current code?
|
||||
// In the controller (available via pscope).
|
||||
// pscope.icd10code
|
||||
//
|
||||
var code; |
||||
var data; |
||||
for( var jj=0; jj < all_data.length; jj++ ) { |
||||
// set exception handling:
|
||||
// if no icd10code is set, problems occur.
|
||||
if(all_data[jj]['className'] == pscope.icd10code) { |
||||
code = all_data[jj]['className']; |
||||
data = [all_data[jj]] |
||||
break; |
||||
} |
||||
} |
||||
|
||||
if(data==null) { |
||||
console.log("Error. Check that ICD 10 code is in data set: "+pscope.icd10code); |
||||
console.log(pscope.icd10code); |
||||
console.log(all_data); |
||||
return; |
||||
} |
||||
|
||||
console.log(pscope.icd10code); |
||||
console.log(data); |
||||
|
||||
// finished; use data
|
||||
// ---------------------------------
|
||||
|
||||
|
||||
///////////////////////////////////
|
||||
// now draw the svg with d3
|
||||
//
|
||||
|
||||
/////////////
|
||||
// clean it up
|
||||
//svg.selectAll(".single").remove();
|
||||
svg.selectAll(".single").remove(); |
||||
svg.selectAll(".axis").remove(); |
||||
svg.selectAll(".area").remove(); |
||||
|
||||
svg.append('g') |
||||
.classed('single', 1) |
||||
.datum(data) |
||||
.call(chart); |
||||
|
||||
// chart is the BarChart object
|
||||
} |
||||
|
||||
pscope.$watch('icd10code',pscope.updatebar1); |
||||
|
||||
} |
||||
|
||||
return { |
||||
link: link, |
||||
restrict: "E", |
||||
scope: { } |
||||
}; |
||||
}); |
||||
dir.push(ng); |
||||
|
||||
|
||||
|
||||
@ -0,0 +1,86 @@
@@ -0,0 +1,86 @@
|
||||
///////////////////////////////////////
|
||||
//
|
||||
// chart
|
||||
//
|
||||
//
|
||||
|
||||
var a = angular.module("bar1app", [], function($interpolateProvider) { |
||||
$interpolateProvider.startSymbol('[['); |
||||
$interpolateProvider.endSymbol(']]'); |
||||
} |
||||
); |
||||
|
||||
var datafactory = a.factory('datafactory', function($http, $q) { |
||||
|
||||
return { |
||||
getbar1data: function() { |
||||
var deferred = $q.defer(); |
||||
|
||||
var json_file = 'bar1.json'; |
||||
|
||||
$http.get(json_file).success(function(data) { |
||||
deferred.resolve(data); |
||||
}).error(function(){ |
||||
console.log('error loading json file: '+json_file); |
||||
deferred.reject(); |
||||
}); |
||||
|
||||
return deferred.promise; |
||||
}, |
||||
|
||||
getCodeData: function() { |
||||
var deferred = $q.defer(); |
||||
|
||||
$http.get('icd10codes.json').success(function(data) { |
||||
deferred.resolve(data); |
||||
}).error(function(){ |
||||
console.log('error loading icd10codes.json'); |
||||
deferred.reject(); |
||||
}); |
||||
|
||||
return deferred.promise; |
||||
} |
||||
|
||||
} |
||||
}); |
||||
|
||||
function bar1controller($scope,datafactory) { |
||||
|
||||
$scope.initialize = function() { |
||||
|
||||
$scope.icd10code="S328"; |
||||
$scope.donutFemale = 0; |
||||
$scope.donutMale = 0; |
||||
|
||||
datafactory.getbar1data().then( |
||||
function(data) { |
||||
$scope.bar1data = data; |
||||
} |
||||
); |
||||
|
||||
datafactory.getCodeData().then( |
||||
function(data) { |
||||
$scope.icd10codes_all = data; |
||||
var descr = $scope.icd10codes_all[$scope.icd10code]; |
||||
$scope.description = descr; |
||||
} |
||||
); |
||||
|
||||
|
||||
} |
||||
|
||||
|
||||
/* |
||||
// This does not change the value of this
|
||||
// variable in everyone's parent scope.
|
||||
// UUUUGGGGHHHHH. Stupid code.
|
||||
$scope.update_icd10code = function(code) { |
||||
$scope.icd10code = code; |
||||
console.log("from update_icd10code:"+$scope.icd10code); |
||||
} |
||||
*/ |
||||
|
||||
} |
||||
|
||||
// the first few arguments of the list should correspond to the Angular-namespace stuff to feed to bar1controller
|
||||
var c = a.controller("bar1controller", ["$scope", "datafactory", bar1controller]); |
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,69 @@
@@ -0,0 +1,69 @@
|
||||
<!doctype html> |
||||
<meta charset="utf-8"> |
||||
<head> |
||||
|
||||
<script type="text/javascript" src="/theme/js/angular-1.3.15.js"></script> |
||||
|
||||
<script src="//d3js.org/d3.v3.min.js"></script> |
||||
|
||||
</head> |
||||
<body id="index" class="home"> |
||||
<div class="container"> |
||||
<h1><a href="/">dang-sunburst <strong></strong></a></h1> |
||||
<hr /> |
||||
|
||||
|
||||
<!-- |
||||
<div ng-app="plusradarApp"> |
||||
|
||||
<div ng-controller="plusradarController" ng-init="initialize()"> |
||||
|
||||
<div class="row"> |
||||
<div class="col-sm-12" id="plusradar_charts"> |
||||
<plusradarchart></plusradarchart> |
||||
--> |
||||
<div id="viz"></div> |
||||
<!-- |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
--> |
||||
|
||||
<script> |
||||
var data = [ |
||||
{"value": 100, "name": "alpha"}, |
||||
{"value": 70, "name": "beta"}, |
||||
{"value": 40, "name": "gamma"}, |
||||
{"value": 15, "name": "delta"}, |
||||
{"value": 5, "name": "epsilon"}, |
||||
{"value": 1, "name": "zeta"} |
||||
] |
||||
|
||||
d3plus.viz() |
||||
.container("#viz") |
||||
.data(data) |
||||
.type("pie") |
||||
.id("name") |
||||
.size("value") |
||||
.draw() |
||||
|
||||
</script> |
||||
|
||||
<script src="//d3plus.org/js/d3.js"></script> |
||||
<script src="//d3plus.org/js/d3plus.js"></script> |
||||
|
||||
<script type="text/javascript" src="/radar/plusradar_modcontrol.js"></script> |
||||
<script type="text/javascript" src="/radar/plusradar_chart.js"></script> |
||||
|
||||
</div> |
||||
|
||||
|
||||
<script type="text/javascript" src="/theme/js/jquery-1.11.2.js"></script> |
||||
<script type="text/javascript" src="/theme/js/bootstrap-3.3.4.js"></script> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,16 @@
@@ -0,0 +1,16 @@
|
||||
[{"donut": [{"value": 0, "label": "M"}, {"value": 1, "label": "F"}], "code": "S324", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 2, "label": "M"}, {"value": 3, "label": "F"}], "code": "S328", "modbars": [{"value": 1, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 4, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 1, "label": "M"}, {"value": 0, "label": "F"}], "code": "Y15", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 1, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 1, "label": "M"}, {"value": 4, "label": "F"}], "code": "Y14", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 5, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 9, "label": "M"}, {"value": 14, "label": "F"}], "code": "I120", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 23, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 0, "label": "M"}, {"value": 2, "label": "F"}], "code": "I129", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 2, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 1, "label": "M"}, {"value": 0, "label": "F"}], "code": "A051", "modbars": [{"value": 1, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 1, "label": "M"}, {"value": 3, "label": "F"}], "code": "W19", "modbars": [{"value": 2, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 2, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 1, "label": "M"}, {"value": 1, "label": "F"}], "code": "T465", "modbars": [{"value": 0, "label": "Accident"}, {"value": 2, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 2, "label": "M"}, {"value": 0, "label": "F"}], "code": "C449", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 2, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 2, "label": "M"}, {"value": 1, "label": "F"}], "code": "C119", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 3, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 0, "label": "M"}, {"value": 1, "label": "F"}], "code": "C444", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 3, "label": "M"}, {"value": 2, "label": "F"}], "code": "T519", "modbars": [{"value": 2, "label": "Accident"}, {"value": 1, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 1, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 30, "label": "M"}, {"value": 12, "label": "F"}], "code": "T510", "modbars": [{"value": 37, "label": "Accident"}, {"value": 2, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 3, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 2, "label": "M"}, {"value": 0, "label": "F"}], "code": "T511", "modbars": [{"value": 2, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 0, "label": "M"}, {"value": 1, "label": "F"}], "code": "K117", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}] |
||||
@ -0,0 +1,127 @@
@@ -0,0 +1,127 @@
|
||||
var ng; |
||||
dir = []; |
||||
|
||||
///////////////////////////////////////////////
|
||||
// plusradar Chart
|
||||
//
|
||||
|
||||
ng = a.directive('plusradarchart', function($compile) { |
||||
|
||||
function link(scope, element, attr) { |
||||
console.log('link'); |
||||
|
||||
scope.$parent.$watch('plusradardata',doStuff); |
||||
|
||||
function doStuff() { |
||||
if(!scope.$parent.plusradardata) { return; } |
||||
buildplusradar(element, scope.$parent); |
||||
} |
||||
|
||||
|
||||
}; |
||||
|
||||
function buildplusradar(element,pscope) { |
||||
console.log('building'); |
||||
|
||||
var mydiv = "div#plusradar_chart"; |
||||
|
||||
/////////////////////////////////////////
|
||||
// Create chart
|
||||
//
|
||||
// data has not been loaded yet.
|
||||
// start by initializing variables
|
||||
// that don't depend on the data.
|
||||
//
|
||||
|
||||
//var el = element[0];
|
||||
//$(el).empty();
|
||||
|
||||
|
||||
/////////////////////////////////////////////////////
|
||||
// update radar chart
|
||||
//
|
||||
pscope.updateplusradar = function() { |
||||
console.log('updating'); |
||||
|
||||
//var all_data = pscope.plusradardata;
|
||||
|
||||
// ----------------------------------
|
||||
// Get chart data
|
||||
//
|
||||
// Here, we have all donut data
|
||||
// available to us.
|
||||
//
|
||||
// We use the currently-selected ICD 10 code
|
||||
// to filter which donut data is being plotted.
|
||||
//
|
||||
// Where to keep track of current code?
|
||||
// In the controller (available via pscope).
|
||||
// pscope.icd10code
|
||||
//
|
||||
|
||||
/* |
||||
var code; |
||||
var data; |
||||
for( var jj=0; jj < all_data.length; jj++ ) { |
||||
// set excpetion handling:
|
||||
// if no icd10code is set, problems occur.
|
||||
if(all_data[jj]['className'] == pscope.icd10code) { |
||||
code = all_data[jj]['className']; |
||||
data = all_data[jj] |
||||
break; |
||||
} |
||||
} |
||||
|
||||
if(data==null) { |
||||
console.log("Error. Check that ICD 10 code is in data set: "+pscope.icd10code); |
||||
console.log(pscope.icd10code); |
||||
console.log(all_data); |
||||
return; |
||||
} |
||||
*/ |
||||
|
||||
// finished; use data
|
||||
// ---------------------------------
|
||||
|
||||
|
||||
///////////////////////////////////
|
||||
// now draw the svg with d3
|
||||
//
|
||||
//
|
||||
|
||||
var data = [ |
||||
{"value": 100, "name": "alpha"}, |
||||
{"value": 70, "name": "beta"}, |
||||
{"value": 40, "name": "gamma"}, |
||||
{"value": 15, "name": "delta"}, |
||||
{"value": 5, "name": "epsilon"}, |
||||
{"value": 1, "name": "zeta"} |
||||
]; |
||||
|
||||
d3plus.viz() |
||||
.container("#viz") |
||||
.data(data) |
||||
.type("pie") |
||||
.id("somethingstupid") |
||||
.size("value") |
||||
.draw() |
||||
|
||||
|
||||
} |
||||
|
||||
|
||||
// ------------------
|
||||
// if you build it,
|
||||
// you must update it.
|
||||
pscope.updateplusradar(); |
||||
|
||||
|
||||
} |
||||
|
||||
return { |
||||
link: link, |
||||
restrict: "E", |
||||
scope: { } |
||||
}; |
||||
}); |
||||
dir.push(ng); |
||||
@ -0,0 +1,55 @@
@@ -0,0 +1,55 @@
|
||||
///////////////////////////////////////
|
||||
//
|
||||
// plusradar
|
||||
//
|
||||
// Module/Controller
|
||||
//
|
||||
|
||||
var a = angular.module("plusradarApp", [], function($interpolateProvider) { |
||||
$interpolateProvider.startSymbol('[['); |
||||
$interpolateProvider.endSymbol(']]'); |
||||
} |
||||
); |
||||
|
||||
var datafactory = a.factory('datafactory', function($http, $q) { |
||||
|
||||
return { |
||||
getplusradardata: function() { |
||||
var deferred = $q.defer(); |
||||
|
||||
var json_file = 'plusradar.json'; |
||||
|
||||
$http.get(json_file).success(function(data) { |
||||
deferred.resolve(data); |
||||
}).error(function(){ |
||||
console.log('error loading json file: '+json_file); |
||||
deferred.reject(); |
||||
}); |
||||
|
||||
return deferred.promise; |
||||
} |
||||
|
||||
} |
||||
}); |
||||
|
||||
function plusradarController($scope,datafactory) { |
||||
|
||||
$scope.initialize = function() { |
||||
|
||||
//$scope.icd10code="S324";
|
||||
//$scope.donutFemale = 0;
|
||||
//$scope.donutMale = 0;
|
||||
|
||||
datafactory.getplusradardata().then( |
||||
function(data) { |
||||
$scope.plusradardata = data; |
||||
} |
||||
); |
||||
|
||||
|
||||
} |
||||
|
||||
} |
||||
|
||||
// the first few arguments of the list should correspond to the Angular-namespace stuff to feed to controller
|
||||
var c = a.controller("plusradarController", ["$scope", "datafactory", plusradarController]); |
||||
@ -0,0 +1,28 @@
@@ -0,0 +1,28 @@
|
||||
<!doctype html> |
||||
<meta charset="utf-8"> |
||||
|
||||
<script src="//d3plus.org/js/d3.js"></script> |
||||
<script src="//d3plus.org/js/d3plus.js"></script> |
||||
|
||||
<div id="viz"></div> |
||||
|
||||
<script> |
||||
|
||||
var data = [ |
||||
{"value": 100, "name": "alpha"}, |
||||
{"value": 70, "name": "beta"}, |
||||
{"value": 40, "name": "gamma"}, |
||||
{"value": 15, "name": "delta"}, |
||||
{"value": 5, "name": "epsilon"}, |
||||
{"value": 1, "name": "zeta"} |
||||
] |
||||
|
||||
d3plus.viz() |
||||
.container("#viz") |
||||
.data(data) |
||||
.type("pie") |
||||
.id("name") |
||||
.size("value") |
||||
.draw() |
||||
|
||||
</script> |
||||
@ -0,0 +1,292 @@
@@ -0,0 +1,292 @@
|
||||
/* |
||||
* Source: https://github.com/alangrafu/radar-chart-d3
|
||||
* Author: alangrafu |
||||
* License: Apache License v2.0 https://github.com/alangrafu/radar-chart-d3/blob/master/LICENSE
|
||||
*/ |
||||
var RadarChart = { |
||||
defaultConfig: { |
||||
containerClass: 'radar-chart', |
||||
w: 600, |
||||
h: 600, |
||||
factor: 0.95, |
||||
factorLegend: 1, |
||||
levels: 3, |
||||
maxValue: 0, |
||||
radians: 2 * Math.PI, |
||||
color: d3.scale.category10(), |
||||
axisLine: true, |
||||
axisText: true, |
||||
circles: true, |
||||
radius: 5, |
||||
axisJoin: function(d, i) { |
||||
return d.className || i; |
||||
}, |
||||
transitionDuration: 300 |
||||
}, |
||||
chart: function() { |
||||
// default config
|
||||
var cfg = Object.create(RadarChart.defaultConfig); |
||||
|
||||
function radar(selection) { |
||||
selection.each(function(data) { |
||||
var container = d3.select(this); |
||||
|
||||
// allow simple notation
|
||||
data = data.map(function(datum) { |
||||
if(datum instanceof Array) { |
||||
datum = {axes: datum}; |
||||
} |
||||
return datum; |
||||
}); |
||||
|
||||
var maxValue = Math.max(cfg.maxValue, d3.max(data, function(d) { |
||||
return d3.max(d.axes, function(o){ return o.value; }); |
||||
})); |
||||
|
||||
var allAxis = data[0].axes.map(function(i, j){ return i.axis; }); |
||||
var total = allAxis.length; |
||||
var radius = cfg.factor * Math.min(cfg.w / 2, cfg.h / 2); |
||||
|
||||
container.classed(cfg.containerClass, 1); |
||||
|
||||
function getPosition(i, range, factor, func){ |
||||
factor = typeof factor !== 'undefined' ? factor : 1; |
||||
return range * (1 - factor * func(i * cfg.radians / total)); |
||||
} |
||||
function getHorizontalPosition(i, range, factor){ |
||||
return getPosition(i, range, factor, Math.sin); |
||||
} |
||||
function getVerticalPosition(i, range, factor){ |
||||
return getPosition(i, range, factor, Math.cos); |
||||
} |
||||
|
||||
// levels && axises
|
||||
var levelFactors = d3.range(0, cfg.levels).map(function(level) { |
||||
return radius * ((level + 1) / cfg.levels); |
||||
}); |
||||
|
||||
var levelGroups = container.selectAll('g.level-group').data(levelFactors); |
||||
|
||||
levelGroups.enter().append('g'); |
||||
levelGroups.exit().remove(); |
||||
|
||||
levelGroups.attr('class', function(d, i) { |
||||
return 'level-group level-group-' + i; |
||||
}); |
||||
|
||||
var levelLine = levelGroups.selectAll('.level').data(function(levelFactor) { |
||||
return d3.range(0, total).map(function() { return levelFactor; }); |
||||
}); |
||||
|
||||
levelLine.enter().append('line'); |
||||
levelLine.exit().remove(); |
||||
|
||||
levelLine |
||||
.attr('class', 'level') |
||||
.attr('x1', function(levelFactor, i){ return getHorizontalPosition(i, levelFactor); }) |
||||
.attr('y1', function(levelFactor, i){ return getVerticalPosition(i, levelFactor); }) |
||||
.attr('x2', function(levelFactor, i){ return getHorizontalPosition(i+1, levelFactor); }) |
||||
.attr('y2', function(levelFactor, i){ return getVerticalPosition(i+1, levelFactor); }) |
||||
.attr('transform', function(levelFactor) { |
||||
return 'translate(' + (cfg.w/2-levelFactor) + ', ' + (cfg.h/2-levelFactor) + ')'; |
||||
}); |
||||
|
||||
if(cfg.axisLine || cfg.axisText) { |
||||
var axis = container.selectAll('.axis').data(allAxis); |
||||
|
||||
var newAxis = axis.enter().append('g'); |
||||
if(cfg.axisLine) { |
||||
newAxis.append('line'); |
||||
} |
||||
if(cfg.axisText) { |
||||
newAxis.append('text'); |
||||
} |
||||
|
||||
axis.exit().remove(); |
||||
|
||||
axis.attr('class', 'axis'); |
||||
|
||||
if(cfg.axisLine) { |
||||
axis.select('line') |
||||
.attr('x1', cfg.w/2) |
||||
.attr('y1', cfg.h/2) |
||||
.attr('x2', function(d, i) { return getHorizontalPosition(i, cfg.w / 2, cfg.factor); }) |
||||
.attr('y2', function(d, i) { return getVerticalPosition(i, cfg.h / 2, cfg.factor); }); |
||||
} |
||||
|
||||
if(cfg.axisText) { |
||||
axis.select('text') |
||||
.attr('class', function(d, i){ |
||||
var p = getHorizontalPosition(i, 0.5); |
||||
|
||||
return 'legend ' + |
||||
((p < 0.4) ? 'left' : ((p > 0.6) ? 'right' : 'middle')); |
||||
}) |
||||
.attr('dy', function(d, i) { |
||||
var p = getVerticalPosition(i, 0.5); |
||||
return ((p < 0.1) ? '1em' : ((p > 0.9) ? '0' : '0.5em')); |
||||
}) |
||||
.text(function(d) { return d; }) |
||||
.attr('x', function(d, i){ return getHorizontalPosition(i, cfg.w / 2, cfg.factorLegend); }) |
||||
.attr('y', function(d, i){ return getVerticalPosition(i, cfg.h / 2, cfg.factorLegend); }); |
||||
} |
||||
} |
||||
|
||||
// content
|
||||
data.forEach(function(d){ |
||||
d.axes.forEach(function(axis, i) { |
||||
axis.x = getHorizontalPosition(i, cfg.w/2, (parseFloat(Math.max(axis.value, 0))/maxValue)*cfg.factor); |
||||
axis.y = getVerticalPosition(i, cfg.h/2, (parseFloat(Math.max(axis.value, 0))/maxValue)*cfg.factor); |
||||
}); |
||||
}); |
||||
|
||||
var polygon = container.selectAll(".area").data(data, cfg.axisJoin); |
||||
|
||||
polygon.enter().append('polygon') |
||||
.classed({area: 1, 'd3-enter': 1}) |
||||
.on('mouseover', function (d){ |
||||
container.classed('focus', 1); |
||||
d3.select(this).classed('focused', 1); |
||||
}) |
||||
.on('mouseout', function(){ |
||||
container.classed('focus', 0); |
||||
d3.select(this).classed('focused', 0); |
||||
}); |
||||
|
||||
polygon.exit() |
||||
.classed('d3-exit', 1) // trigger css transition
|
||||
.transition().duration(cfg.transitionDuration) |
||||
.remove(); |
||||
|
||||
polygon |
||||
.each(function(d, i) { |
||||
var classed = {'d3-exit': 0}; // if exiting element is being reused
|
||||
classed['radar-chart-serie' + i] = 1; |
||||
if(d.className) { |
||||
classed[d.className] = 1; |
||||
} |
||||
d3.select(this).classed(classed); |
||||
}) |
||||
// styles should only be transitioned with css
|
||||
.style('stroke', function(d, i) { return cfg.color(i); }) |
||||
.style('fill', function(d, i) { return cfg.color(i); }) |
||||
.transition().duration(cfg.transitionDuration) |
||||
// svg attrs with js
|
||||
.attr('points',function(d) { |
||||
return d.axes.map(function(p) { |
||||
return [p.x, p.y].join(','); |
||||
}).join(' '); |
||||
}) |
||||
.each('start', function() { |
||||
d3.select(this).classed('d3-enter', 0); // trigger css transition
|
||||
}); |
||||
|
||||
if(cfg.circles && cfg.radius) { |
||||
var tooltip = container.selectAll('.tooltip').data([1]); |
||||
tooltip.enter().append('text').attr('class', 'tooltip'); |
||||
|
||||
var circleGroups = container.selectAll('g.circle-group').data(data, cfg.axisJoin); |
||||
|
||||
circleGroups.enter().append('g').classed({'circle-group': 1, 'd3-enter': 1}); |
||||
circleGroups.exit() |
||||
.classed('d3-exit', 1) // trigger css transition
|
||||
.transition().duration(cfg.transitionDuration).remove(); |
||||
|
||||
circleGroups |
||||
.each(function(d) { |
||||
var classed = {'d3-exit': 0}; // if exiting element is being reused
|
||||
if(d.className) { |
||||
classed[d.className] = 1; |
||||
} |
||||
d3.select(this).classed(classed); |
||||
}) |
||||
.transition().duration(cfg.transitionDuration) |
||||
.each('start', function() { |
||||
d3.select(this).classed('d3-enter', 0); // trigger css transition
|
||||
}); |
||||
|
||||
var circle = circleGroups.selectAll('.circle').data(function(datum, i) { |
||||
return datum.axes.map(function(d) { return [d, i]; }); |
||||
}); |
||||
|
||||
circle.enter().append('circle') |
||||
.classed({circle: 1, 'd3-enter': 1}) |
||||
.on('mouseover', function(d){ |
||||
tooltip |
||||
.attr('x', d[0].x - 10) |
||||
.attr('y', d[0].y - 5) |
||||
.text(d[0].value) |
||||
.classed('visible', 1); |
||||
|
||||
container.classed('focus', 1); |
||||
container.select('.area.radar-chart-serie'+d[1]).classed('focused', 1); |
||||
}) |
||||
.on('mouseout', function(d){ |
||||
tooltip.classed('visible', 0); |
||||
|
||||
container.classed('focus', 0); |
||||
container.select('.area.radar-chart-serie'+d[1]).classed('focused', 0); |
||||
}); |
||||
|
||||
circle.exit() |
||||
.classed('d3-exit', 1) // trigger css transition
|
||||
.transition().duration(cfg.transitionDuration).remove(); |
||||
|
||||
circle |
||||
.each(function(d) { |
||||
var classed = {'d3-exit': 0}; // if exit element reused
|
||||
classed['radar-chart-serie'+d[1]] = 1; |
||||
d3.select(this).classed(classed); |
||||
}) |
||||
// styles should only be transitioned with css
|
||||
.style('fill', function(d) { return cfg.color(d[1]); }) |
||||
.transition().duration(cfg.transitionDuration) |
||||
// svg attrs with js
|
||||
.attr('r', cfg.radius) |
||||
.attr('cx', function(d) { |
||||
return d[0].x; |
||||
}) |
||||
.attr('cy', function(d) { |
||||
return d[0].y; |
||||
}) |
||||
.each('start', function() { |
||||
d3.select(this).classed('d3-enter', 0); // trigger css transition
|
||||
}); |
||||
|
||||
// ensure tooltip is upmost layer
|
||||
var tooltipEl = tooltip.node(); |
||||
tooltipEl.parentNode.appendChild(tooltipEl); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
radar.config = function(value) { |
||||
if(!arguments.length) { |
||||
return cfg; |
||||
} |
||||
if(arguments.length > 1) { |
||||
cfg[arguments[0]] = arguments[1]; |
||||
} |
||||
else { |
||||
d3.entries(value || {}).forEach(function(option) { |
||||
cfg[option.key] = option.value; |
||||
}); |
||||
} |
||||
return radar; |
||||
}; |
||||
|
||||
return radar; |
||||
}, |
||||
draw: function(id, d, options) { |
||||
var chart = RadarChart.chart().config(options); |
||||
var cfg = chart.config(); |
||||
|
||||
d3.select(id).select('svg').remove(); |
||||
d3.select(id) |
||||
.append("svg") |
||||
.attr("width", cfg.w) |
||||
.attr("height", cfg.h) |
||||
.datum(d) |
||||
.call(chart); |
||||
} |
||||
}; |
||||
@ -0,0 +1,81 @@
@@ -0,0 +1,81 @@
|
||||
.area { |
||||
fill: #FFD700; |
||||
} |
||||
.radar-chart .area { |
||||
fill-opacity: 0.3; |
||||
} |
||||
.radar-chart.focus .area { |
||||
fill-opacity: 0.3; |
||||
} |
||||
.radar-chart.focus .area.focused { |
||||
fill-opacity: 0.9; |
||||
fill: #FFD700; |
||||
stroke: none; |
||||
} |
||||
|
||||
|
||||
|
||||
/* |
||||
* from https://rawgit.com/tpreusse/radar-chart-d3/master/src/radar-chart.css |
||||
* and https://github.com/alangrafu/radar-chart-d3 |
||||
*/ |
||||
.radar-chart .level { |
||||
stroke: grey; |
||||
stroke-width: 0.5; |
||||
} |
||||
|
||||
.radar-chart .axis line { |
||||
stroke: grey; |
||||
stroke-width: 1; |
||||
} |
||||
.radar-chart .axis .legend { |
||||
font-family: sans-serif; |
||||
font-size: 10px; |
||||
} |
||||
.radar-chart .axis .legend.top { |
||||
dy:1em; |
||||
} |
||||
.radar-chart .axis .legend.left { |
||||
text-anchor: start; |
||||
} |
||||
.radar-chart .axis .legend.middle { |
||||
text-anchor: middle; |
||||
} |
||||
.radar-chart .axis .legend.right { |
||||
text-anchor: end; |
||||
} |
||||
|
||||
.radar-chart .tooltip { |
||||
font-family: sans-serif; |
||||
font-size: 13px; |
||||
transition: opacity 200ms; |
||||
opacity: 0; |
||||
} |
||||
.radar-chart .tooltip.visible { |
||||
opacity: 1; |
||||
} |
||||
|
||||
/* area transition when hovering */ |
||||
.radar-chart .area { |
||||
stroke-width: 2; |
||||
fill-opacity: 0.5; |
||||
} |
||||
.radar-chart.focus .area { |
||||
fill-opacity: 0.1; |
||||
} |
||||
.radar-chart.focus .area.focused { |
||||
fill-opacity: 0.7; |
||||
} |
||||
|
||||
.radar-chart .circle { |
||||
fill-opacity: 0.9; |
||||
} |
||||
|
||||
/* transitions */ |
||||
.radar-chart .area, .radar-chart .circle { |
||||
transition: opacity 300ms, fill-opacity 200ms; |
||||
opacity: 1; |
||||
} |
||||
.radar-chart .d3-enter, .radar-chart .d3-exit { |
||||
opacity: 0; |
||||
} |
||||
@ -0,0 +1,175 @@
@@ -0,0 +1,175 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<title>radar1 Chart</title> |
||||
<meta charset="utf-8" /> |
||||
|
||||
<!-- |
||||
my CSS styles |
||||
--> |
||||
<link href="/theme/css/bootstrap.css" rel="stylesheet" type="text/css"> |
||||
<link href="/theme/css/main.css" rel="stylesheet" type="text/css"> |
||||
|
||||
<link href="/theme/css/cosmo.css" rel="stylesheet" type="text/css"> |
||||
<link href="/theme/css/font-awesome.css" rel="stylesheet" type="text/css"/> |
||||
<link href="/theme/css/pygment.css" rel="stylesheet" type="text/css"/> |
||||
|
||||
<!-- |
||||
include Angular first |
||||
--> |
||||
<script type="text/javascript" src="/theme/js/angular-1.3.15.js"></script> |
||||
<script src="//d3js.org/d3.v3.min.js"></script> |
||||
</head> |
||||
|
||||
<body id="index" class="home"> |
||||
<div class="container"> |
||||
<h1><a href="/">dang-sunburst <strong></strong></a></h1> |
||||
<hr /> |
||||
|
||||
|
||||
<link href="/radar/radar1.css" rel="stylesheet" stype="text/css" /> |
||||
|
||||
<div ng-app="radar1App"> |
||||
|
||||
<div ng-controller="radar1Controller" ng-init="initialize()"> |
||||
|
||||
|
||||
<div class="row"> |
||||
<div class="col-sm-12" id="radar1_title"> |
||||
<radar1head></radar1head> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="row"> |
||||
<div class="col-sm-10" id="radar1_controls"> |
||||
<radar1controls></radar1controls> |
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
<div class="row"> |
||||
<div class="col-sm-6" id="radar1_charts"> |
||||
<div class="row" id="radar1_chart"> |
||||
<radar1chart></radar1chart> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="col-sm-6" id="radar1_panels"> |
||||
<div class="row" id="radar1_panel"> |
||||
<radar1panel></radar1panel> |
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
</div> |
||||
|
||||
|
||||
|
||||
<div class="row"> |
||||
|
||||
<div class="col-sm-10" id="radar1_text"> |
||||
<div class="row" id="radar1_md"> |
||||
This chart uses a radar chart that's defined as a single, standalone Javacsript object, |
||||
which expects data in a particular structure. Some settings cannot be changed and are implemented as is, |
||||
while other options can be configured using a dictionary. |
||||
|
||||
<br /> |
||||
<br /> |
||||
|
||||
The radar chart is connected to data about the month of death, |
||||
organized in a hierarchical way, similar to the organization for |
||||
the bar and donut charts. The difference is that this time, |
||||
the pre-defined RadarChart object was used, which expected |
||||
particular data labels. |
||||
|
||||
<br/> |
||||
<br/> |
||||
|
||||
Here is how the data looks for this example: |
||||
|
||||
<pre style="font-size: 8px;"> |
||||
[ |
||||
{ "className": "S324", |
||||
"axes": [ |
||||
{"value": 1, "axis": "January"}, |
||||
{"value": 0, "axis": "February"}, |
||||
|
||||
... |
||||
|
||||
{"value": 0, "axis": "December"} |
||||
] |
||||
}, |
||||
{ "className": "S328", |
||||
"axes": [ |
||||
{"value": 1, "axis": "January"}, |
||||
{"value": 1, "axis": "February"}, |
||||
|
||||
... |
||||
|
||||
{"value": 2, "axis": "December"} |
||||
] |
||||
}, |
||||
{ "className": "Y15", |
||||
"axes": [ |
||||
{"value": 3, "axis": "January"}, |
||||
{"value": 2, "axis": "February"}, |
||||
|
||||
... |
||||
|
||||
{"value": 1, "axis": "December"} |
||||
] |
||||
} |
||||
] |
||||
</pre> |
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
<script src="http://d3js.org/d3.v3.js"></script> |
||||
<script type="text/javascript" src="/radar/radar1_modcontrol.js"></script> |
||||
<script type="text/javascript" src="/radar/radar1_chart.js"></script> |
||||
<script type="text/javascript" src="/radar/radar-chart.js"></script> |
||||
|
||||
</div> |
||||
|
||||
<footer id="contentinfo" class="body"> |
||||
<hr /> |
||||
<p style="text-align: center"> |
||||
<span class="fa-stack fa-lg"> |
||||
<i class="fa fa-square fa-stack-2x"></i> |
||||
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i> |
||||
</span> |
||||
Made from the command line with vim by |
||||
<a href="http://charlesreid1.com">charlesreid1</a>. |
||||
</p> |
||||
|
||||
<p style="text-align: center;">Made with HTML ( |
||||
<a href="http://http://bootstrap.org/">Bootstrap</a>, |
||||
<a href="http://bootswatch.com">Bootswatch</a>), |
||||
Javascript ( |
||||
<a href="http://http://d3js.org/">D3.js</a>, |
||||
<a href=https://angularjs.org/">Angular.js</a>, |
||||
<a href="https://jquery.com/">jQuery</a>), |
||||
and Python ( |
||||
<a href="http://pydata.org">Pandas</a>, |
||||
<a href="http://getpelican.com">Pelican</a>, |
||||
<a href="http://ipython.org">Jupyter Notebooks</a>). |
||||
</p> |
||||
|
||||
<script type="text/javascript" src="/theme/js/jquery-1.11.2.js"></script> |
||||
<script type="text/javascript" src="/theme/js/bootstrap-3.3.4.js"></script> |
||||
<!-- |
||||
<script type="text/javascript" src="/theme/js/d3-3.5.5.js"></script> |
||||
<script type="text/javascript" src="/theme/js/leaflet-0.7.3.js"></script> |
||||
<script type="text/javascript" src="/theme/js/leaflet.ajax.min.js"></script> |
||||
--> |
||||
</footer><!-- /#contentinfo --> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,16 @@
@@ -0,0 +1,16 @@
|
||||
[{"donut": [{"value": 0, "label": "M"}, {"value": 1, "label": "F"}], "code": "S324", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 2, "label": "M"}, {"value": 3, "label": "F"}], "code": "S328", "modbars": [{"value": 1, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 4, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 1, "label": "M"}, {"value": 0, "label": "F"}], "code": "Y15", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 1, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 1, "label": "M"}, {"value": 4, "label": "F"}], "code": "Y14", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 5, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 9, "label": "M"}, {"value": 14, "label": "F"}], "code": "I120", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 23, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 0, "label": "M"}, {"value": 2, "label": "F"}], "code": "I129", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 2, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 1, "label": "M"}, {"value": 0, "label": "F"}], "code": "A051", "modbars": [{"value": 1, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 1, "label": "M"}, {"value": 3, "label": "F"}], "code": "W19", "modbars": [{"value": 2, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 2, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 1, "label": "M"}, {"value": 1, "label": "F"}], "code": "T465", "modbars": [{"value": 0, "label": "Accident"}, {"value": 2, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 2, "label": "M"}, {"value": 0, "label": "F"}], "code": "C449", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 2, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 2, "label": "M"}, {"value": 1, "label": "F"}], "code": "C119", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 3, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 0, "label": "M"}, {"value": 1, "label": "F"}], "code": "C444", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 3, "label": "M"}, {"value": 2, "label": "F"}], "code": "T519", "modbars": [{"value": 2, "label": "Accident"}, {"value": 1, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 1, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 30, "label": "M"}, {"value": 12, "label": "F"}], "code": "T510", "modbars": [{"value": 37, "label": "Accident"}, {"value": 2, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 3, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 2, "label": "M"}, {"value": 0, "label": "F"}], "code": "T511", "modbars": [{"value": 2, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 0, "label": "M"}, {"value": 1, "label": "F"}], "code": "K117", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}] |
||||
@ -0,0 +1,700 @@
@@ -0,0 +1,700 @@
|
||||
var ng; |
||||
dir = []; |
||||
|
||||
|
||||
|
||||
|
||||
//////////////////////////////////////
|
||||
// Chart Directives
|
||||
//
|
||||
// This file defines Angular directives
|
||||
// that use D3 to draw charts.
|
||||
//
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
///////////////////////////////////////
|
||||
// Header Directives:
|
||||
//
|
||||
// Print out instructions, title, etc.
|
||||
|
||||
|
||||
ng = a.directive('radar1head', function($compile) { |
||||
|
||||
function link(scope, element, attr) { |
||||
|
||||
var el = element[0]; |
||||
|
||||
$(el).empty(); |
||||
|
||||
var dir = $("div#radar1_title"); |
||||
|
||||
var h1 = $("<h1 />"); |
||||
|
||||
var b = $("<b />") |
||||
.text("Radar Chart Example") |
||||
.appendTo(h1); |
||||
|
||||
h1.appendTo(dir); |
||||
|
||||
|
||||
var p = $("<p />", { |
||||
"class" : "normal" }) |
||||
.html("A fancy little radar chart.") |
||||
.appendTo(dir); |
||||
|
||||
|
||||
} |
||||
return { |
||||
restrict: "E", |
||||
link: link, |
||||
scope: {} |
||||
} |
||||
}); |
||||
dir.push(ng); |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
///////////////////////////////////////////////
|
||||
// Chart Controls Directives
|
||||
|
||||
ng = a.directive('radar1controls', function($compile) { |
||||
|
||||
function link(scope, element, attr) { |
||||
|
||||
// wait to build the buttons until we've loaded the data,
|
||||
// since the buttons come from the data.
|
||||
scope.$parent.$watch('radar1data',doStuff); |
||||
|
||||
function doStuff() { |
||||
if(!scope.$parent.radar1data) { return; } |
||||
buildButtons(element, scope.$parent); |
||||
} |
||||
|
||||
|
||||
}; |
||||
|
||||
function buildButtons(element,pscope) { |
||||
|
||||
var mydiv = "div#radar1_controls"; |
||||
|
||||
var el = $(mydiv); |
||||
|
||||
var div = $("<div />"); |
||||
|
||||
|
||||
// ------------------------------------
|
||||
// Add ICD 10 code buttons
|
||||
//
|
||||
var btn_grp = $("<div />", { |
||||
"id" : "codebtns", |
||||
"class" : "btn-group" |
||||
}); |
||||
|
||||
for( var i = 0; i < pscope.radar1data.length; i++ ) { |
||||
var this_code = pscope.radar1data[i]['className'] |
||||
var code = $("<a />", { |
||||
"class" : "btn btn-code btn-large btn-primary", |
||||
"changecode" : "", |
||||
"id" : "btn_"+this_code, |
||||
"code" : this_code, |
||||
}) |
||||
.html( this_code ) |
||||
.appendTo(btn_grp); |
||||
} |
||||
|
||||
|
||||
// to make buttons in this btn group active,
|
||||
// you have to use D3's classed() method
|
||||
// after you add the elements to the document
|
||||
// (i.e., after you call $compile)
|
||||
|
||||
angular.element(el).append($compile(btn_grp)(pscope)); |
||||
|
||||
|
||||
pscope.updateCode = function() { |
||||
|
||||
// -----------------------------
|
||||
// make button for active icd 10 code
|
||||
|
||||
d3.selectAll("a.btn-code").classed('active',false); |
||||
var btnlabel = "a#btn_"+pscope.icd10code; |
||||
d3.selectAll(btnlabel).classed('active',true); |
||||
|
||||
}; |
||||
|
||||
pscope.$watch('icd10code',pscope.updateCode); |
||||
|
||||
|
||||
} |
||||
return { |
||||
restrict: "E", |
||||
link: link, |
||||
scope: {} |
||||
} |
||||
}); |
||||
dir.push(ng); |
||||
|
||||
|
||||
//////////////////////////////////
|
||||
// Action directive:
|
||||
// What to do when the user changes the ICD 10 code
|
||||
// by clicking an ICD 10 code button
|
||||
|
||||
ng = a.directive("changecode", function($compile) { |
||||
|
||||
return function(pscope, element, attrs){ |
||||
element.bind("click", function(){ |
||||
|
||||
// first, update the scope variable
|
||||
// that holds the current icd 10 code
|
||||
// (no need to load any new data)
|
||||
|
||||
|
||||
// This is the ICD 10 code the user has selected.
|
||||
var this_code = attrs['code']; |
||||
var this_description = pscope.icd10codes_all[this_code] |
||||
|
||||
//console.log('Changed icd 10 code, updating description:');
|
||||
//console.log(this_code);
|
||||
//console.log(this_description);
|
||||
|
||||
|
||||
// !!!!!!!!!!!!!!!!!!!!!!!!
|
||||
// NOTE
|
||||
// The lines below - this $apply() method -
|
||||
// this is the way you change the variable
|
||||
// at the controller level, and get the
|
||||
// various watchers to detect changes.
|
||||
// !!!!!!!!!!!!!!!!!!!!!!!!!!
|
||||
pscope.$apply(function() { |
||||
pscope.icd10code = this_code; |
||||
}); |
||||
|
||||
pscope.$apply(function() { |
||||
pscope.description = this_description; |
||||
}); |
||||
|
||||
|
||||
//// This is some weak-sauce,
|
||||
//// its not even changing value of variable
|
||||
//pscope.update_icd10code(attrs['code']);
|
||||
//// ...
|
||||
//// .......
|
||||
//// seriously.
|
||||
//// all we needed was just
|
||||
//// pscope.$apply()
|
||||
////
|
||||
//// smh.
|
||||
|
||||
|
||||
|
||||
|
||||
//// then run the donut chart update function
|
||||
//pscope.updateradar1();
|
||||
|
||||
// then run the button controllers update function
|
||||
pscope.updateCode(); |
||||
|
||||
}); |
||||
} |
||||
|
||||
}); |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
///////////////////////////////////////////////
|
||||
// Panels:
|
||||
// Display useful information in a pretty box
|
||||
|
||||
|
||||
ng = a.directive('radar1panel', function($compile) { |
||||
|
||||
|
||||
function link(scope, element, attr) { |
||||
|
||||
|
||||
|
||||
var el = element[0]; |
||||
|
||||
var pscope = scope.$parent; |
||||
|
||||
// --------------------------
|
||||
// add display for details
|
||||
|
||||
// assemble the tags,
|
||||
// then compile the html
|
||||
// select element of interest with angular.element
|
||||
// and append the compiled tags
|
||||
//
|
||||
var br = $("<br />").appendTo(el); |
||||
|
||||
var panel = $("<div />", { |
||||
"class" : "panel panel-primary", |
||||
"id" : "first" |
||||
}); |
||||
|
||||
var panelhead = $("<div />", { |
||||
"class" : "panel-heading" |
||||
}).appendTo(panel); |
||||
|
||||
var h3 = $("<h3 />", { |
||||
"class" : "panel-title" |
||||
}).text("Current ICD 10 Code") |
||||
.appendTo(panelhead); |
||||
|
||||
|
||||
|
||||
var panelbody = $("<div />", { |
||||
"class" : "panel-body" |
||||
}).appendTo(panel); |
||||
|
||||
var maindiv = $("<div />", { |
||||
}).appendTo(panelbody); |
||||
|
||||
var h = $("<h3 />") |
||||
.html("ICD 10 Code: [[icd10code]]") |
||||
.appendTo(maindiv); |
||||
|
||||
var de = $("<p />", { |
||||
"class" : "lead" }) |
||||
.html("Description: [[description]]") |
||||
.appendTo(maindiv); |
||||
|
||||
angular.element(el).prepend($compile(panel)(pscope)); |
||||
|
||||
} |
||||
|
||||
return { |
||||
link: link, |
||||
restrict: "E", |
||||
scope: { } |
||||
}; |
||||
}); |
||||
dir.push(ng); |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
///////////////////////////////////////////////
|
||||
// radar1 Chart
|
||||
//
|
||||
// This is the actual donut chart, of gender ratios.
|
||||
|
||||
ng = a.directive('radar1chart', function($compile) { |
||||
|
||||
function link(scope, element, attr) { |
||||
|
||||
scope.$parent.$watch('radar1data',doStuff); |
||||
|
||||
function doStuff() { |
||||
if(!scope.$parent.radar1data) { return; } |
||||
buildradar1(element, scope.$parent); |
||||
} |
||||
|
||||
|
||||
}; |
||||
|
||||
function buildradar1(element,pscope) { |
||||
|
||||
var mydiv = "div#radar1_chart"; |
||||
|
||||
/////////////////////////////////////////
|
||||
// Create chart
|
||||
//
|
||||
// data has not been loaded yet.
|
||||
// start by initializing variables
|
||||
// that don't depend on the data.
|
||||
//
|
||||
|
||||
|
||||
/////////////////////////////////
|
||||
//
|
||||
// Wonderful:
|
||||
//
|
||||
// https://github.com/alangrafu/radar-chart-d3
|
||||
//
|
||||
|
||||
var el = element[0]; |
||||
$(el).empty(); |
||||
|
||||
RadarChart.defaultConfig.color = function() {}; |
||||
RadarChart.defaultConfig.radius = 3; |
||||
RadarChart.defaultConfig.w = 400; |
||||
RadarChart.defaultConfig.h = 400; |
||||
|
||||
//var chart = RadarChart.chart({'minValue':-1});
|
||||
var chart = RadarChart.chart(); |
||||
|
||||
var cfg = chart.config(); // retrieve default config
|
||||
cfg['minValue'] = -1; |
||||
cfg['levels'] = 10; |
||||
cfg['circles'] = true; |
||||
cfg['axisLine'] = true; |
||||
|
||||
var svg = d3.select(mydiv).append('svg') |
||||
.attr('width', cfg.w + cfg.w + 50) |
||||
.attr('height', cfg.h + cfg.h / 4); |
||||
|
||||
|
||||
/////////////////////////////////////////////////////
|
||||
// update radar chart
|
||||
//
|
||||
pscope.updateradar1 = function() { |
||||
|
||||
var all_data = pscope.radar1data; |
||||
|
||||
// ----------------------------------
|
||||
// Get chart data
|
||||
//
|
||||
// Here, we have all donut data
|
||||
// available to us.
|
||||
//
|
||||
// We use the currently-selected ICD 10 code
|
||||
// to filter which donut data is being plotted.
|
||||
//
|
||||
// Where to keep track of current code?
|
||||
// In the controller (available via pscope).
|
||||
// pscope.icd10code
|
||||
//
|
||||
var code; |
||||
var data; |
||||
for( var jj=0; jj < all_data.length; jj++ ) { |
||||
// set excpetion handling:
|
||||
// if no icd10code is set, problems occur.
|
||||
if(all_data[jj]['className'] == pscope.icd10code) { |
||||
code = all_data[jj]['className']; |
||||
data = [all_data[jj]] |
||||
break; |
||||
} |
||||
} |
||||
|
||||
if(data==null) { |
||||
console.log("Error. Check that ICD 10 code is in data set: "+pscope.icd10code); |
||||
console.log(pscope.icd10code); |
||||
console.log(all_data); |
||||
return; |
||||
} |
||||
|
||||
console.log(pscope.icd10code); |
||||
console.log(data); |
||||
|
||||
// finished; use data
|
||||
// ---------------------------------
|
||||
|
||||
|
||||
///////////////////////////////////
|
||||
// now draw the svg with d3
|
||||
//
|
||||
|
||||
//svg.selectAll(".single").remove();
|
||||
svg.selectAll(".single").remove(); |
||||
svg.selectAll(".axis").remove(); |
||||
svg.selectAll(".area").remove(); |
||||
|
||||
svg.append('g') |
||||
.classed('single', 1) |
||||
.datum(data) |
||||
.call(chart); |
||||
|
||||
} |
||||
|
||||
pscope.$watch('icd10code',pscope.updateradar1); |
||||
|
||||
|
||||
} |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* |
||||
|
||||
/////////////////////////////////////////////////////
|
||||
// update radar chart
|
||||
pscope.updateDonut = function() { |
||||
|
||||
var all_data = pscope.radar1data; |
||||
|
||||
|
||||
// ----------------------------------
|
||||
// Get pie chart data
|
||||
//
|
||||
// Here, we have all donut data
|
||||
// available to us.
|
||||
//
|
||||
// We use the currently-selected ICD 10 code
|
||||
// to filter which donut data is being plotted.
|
||||
//
|
||||
// Where to keep track of current code?
|
||||
// In the controller (available via pscope).
|
||||
// pscope.icd10code
|
||||
//
|
||||
var code; |
||||
var data; |
||||
for( var i=0; i < all_data.length; i++ ) { |
||||
|
||||
// set excpetion handling:
|
||||
// if no icd10code is set, problems occur.
|
||||
if(all_data[i]['code'] == pscope.icd10code) { |
||||
code = all_data[i]['code']; |
||||
data = all_data[i]['modbars']; |
||||
break; |
||||
} |
||||
} |
||||
|
||||
if(data==null) { |
||||
console.log("Check ICD 10 code is in data set: "+pscope.icd10code); |
||||
console.log(all_data); |
||||
return; |
||||
} |
||||
|
||||
// finished; use data
|
||||
// ---------------------------------
|
||||
|
||||
|
||||
|
||||
|
||||
// --------------------------------------
|
||||
// Now we are ready to draw the damn chart.
|
||||
|
||||
var cfg = { |
||||
radius: 5, |
||||
w: w, |
||||
h: h, |
||||
factor: 1, |
||||
factorLegend: .85, |
||||
levels: 3, |
||||
maxValue: 0, |
||||
radians: 2 * Math.PI, |
||||
opacityArea: 0.5, |
||||
ToRight: 5, |
||||
TranslateX: 80, |
||||
TranslateY: 30, |
||||
ExtraWidthX: 100, |
||||
ExtraWidthY: 100, |
||||
color: d3.scale.category10() |
||||
}; |
||||
|
||||
cfg.maxValue = Math.max(cfg.maxValue, d3.max(data.map(function(o){return o.value;}))); |
||||
var allAxis = (data.map(function(i, j){ return i.label})); |
||||
var total = allAxis.length; |
||||
var radius = cfg.factor*Math.min(cfg.w/2, cfg.h/2); |
||||
var Format = d3.format('%'); |
||||
|
||||
d3.select(mydiv).select("svg").remove(); |
||||
|
||||
//console.log(allAxis);
|
||||
|
||||
//Circular segments
|
||||
for(var j=0; j<cfg.levels-1; j++){ |
||||
var levelFactor = cfg.factor*radius*((j+1)/cfg.levels); |
||||
svg.selectAll(".levels") |
||||
.data(allAxis) |
||||
.enter() |
||||
.append("svg:line") |
||||
.attr("x1", function(d, i){return levelFactor*(1-cfg.factor*Math.sin(i*cfg.radians/total));}) |
||||
.attr("y1", function(d, i){return levelFactor*(1-cfg.factor*Math.cos(i*cfg.radians/total));}) |
||||
.attr("x2", function(d, i){return levelFactor*(1-cfg.factor*Math.sin((i+1)*cfg.radians/total));}) |
||||
.attr("y2", function(d, i){return levelFactor*(1-cfg.factor*Math.cos((i+1)*cfg.radians/total));}) |
||||
.attr("class", "line") |
||||
.attr("class", "mylines") |
||||
.style("stroke", "grey") |
||||
.style("stroke-opacity", "0.75") |
||||
.style("stroke-width", "0.3px") |
||||
.attr("transform", "translate(" + (cfg.w/2-levelFactor) + ", " + (cfg.h/2-levelFactor) + ")"); |
||||
} |
||||
|
||||
//Text indicating at what % each level is
|
||||
for(var j=0; j<cfg.levels; j++){ |
||||
var levelFactor = cfg.factor*radius*((j+1)/cfg.levels); |
||||
svg.selectAll(".levels") |
||||
.data([1]) //dummy data
|
||||
.enter() |
||||
.append("svg:text") |
||||
.attr("x", function(d){return levelFactor*(1-cfg.factor*Math.sin(0));}) |
||||
.attr("y", function(d){return levelFactor*(1-cfg.factor*Math.cos(0));}) |
||||
.attr("class", "legend") |
||||
.style("font-family", "sans-serif") |
||||
.style("font-size", "10px") |
||||
.attr("transform", "translate(" + (cfg.w/2-levelFactor + cfg.ToRight) + ", " + (cfg.h/2-levelFactor) + ")") |
||||
.attr("fill", "#737373") |
||||
.text(Format((j+1)*cfg.maxValue/cfg.levels)); |
||||
} |
||||
|
||||
var axis = svg.selectAll(".axis") |
||||
.data(allAxis) |
||||
.enter() |
||||
.append("g") |
||||
.attr("class", "axis"); |
||||
|
||||
axis.append("line") |
||||
.attr("x1", cfg.w/2) |
||||
.attr("y1", cfg.h/2) |
||||
.attr("x2", function(d, i){return cfg.w/2*(1-cfg.factor*Math.sin(i*cfg.radians/total));}) |
||||
.attr("y2", function(d, i){return cfg.h/2*(1-cfg.factor*Math.cos(i*cfg.radians/total));}) |
||||
.attr("class", "line") |
||||
.style("stroke", "grey") |
||||
.style("stroke-width", "1px"); |
||||
|
||||
axis.append("text") |
||||
.attr("class", "legend") |
||||
.text(function(d){return d}) |
||||
.style("font-family", "sans-serif") |
||||
.style("font-size", "11px") |
||||
.attr("text-anchor", "middle") |
||||
.attr("dy", "1.5em") |
||||
.attr("transform", function(d, i){return "translate(0, -10)"}) |
||||
.attr("x", function(d, i){return cfg.w/2*(1-cfg.factorLegend*Math.sin(i*cfg.radians/total))-60*Math.sin(i*cfg.radians/total);}) |
||||
.attr("y", function(d, i){return cfg.h/2*(1-Math.cos(i*cfg.radians/total))-20*Math.cos(i*cfg.radians/total);}); |
||||
|
||||
|
||||
|
||||
series = 0; |
||||
|
||||
// for each series...
|
||||
//
|
||||
//
|
||||
// what is this stupid nodes thing
|
||||
// and where does it come from
|
||||
// and why doesn't it show up
|
||||
// because this is the key to getting this
|
||||
// whole stupid chart to work
|
||||
|
||||
dataValues = []; |
||||
|
||||
//svg.selectAll(".mylines")
|
||||
svg.selectAll(".nodes") |
||||
.data(y, function(j, i){ |
||||
dataValues.push([ |
||||
cfg.w/2*(1-(parseFloat(Math.max(i, 0))/cfg.maxValue)*cfg.factor*Math.sin(i*cfg.radians/total)), |
||||
cfg.h/2*(1-(parseFloat(Math.max(i, 0))/cfg.maxValue)*cfg.factor*Math.cos(i*cfg.radians/total)) |
||||
//
|
||||
// j.value is undefined, causing nans.
|
||||
//cfg.w/2*(1-(parseFloat(Math.max(j.value, 0))/cfg.maxValue)*cfg.factor*Math.sin(i*cfg.radians/total)),
|
||||
//cfg.h/2*(1-(parseFloat(Math.max(j.value, 0))/cfg.maxValue)*cfg.factor*Math.cos(i*cfg.radians/total))
|
||||
]); |
||||
}); |
||||
dataValues.push(dataValues[0]); |
||||
|
||||
|
||||
console.log(dataValues); |
||||
|
||||
|
||||
svg.selectAll(".area") |
||||
.data(dataValues) |
||||
.enter() |
||||
.append("polygon") |
||||
.attr("class", "radar-chart-series"+series) |
||||
.style("stroke-width", "2px") |
||||
.style("stroke", cfg.color(series)) |
||||
.attr("points",function(d) { |
||||
var str=""; |
||||
for(var pti=0;pti<d.length;pti++){ |
||||
str=str+d[pti][0]+","+d[pti][1]+" "; |
||||
} |
||||
return str; |
||||
}) |
||||
.style("fill", function(j, i){ |
||||
|
||||
console.log(series); |
||||
console.log(cfg.color(series)); |
||||
|
||||
return cfg.color(series)}) |
||||
.style("fill-opacity", cfg.opacityArea) |
||||
.on('mouseover', function (d){ |
||||
z = "polygon."+d3.select(this).attr("class"); |
||||
svg.selectAll("polygon") |
||||
.transition(200) |
||||
.style("fill-opacity", 0.1); |
||||
svg.selectAll(z) |
||||
.transition(200) |
||||
.style("fill-opacity", .7); |
||||
}) |
||||
.on('mouseout', function(){ |
||||
svg.selectAll("polygon") |
||||
.transition(200) |
||||
.style("fill-opacity", cfg.opacityArea); |
||||
}); |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//svg.selectAll(".mylines")
|
||||
svg.selectAll(".nodes") |
||||
.data(y,function(d) { |
||||
console.log('hello?'); |
||||
}) |
||||
.enter() |
||||
.append("svg:circle") |
||||
.attr("class", "radar-chart-series"+series) |
||||
.attr('r', cfg.radius) |
||||
.attr("alt", function(j){return Math.max(j.value, 0)}) |
||||
.attr("cx", function(j, i){ |
||||
console.log('hello?'); |
||||
dataValues.push([ |
||||
cfg.w/2*(1-(parseFloat(Math.max(j.value, 0))/cfg.maxValue)*cfg.factor*Math.sin(i*cfg.radians/total)), |
||||
cfg.h/2*(1-(parseFloat(Math.max(j.value, 0))/cfg.maxValue)*cfg.factor*Math.cos(i*cfg.radians/total)) |
||||
]); |
||||
return cfg.w/2*(1-(Math.max(j.value, 0)/cfg.maxValue)*cfg.factor*Math.sin(i*cfg.radians/total)); |
||||
}) |
||||
.attr("cy", function(j, i){ |
||||
return cfg.h/2*(1-(Math.max(j.value, 0)/cfg.maxValue)*cfg.factor*Math.cos(i*cfg.radians/total)); |
||||
}) |
||||
.attr("data-id", function(j){return j.axis}) |
||||
.style("fill", cfg.color(series)).style("fill-opacity", .9) |
||||
.on('mouseover', function (d){ |
||||
newX = parseFloat(d3.select(this).attr('cx')) - 10; |
||||
newY = parseFloat(d3.select(this).attr('cy')) - 5; |
||||
|
||||
tooltip |
||||
.attr('x', newX) |
||||
.attr('y', newY) |
||||
.text(Format(d.value)) |
||||
.transition(200) |
||||
.style('opacity', 1); |
||||
|
||||
z = "polygon."+d3.select(this).attr("class"); |
||||
svg.selectAll("polygon") |
||||
.transition(200) |
||||
.style("fill-opacity", 0.1); |
||||
svg.selectAll(z) |
||||
.transition(200) |
||||
.style("fill-opacity", .7); |
||||
}) |
||||
.on('mouseout', function(){ |
||||
tooltip |
||||
.transition(200) |
||||
.style('opacity', 0); |
||||
svg.selectAll("polygon") |
||||
.transition(200) |
||||
.style("fill-opacity", cfg.opacityArea); |
||||
}) |
||||
.append("svg:title") |
||||
.text(function(j){return Math.max(j.value, 0)}); |
||||
|
||||
} |
||||
|
||||
|
||||
*/ |
||||
|
||||
return { |
||||
link: link, |
||||
restrict: "E", |
||||
scope: { } |
||||
}; |
||||
}); |
||||
dir.push(ng); |
||||
|
||||
|
||||
@ -0,0 +1,76 @@
@@ -0,0 +1,76 @@
|
||||
///////////////////////////////////////
|
||||
//
|
||||
// radar1
|
||||
//
|
||||
// Module/Controller
|
||||
//
|
||||
|
||||
var a = angular.module("radar1App", [], function($interpolateProvider) { |
||||
$interpolateProvider.startSymbol('[['); |
||||
$interpolateProvider.endSymbol(']]'); |
||||
} |
||||
); |
||||
|
||||
var datafactory = a.factory('datafactory', function($http, $q) { |
||||
|
||||
return { |
||||
getradar1data: function() { |
||||
var deferred = $q.defer(); |
||||
|
||||
var json_file = 'radar_mon.json'; |
||||
|
||||
$http.get(json_file).success(function(data) { |
||||
deferred.resolve(data); |
||||
}).error(function(){ |
||||
console.log('error loading json file: '+json_file); |
||||
deferred.reject(); |
||||
}); |
||||
|
||||
return deferred.promise; |
||||
}, |
||||
|
||||
getCodeData: function() { |
||||
var deferred = $q.defer(); |
||||
|
||||
$http.get('icd10codes.json').success(function(data) { |
||||
deferred.resolve(data); |
||||
}).error(function(){ |
||||
console.log('error loading icd10codes.json'); |
||||
deferred.reject(); |
||||
}); |
||||
|
||||
return deferred.promise; |
||||
} |
||||
|
||||
} |
||||
}); |
||||
|
||||
function radar1Controller($scope,datafactory) { |
||||
|
||||
$scope.initialize = function() { |
||||
|
||||
$scope.icd10code="S324"; |
||||
$scope.donutFemale = 0; |
||||
$scope.donutMale = 0; |
||||
|
||||
datafactory.getradar1data().then( |
||||
function(data) { |
||||
$scope.radar1data = data; |
||||
} |
||||
); |
||||
|
||||
datafactory.getCodeData().then( |
||||
function(data) { |
||||
$scope.icd10codes_all = data; |
||||
var descr = $scope.icd10codes_all[$scope.icd10code]; |
||||
$scope.description = descr; |
||||
} |
||||
); |
||||
|
||||
|
||||
} |
||||
|
||||
} |
||||
|
||||
// the first few arguments of the list should correspond to the Angular-namespace stuff to feed to controller
|
||||
var c = a.controller("radar1Controller", ["$scope", "datafactory", radar1Controller]); |
||||
@ -0,0 +1,81 @@
@@ -0,0 +1,81 @@
|
||||
.area { |
||||
fill: #FFD700; |
||||
} |
||||
.radar-chart .area { |
||||
fill-opacity: 0.3; |
||||
} |
||||
.radar-chart.focus .area { |
||||
fill-opacity: 0.3; |
||||
} |
||||
.radar-chart.focus .area.focused { |
||||
fill-opacity: 0.9; |
||||
fill: #FFD700; |
||||
stroke: none; |
||||
} |
||||
|
||||
|
||||
|
||||
/* |
||||
* from https://rawgit.com/tpreusse/radar-chart-d3/master/src/radar-chart.css |
||||
* and https://github.com/alangrafu/radar-chart-d3 |
||||
*/ |
||||
.radar-chart .level { |
||||
stroke: grey; |
||||
stroke-width: 0.5; |
||||
} |
||||
|
||||
.radar-chart .axis line { |
||||
stroke: grey; |
||||
stroke-width: 1; |
||||
} |
||||
.radar-chart .axis .legend { |
||||
font-family: sans-serif; |
||||
font-size: 10px; |
||||
} |
||||
.radar-chart .axis .legend.top { |
||||
dy:1em; |
||||
} |
||||
.radar-chart .axis .legend.left { |
||||
text-anchor: start; |
||||
} |
||||
.radar-chart .axis .legend.middle { |
||||
text-anchor: middle; |
||||
} |
||||
.radar-chart .axis .legend.right { |
||||
text-anchor: end; |
||||
} |
||||
|
||||
.radar-chart .tooltip { |
||||
font-family: sans-serif; |
||||
font-size: 13px; |
||||
transition: opacity 200ms; |
||||
opacity: 0; |
||||
} |
||||
.radar-chart .tooltip.visible { |
||||
opacity: 1; |
||||
} |
||||
|
||||
/* area transition when hovering */ |
||||
.radar-chart .area { |
||||
stroke-width: 2; |
||||
fill-opacity: 0.5; |
||||
} |
||||
.radar-chart.focus .area { |
||||
fill-opacity: 0.1; |
||||
} |
||||
.radar-chart.focus .area.focused { |
||||
fill-opacity: 0.7; |
||||
} |
||||
|
||||
.radar-chart .circle { |
||||
fill-opacity: 0.9; |
||||
} |
||||
|
||||
/* transitions */ |
||||
.radar-chart .area, .radar-chart .circle { |
||||
transition: opacity 300ms, fill-opacity 200ms; |
||||
opacity: 1; |
||||
} |
||||
.radar-chart .d3-enter, .radar-chart .d3-exit { |
||||
opacity: 0; |
||||
} |
||||
@ -0,0 +1,176 @@
@@ -0,0 +1,176 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<title>radar2 Chart</title> |
||||
<meta charset="utf-8" /> |
||||
|
||||
<!-- |
||||
my CSS styles |
||||
--> |
||||
<link href="/theme/css/bootstrap.css" rel="stylesheet" type="text/css"> |
||||
<link href="/theme/css/main.css" rel="stylesheet" type="text/css"> |
||||
|
||||
<link href="/theme/css/cosmo.css" rel="stylesheet" type="text/css"> |
||||
<link href="/theme/css/font-awesome.css" rel="stylesheet" type="text/css"/> |
||||
<link href="/theme/css/pygment.css" rel="stylesheet" type="text/css"/> |
||||
|
||||
<!-- |
||||
include Angular first |
||||
--> |
||||
<script type="text/javascript" src="/theme/js/angular-1.3.15.js"></script> |
||||
</head> |
||||
|
||||
<body id="index" class="home"> |
||||
<div class="container"> |
||||
<h1><a href="/">dang-sunburst <strong></strong></a></h1> |
||||
<hr /> |
||||
|
||||
|
||||
<link href="/radar/radar2.css" rel="stylesheet" stype="text/css" /> |
||||
|
||||
<div ng-app="radar2App"> |
||||
|
||||
<div ng-controller="radar2Controller" ng-init="initialize()"> |
||||
|
||||
|
||||
<div class="row"> |
||||
<div class="col-sm-12" id="radar2_title"> |
||||
<radar2head></radar2head> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="row"> |
||||
<div class="col-sm-10" id="radar2_controls"> |
||||
<radar2controls></radar2controls> |
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
<div class="row"> |
||||
<div class="col-sm-6" id="radar2_charts"> |
||||
<div class="row" id="radar2_chart"> |
||||
<radar2chart></radar2chart> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="col-sm-6" id="radar2_panels"> |
||||
<div class="row" id="radar2_panel"> |
||||
<radar2panel></radar2panel> |
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
</div> |
||||
|
||||
|
||||
|
||||
<div class="row"> |
||||
|
||||
<div class="col-sm-10" id="radar2_text"> |
||||
<div class="row" id="radar2_md"> |
||||
This chart uses a radar chart that's defined as a single, standalone Javacsript object, |
||||
which expects data in a particular structure. Some settings cannot be changed and are implemented as is, |
||||
while other options can be configured using a dictionary. |
||||
|
||||
<br /> |
||||
<br /> |
||||
|
||||
The radar chart is connected to data about the month of death, |
||||
organized in a hierarchical way, similar to the organization for |
||||
the bar and donut charts. The difference is that this time, |
||||
the pre-defined RadarChart object was used, which expected |
||||
particular data labels. |
||||
|
||||
<br/> |
||||
<br/> |
||||
|
||||
Here is how the data looks for this example: |
||||
|
||||
<pre style="font-size: 8px;"> |
||||
[ |
||||
{ "className": "S324", |
||||
"axes": [ |
||||
{"value": 1, "axis": "January"}, |
||||
{"value": 0, "axis": "February"}, |
||||
|
||||
... |
||||
|
||||
{"value": 0, "axis": "December"} |
||||
] |
||||
}, |
||||
{ "className": "S328", |
||||
"axes": [ |
||||
{"value": 1, "axis": "January"}, |
||||
{"value": 1, "axis": "February"}, |
||||
|
||||
... |
||||
|
||||
{"value": 2, "axis": "December"} |
||||
] |
||||
}, |
||||
{ "className": "Y15", |
||||
"axes": [ |
||||
{"value": 3, "axis": "January"}, |
||||
{"value": 2, "axis": "February"}, |
||||
|
||||
... |
||||
|
||||
{"value": 1, "axis": "December"} |
||||
] |
||||
} |
||||
] |
||||
</pre> |
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
<script src="http://d3js.org/d3.v3.js"></script> |
||||
<script type="text/javascript" src="/radar/radar-chart.js"></script> |
||||
<script type="text/javascript" src="/theme/js/uvcharts.js"></script> |
||||
<script type="text/javascript" src="/radar/radar2_modcontrol.js"></script> |
||||
<script type="text/javascript" src="/radar/radar2_chart.js"></script> |
||||
|
||||
</div> |
||||
|
||||
<footer id="contentinfo" class="body"> |
||||
<hr /> |
||||
<p style="text-align: center"> |
||||
<span class="fa-stack fa-lg"> |
||||
<i class="fa fa-square fa-stack-2x"></i> |
||||
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i> |
||||
</span> |
||||
Made from the command line with vim by |
||||
<a href="http://charlesreid1.com">charlesreid1</a>. |
||||
</p> |
||||
|
||||
<p style="text-align: center;">Made with HTML ( |
||||
<a href="http://http://bootstrap.org/">Bootstrap</a>, |
||||
<a href="http://bootswatch.com">Bootswatch</a>), |
||||
Javascript ( |
||||
<a href="http://http://d3js.org/">D3.js</a>, |
||||
<a href=https://angularjs.org/">Angular.js</a>, |
||||
<a href="https://jquery.com/">jQuery</a>), |
||||
and Python ( |
||||
<a href="http://getpelican.com">Pelican</a>, |
||||
<a href="http://http://stanford.edu/~mwaskom/software/seaborn/">Seaborn</a>, |
||||
<a href="http://matplotlib.org">Matplotlib</a>, |
||||
<a href="http://numpy.org">Numpy</a>). |
||||
</p> |
||||
|
||||
<script type="text/javascript" src="/theme/js/jquery-1.11.2.js"></script> |
||||
<script type="text/javascript" src="/theme/js/bootstrap-3.3.4.js"></script> |
||||
<script type="text/javascript" src="/theme/js/d3-3.5.5.js"></script> |
||||
<!-- |
||||
<script type="text/javascript" src="/theme/js/leaflet-0.7.3.js"></script> |
||||
<script type="text/javascript" src="/theme/js/leaflet.ajax.min.js"></script> |
||||
--> |
||||
</footer><!-- /#contentinfo --> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,16 @@
@@ -0,0 +1,16 @@
|
||||
[{"donut": [{"value": 0, "label": "M"}, {"value": 1, "label": "F"}], "code": "S324", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 2, "label": "M"}, {"value": 3, "label": "F"}], "code": "S328", "modbars": [{"value": 1, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 4, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 1, "label": "M"}, {"value": 0, "label": "F"}], "code": "Y15", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 1, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 1, "label": "M"}, {"value": 4, "label": "F"}], "code": "Y14", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 5, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 9, "label": "M"}, {"value": 14, "label": "F"}], "code": "I120", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 23, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 0, "label": "M"}, {"value": 2, "label": "F"}], "code": "I129", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 2, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 1, "label": "M"}, {"value": 0, "label": "F"}], "code": "A051", "modbars": [{"value": 1, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 1, "label": "M"}, {"value": 3, "label": "F"}], "code": "W19", "modbars": [{"value": 2, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 2, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 1, "label": "M"}, {"value": 1, "label": "F"}], "code": "T465", "modbars": [{"value": 0, "label": "Accident"}, {"value": 2, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 2, "label": "M"}, {"value": 0, "label": "F"}], "code": "C449", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 2, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 2, "label": "M"}, {"value": 1, "label": "F"}], "code": "C119", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 3, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 0, "label": "M"}, {"value": 1, "label": "F"}], "code": "C444", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 3, "label": "M"}, {"value": 2, "label": "F"}], "code": "T519", "modbars": [{"value": 2, "label": "Accident"}, {"value": 1, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 1, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 30, "label": "M"}, {"value": 12, "label": "F"}], "code": "T510", "modbars": [{"value": 37, "label": "Accident"}, {"value": 2, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 3, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 2, "label": "M"}, {"value": 0, "label": "F"}], "code": "T511", "modbars": [{"value": 2, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 0, "label": "M"}, {"value": 1, "label": "F"}], "code": "K117", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}] |
||||
@ -0,0 +1,413 @@
@@ -0,0 +1,413 @@
|
||||
var ng; |
||||
dir = []; |
||||
|
||||
|
||||
|
||||
|
||||
//////////////////////////////////////
|
||||
// Chart Directives
|
||||
//
|
||||
// This file defines Angular directives
|
||||
// that use D3 to draw charts.
|
||||
//
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
///////////////////////////////////////
|
||||
// Header Directives:
|
||||
//
|
||||
// Print out instructions, title, etc.
|
||||
|
||||
|
||||
ng = a.directive('radar2head', function($compile) { |
||||
|
||||
function link(scope, element, attr) { |
||||
|
||||
var el = element[0]; |
||||
|
||||
$(el).empty(); |
||||
|
||||
var dir = $("div#radar2_title"); |
||||
|
||||
var h1 = $("<h1 />"); |
||||
|
||||
var b = $("<b />") |
||||
.text("Radar Chart Example") |
||||
.appendTo(h1); |
||||
|
||||
h1.appendTo(dir); |
||||
|
||||
|
||||
var p = $("<p />", { |
||||
"class" : "normal" }) |
||||
.html("A fancy little radar chart.") |
||||
.appendTo(dir); |
||||
|
||||
|
||||
} |
||||
return { |
||||
restrict: "E", |
||||
link: link, |
||||
scope: {} |
||||
} |
||||
}); |
||||
dir.push(ng); |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
///////////////////////////////////////////////
|
||||
// Chart Controls Directives
|
||||
|
||||
ng = a.directive('radar2controls', function($compile) { |
||||
|
||||
function link(scope, element, attr) { |
||||
|
||||
// wait to build the buttons until we've loaded the data,
|
||||
// since the buttons come from the data.
|
||||
scope.$parent.$watch('radar2data',doStuff); |
||||
|
||||
function doStuff() { |
||||
if(!scope.$parent.radar2data) { return; } |
||||
buildButtons(element, scope.$parent); |
||||
} |
||||
|
||||
|
||||
}; |
||||
|
||||
function buildButtons(element,pscope) { |
||||
|
||||
var mydiv = "div#radar2_controls"; |
||||
|
||||
var el = $(mydiv); |
||||
|
||||
var div = $("<div />"); |
||||
|
||||
|
||||
// ------------------------------------
|
||||
// Add ICD 10 code buttons
|
||||
//
|
||||
var btn_grp = $("<div />", { |
||||
"id" : "codebtns", |
||||
"class" : "btn-group" |
||||
}); |
||||
|
||||
for( var i = 0; i < pscope.radar2data.length; i++ ) { |
||||
var this_code = pscope.radar2data[i]['className'] |
||||
var code = $("<a />", { |
||||
"class" : "btn btn-code btn-large btn-primary", |
||||
"changecode" : "", |
||||
"id" : "btn_"+this_code, |
||||
"code" : this_code, |
||||
}) |
||||
.html( this_code ) |
||||
.appendTo(btn_grp); |
||||
} |
||||
|
||||
|
||||
// to make buttons in this btn group active,
|
||||
// you have to use D3's classed() method
|
||||
// after you add the elements to the document
|
||||
// (i.e., after you call $compile)
|
||||
|
||||
angular.element(el).append($compile(btn_grp)(pscope)); |
||||
|
||||
|
||||
pscope.updateCode = function() { |
||||
|
||||
// -----------------------------
|
||||
// make button for active icd 10 code
|
||||
|
||||
d3.selectAll("a.btn-code").classed('active',false); |
||||
var btnlabel = "a#btn_"+pscope.icd10code; |
||||
d3.selectAll(btnlabel).classed('active',true); |
||||
|
||||
}; |
||||
|
||||
pscope.$watch('icd10code',pscope.updateCode); |
||||
|
||||
|
||||
} |
||||
return { |
||||
restrict: "E", |
||||
link: link, |
||||
scope: {} |
||||
} |
||||
}); |
||||
dir.push(ng); |
||||
|
||||
|
||||
//////////////////////////////////
|
||||
// Action directive:
|
||||
// What to do when the user changes the ICD 10 code
|
||||
// by clicking an ICD 10 code button
|
||||
|
||||
ng = a.directive("changecode", function($compile) { |
||||
|
||||
return function(pscope, element, attrs){ |
||||
element.bind("click", function(){ |
||||
|
||||
// first, update the scope variable
|
||||
// that holds the current icd 10 code
|
||||
// (no need to load any new data)
|
||||
|
||||
|
||||
// This is the ICD 10 code the user has selected.
|
||||
var this_code = attrs['code']; |
||||
var this_description = pscope.icd10codes_all[this_code] |
||||
|
||||
//console.log('Changed icd 10 code, updating description:');
|
||||
//console.log(this_code);
|
||||
//console.log(this_description);
|
||||
|
||||
|
||||
// !!!!!!!!!!!!!!!!!!!!!!!!
|
||||
// NOTE
|
||||
// The lines below - this $apply() method -
|
||||
// this is the way you change the variable
|
||||
// at the controller level, and get the
|
||||
// various watchers to detect changes.
|
||||
// !!!!!!!!!!!!!!!!!!!!!!!!!!
|
||||
pscope.$apply(function() { |
||||
pscope.icd10code = this_code; |
||||
}); |
||||
|
||||
pscope.$apply(function() { |
||||
pscope.description = this_description; |
||||
}); |
||||
|
||||
|
||||
//// This is some weak-sauce,
|
||||
//// its not even changing value of variable
|
||||
//pscope.update_icd10code(attrs['code']);
|
||||
//// ...
|
||||
//// .......
|
||||
//// seriously.
|
||||
//// all we needed was just
|
||||
//// pscope.$apply()
|
||||
////
|
||||
//// smh.
|
||||
|
||||
|
||||
|
||||
|
||||
//// then run the donut chart update function
|
||||
//pscope.updateradar2();
|
||||
|
||||
// then run the button controllers update function
|
||||
pscope.updateCode(); |
||||
|
||||
}); |
||||
} |
||||
|
||||
}); |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
///////////////////////////////////////////////
|
||||
// Panels:
|
||||
// Display useful information in a pretty box
|
||||
|
||||
|
||||
ng = a.directive('radar2panel', function($compile) { |
||||
|
||||
|
||||
function link(scope, element, attr) { |
||||
|
||||
|
||||
|
||||
var el = element[0]; |
||||
|
||||
var pscope = scope.$parent; |
||||
|
||||
// --------------------------
|
||||
// add display for details
|
||||
|
||||
// assemble the tags,
|
||||
// then compile the html
|
||||
// select element of interest with angular.element
|
||||
// and append the compiled tags
|
||||
//
|
||||
var br = $("<br />").appendTo(el); |
||||
|
||||
var panel = $("<div />", { |
||||
"class" : "panel panel-primary", |
||||
"id" : "first" |
||||
}); |
||||
|
||||
var panelhead = $("<div />", { |
||||
"class" : "panel-heading" |
||||
}).appendTo(panel); |
||||
|
||||
var h3 = $("<h3 />", { |
||||
"class" : "panel-title" |
||||
}).text("Current ICD 10 Code") |
||||
.appendTo(panelhead); |
||||
|
||||
|
||||
|
||||
var panelbody = $("<div />", { |
||||
"class" : "panel-body" |
||||
}).appendTo(panel); |
||||
|
||||
var maindiv = $("<div />", { |
||||
}).appendTo(panelbody); |
||||
|
||||
var h = $("<h3 />") |
||||
.html("ICD 10 Code: [[icd10code]]") |
||||
.appendTo(maindiv); |
||||
|
||||
var de = $("<p />", { |
||||
"class" : "lead" }) |
||||
.html("Description: [[description]]") |
||||
.appendTo(maindiv); |
||||
|
||||
angular.element(el).prepend($compile(panel)(pscope)); |
||||
|
||||
} |
||||
|
||||
return { |
||||
link: link, |
||||
restrict: "E", |
||||
scope: { } |
||||
}; |
||||
}); |
||||
dir.push(ng); |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
///////////////////////////////////////////////
|
||||
// radar2 Chart
|
||||
//
|
||||
// This is the actual donut chart, of gender ratios.
|
||||
|
||||
ng = a.directive('radar2chart', function($compile) { |
||||
|
||||
function link(scope, element, attr) { |
||||
|
||||
scope.$parent.$watch('radar2data',doStuff); |
||||
|
||||
function doStuff() { |
||||
if(!scope.$parent.radar2data) { return; } |
||||
buildradar2(element, scope.$parent); |
||||
} |
||||
|
||||
|
||||
}; |
||||
|
||||
function buildradar2(element,pscope) { |
||||
|
||||
var mydiv = "div#radar2_chart"; |
||||
|
||||
/////////////////////////////////////////
|
||||
// Create chart
|
||||
//
|
||||
// data has not been loaded yet.
|
||||
// start by initializing variables
|
||||
// that don't depend on the data.
|
||||
//
|
||||
|
||||
|
||||
|
||||
var el = element[0]; |
||||
$(el).empty(); |
||||
|
||||
|
||||
|
||||
/////////////////////////////////////////////////////
|
||||
// update radar chart
|
||||
//
|
||||
pscope.updateradar2 = function() { |
||||
|
||||
var all_data = pscope.radar2data; |
||||
|
||||
// ----------------------------------
|
||||
// Get chart data
|
||||
//
|
||||
// Here, we have all donut data
|
||||
// available to us.
|
||||
//
|
||||
// We use the currently-selected ICD 10 code
|
||||
// to filter which donut data is being plotted.
|
||||
//
|
||||
// Where to keep track of current code?
|
||||
// In the controller (available via pscope).
|
||||
// pscope.icd10code
|
||||
//
|
||||
var code; |
||||
var data; |
||||
for( var jj=0; jj < all_data.length; jj++ ) { |
||||
// set excpetion handling:
|
||||
// if no icd10code is set, problems occur.
|
||||
if(all_data[jj]['className'] == pscope.icd10code) { |
||||
code = all_data[jj]['className']; |
||||
data = all_data[jj] |
||||
break; |
||||
} |
||||
} |
||||
|
||||
if(data==null) { |
||||
console.log("Error. Check that ICD 10 code is in data set: "+pscope.icd10code); |
||||
console.log(pscope.icd10code); |
||||
console.log(all_data); |
||||
return; |
||||
} |
||||
|
||||
// finished; use data
|
||||
// ---------------------------------
|
||||
|
||||
|
||||
///////////////////////////////////
|
||||
// now draw the svg with d3
|
||||
//
|
||||
|
||||
d3.select(mydiv).selectAll(".uv-chart-div").remove(); |
||||
|
||||
var graphdef = { |
||||
categories : ['mycode'], |
||||
dataset : { |
||||
// This is the most idiotic implementation ever.
|
||||
// The key, above, is a string. Great. We have string variables.
|
||||
// But the key below *cannot* be a string.
|
||||
// Really??? What genius came up with this one?
|
||||
mycode : [ |
||||
{ name : '2009', value : 55+Math.random() }, |
||||
{ name : '2010', value : 61+Math.random() }, |
||||
{ name : '2011', value : 93+Math.random() }, |
||||
{ name : '2012', value : 96+Math.random() }, |
||||
{ name : '2013', value : 120+Math.random() } |
||||
] |
||||
} |
||||
} |
||||
var chart = uv.chart('Bar', graphdef, { |
||||
effects : {duration : 3.0}, |
||||
meta : { position : '#radar2_chart' }, |
||||
legend : { showlegends : false } |
||||
}); |
||||
|
||||
} |
||||
|
||||
pscope.$watch('icd10code',pscope.updateradar2); |
||||
|
||||
|
||||
} |
||||
|
||||
return { |
||||
link: link, |
||||
restrict: "E", |
||||
scope: { } |
||||
}; |
||||
}); |
||||
dir.push(ng); |
||||
|
||||
|
||||
@ -0,0 +1,76 @@
@@ -0,0 +1,76 @@
|
||||
///////////////////////////////////////
|
||||
//
|
||||
// radar2
|
||||
//
|
||||
// Module/Controller
|
||||
//
|
||||
|
||||
var a = angular.module("radar2App", [], function($interpolateProvider) { |
||||
$interpolateProvider.startSymbol('[['); |
||||
$interpolateProvider.endSymbol(']]'); |
||||
} |
||||
); |
||||
|
||||
var datafactory = a.factory('datafactory', function($http, $q) { |
||||
|
||||
return { |
||||
getradar2data: function() { |
||||
var deferred = $q.defer(); |
||||
|
||||
var json_file = 'radar_mon.json'; |
||||
|
||||
$http.get(json_file).success(function(data) { |
||||
deferred.resolve(data); |
||||
}).error(function(){ |
||||
console.log('error loading json file: '+json_file); |
||||
deferred.reject(); |
||||
}); |
||||
|
||||
return deferred.promise; |
||||
}, |
||||
|
||||
getCodeData: function() { |
||||
var deferred = $q.defer(); |
||||
|
||||
$http.get('icd10codes.json').success(function(data) { |
||||
deferred.resolve(data); |
||||
}).error(function(){ |
||||
console.log('error loading icd10codes.json'); |
||||
deferred.reject(); |
||||
}); |
||||
|
||||
return deferred.promise; |
||||
} |
||||
|
||||
} |
||||
}); |
||||
|
||||
function radar2Controller($scope,datafactory) { |
||||
|
||||
$scope.initialize = function() { |
||||
|
||||
$scope.icd10code="S324"; |
||||
$scope.donutFemale = 0; |
||||
$scope.donutMale = 0; |
||||
|
||||
datafactory.getradar2data().then( |
||||
function(data) { |
||||
$scope.radar2data = data; |
||||
} |
||||
); |
||||
|
||||
datafactory.getCodeData().then( |
||||
function(data) { |
||||
$scope.icd10codes_all = data; |
||||
var descr = $scope.icd10codes_all[$scope.icd10code]; |
||||
$scope.description = descr; |
||||
} |
||||
); |
||||
|
||||
|
||||
} |
||||
|
||||
} |
||||
|
||||
// the first few arguments of the list should correspond to the Angular-namespace stuff to feed to controller
|
||||
var c = a.controller("radar2Controller", ["$scope", "datafactory", radar2Controller]); |
||||
@ -0,0 +1,72 @@
@@ -0,0 +1,72 @@
|
||||
[{"className": "S324", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 1, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "S328", "axes": [{"value": 1, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 4, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "Y15", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 1, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 0, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "Y14", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 5, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 0, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "I120", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 23, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "I129", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 2, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "A051", "axes": [{"value": 1, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 0, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "W19", "axes": [{"value": 2, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 2, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "T465", "axes": [{"value": 0, "axis": "Accident"}, {"value": 2, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 0, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "C449", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 2, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "C119", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 3, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "C444", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 1, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "T519", "axes": [{"value": 2, "axis": "Accident"}, {"value": 1, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 1, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 1, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "T510", "axes": [{"value": 37, "axis": "Accident"}, {"value": 2, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 3, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "T511", "axes": [{"value": 2, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 0, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "K117", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 1, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "W18", "axes": [{"value": 13, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 0, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "C781", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 1, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "I38", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 18, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "M109", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 5, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "G610", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 1, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "J159", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 3, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "J150", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 1, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "J151", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 2, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "J152", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 6, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "C259", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 49, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "I829", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 2, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "T983", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 1, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "R402", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 2, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "C254", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 1, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "F059", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 4, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "F051", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 2, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "C341", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 2, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "K909", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 1, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "J90", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 13, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "T443", "axes": [{"value": 1, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 0, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "J969", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 141, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "J961", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 29, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "J960", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 55, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "V439", "axes": [{"value": 1, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 0, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "K137", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 1, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "S061", "axes": [{"value": 2, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 0, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "S060", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 1, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "R090", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 28, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "R092", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 48, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "R098", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 3, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "S066", "axes": [{"value": 3, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 0, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "S065", "axes": [{"value": 8, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 1, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 1, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "T794", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 1, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "I698", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 8, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "I694", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 18, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "I690", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 1, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "D693", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 1, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "D695", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 2, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "D696", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 4, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "D699", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 1, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "K739", "axes": [{"value": 2, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 2, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "X78", "axes": [{"value": 0, "axis": "Accident"}, {"value": 2, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 0, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "X74", "axes": [{"value": 0, "axis": "Accident"}, {"value": 35, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 0, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "I10", "axes": [{"value": 2, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 246, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "C099", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 1, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "P236", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 1, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "K922", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 66, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "K920", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 1, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "Q938", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 1, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "D487", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 4, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "Q200", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 1, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "C151", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 1, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "C159", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 25, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "X94", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 1, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 0, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "V224", "axes": [{"value": 1, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 0, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}, |
||||
{"className": "G409", "axes": [{"value": 0, "axis": "Accident"}, {"value": 0, "axis": "Suicide"}, {"value": 0, "axis": "Homicide"}, {"value": 0, "axis": "Pending investigation"}, {"value": 0, "axis": "Could not determine"}, {"value": 0, "axis": "Self-Inflicted"}, {"value": 2, "axis": "Natural"}, {"value": 0, "axis": "Not specified"}]}] |
||||
@ -0,0 +1,72 @@
@@ -0,0 +1,72 @@
|
||||
[{"className": "S324", "axes": [{"value": 1, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "S328", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 2, "axis": "June"}, {"value": 2, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 1, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "Y15", "axes": [{"value": 1, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "Y14", "axes": [{"value": 2, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 1, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 1, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 1, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "I120", "axes": [{"value": 2, "axis": "January"}, {"value": 2, "axis": "February"}, {"value": 2, "axis": "March"}, {"value": 2, "axis": "April"}, {"value": 2, "axis": "May"}, {"value": 1, "axis": "June"}, {"value": 6, "axis": "July"}, {"value": 2, "axis": "August"}, {"value": 1, "axis": "September"}, {"value": 3, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "I129", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 1, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 1, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "A051", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 1, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "W19", "axes": [{"value": 1, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 2, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 1, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "T465", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 1, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 1, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "C449", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 1, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 1, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "C119", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 1, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 1, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 1, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "C444", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 1, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "T519", "axes": [{"value": 1, "axis": "January"}, {"value": 1, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 1, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 1, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 1, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "T510", "axes": [{"value": 3, "axis": "January"}, {"value": 1, "axis": "February"}, {"value": 6, "axis": "March"}, {"value": 5, "axis": "April"}, {"value": 5, "axis": "May"}, {"value": 6, "axis": "June"}, {"value": 6, "axis": "July"}, {"value": 1, "axis": "August"}, {"value": 8, "axis": "September"}, {"value": 1, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "T511", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 1, "axis": "May"}, {"value": 1, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "K117", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 1, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "W18", "axes": [{"value": 2, "axis": "January"}, {"value": 1, "axis": "February"}, {"value": 1, "axis": "March"}, {"value": 2, "axis": "April"}, {"value": 1, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 1, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 2, "axis": "September"}, {"value": 2, "axis": "October"}, {"value": 1, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "C781", "axes": [{"value": 0, "axis": "January"}, {"value": 1, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "I38", "axes": [{"value": 3, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 1, "axis": "March"}, {"value": 2, "axis": "April"}, {"value": 2, "axis": "May"}, {"value": 3, "axis": "June"}, {"value": 3, "axis": "July"}, {"value": 1, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 2, "axis": "October"}, {"value": 1, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "M109", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 2, "axis": "June"}, {"value": 1, "axis": "July"}, {"value": 1, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 1, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "G610", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 1, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "J159", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 1, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 1, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 1, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "J150", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 1, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "J151", "axes": [{"value": 1, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 1, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "J152", "axes": [{"value": 1, "axis": "January"}, {"value": 1, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 1, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 1, "axis": "September"}, {"value": 2, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "C259", "axes": [{"value": 4, "axis": "January"}, {"value": 4, "axis": "February"}, {"value": 4, "axis": "March"}, {"value": 3, "axis": "April"}, {"value": 2, "axis": "May"}, {"value": 5, "axis": "June"}, {"value": 6, "axis": "July"}, {"value": 7, "axis": "August"}, {"value": 6, "axis": "September"}, {"value": 5, "axis": "October"}, {"value": 3, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "I829", "axes": [{"value": 0, "axis": "January"}, {"value": 1, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 1, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "T983", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 1, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "R402", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 1, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 1, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "C254", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 1, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "F059", "axes": [{"value": 0, "axis": "January"}, {"value": 1, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 1, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 1, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 1, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "F051", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 1, "axis": "September"}, {"value": 1, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "C341", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 1, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 1, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "K909", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 1, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "J90", "axes": [{"value": 1, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 2, "axis": "April"}, {"value": 2, "axis": "May"}, {"value": 1, "axis": "June"}, {"value": 2, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 2, "axis": "September"}, {"value": 2, "axis": "October"}, {"value": 1, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "T443", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 1, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "J969", "axes": [{"value": 11, "axis": "January"}, {"value": 10, "axis": "February"}, {"value": 13, "axis": "March"}, {"value": 13, "axis": "April"}, {"value": 17, "axis": "May"}, {"value": 13, "axis": "June"}, {"value": 16, "axis": "July"}, {"value": 21, "axis": "August"}, {"value": 11, "axis": "September"}, {"value": 12, "axis": "October"}, {"value": 4, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "J961", "axes": [{"value": 4, "axis": "January"}, {"value": 3, "axis": "February"}, {"value": 4, "axis": "March"}, {"value": 1, "axis": "April"}, {"value": 3, "axis": "May"}, {"value": 4, "axis": "June"}, {"value": 2, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 4, "axis": "September"}, {"value": 3, "axis": "October"}, {"value": 1, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "J960", "axes": [{"value": 5, "axis": "January"}, {"value": 2, "axis": "February"}, {"value": 8, "axis": "March"}, {"value": 6, "axis": "April"}, {"value": 5, "axis": "May"}, {"value": 4, "axis": "June"}, {"value": 7, "axis": "July"}, {"value": 2, "axis": "August"}, {"value": 9, "axis": "September"}, {"value": 6, "axis": "October"}, {"value": 1, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "V439", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 1, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "K137", "axes": [{"value": 1, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "S061", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 1, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 1, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "S060", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 1, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "R090", "axes": [{"value": 2, "axis": "January"}, {"value": 2, "axis": "February"}, {"value": 5, "axis": "March"}, {"value": 2, "axis": "April"}, {"value": 2, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 3, "axis": "July"}, {"value": 4, "axis": "August"}, {"value": 4, "axis": "September"}, {"value": 3, "axis": "October"}, {"value": 1, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "R092", "axes": [{"value": 6, "axis": "January"}, {"value": 5, "axis": "February"}, {"value": 7, "axis": "March"}, {"value": 1, "axis": "April"}, {"value": 5, "axis": "May"}, {"value": 2, "axis": "June"}, {"value": 8, "axis": "July"}, {"value": 5, "axis": "August"}, {"value": 4, "axis": "September"}, {"value": 4, "axis": "October"}, {"value": 1, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "R098", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 1, "axis": "August"}, {"value": 2, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "S066", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 1, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 1, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 1, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "S065", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 3, "axis": "April"}, {"value": 2, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 3, "axis": "September"}, {"value": 2, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "T794", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 1, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "I698", "axes": [{"value": 2, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 1, "axis": "April"}, {"value": 1, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 3, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 1, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "I694", "axes": [{"value": 4, "axis": "January"}, {"value": 1, "axis": "February"}, {"value": 3, "axis": "March"}, {"value": 1, "axis": "April"}, {"value": 2, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 2, "axis": "July"}, {"value": 2, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 2, "axis": "October"}, {"value": 1, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "I690", "axes": [{"value": 1, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "D693", "axes": [{"value": 1, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "D695", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 1, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 1, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "D696", "axes": [{"value": 0, "axis": "January"}, {"value": 2, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 1, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 1, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "D699", "axes": [{"value": 0, "axis": "January"}, {"value": 1, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "K739", "axes": [{"value": 0, "axis": "January"}, {"value": 2, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 1, "axis": "May"}, {"value": 1, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "X78", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 1, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 1, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "X74", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 2, "axis": "May"}, {"value": 4, "axis": "June"}, {"value": 8, "axis": "July"}, {"value": 7, "axis": "August"}, {"value": 6, "axis": "September"}, {"value": 7, "axis": "October"}, {"value": 1, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "I10", "axes": [{"value": 33, "axis": "January"}, {"value": 17, "axis": "February"}, {"value": 32, "axis": "March"}, {"value": 22, "axis": "April"}, {"value": 22, "axis": "May"}, {"value": 24, "axis": "June"}, {"value": 22, "axis": "July"}, {"value": 30, "axis": "August"}, {"value": 20, "axis": "September"}, {"value": 18, "axis": "October"}, {"value": 8, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "C099", "axes": [{"value": 0, "axis": "January"}, {"value": 1, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "P236", "axes": [{"value": 1, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "K922", "axes": [{"value": 8, "axis": "January"}, {"value": 5, "axis": "February"}, {"value": 5, "axis": "March"}, {"value": 5, "axis": "April"}, {"value": 10, "axis": "May"}, {"value": 7, "axis": "June"}, {"value": 5, "axis": "July"}, {"value": 5, "axis": "August"}, {"value": 7, "axis": "September"}, {"value": 8, "axis": "October"}, {"value": 1, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "K920", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 1, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "Q938", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 1, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "D487", "axes": [{"value": 0, "axis": "January"}, {"value": 1, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 2, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 1, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "Q200", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 1, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "C151", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 1, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "C159", "axes": [{"value": 7, "axis": "January"}, {"value": 1, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 1, "axis": "April"}, {"value": 5, "axis": "May"}, {"value": 2, "axis": "June"}, {"value": 3, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 2, "axis": "September"}, {"value": 4, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "X94", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 1, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "V224", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 0, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 1, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 0, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}, |
||||
{"className": "G409", "axes": [{"value": 0, "axis": "January"}, {"value": 0, "axis": "February"}, {"value": 1, "axis": "March"}, {"value": 0, "axis": "April"}, {"value": 0, "axis": "May"}, {"value": 0, "axis": "June"}, {"value": 0, "axis": "July"}, {"value": 0, "axis": "August"}, {"value": 1, "axis": "September"}, {"value": 0, "axis": "October"}, {"value": 0, "axis": "November"}, {"value": 0, "axis": "December"}]}] |
||||
@ -0,0 +1,38 @@
@@ -0,0 +1,38 @@
|
||||
path { |
||||
stroke: white; |
||||
stroke-width: 0.5; |
||||
} |
||||
|
||||
div#mouseoverPointPanel, |
||||
div#clickedPointPanel { |
||||
width: 300px; |
||||
} |
||||
|
||||
.fade { |
||||
opacity: 0; |
||||
-webkit-transition: opacity 0.85s linear; |
||||
-moz-transition: opacity 0.85s linear; |
||||
-o-transition: opacity 0.85s linear; |
||||
transition: opacity 0.85s linear; |
||||
} |
||||
|
||||
.fade.in { |
||||
opacity: 1; |
||||
} |
||||
|
||||
.active { |
||||
stroke: black; |
||||
stroke-width: 2.0; |
||||
} |
||||
|
||||
|
||||
.axis path, |
||||
.axis line { |
||||
fill: none; |
||||
stroke: #000; |
||||
shape-rendering: crispEdges; |
||||
} |
||||
|
||||
.x.axis path { |
||||
display: none; |
||||
} |
||||
@ -0,0 +1,191 @@
@@ -0,0 +1,191 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<title>Bar Donut Chart</title> |
||||
<meta charset="utf-8" /> |
||||
|
||||
<!-- |
||||
my CSS styles |
||||
--> |
||||
<link href="/theme/css/bootstrap.css" rel="stylesheet" type="text/css"> |
||||
<link href="/theme/css/main.css" rel="stylesheet" type="text/css"> |
||||
|
||||
<link href="/theme/css/cosmo.css" rel="stylesheet" type="text/css"> |
||||
<link href="/theme/css/font-awesome.css" rel="stylesheet" type="text/css"/> |
||||
<link href="/theme/css/pygment.css" rel="stylesheet" type="text/css"/> |
||||
|
||||
<!-- |
||||
include Angular first |
||||
--> |
||||
<script type="text/javascript" src="/theme/js/angular-1.3.15.js"></script> |
||||
<script src="//d3js.org/d3.v3.min.js"></script> |
||||
</head> |
||||
|
||||
<body id="index" class="home"> |
||||
<div class="container"> |
||||
<h1><a href="/">dang-sunburst <strong></strong></a></h1> |
||||
<hr /> |
||||
|
||||
|
||||
<link href="/simpledonut/bardonut.css" rel="stylesheet" stype="text/css" /> |
||||
|
||||
<div ng-app="pickerApp"> |
||||
|
||||
<div ng-controller="mainController" ng-init="initialize()"> |
||||
|
||||
|
||||
<div class="row"> |
||||
<div class="col-sm-12" id="donut_title"> |
||||
<bardonuthead></bardonuthead> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="row"> |
||||
<div class="col-sm-10" id="donut_controls"> |
||||
<bardonutcontrols></bardonutcontrols> |
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
<div class="row"> |
||||
<div class="col-sm-4" id="donut_chart"> |
||||
<div class="row" id="donutpicker_chart"> |
||||
<donutpickerchart></donutpickerchart> |
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
|
||||
<div class="col-sm-4" id="bar_chart"> |
||||
<div class="row" id="modbar_chart"> |
||||
<modbarchart></modbarchart> |
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
|
||||
<div class="col-sm-4" id="donut_text"> |
||||
<div class="row" id="donut_panels"> |
||||
<bardonutpanel></bardonutpanel> |
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
</div> |
||||
|
||||
|
||||
|
||||
<div class="row"> |
||||
|
||||
<div class="col-sm-10" id="more_donut_text"> |
||||
<div class="row" id="bardonut_md"> |
||||
This chart demonstrates linking a donut chart with a bar chart, |
||||
so that a single controller filters data on both. |
||||
It also effectively implements the "folding up" technique |
||||
demonstrated with the Donut Picker chart. |
||||
|
||||
<br /> |
||||
<br /> |
||||
|
||||
The data visualized are death records from the United States in 2014. |
||||
Death records are anonymized and classified by many variables, |
||||
including gender and manner of death, and released to the public. |
||||
Statistics about these variables are counted up for different ICD 10 codes, |
||||
which indicate various circumstances present at death, and visualized above. |
||||
|
||||
<br/> |
||||
<br/> |
||||
|
||||
Here, we bundle bar and donut plot data together by ICD 10 code. |
||||
When the user picks an ICD 10 code using buttons, we filter the data |
||||
plotted by the bar and donut plots. |
||||
|
||||
<pre style="font-size: 8px;"> |
||||
[ |
||||
{ |
||||
"code": "T510"}, |
||||
"donut": |
||||
[ |
||||
{"value": 17, "label": "M"}, |
||||
{"value": 4, "label": "F"} |
||||
], |
||||
"bar": |
||||
[ |
||||
{"value": 10, "label": "Accident"}, |
||||
{"value": 0, "label": "Suicide"}, |
||||
{"value": 0, "label": "Homicide"}, |
||||
{"value": 3, "label": "Natural"} |
||||
] |
||||
}, |
||||
{ |
||||
"code": "Y14"}, |
||||
"donut": |
||||
[ |
||||
{"value": 1, "label": "M"}, |
||||
{"value": 3, "label": "F"} |
||||
], |
||||
"bar": |
||||
[ |
||||
{"value": 4, "label": "Accident"}, |
||||
{"value": 2, "label": "Suicide"}, |
||||
{"value": 0, "label": "Homicide"}, |
||||
{"value": 2, "label": "Natural"} |
||||
] |
||||
}, |
||||
|
||||
... |
||||
] |
||||
</pre> |
||||
|
||||
Once we filter on "code", we get the "donut" array, and pass it to the D3 pie chart object, |
||||
which renders the d ata structure into the donut chart on the left. Likewise, the "bar" array |
||||
is sent to the bar chart and visualized accordingly. |
||||
</div> |
||||
|
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
<script type="text/javascript" src="/simpledonut/bardonut_modcontrol.js"></script> |
||||
<script type="text/javascript" src="/simpledonut/bardonut_chart.js"></script> |
||||
|
||||
</div> |
||||
|
||||
<footer id="contentinfo" class="body"> |
||||
<hr /> |
||||
<p style="text-align: center"> |
||||
<span class="fa-stack fa-lg"> |
||||
<i class="fa fa-square fa-stack-2x"></i> |
||||
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i> |
||||
</span> |
||||
Made from the command line with vim by |
||||
<a href="http://charlesreid1.com">charlesreid1</a>. |
||||
</p> |
||||
|
||||
<p style="text-align: center;">Made with HTML ( |
||||
<a href="http://http://bootstrap.org/">Bootstrap</a>, |
||||
<a href="http://bootswatch.com">Bootswatch</a>), |
||||
Javascript ( |
||||
<a href="http://http://d3js.org/">D3.js</a>, |
||||
<a href=https://angularjs.org/">Angular.js</a>, |
||||
<a href="https://jquery.com/">jQuery</a>), |
||||
and Python ( |
||||
<a href="http://pydata.org">Pandas</a>, |
||||
<a href="http://getpelican.com">Pelican</a>, |
||||
<a href="http://ipython.org">Jupyter Notebooks</a>). |
||||
</p> |
||||
|
||||
<script type="text/javascript" src="/theme/js/jquery-1.11.2.js"></script> |
||||
<script type="text/javascript" src="/theme/js/bootstrap-3.3.4.js"></script> |
||||
<!-- |
||||
<script type="text/javascript" src="/theme/js/d3-3.5.5.js"></script> |
||||
<script type="text/javascript" src="/theme/js/leaflet-0.7.3.js"></script> |
||||
<script type="text/javascript" src="/theme/js/leaflet.ajax.min.js"></script> |
||||
--> |
||||
</footer><!-- /#contentinfo --> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,16 @@
@@ -0,0 +1,16 @@
|
||||
[{"donut": [{"value": 0, "label": "M"}, {"value": 1, "label": "F"}], "code": "S324", "modbars": [{"value": 1, "label": "Natural"}]}, |
||||
{"donut": [{"value": 2, "label": "M"}, {"value": 3, "label": "F"}], "code": "S328", "modbars": [{"value": 1, "label": "Accident"}, {"value": 4, "label": "Natural"}]}, |
||||
{"donut": [{"value": 1, "label": "M"}, {"value": 0, "label": "F"}], "code": "Y15", "modbars": [{"value": 1, "label": "Could not determine"}]}, |
||||
{"donut": [{"value": 1, "label": "M"}, {"value": 4, "label": "F"}], "code": "Y14", "modbars": [{"value": 5, "label": "Could not determine"}]}, |
||||
{"donut": [{"value": 9, "label": "M"}, {"value": 14, "label": "F"}], "code": "I120", "modbars": [{"value": 23, "label": "Natural"}]}, |
||||
{"donut": [{"value": 0, "label": "M"}, {"value": 2, "label": "F"}], "code": "I129", "modbars": [{"value": 2, "label": "Natural"}]}, |
||||
{"donut": [{"value": 1, "label": "M"}, {"value": 0, "label": "F"}], "code": "A051", "modbars": [{"value": 1, "label": "Accident"}]}, |
||||
{"donut": [{"value": 1, "label": "M"}, {"value": 3, "label": "F"}], "code": "W19", "modbars": [{"value": 2, "label": "Accident"}, {"value": 2, "label": "Natural"}]}, |
||||
{"donut": [{"value": 1, "label": "M"}, {"value": 1, "label": "F"}], "code": "T465", "modbars": [{"value": 2, "label": "Suicide"}]}, |
||||
{"donut": [{"value": 2, "label": "M"}, {"value": 0, "label": "F"}], "code": "C449", "modbars": [{"value": 2, "label": "Natural"}]}, |
||||
{"donut": [{"value": 2, "label": "M"}, {"value": 1, "label": "F"}], "code": "C119", "modbars": [{"value": 3, "label": "Natural"}]}, |
||||
{"donut": [{"value": 0, "label": "M"}, {"value": 1, "label": "F"}], "code": "C444", "modbars": [{"value": 1, "label": "Natural"}]}, |
||||
{"donut": [{"value": 3, "label": "M"}, {"value": 2, "label": "F"}], "code": "T519", "modbars": [{"value": 2, "label": "Accident"}, {"value": 1, "label": "Suicide"}, {"value": 1, "label": "Could not determine"}, {"value": 1, "label": "Natural"}]}, |
||||
{"donut": [{"value": 30, "label": "M"}, {"value": 12, "label": "F"}], "code": "T510", "modbars": [{"value": 37, "label": "Accident"}, {"value": 2, "label": "Suicide"}, {"value": 3, "label": "Natural"}]}, |
||||
{"donut": [{"value": 2, "label": "M"}, {"value": 0, "label": "F"}], "code": "T511", "modbars": [{"value": 2, "label": "Accident"}]}, |
||||
{"donut": [{"value": 0, "label": "M"}, {"value": 1, "label": "F"}], "code": "K117", "modbars": [{"value": 1, "label": "Natural"}]}] |
||||
@ -0,0 +1,61 @@
@@ -0,0 +1,61 @@
|
||||
This chart demonstrates linking a donut chart with a bar chart, |
||||
so that a single controller filters data on both. |
||||
It also effectively implements the "folding up" technique |
||||
demonstrated with the Donut Picker chart. |
||||
|
||||
<br /> |
||||
<br /> |
||||
|
||||
The data visualized are death records from the United States in 2014. |
||||
Death records are anonymized and classified by many variables, |
||||
including gender and manner of death, and released to the public. |
||||
Statistics about these variables are counted up for different ICD 10 codes, |
||||
which indicate various circumstances present at death, and visualized above. |
||||
|
||||
<br/> |
||||
<br/> |
||||
|
||||
Here, we bundle bar and donut plot data together by ICD 10 code. |
||||
When the user picks an ICD 10 code using buttons, we filter the data |
||||
plotted by the bar and donut plots. |
||||
|
||||
<pre style="font-size: 8px;"> |
||||
[ |
||||
{ |
||||
"code": "T510"}, |
||||
"donut": |
||||
[ |
||||
{"value": 17, "label": "M"}, |
||||
{"value": 4, "label": "F"} |
||||
], |
||||
"bar": |
||||
[ |
||||
{"value": 10, "label": "Accident"}, |
||||
{"value": 0, "label": "Suicide"}, |
||||
{"value": 0, "label": "Homicide"}, |
||||
{"value": 3, "label": "Natural"} |
||||
] |
||||
}, |
||||
{ |
||||
"code": "Y14"}, |
||||
"donut": |
||||
[ |
||||
{"value": 1, "label": "M"}, |
||||
{"value": 3, "label": "F"} |
||||
], |
||||
"bar": |
||||
[ |
||||
{"value": 4, "label": "Accident"}, |
||||
{"value": 2, "label": "Suicide"}, |
||||
{"value": 0, "label": "Homicide"}, |
||||
{"value": 2, "label": "Natural"} |
||||
] |
||||
}, |
||||
|
||||
... |
||||
] |
||||
</pre> |
||||
|
||||
Once we filter on "code", we get the "donut" array, and pass it to the D3 pie chart object, |
||||
which renders the d ata structure into the donut chart on the left. Likewise, the "bar" array |
||||
is sent to the bar chart and visualized accordingly. |
||||
@ -0,0 +1,16 @@
@@ -0,0 +1,16 @@
|
||||
[{"donut": [{"value": 0, "label": "M"}, {"value": 1, "label": "F"}], "code": "S324", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 2, "label": "M"}, {"value": 3, "label": "F"}], "code": "S328", "modbars": [{"value": 1, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 4, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 1, "label": "M"}, {"value": 0, "label": "F"}], "code": "Y15", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 1, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 1, "label": "M"}, {"value": 4, "label": "F"}], "code": "Y14", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 5, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 9, "label": "M"}, {"value": 14, "label": "F"}], "code": "I120", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 23, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 0, "label": "M"}, {"value": 2, "label": "F"}], "code": "I129", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 2, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 1, "label": "M"}, {"value": 0, "label": "F"}], "code": "A051", "modbars": [{"value": 1, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 1, "label": "M"}, {"value": 3, "label": "F"}], "code": "W19", "modbars": [{"value": 2, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 2, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 1, "label": "M"}, {"value": 1, "label": "F"}], "code": "T465", "modbars": [{"value": 0, "label": "Accident"}, {"value": 2, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 2, "label": "M"}, {"value": 0, "label": "F"}], "code": "C449", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 2, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 2, "label": "M"}, {"value": 1, "label": "F"}], "code": "C119", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 3, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 0, "label": "M"}, {"value": 1, "label": "F"}], "code": "C444", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 3, "label": "M"}, {"value": 2, "label": "F"}], "code": "T519", "modbars": [{"value": 2, "label": "Accident"}, {"value": 1, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 1, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 30, "label": "M"}, {"value": 12, "label": "F"}], "code": "T510", "modbars": [{"value": 37, "label": "Accident"}, {"value": 2, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 3, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 2, "label": "M"}, {"value": 0, "label": "F"}], "code": "T511", "modbars": [{"value": 2, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 0, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}, |
||||
{"donut": [{"value": 0, "label": "M"}, {"value": 1, "label": "F"}], "code": "K117", "modbars": [{"value": 0, "label": "Accident"}, {"value": 0, "label": "Suicide"}, {"value": 0, "label": "Homicide"}, {"value": 0, "label": "Pending investigation"}, {"value": 0, "label": "Could not determine"}, {"value": 0, "label": "Self-Inflicted"}, {"value": 1, "label": "Natural"}, {"value": 0, "label": "Not specified"}]}] |
||||
@ -0,0 +1,732 @@
@@ -0,0 +1,732 @@
|
||||
var ng; |
||||
dir = []; |
||||
|
||||
|
||||
|
||||
|
||||
//////////////////////////////////////
|
||||
// Chart Directives
|
||||
//
|
||||
// This file defines Angular directives
|
||||
// that use D3 to draw charts.
|
||||
//
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
///////////////////////////////////////
|
||||
// Header Directives:
|
||||
//
|
||||
// Print out instructions, title, etc.
|
||||
|
||||
|
||||
ng = a.directive('bardonuthead', function($compile) { |
||||
|
||||
function link(scope, element, attr) { |
||||
|
||||
var el = element[0]; |
||||
|
||||
$(el).empty(); |
||||
|
||||
var dir = $("div#donut_title"); |
||||
|
||||
var h1 = $("<h1 />"); |
||||
|
||||
var b = $("<b />") |
||||
.text("Donut Picker Chart Example") |
||||
.appendTo(h1); |
||||
|
||||
h1.appendTo(dir); |
||||
|
||||
|
||||
var p = $("<p />", { |
||||
"class" : "normal" }) |
||||
.html("The following charts show statistics about death records, classified by ICD 10 code. Select an ICD 10 code to view statistics about gender and manner of death.") |
||||
.appendTo(dir); |
||||
|
||||
|
||||
} |
||||
return { |
||||
restrict: "E", |
||||
link: link, |
||||
scope: {} |
||||
} |
||||
}); |
||||
dir.push(ng); |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
///////////////////////////////////////////////
|
||||
// Chart Controls Directives
|
||||
|
||||
ng = a.directive('bardonutcontrols', function($compile) { |
||||
|
||||
function link(scope, element, attr) { |
||||
|
||||
// wait to build the buttons until we've loaded the data,
|
||||
// since the buttons come from the data.
|
||||
scope.$parent.$watch('pickerData',doStuff); |
||||
|
||||
function doStuff() { |
||||
if(!scope.$parent.pickerData) { return; } |
||||
buildButtons(element, scope.$parent); |
||||
} |
||||
|
||||
|
||||
}; |
||||
|
||||
function buildButtons(element,pscope) { |
||||
|
||||
var mydiv = "div#donut_controls"; |
||||
|
||||
var el = $(mydiv); |
||||
|
||||
var div = $("<div />"); |
||||
|
||||
|
||||
|
||||
// ------------------------------------
|
||||
// Add ICD 10 code buttons
|
||||
//
|
||||
var btn_grp = $("<div />", { |
||||
"id" : "codebtns", |
||||
"class" : "btn-group" |
||||
}); |
||||
|
||||
for( var i = 0; i < pscope.pickerData.length; i++ ) { |
||||
var this_code = pscope.pickerData[i]['code'] |
||||
var code = $("<a />", { |
||||
"class" : "btn btn-code btn-large btn-primary", |
||||
"changecode" : "", |
||||
"id" : "btn_"+this_code, |
||||
"code" : this_code, |
||||
}) |
||||
.html( this_code ) |
||||
.appendTo(btn_grp); |
||||
} |
||||
|
||||
|
||||
// to make buttons in this btn group active,
|
||||
// you have to use D3's classed() method
|
||||
// after you add the elements to the document
|
||||
// (i.e., after you call $compile)
|
||||
|
||||
angular.element(el).append($compile(btn_grp)(pscope)); |
||||
|
||||
|
||||
pscope.updateCode = function() { |
||||
|
||||
// -----------------------------
|
||||
// make button for active icd 10 code
|
||||
|
||||
d3.selectAll("a.btn-code").classed('active',false); |
||||
var btnlabel = "a#btn_"+pscope.icd10code; |
||||
d3.selectAll(btnlabel).classed('active',true); |
||||
|
||||
}; |
||||
|
||||
pscope.$watch('icd10code',pscope.updateCode); |
||||
|
||||
|
||||
} |
||||
return { |
||||
restrict: "E", |
||||
link: link, |
||||
scope: {} |
||||
} |
||||
}); |
||||
dir.push(ng); |
||||
|
||||
|
||||
//////////////////////////////////
|
||||
// Action directive:
|
||||
// What to do when the user changes the ICD 10 code
|
||||
// by clicking an ICD 10 code button
|
||||
|
||||
ng = a.directive("changecode", function($compile) { |
||||
|
||||
return function(pscope, element, attrs){ |
||||
element.bind("click", function(){ |
||||
|
||||
// first, update the scope variable
|
||||
// that holds the current icd 10 code
|
||||
// (no need to load any new data)
|
||||
|
||||
|
||||
// This is the ICD 10 code the user has selected.
|
||||
var this_code = attrs['code']; |
||||
var this_description = pscope.icd10codes_all[this_code] |
||||
|
||||
//console.log('Changed icd 10 code, updating description:');
|
||||
//console.log(this_code);
|
||||
//console.log(this_description);
|
||||
|
||||
|
||||
// !!!!!!!!!!!!!!!!!!!!!!!!
|
||||
// NOTE
|
||||
// The lines below - this $apply() method -
|
||||
// this is the way you change the variable
|
||||
// at the controller level, and get the
|
||||
// various watchers to detect changes.
|
||||
// !!!!!!!!!!!!!!!!!!!!!!!!!!
|
||||
pscope.$apply(function() { |
||||
pscope.icd10code = this_code; |
||||
}); |
||||
|
||||
pscope.$apply(function() { |
||||
pscope.description = this_description; |
||||
}); |
||||
|
||||
|
||||
//// This is some weak-sauce,
|
||||
//// its not even changing value of variable
|
||||
//pscope.update_icd10code(attrs['code']);
|
||||
//// ...
|
||||
//// .......
|
||||
//// seriously.
|
||||
//// all we needed was just
|
||||
//// pscope.$apply()
|
||||
////
|
||||
//// smh.
|
||||
|
||||
|
||||
|
||||
|
||||
// then run the donut chart update function
|
||||
pscope.updateDonut(); |
||||
|
||||
// then run the button controllers update function
|
||||
pscope.updateCode(); |
||||
|
||||
}); |
||||
} |
||||
|
||||
}); |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
///////////////////////////////////////////////
|
||||
// Panels:
|
||||
// Display useful information in a pretty box
|
||||
|
||||
|
||||
ng = a.directive('bardonutpanel', function($compile) { |
||||
|
||||
function link(scope, element, attr) { |
||||
|
||||
var el = element[0]; |
||||
|
||||
var pscope = scope.$parent; |
||||
|
||||
// --------------------------
|
||||
// add display for details
|
||||
|
||||
// assemble the tags,
|
||||
// then compile the html
|
||||
// select element of interest with angular.element
|
||||
// and append the compiled tags
|
||||
//
|
||||
var br = $("<br />").appendTo(el); |
||||
|
||||
var panel = $("<div />", { |
||||
"class" : "panel panel-primary", |
||||
"id" : "first" |
||||
}); |
||||
|
||||
var panelhead = $("<div />", { |
||||
"class" : "panel-heading" |
||||
}).appendTo(panel); |
||||
|
||||
var h3 = $("<h3 />", { |
||||
"class" : "panel-title" |
||||
}).text("Current ICD 10 Code") |
||||
.appendTo(panelhead); |
||||
|
||||
|
||||
|
||||
var panelbody = $("<div />", { |
||||
"class" : "panel-body" |
||||
}).appendTo(panel); |
||||
|
||||
var maindiv = $("<div />", { |
||||
}).appendTo(panelbody); |
||||
|
||||
var h = $("<h3 />") |
||||
.html("ICD 10 Code: [[icd10code]]") |
||||
.appendTo(maindiv); |
||||
|
||||
var de = $("<p />", { |
||||
"class" : "lead" }) |
||||
.html("Description: [[description]]") |
||||
.appendTo(maindiv); |
||||
|
||||
angular.element(el).prepend($compile(panel)(pscope)); |
||||
|
||||
} |
||||
|
||||
return { |
||||
link: link, |
||||
restrict: "E", |
||||
scope: { } |
||||
}; |
||||
}); |
||||
dir.push(ng); |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
///////////////////////////////////////////////
|
||||
// Donut Picker Chart
|
||||
//
|
||||
// This is the actual donut chart, of gender ratios.
|
||||
|
||||
ng = a.directive('donutpickerchart', function($compile) { |
||||
|
||||
function link(scope, element, attr) { |
||||
|
||||
scope.$parent.$watch('pickerData',doStuff); |
||||
|
||||
function doStuff() { |
||||
if(!scope.$parent.pickerData) { return; } |
||||
buildDonut(element, scope.$parent); |
||||
} |
||||
|
||||
|
||||
}; |
||||
|
||||
function buildDonut(element,pscope) { |
||||
|
||||
var mydiv = "div#donutpicker_chart"; |
||||
|
||||
/////////////////////////////////////////
|
||||
// Create chart
|
||||
//
|
||||
// data has not been loaded yet.
|
||||
// start by initializing variables
|
||||
// that don't depend on the data.
|
||||
|
||||
var el = element[0]; |
||||
$(el).empty(); |
||||
|
||||
|
||||
///////////////////////////////////
|
||||
// now draw the svg with d3
|
||||
|
||||
// ---------------
|
||||
// the chart itself:
|
||||
|
||||
var margin = { |
||||
top: 10, |
||||
right: 10, |
||||
bottom: 10, |
||||
left: 10 |
||||
}; |
||||
|
||||
var w = 300, |
||||
h = 300; |
||||
|
||||
var width = w - margin.right - margin.left, |
||||
height = h - margin.top - margin.bottom; |
||||
|
||||
var radius = Math.min(width, height) / 2; |
||||
|
||||
var x = d3.scale.linear() |
||||
.range([0, 2 * Math.PI]); |
||||
|
||||
var y = d3.scale.sqrt() |
||||
.range([0, radius]); |
||||
|
||||
var svg = d3.select(mydiv) |
||||
.append("svg") |
||||
.attr("width", width) |
||||
.attr("height", height) |
||||
.append("g") |
||||
.attr("transform", "translate(" + width / 2 + "," + (height / 2 + 10) + ")"); |
||||
|
||||
|
||||
// ---------------
|
||||
// chart-specific,
|
||||
// data-independent variables
|
||||
//
|
||||
// Example:
|
||||
// * sort method
|
||||
// * tween function
|
||||
// * colors (maybe)
|
||||
//
|
||||
|
||||
// This would be nice. but, donutMale and donutFemale aren't working.
|
||||
// And once they are working, they aren't positioned correctly.
|
||||
// And adding them as d3 text elements makes them... not appear.
|
||||
// Just shoe-horning in the value on the pie chart label. Better anyway.
|
||||
/////////var text = svg.append("text")
|
||||
///////// .attr("class", "title")
|
||||
///////// .attr('transform', 'translate(90,0)')
|
||||
///////// .attr("x", w - 70)
|
||||
///////// .attr("y", 10)
|
||||
///////// .attr("font-size", "12px")
|
||||
///////// .attr("fill", "#404040")
|
||||
///////// .html("Females: [[donutFemale]]<br />Males: [[donutMale]]");
|
||||
|
||||
|
||||
// Sunburst needs these to be functions,
|
||||
// donut chart does not.
|
||||
var arc = d3.svg.arc() |
||||
.outerRadius(radius - 10) |
||||
.innerRadius(radius - 70); |
||||
|
||||
var colors = { |
||||
"M" : "#5687d1", |
||||
"F" : "#e377c2", |
||||
"None" : "#bbbbbb" |
||||
}; |
||||
|
||||
// if animating, more stuff goes here.
|
||||
|
||||
pscope.updateDonut = function() { |
||||
|
||||
var all_data = pscope.pickerData; |
||||
|
||||
// ----------------------------------
|
||||
// Get pie chart data
|
||||
//
|
||||
// Here, we have all donut data
|
||||
// available to us.
|
||||
//
|
||||
// We use the currently-selected ICD 10 code
|
||||
// to filter which donut data is being plotted.
|
||||
//
|
||||
// Where to keep track of current code?
|
||||
// In the controller (available via pscope).
|
||||
// pscope.icd10code
|
||||
//
|
||||
var code; |
||||
var data; |
||||
for( var i=0; i < all_data.length; i++ ) { |
||||
|
||||
// set excpetion handling:
|
||||
// if no icd10code is set, problems occur.
|
||||
if(all_data[i]['code'] == pscope.icd10code) { |
||||
code = all_data[i]['code']; |
||||
data = all_data[i]['donut']; |
||||
break; |
||||
} |
||||
} |
||||
// finished; use data
|
||||
// ---------------------------------
|
||||
|
||||
|
||||
|
||||
// ----------------------------
|
||||
// Start with counts of
|
||||
// donut chart males/females
|
||||
|
||||
var donutFemale = 0, |
||||
donutMale = 0; |
||||
|
||||
for(var i=0; i<data.length; i++) { |
||||
if(data[i].label=="M"){ |
||||
donutMale = data[i].value; |
||||
} |
||||
if( data[i].label=="F") { |
||||
donutFemale = data[i].value; |
||||
} |
||||
} |
||||
|
||||
////////////////
|
||||
// UUUUGGGGGGGGHHHHHHHHHHHH
|
||||
//
|
||||
// can't use pscope.$apply() here.
|
||||
//
|
||||
// ?????
|
||||
//
|
||||
// also, this does not update these variables.
|
||||
// WTFH
|
||||
//pscope.donutFemale = donutFemale;
|
||||
//pscope.donutMale = donutMale;
|
||||
|
||||
// ----------------------------
|
||||
|
||||
|
||||
var g = svg.datum(data) |
||||
.selectAll("g") |
||||
.data(data) |
||||
.enter(); |
||||
|
||||
|
||||
var pie = d3.layout.pie() |
||||
.sort(null) |
||||
.value(function(d) { |
||||
return +d.value; |
||||
}); |
||||
|
||||
var g = svg.selectAll(".arc") |
||||
.data(pie(data)) |
||||
.enter(); |
||||
|
||||
// !!!!!!!!!!!!!!!!!!
|
||||
// note: if you add .append("g")
|
||||
// to the above var g,
|
||||
// drawing the arcs will only
|
||||
// work the first time you do it,
|
||||
// after that they'll disappear
|
||||
// and g will be an array of nulls.
|
||||
// so don't do this!
|
||||
//
|
||||
// .append("g");
|
||||
// !!!!!!!!!!!!!!!!!!
|
||||
|
||||
g.append("path") |
||||
.attr("d", arc) |
||||
.style("fill", function(d) { |
||||
return colors[d.data.label]; |
||||
}); |
||||
|
||||
|
||||
// clear away old labels
|
||||
svg.selectAll("text").remove(); |
||||
|
||||
|
||||
g.append("text") |
||||
.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; }) |
||||
.attr("dy", ".35em") |
||||
.style("text-anchor", "middle") |
||||
.text(function(d) { |
||||
if (d.data.value > 0) { |
||||
if(d.data.label=="M") { |
||||
fancylabel = "Males"; |
||||
} else if(d.data.label=="F") { |
||||
fancylabel = "Females"; |
||||
} |
||||
var biglabel = fancylabel + ": " + d.data.value; |
||||
return biglabel; |
||||
} |
||||
}); |
||||
|
||||
} |
||||
|
||||
|
||||
|
||||
// ------------------
|
||||
// if you build it,
|
||||
// you must update it.
|
||||
pscope.updateDonut(); |
||||
|
||||
pscope.$watch('icd10code',pscope.updateDonut); |
||||
|
||||
} |
||||
|
||||
return { |
||||
link: link, |
||||
restrict: "E", |
||||
scope: { } |
||||
}; |
||||
}); |
||||
dir.push(ng); |
||||
|
||||
|
||||
|
||||
///////////////////////////////////////////////
|
||||
// Manner of Death Bar Chart
|
||||
//
|
||||
// This is a bar chart for manner of death.
|
||||
|
||||
ng = a.directive('modbarchart', function($compile) { |
||||
|
||||
function link(scope, element, attr) { |
||||
|
||||
scope.$parent.$watch('pickerData',doStuff); |
||||
scope.$parent.$watch('icd10code',doStuff); |
||||
|
||||
function doStuff() { |
||||
if(!scope.$parent.pickerData) { return; } |
||||
if(!scope.$parent.icd10code) { return; } |
||||
buildBar(element, scope.$parent); |
||||
} |
||||
|
||||
|
||||
}; |
||||
|
||||
function buildBar(element,pscope) { |
||||
|
||||
//
|
||||
// If you draw any parts of the bar plot
|
||||
// outside of the updateBar() function,
|
||||
// the bar plot will not actually change.
|
||||
//
|
||||
|
||||
pscope.updateBar = function() { |
||||
|
||||
//console.log('in update bar');
|
||||
|
||||
var mydiv = "div#modbar_chart"; |
||||
|
||||
/////////////////////////////////////////
|
||||
// Create chart
|
||||
//
|
||||
// data has not been loaded yet.
|
||||
// start by initializing variables
|
||||
// that don't depend on the data.
|
||||
|
||||
var chart = $(mydiv); |
||||
chart.empty(); |
||||
|
||||
///////////////////////////////////
|
||||
// now draw the svg with d3
|
||||
|
||||
// ---------------
|
||||
// the chart itself:
|
||||
|
||||
var margin = { |
||||
top: 10, |
||||
bottom: 100, |
||||
|
||||
right: 30, |
||||
left: 50 |
||||
}; |
||||
|
||||
var w = 400; |
||||
var h = 400; |
||||
|
||||
var barwidth = w - margin.left - margin.right; |
||||
var barheight = h - margin.top - margin.bottom; |
||||
|
||||
var x = d3.scale.ordinal() |
||||
.rangeRoundBands([0, barwidth], .1); |
||||
|
||||
var y = d3.scale.linear() |
||||
.range([barheight, 0]); |
||||
|
||||
var xAxis = d3.svg.axis() |
||||
.scale(x) |
||||
.orient("bottom"); |
||||
|
||||
var yAxis = d3.svg.axis() |
||||
.scale(y) |
||||
.orient("left") |
||||
.ticks(10) |
||||
|
||||
var svg = d3.select(mydiv) |
||||
.append("svg") |
||||
.attr("width", w) |
||||
.attr("height", h) |
||||
.append("g") |
||||
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); |
||||
|
||||
|
||||
/////////////////
|
||||
// Data-specific stuff
|
||||
|
||||
|
||||
// Start by loading the data
|
||||
//
|
||||
var all_data = pscope.pickerData; |
||||
|
||||
var code; |
||||
var data; |
||||
for( var i=0; i < all_data.length; i++ ) { |
||||
|
||||
// set excpetion handling:
|
||||
// if no icd10code is set, problems occur.
|
||||
if(all_data[i]['code'] == pscope.icd10code) { |
||||
code = all_data[i]['code']; |
||||
data = all_data[i]['modbars']; |
||||
break; |
||||
} |
||||
|
||||
} |
||||
|
||||
//// data looks good
|
||||
//console.log(data);
|
||||
|
||||
if( data!=null ){ |
||||
|
||||
|
||||
// if you wanna show categories that are zero,
|
||||
// modify your data. too complicated to fill in here.
|
||||
|
||||
x.domain(data.map(function(d) { return d.label; })); |
||||
|
||||
y.domain([0, d3.max(data, function(d) { return d.value; })]); |
||||
|
||||
//svg.selectAll("path").remove();
|
||||
|
||||
svg.append("g") |
||||
.attr("class", "x axis") |
||||
.attr("transform", function(d,i) { |
||||
return "translate(0,"+ (barheight) + ")"; |
||||
}) |
||||
.call(xAxis) |
||||
.selectAll("text") |
||||
.attr("class", "x axis label") |
||||
.attr("transform", "rotate(90)" ) |
||||
.style("text-anchor", "start") |
||||
.attr("dx", "0.5em") |
||||
.attr("dy", "-1em"); |
||||
|
||||
|
||||
svg.append("g") |
||||
.attr("class", "y axis") |
||||
.call(yAxis) |
||||
.append("text") |
||||
.attr("class", "y axis label") |
||||
.attr("transform", "rotate(90)") |
||||
.style("text-anchor", "start") |
||||
.attr("y", 6) |
||||
.attr("dy", "3.5em") |
||||
.text("Number of Death Records"); |
||||
|
||||
|
||||
var color2 = d3.scale.category20b(); |
||||
|
||||
svg.selectAll(".bar") |
||||
.data(data) |
||||
.enter().append("rect") |
||||
.attr("class", "bar") |
||||
.attr("fill",function(d,i) { |
||||
return color2(d.label) |
||||
}) |
||||
.attr("x", function(d) { return x(d.label); }) |
||||
.attr("width", x.rangeBand()) |
||||
.attr("y", function(d) { return y(d.value); }) |
||||
.attr("height", function(d) { |
||||
var toptobottom = (barheight); |
||||
var toptobartop = y(d.value); |
||||
var ht = toptobottom - toptobartop |
||||
return ht; |
||||
}); |
||||
|
||||
function type(d) { |
||||
d.value = +d.value; |
||||
return d; |
||||
} |
||||
|
||||
// else: "No Data" label
|
||||
|
||||
} |
||||
|
||||
} |
||||
|
||||
// ------------------
|
||||
// if you build it,
|
||||
// you must update it.
|
||||
pscope.updateBar(); |
||||
|
||||
} |
||||
|
||||
|
||||
return { |
||||
link: link, |
||||
restrict: "E", |
||||
scope: { } |
||||
}; |
||||
}); |
||||
dir.push(ng); |
||||
@ -0,0 +1,87 @@
@@ -0,0 +1,87 @@
|
||||
///////////////////////////////////////
|
||||
//
|
||||
// Picker
|
||||
//
|
||||
// Module/Controller
|
||||
//
|
||||
|
||||
var a = angular.module("pickerApp", [], function($interpolateProvider) { |
||||
$interpolateProvider.startSymbol('[['); |
||||
$interpolateProvider.endSymbol(']]'); |
||||
} |
||||
); |
||||
|
||||
var datafactory = a.factory('datafactory', function($http, $q) { |
||||
|
||||
return { |
||||
getPickerData: function() { |
||||
var deferred = $q.defer(); |
||||
|
||||
var json_file = 'bardonut_allcategories.json'; |
||||
|
||||
$http.get(json_file).success(function(data) { |
||||
deferred.resolve(data); |
||||
}).error(function(){ |
||||
console.log('error loading json file: '+json_file); |
||||
deferred.reject(); |
||||
}); |
||||
|
||||
return deferred.promise; |
||||
}, |
||||
|
||||
getCodeData: function() { |
||||
var deferred = $q.defer(); |
||||
|
||||
$http.get('icd10codes.json').success(function(data) { |
||||
deferred.resolve(data); |
||||
}).error(function(){ |
||||
console.log('error loading icd10codes.json'); |
||||
deferred.reject(); |
||||
}); |
||||
|
||||
return deferred.promise; |
||||
} |
||||
|
||||
} |
||||
}); |
||||
|
||||
function MainController($scope,datafactory) { |
||||
|
||||
$scope.initialize = function() { |
||||
|
||||
$scope.icd10code="S328"; |
||||
$scope.donutFemale = 0; |
||||
$scope.donutMale = 0; |
||||
|
||||
datafactory.getPickerData().then( |
||||
function(data) { |
||||
$scope.pickerData = data; |
||||
} |
||||
); |
||||
|
||||
datafactory.getCodeData().then( |
||||
function(data) { |
||||
$scope.icd10codes_all = data; |
||||
var descr = $scope.icd10codes_all[$scope.icd10code]; |
||||
$scope.description = descr; |
||||
} |
||||
); |
||||
|
||||
|
||||
} |
||||
|
||||
|
||||
/* |
||||
// This does not change the value of this
|
||||
// variable in everyone's parent scope.
|
||||
// UUUUGGGGHHHHH. Stupid code.
|
||||
$scope.update_icd10code = function(code) { |
||||
$scope.icd10code = code; |
||||
console.log("from update_icd10code:"+$scope.icd10code); |
||||
} |
||||
*/ |
||||
|
||||
} |
||||
|
||||
// the first few arguments of the list should correspond to the Angular-namespace stuff to feed to PickerController
|
||||
var c = a.controller("mainController", ["$scope", "datafactory", MainController]); |
||||
@ -0,0 +1,26 @@
@@ -0,0 +1,26 @@
|
||||
path { |
||||
stroke: white; |
||||
stroke-width: 0.5; |
||||
} |
||||
|
||||
div#mouseoverPointPanel, |
||||
div#clickedPointPanel { |
||||
width: 300px; |
||||
} |
||||
|
||||
.fade { |
||||
opacity: 0; |
||||
-webkit-transition: opacity 0.85s linear; |
||||
-moz-transition: opacity 0.85s linear; |
||||
-o-transition: opacity 0.85s linear; |
||||
transition: opacity 0.85s linear; |
||||
} |
||||
|
||||
.fade.in { |
||||
opacity: 1; |
||||
} |
||||
|
||||
.active { |
||||
stroke: black; |
||||
stroke-width: 2.0; |
||||
} |
||||
@ -0,0 +1,174 @@
@@ -0,0 +1,174 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<title>Donut Picker Chart</title> |
||||
<meta charset="utf-8" /> |
||||
|
||||
<!-- |
||||
my CSS styles |
||||
--> |
||||
<link href="/theme/css/bootstrap.css" rel="stylesheet" type="text/css"> |
||||
<link href="/theme/css/main.css" rel="stylesheet" type="text/css"> |
||||
|
||||
<link href="/theme/css/cosmo.css" rel="stylesheet" type="text/css"> |
||||
<link href="/theme/css/font-awesome.css" rel="stylesheet" type="text/css"/> |
||||
<link href="/theme/css/pygment.css" rel="stylesheet" type="text/css"/> |
||||
|
||||
<!-- |
||||
include Angular first |
||||
--> |
||||
<script type="text/javascript" src="/theme/js/angular-1.3.15.js"></script> |
||||
<script src="//d3js.org/d3.v3.min.js"></script> |
||||
</head> |
||||
|
||||
<body id="index" class="home"> |
||||
<div class="container"> |
||||
<h1><a href="/">dang-sunburst <strong></strong></a></h1> |
||||
<hr /> |
||||
|
||||
|
||||
<link href="/simpledonut/donutpicker.css" rel="stylesheet" stype="text/css" /> |
||||
|
||||
<div ng-app="pickerApp"> |
||||
|
||||
<div ng-controller="mainController" ng-init="initialize()"> |
||||
|
||||
|
||||
<div class="row"> |
||||
<div class="col-sm-12" id="donut_title"> |
||||
<donut-picker-head></donut-picker-head> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="row"> |
||||
<div class="col-sm-10" id="donut_controls"> |
||||
<donut-picker-controls></donut-picker-controls> |
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
<div class="row"> |
||||
<div class="col-sm-4" id="donut_chart"> |
||||
<div class="row" id="donutpicker_chart"> |
||||
<donut-picker-chart></donut-picker-chart> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="col-sm-6" id="donut_text"> |
||||
<div class="row" id="donut_panels"> |
||||
<donut-picker-panels></donut-picker-panels> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
<div class="row"> |
||||
|
||||
<div class="col-sm-10" id="more_donut_text"> |
||||
<div class="row" id="donutpicker_md"> |
||||
This is a donut chart with buttons enabling you to pick different |
||||
categories of data. This chart is intended to demonstrate how to fold up |
||||
high dimensional data into a JSON container that ca be served up and |
||||
easily filtered with D3. |
||||
|
||||
<br /> |
||||
<br /> |
||||
|
||||
This data shows statistics about death records from the United States in |
||||
2014, in particular the ratio of males to females whose death records |
||||
were tagged with these particular ICD 10 codes. The ICD 10 codes indicate |
||||
circumstances present at time of death, though not necessarily |
||||
the cause of death. |
||||
|
||||
<br/> |
||||
<br/> |
||||
|
||||
The key is to add one additional layer of hierarchy to the dictionary containing the data: |
||||
data for any pie chart consists of a list of dictionaries, as with the static pie chart, |
||||
but this time we add one additional layer to the JSON, which is the code. |
||||
|
||||
The user is then able to select different codes using buttons. Clicking those buttons |
||||
sets the filter criteria in the visualization controller, and that change is detected |
||||
and propagated, so that the pie chart data is updated and the pie chart re-drawn. |
||||
|
||||
<pre style="font-size: 8px;"> |
||||
[ |
||||
{ |
||||
"code": "T510"}, |
||||
"donut": |
||||
[ |
||||
{"value": 17, "label": "M"}, |
||||
{"value": 4, "label": "F"} |
||||
] |
||||
}, |
||||
{ |
||||
"code": "Y14"}, |
||||
"donut": |
||||
[ |
||||
{"value": 1, "label": "M"}, |
||||
{"value": 3, "label": "F"} |
||||
] |
||||
}, |
||||
{ |
||||
"code": "S328"}, |
||||
"donut": |
||||
[ |
||||
{"value": 2, "label": "M"}, |
||||
{"value": 3, "label": "F"} |
||||
] |
||||
}, |
||||
|
||||
... |
||||
] |
||||
</pre> |
||||
|
||||
Once we filter on "code", we get the "donut" array, and pass it to the D3 pie chart object, |
||||
which renders the d ata structure into the donut chart on the left. |
||||
</div> |
||||
|
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
<script type="text/javascript" src="/simpledonut/donutpicker_modcontrol.js"></script> |
||||
<script type="text/javascript" src="/simpledonut/donutpicker_chart.js"></script> |
||||
|
||||
</div> |
||||
|
||||
<footer id="contentinfo" class="body"> |
||||
<hr /> |
||||
<p style="text-align: center"> |
||||
<span class="fa-stack fa-lg"> |
||||
<i class="fa fa-square fa-stack-2x"></i> |
||||
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i> |
||||
</span> |
||||
Made from the command line with vim by |
||||
<a href="http://charlesreid1.com">charlesreid1</a>. |
||||
</p> |
||||
|
||||
<p style="text-align: center;">Made with HTML ( |
||||
<a href="http://http://bootstrap.org/">Bootstrap</a>, |
||||
<a href="http://bootswatch.com">Bootswatch</a>), |
||||
Javascript ( |
||||
<a href="http://http://d3js.org/">D3.js</a>, |
||||
<a href=https://angularjs.org/">Angular.js</a>, |
||||
<a href="https://jquery.com/">jQuery</a>), |
||||
and Python ( |
||||
<a href="http://pydata.org">Pandas</a>, |
||||
<a href="http://getpelican.com">Pelican</a>, |
||||
<a href="http://ipython.org">Jupyter Notebooks</a>). |
||||
</p> |
||||
|
||||
<script type="text/javascript" src="/theme/js/jquery-1.11.2.js"></script> |
||||
<script type="text/javascript" src="/theme/js/bootstrap-3.3.4.js"></script> |
||||
<!-- |
||||
<script type="text/javascript" src="/theme/js/d3-3.5.5.js"></script> |
||||
<script type="text/javascript" src="/theme/js/leaflet-0.7.3.js"></script> |
||||
<script type="text/javascript" src="/theme/js/leaflet.ajax.min.js"></script> |
||||
--> |
||||
</footer><!-- /#contentinfo --> |
||||
|
||||
</body> |
||||
</html> |
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue