Skip to content

Instantly share code, notes, and snippets.

@PatMartin

PatMartin/.block

Last active August 7, 2017 02:21
Show Gist options
  • Save PatMartin/4f21a2b9636e175667e3085b7145c8f4 to your computer and use it in GitHub Desktop.
Save PatMartin/4f21a2b9636e175667e3085b7145c8f4 to your computer and use it in GitHub Desktop.
Download ZIP
BarChart
Raw
.block
license: mit
Raw
README.md

Bar Chart

This is the dex.js bar chart.

References

Raw
DrugSpending.csv
drugname_brand drugname_generic claim_count total_spending user_count total_spending_per_user unit_count unit_cost_wavg user_count_non_lowincome out_of_pocket_avg_non_lowincome user_count_lowincome out_of_pocket_avg_lowincome
METFORMIN HCL METFORMIN HCL 24606804 178269309.7 4834789 36.87220056 2640637635 0.067666313 2995057 16.96711112 1839732 5.353612227
GABAPENTIN GABAPENTIN 24819279 490780915.7 4816886 101.8875921 2859139554 0.169566437 2647611 34.72280186 2169275 6.832879852
FUROSEMIDE FUROSEMIDE 27544936 137915286.1 5314707 25.949744 1446353937 0.095678206 3217826 13.74518101 2096881 4.171043359
HYDROCODONE-ACETAMINOPHEN HYDROCODONE/ACETAMINOPHEN 29539028 726841667.1 7481511 97.1517207 2358756335 0.310493003 4542551 37.89197317 2938960 6.446761807
SIMVASTATIN SIMVASTATIN 31738778 261189804.2 6479463 40.31040909 1807198109 0.144458981 4640870 19.71578401 1838593 5.425355051
OMEPRAZOLE OMEPRAZOLE 33499942 447500461.9 6943642 64.44751356 1891092441 0.238680648 4222858 37.16809811 2720784 6.024261882
AMLODIPINE BESYLATE AMLODIPINE BESYLATE 38207654 264035801.3 7262513 36.35598329 2041371206 0.12937571 4782153 20.73976548 2480360 5.859931708
ATORVASTATIN CALCIUM ATORVASTATIN CALCIUM 38596680 711852693.2 8069608 88.21403632 2078327456 0.341869023 5719628 36.71098171 2349980 6.186532698
LISINOPRIL LISINOPRIL 39117182 252935781.5 7766597 32.56713095 2318016287 0.109036663 5110824 17.26952264 2655773 5.439553403
LEVOTHYROXINE SODIUM LEVOTHYROXINE SODIUM 39438875 777817848.6 6640768 117.127695 2036588945 0.384428073 4674459 43.75089231 1966309 7.85959129
Raw
index.html
<!DOCTYPE html>
<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="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<link rel="stylesheet" href="http://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.BarChart({
'parent': '#ChartArea',
'csv': drugSpending}).render();
var configPane = dex.ui.ConfigurationPane({
parent: "#ConfigurationPane",
csv: drugSpending,
components: [chart]
}).render();
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment