This is a C3 Area Chart representing the 2015 claims, users and spending data for Medicare Part D. In order to keep this manageable, I have limited the dataset to the drugs with the 10 highest number of claims.
The visualization is a work in progress and some of the controls are not yet functional, however, the data filters should allow users to effectively sift though items of interest.
xxxxxxxxxx
<head>
<style>
html, body, #ChartArea {
height: 100%;
min-height: 100%;
width: 100%;
min-width: 100%;
}
#ChartArea {
display: inline-block;
}
</style>
<title>C3 Area Chart Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.theme.min.css">
<link rel="stylesheet" href="https://dexjs.net/js/dex-jquery.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"/>
<link rel="stylesheet" href="https://dexjs.net/js/dex-bootstrap.css">
<link rel="stylesheet" href="https://dexjs.net/js/dex.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://dexjs.net/js/dex-jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://dexjs.net/js/dex-bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://dexjs.net/js/dex-libs.js"></script>
<script src="https://dexjs.net/js/dex.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/faker/3.1.0/faker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.14/c3.min.js"></script>
</head>
<body>
<div class="ui-layout-center">
<div id="ChartArea"></div>
</div>
<div class="ui-layout-west">
<div id="ConfigurationPane"></div>
</div>
<script>
d3.csv("DrugSpending.csv", function (error, data) {
var drugSpending = new dex.csv(data);
$(document).ready(function () {
$('body').layout({
applyDemoStyles: false,
west: {
size: 335
},
onresize: function () {
var width = d3.select(chart.config.parent).property("clientWidth");
var height = d3.select(chart.config.parent).property("clientHeight");
chart.attr("width", width).attr("height", height).update();
}
});
var chart = dex.charts.c3.AreaChart({
parent: '#ChartArea',
csv: drugSpending,
height: 500, width: 800
}
);
chart.render();
var configPane = dex.ui.ConfigurationPane({
parent: "#ConfigurationPane",
csv: drugSpending,
components: [chart]
}).render();
});
});
</script>
</body>
</html>
Updated missing url https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.min.js to https://cdnjs.cloudflare.com/ajax/libs/faker/3.1.0/faker.min.js
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js
https://dexjs.net/js/dex-jquery.js
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js
https://dexjs.net/js/dex-bootstrap.js
https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js
https://dexjs.net/js/dex-libs.js
https://dexjs.net/js/dex.js
https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.min.js
https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.14/c3.min.js