38 changed files with 1778 additions and 57 deletions
@ -0,0 +1,11 @@
@@ -0,0 +1,11 @@
|
||||
<h2>Button-Chart Linking</h2> |
||||
|
||||
<s>This chart improves on the prior chart by turning the buttons into |
||||
on-off buttons, and enabling the user to add multiple ICD 10 codes |
||||
for inter-comparison.</s> |
||||
|
||||
Thanks to the idiotic format that C3 wants its data to be in, |
||||
the simple task of plotting multiple quantities on a single bar chart |
||||
has become more complicated than quantum plasma physics. |
||||
|
||||
|
||||
@ -0,0 +1,18 @@
@@ -0,0 +1,18 @@
|
||||
/*-- Chart --*/ |
||||
|
||||
#example1 { min-height: 155px; } |
||||
|
||||
span.title { |
||||
display: block; |
||||
text-color: #fff; |
||||
/*background-color: rgba(0,0,0,0.5);*/ |
||||
} |
||||
span.value { |
||||
display: block; |
||||
text-color: #fff; |
||||
/*background-color: rgba(0,0,0,0.5);*/ |
||||
} |
||||
|
||||
.domain { |
||||
visibility: hidden; |
||||
} |
||||
@ -0,0 +1,53 @@
@@ -0,0 +1,53 @@
|
||||
{% extends 'base.html' %} |
||||
|
||||
{% set mytitle="Cubism Visualization" %} |
||||
|
||||
{# ----------- title -------------- #} |
||||
|
||||
{% block title %}{{ mytitle }}{% endblock %} |
||||
|
||||
|
||||
{# ----------- javascript going up front -------------- #} |
||||
|
||||
{% block head_scripts %} |
||||
|
||||
<script src="{{ SITEURL }}/theme/js/jquery-1.11.2.js" type="text/javascript" ></script> |
||||
|
||||
<script src="{{ SITEURL }}/theme/js/d3-3.5.17.js" type="text/javascript"></script> |
||||
<script src="{{ SITEURL }}/theme/js/c3-0.1.33.js" type="text/javascript"></script> |
||||
<script src="{{ SITEURL }}/theme/js/cubism.v1.js" type="text/javascript"></script> |
||||
|
||||
<link href="{{ SITEURL }}/theme/css/c3.css" rel="stylesheet" type="text/css"> |
||||
<link href="{{ SITEURL }}/cubism/viz1.css" rel="stylesheet" type="text/css" /> |
||||
|
||||
{% endblock %} |
||||
|
||||
|
||||
{# ----------- content ------------- #} |
||||
|
||||
{% block content %} |
||||
|
||||
<div class="row"> |
||||
|
||||
<div class="col-xs-6"> |
||||
|
||||
<div id="example1"></div> |
||||
|
||||
<br /> |
||||
<br /> |
||||
|
||||
</div> |
||||
|
||||
<div class="col-xs-6"> |
||||
{% include 'viz1.md' %} |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
|
||||
<script src="{{ SITEURL }}/cubism/viz1.js" type="text/javascript"> </script> |
||||
|
||||
|
||||
{% endblock %} |
||||
|
||||
|
||||
@ -0,0 +1,281 @@
@@ -0,0 +1,281 @@
|
||||
$(document).ready(function () { |
||||
|
||||
function random(name) { |
||||
var value = 0, |
||||
values = [], |
||||
i = 0, |
||||
last; |
||||
return context.metric(function(start, stop, step, callback) { |
||||
start = +start, stop = +stop; |
||||
if (isNaN(last)) last = start; |
||||
while (last < stop) { |
||||
last += step; |
||||
value = Math.max(-10, Math.min(10, value + .8 * Math.random() - .4 + .2 * Math.cos(i += .2))); |
||||
values.push(value); |
||||
} |
||||
callback(null, values = values.slice((start - stop) / step)); |
||||
}, name); |
||||
} |
||||
|
||||
var context = cubism.context() |
||||
.serverDelay(0) |
||||
.clientDelay(0) |
||||
.step(1e3) |
||||
.size(450); |
||||
|
||||
var foo = random("foo"), |
||||
bar = random("bar"); |
||||
|
||||
d3.select("#example1").call(function(div) { |
||||
|
||||
div.append("div") |
||||
.attr("class", "axis") |
||||
.call(context.axis().orient("top")); |
||||
|
||||
div.selectAll(".comparison") |
||||
.data([[foo,bar]]) |
||||
.enter() |
||||
.append("div") |
||||
.attr("class", "comparison") |
||||
.call(context.comparison().extent([-20,20])); |
||||
/* |
||||
div.selectAll(".horizon") |
||||
.data([foo, bar, foo.add(bar), foo.subtract(bar)]) |
||||
.enter().append("div") |
||||
.attr("class", "horizon") |
||||
.call(context.horizon().extent([-20, 20])); |
||||
*/ |
||||
|
||||
div.append("div") |
||||
.attr("class", "rule") |
||||
.call(context.rule()); |
||||
|
||||
|
||||
}); |
||||
|
||||
|
||||
|
||||
|
||||
// ////////////////////////////////////////////
|
||||
// //
|
||||
// // Make a button for each ICD 10 code
|
||||
// //
|
||||
// var make_buttons = function(allCodes, chartData, filter_data) {
|
||||
//
|
||||
// var mydiv = "div#buttons";
|
||||
// var el = $(mydiv);
|
||||
// var div = $("<div />");
|
||||
//
|
||||
// var btn_grp = $("<div />", {
|
||||
// "id" : "codebtns",
|
||||
// "class" : "btn-group"
|
||||
// });
|
||||
//
|
||||
//
|
||||
// // Loop over all ICD 10 codes.
|
||||
// // Make a button for each one.
|
||||
// // Make button number 1 active.
|
||||
// for( var j = 0; j < allCodes.length; j++ ) {
|
||||
// var thisCode = allCodes[j];
|
||||
// var codegrp = $("<a />", {
|
||||
// "class" : "btn btn-code btn-large btn-primary btn-controllers",
|
||||
// "id" : "btn_"+thisCode,
|
||||
// "code" : thisCode,
|
||||
// })
|
||||
// .html( thisCode )
|
||||
// .on("click", function(d) {
|
||||
// onBtnClick(d, chartData, filter_data);
|
||||
// })
|
||||
// .appendTo(btn_grp);
|
||||
//
|
||||
// if(j==0) {
|
||||
// console.log("Unselecting buttons.");
|
||||
// d3.selectAll("a.btn-code").classed('active',false);
|
||||
// console.log("Selecting default button.");
|
||||
// console.log(thisCode)
|
||||
// d3.selectAll("a#btn_"+thisCode).classed('active',true);
|
||||
// }
|
||||
//
|
||||
// if((j+1)%6==0) {
|
||||
// var brk = $("<br />").appendTo(btn_grp);
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// el.append(btn_grp);
|
||||
//
|
||||
// }
|
||||
//
|
||||
//
|
||||
// ////////////////////////////////////////////
|
||||
// //
|
||||
// // When an ICD 10 code button is clicked:
|
||||
// // - get the ICD 10 code
|
||||
// // - then call the filter_data callback
|
||||
// //
|
||||
// var onBtnClick = function (d, jsonData, filter_data) {
|
||||
//
|
||||
// var code = d.target.attributes.code.value;
|
||||
// d3.selectAll("a.btn-code").classed('active',false);
|
||||
// d3.selectAll("a#btn_"+code).classed('active',true);
|
||||
//
|
||||
// console.log('about to call filter_data with this code:');
|
||||
// console.log(code);
|
||||
//
|
||||
// filter_data(code, jsonData);
|
||||
//
|
||||
// // now that we have the code,
|
||||
// // filter the data
|
||||
// // pass it off to a chart builder
|
||||
//
|
||||
// }
|
||||
//
|
||||
//
|
||||
// ////////////////////////////////////////////
|
||||
// //
|
||||
// // This is it -
|
||||
// // Filter the data based on an ICD 10 code,
|
||||
// // and chart the results.
|
||||
// //
|
||||
// // This function is called on button clicks,
|
||||
// // and once when the page is loaded.
|
||||
// //
|
||||
// var filter_data = function(code,jsonData) {
|
||||
// // here, jsonData is the whole enchilada
|
||||
// console.log('in filter_data with this code and chart data:');
|
||||
// console.log(code);
|
||||
// var thisIndex = -1;
|
||||
// for( var j in jsonData) {
|
||||
// if( code == jsonData[j]['code'] ) {
|
||||
// thisIndex = j;
|
||||
// }
|
||||
// }
|
||||
// if(thisIndex < 0) {
|
||||
// console.log("Could not find code "+code+" in JSON data!");
|
||||
// } else {
|
||||
//
|
||||
// //////////////////////////////////
|
||||
// // Draw the dang charts already
|
||||
//
|
||||
// var codeData = jsonData[thisIndex];
|
||||
// var barData = codeData['modbars'];
|
||||
//
|
||||
// barDataFmt = key_value_json_to_c3bar_json(barData);
|
||||
//
|
||||
// ////////////////////////
|
||||
// //
|
||||
// var barchart = c3.generate({
|
||||
// bindto: '#barchart',
|
||||
// data: {
|
||||
// columns : barDataFmt,
|
||||
// type: 'bar'
|
||||
// },
|
||||
// bar: {
|
||||
// title: "Bar Chart: Countries",
|
||||
// width: {
|
||||
// ratio: 0.5 // this makes bar width 50% of length between ticks
|
||||
// }
|
||||
// // or
|
||||
// //width: 100 // this makes bar width 100px
|
||||
// }
|
||||
// });
|
||||
// barchart.show(null, {
|
||||
// withLegend: true
|
||||
// });
|
||||
//
|
||||
// }
|
||||
// }
|
||||
//
|
||||
//
|
||||
// ////////////////////////////////////////////
|
||||
// //
|
||||
// // Utility function: data transform
|
||||
// //
|
||||
// // Convert key-value dictionaries (keys-to-arrays)
|
||||
// // into something fit for C3.
|
||||
// //
|
||||
// // Turn this:
|
||||
// //
|
||||
// // {
|
||||
// // 'label1' : [0, 1, 2, 3, 4, 5, ...],
|
||||
// // 'label2' : [0, 1, 2, 3, 4, 5, ...]
|
||||
// // }
|
||||
// //
|
||||
// // To this:
|
||||
// //
|
||||
// // [
|
||||
// // ['label1', 0, 1, 2, 3, 4, 5, ... ],
|
||||
// // ['label2', 0, 1, 2, 3, 4, 5, ... ]
|
||||
// // ]
|
||||
// //
|
||||
// var key_value_json_to_c3bar_json = function(jsonData) {
|
||||
// var c3data = [];
|
||||
// for(var i in jsonData){
|
||||
// var key = i;
|
||||
// var vec = jsonData[i];
|
||||
//
|
||||
// // deal with scalar vec
|
||||
// if(!vec.length){
|
||||
// vec = [vec];
|
||||
// }
|
||||
//
|
||||
// // prepend label to list
|
||||
// vec.unshift(key);
|
||||
// c3data.push(vec);
|
||||
// }
|
||||
// return c3data;
|
||||
// }
|
||||
//
|
||||
//
|
||||
// ////////////////////////////////////////////
|
||||
// //
|
||||
// // Fetch JSON
|
||||
// //
|
||||
// // This is a bit of a mazurka.
|
||||
// //
|
||||
// // We fetch the JSON - which is an asynchronous task,
|
||||
// // so we need to be aware of timing and order.
|
||||
// //
|
||||
// // We parse the JSON data, and extract a list of codes.
|
||||
// // We pass the list of codes, the JSON data, and a function handle.
|
||||
// // The function handle will filter data and chart it.
|
||||
// // Then we use the first code, and filter data and chart it.
|
||||
// //
|
||||
// fetch('chartdata_all.json')
|
||||
//
|
||||
// .then(function(response) {
|
||||
// return response.json();
|
||||
// })
|
||||
// .then(function(chartData) {
|
||||
//
|
||||
// // chartData is an array of objects.
|
||||
// // Each object is a dictionary.
|
||||
// // Keys are code, description, donut, modbars.
|
||||
// var allCodes = [];
|
||||
// for(var codeix in chartData) {
|
||||
// thisData = chartData[codeix];
|
||||
// allCodes.push(thisData['code']);
|
||||
// }
|
||||
//
|
||||
//
|
||||
// // Filter data and make bar charts
|
||||
// // for the first code.
|
||||
// //
|
||||
// var firstData = chartData[0];
|
||||
// var firstCode = firstData['code'];
|
||||
// filter_data(firstCode, chartData);
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
// // Make button controls
|
||||
// // that control the charts.
|
||||
// //
|
||||
// make_buttons(allCodes, chartData, filter_data);
|
||||
//
|
||||
//
|
||||
//
|
||||
// });//end load json
|
||||
|
||||
|
||||
}); |
||||
|
||||
@ -0,0 +1,8 @@
@@ -0,0 +1,8 @@
|
||||
<h2>Cubism Time Series</h2> |
||||
|
||||
In this chart, we load external JSON data that has been generated |
||||
using a smartphone sensor time series data set, and visualize |
||||
various time series from the smartphone. |
||||
|
||||
These visualizations are solely intended to demonstrate how to use Cubism. |
||||
|
||||
@ -1,6 +0,0 @@
@@ -1,6 +0,0 @@
|
||||
<h2>Button-Chart Linking</h2> |
||||
|
||||
This chart improves on the prior chart by turning the buttons into |
||||
on-off buttons, and enabling the user to add multiple ICD 10 codes |
||||
for inter-comparison. |
||||
|
||||
Binary file not shown.
Loading…
Reference in new issue