ljegou/climaviz1

## climaviz1
<style>

.background {
  fill: #eee;
  pointer-events: all;
}

.map-layer {
  fill: #fff;
  stroke: #aaa;
}

.effect-layer{
  pointer-events:none;
}

text{
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 300;
}

text.big-text{
  font-size: 30px;
  font-weight: 400;
}

.effect-layer text, text.dummy-text{
  font-size: 12px;
}

</style>
<body>

<svg></svg>

<script src="https://d3js.org/d3.v3.min.js"></script>

<script>

var width = 960,
    height = 500,
    centered;

// Define color scale
var color = d3.scale.linear()
  .domain([1, 20])
  .clamp(true)
  .range(['#fff', '#409A99']);

var projection = d3.geo.mercator()
  .scale(1500)
  // Center the Map in Colombia
  .center([-74, 4.5])
  .translate([width / 2, height / 2]);

var path = d3.geo.path()
  .projection(projection);

// Set svg width & height
var svg = d3.select('svg')
  .attr('width', width)
  .attr('height', height);

// Add background
svg.append('rect')
  .attr('class', 'background')
  .attr('width', width)
  .attr('height', height)
  .on('click', clicked);

var g = svg.append('g');
// Load map data
d3.json('tlsequ2015.geojson', function(error, mapData) {
  var features = mapData.features;

  // Update color scale domain based on data
  color.domain([0, d3.max(features, nameLength)]);

  // Draw each province as a path
  mapLayer.selectAll('path')
      .data(features)
    .enter().append('path')
      .attr('d', path)
      .attr('vector-effect', 'non-scaling-stroke')
      .style('fill', 'grey');
});
	<style>

	.background {
	fill: #eee;
	pointer-events: all;
	}

	.map-layer {
	fill: #fff;
	stroke: #aaa;
	}

	.effect-layer{
	pointer-events:none;
	}

	text{
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: 300;
	}

	text.big-text{
	font-size: 30px;
	font-weight: 400;
	}

	.effect-layer text, text.dummy-text{
	font-size: 12px;
	}

	</style>
	<body>

	<svg></svg>

	<script src="https://d3js.org/d3.v3.min.js"></script>

	<script>

	var width = 960,
	height = 500,
	centered;

	// Define color scale
	var color = d3.scale.linear()
	.domain([1, 20])
	.clamp(true)
	.range(['#fff', '#409A99']);

	var projection = d3.geo.mercator()
	.scale(1500)
	// Center the Map in Colombia
	.center([-74, 4.5])
	.translate([width / 2, height / 2]);

	var path = d3.geo.path()
	.projection(projection);

	// Set svg width & height
	var svg = d3.select('svg')
	.attr('width', width)
	.attr('height', height);

	// Add background
	svg.append('rect')
	.attr('class', 'background')
	.attr('width', width)
	.attr('height', height)
	.on('click', clicked);

	var g = svg.append('g');
	// Load map data
	d3.json('tlsequ2015.geojson', function(error, mapData) {
	var features = mapData.features;

	// Update color scale domain based on data
	color.domain([0, d3.max(features, nameLength)]);

	// Draw each province as a path
	mapLayer.selectAll('path')
	.data(features)
	.enter().append('path')
	.attr('d', path)
	.attr('vector-effect', 'non-scaling-stroke')
	.style('fill', 'grey');
	});