Skip to content

Instantly share code, notes, and snippets.

@kvn219

kvn219/index.html

Last active January 4, 2016 16:19
Show Gist options
  • Save kvn219/e2e727a0beadb8f3689a to your computer and use it in GitHub Desktop.
Save kvn219/e2e727a0beadb8f3689a to your computer and use it in GitHub Desktop.
Download ZIP
Interactive Area Chart
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<link href="http://c3js.org/css/c3-b03125fa.css" rel="stylesheet" type="text/css" />
<h1>C3.js - Interactive Area Chart</h1>
<h2>Count of Crimes by Police District and Day of Week</h2>
<p>Data Source: <a href="https://www.kaggle.com/c/sf-crime/">Kaggle's San Francisco Crime Classification Challenge</a></p>
<body>
<div id="chart" style="margin-top: 30px;"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://c3js.org/js/c3.min-12912fb6.js"></script>
<style type="text/css">
body {
font: 12px sans-serif;
}
h1 {
font: 32px sans-serif;
}
p {
font:16px sans-serif;
}
</style>
<script>
var chart = c3.generate({
data: {
columns: [
['BAYVIEW', 11965, 12649, 12816, 13474, 12406, 13681, 12440],
['CENTRAL', 12197, 11130, 11289, 11747, 11633, 13397, 14067],
['INGLESIDE',10346, 11282, 11546, 11647, 11298, 11881, 10845],
['MISSION', 15874, 16587, 17282, 17717, 17045, 18190, 17213],
['NORTHERN', 14271, 14300, 14568, 15257, 15082, 16331, 15487],
['PARK', 6646, 6945, 6871, 7281, 7047, 7610, 6913],
['RICHMOND', 6089, 6352, 6477, 6513, 6494, 6850, 6434],
['SOUTHERN', 20810, 21184, 22013, 22913, 22527, 24458, 23277],
['TARAVAL', 8331, 9257, 9605, 9802, 9370, 10207, 9024],
['TENDERLOIN', 10178, 11898, 12498, 12860, 12136, 11129, 11110]
],
types: {
BAYVIEW: 'area',
CENTRAL: 'area',
INGLESIDE: 'area',
MISSION: 'area',
NORTHERN: 'area',
PARK: 'area',
RICHMOND: 'area',
SOUTHERN: 'area',
TARAVAL: 'area',
TENDERLOIN: 'area'
}
},
axis: {
x: {
type: 'category',
categories: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
}
}
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment