dataset.html

{% extends "base.html" %}

{% block content %}

<div style="background-color: #{{ group_info['color'] }}; height: 18px;">
</div>

<div class="row">
	<div class="span12">
		<ul class="breadcrumb">
			<li><a href="index.html">Home</a> <span class="divider">/</span></li>
			<li><a href="group.html">
				<i class="icon {{ group_info['icon'] }}"></i> {{ group_info["label"] }}</a> 
				<span class="divider">/</span>
			</li>
			<li class="active">Dataset</li>
		</ul>
	</div>
</div>

<div class="row">
	<div class="span12">
		<h3>{{ title }}</h3>
		<p style="color: #777;">{{ description }}</p>
	</div>
</div>

<div class="row">
	<div class="span12" style="overflow-x: scroll;">
		{% if file_data -%}
		{% if chart_type == "Map" -%}
		<svg id="svg-map"></svg>
		<blockquote><p>{{ legend }}</p></blockquote>
		{% else -%}
		<canvas id="canvas" height="300" width="940"></canvas>
		{%- endif %}
		
		<table class="table table-bordered table-striped" style="font-size: 80%">
			<tbody>
				{% set row_idx = 0 %}
				{% for row in file_data -%}
				{% if loop.first %}
				<tr>
					{% for col in row -%}
					<th>{{ col }}</th>
					{%- endfor %}
				</tr>
				{% else %}
				<tr>
					{% for col in row -%}
					{% if loop.first and chart_type != "Map" %}
					<td style="color: {{ chart_data.datasets[len(chart_data.datsets) - row_idx].strokeColor }};">{{ col }}</td>
					{% else %}
					<td>{{ col }}</td>
					{% endif %}
					{%- endfor %}
				</tr>
				{% endif %}
				{% set row_idx = row_idx + 1 %}
				{%- endfor %}
			</tbody>
		</table>
		{%- endif %}
	</div>
</div>

{% if chart_type == "Map" -%}
<script>
	var map_opts = {};
	var render_map = function(map_data, india) {
		$("#svg-map").empty();
		
		var width = $("#svg-map").parent().width(),
			aspect_ratio = 1.72,
			height = width / aspect_ratio,
			svg = d3.select("#svg-map")
				.attr("width", width)
				.attr("height", height)
				.append("g"),
			width_translate_factor = -0.9,
			height_translate_factor = 1.2,
			projection = d3.geo.mercator()
							.translate([width_translate_factor*width, height_translate_factor*height])
							.scale(width),
			geo_path = d3.geo.path().projection(projection),
			subunits = topojson.object(india, india.objects.subunits),
			disputed_subunits = topojson.object(india, india.objects.disputed).geometries,
			states = topojson.object(india, india.objects.states).geometries,
			fill = d3.scale.quantize()
				.domain([0, Math.max.apply(Math, 
					$.map(map_data, function(v) { return v; }))])
				.range(colorbrewer["YlOrBr"][9]);
		
		// india
		svg.append("path")
			.datum(subunits)
			.attr("d", geo_path);
		
		// disputed areas
		svg.selectAll("g.disputed").data(disputed_subunits)
			.enter().append("g").attr("class", "disputed")
			.append("path")
				.attr("d", geo_path)
			.append("title").text(function(d) { return d.properties.brk_name 
				+ " [" + d.properties.note_brk + "]"; });
		
		// states of india
		svg.selectAll("g.states").data(states)
			.enter().append("g").attr("class", "states")
			.append("path")
				.attr("d", geo_path)
				.attr("fill", function(d) { 
					return fill(map_data[d.properties.name]); })
			.append("title").text(function(d) {
				return d.properties.name 
					+ (map_data[d.properties.name]
					? (" [" + map_data[d.properties.name] + "]") : "");
			});

	};
	
	d3.json("data/india.json", function(error, india) {
		map_opts.map_data = ["chart"];
		map_opts.india = india;
		render_map(map_opts.map_data, map_opts.india);
	});
	
	d3.select(window).on("resize", function() { 
		render_map(map_opts.map_data, map_opts.india);
	});
	
</script>
{% else -%}
<script>
	var ctx = $("#canvas").get(0).getContext("2d")
	var chart_data = [];

	if(chart_data["chart_type"] == "Line") {
		new Chart(ctx).Line(chart_data);
	}
	else if(chart_data["chart_type"]  == "Pie") {
		new Chart(ctx).Pie(chart_data["datasets"]);
	}
</script>
{%- endif %}

{% endblock %}