kvn219/index.html

## 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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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>