tpogden/README.md

## README.md

      
    Raw
  

              README.md
            
          
    A bar chart of the highest points of each EU member state. Note: I've ignored peaks that aren't on the European continent.
Source: Wikipedia.

  
## eu_peaks.csv

          
            state
            peak
            height

            
              Austria
               Großglockner
               3798

            
              Belgium
               Signal de Botrange
               694

            
              Bulgaria
               Musala
               2925

            
              Croatia
               Dinara
               1831

            
              Cyprus
               Mount Olympus
               1952

            
              Czech Republic
               Sněžka
               1602

            
              Denmark
               Møllehøj
               171

            
              Estonia
               Suur Munamägi
               318

            
              Finland
               Halti
               1324

            
              France
               Mont Blanc
               4810

            
              Germany
               Zugspitze
               2962

            
              Greece
               Mount Olympus
               2919

            
              Hungary
               Kékes
               1014

            
              Ireland
               Carrauntoohil
               1041

            
              Italy
               Mont Blanc
               4810

            
              Latvia
               Gaizinkalns
               313

            
              Lithuania
               Aukštojas Hill
               294

            
              Luxembourg
               Kneiff
               560

            
              Malta
               Ta' Dmejrek
               253

            
              Netherlands
               Vaalserberg
               321

            
              Poland
               Mount Rysy
               2499

            
              Portugal
               Mount Pico
               2351

            
              Romania
               Moldoveanu Peak
               2544

            
              Slovakia
               Gerlachovský štít
               2655

            
              Slovenia
               Triglav
               2864

            
              Spain
               Mulhacén
               3479

            
              Sweden
               Kebnekaise
               2104

            
              United Kingdom
               Ben Nevis
               1344

## index.html
<!DOCTYPE html>
<meta charset="utf-8">

<html>
<head>
<title>Highest Peaks of EU States</title>

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

<style>

  body {
    /*background-color: rgba(245,243,242,1);*/
    font-family: "Helvetica", sans-serif;
    font-size: 10px;
    margin: 8px;
  }

  svg {
    background-color: white;
    /*border: solid 1px rgba(208,199,198,1);*/
    }

  .bar {
    fill: rgba(189,54,19,1);
    shape-rendering: crispEdges;
    opacity:0.9;
  }

  #peak-text {
    font: 14px sans-serif;
  }

  .bar text {
    fill: black;
    font: 8px sans-serif;
    text-anchor: middle;
  }

  .axis {
    font: 10px sans-serif;
  }

  .axis path,
  .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }

  .x.axis path {
    display: none;
  }

</style>

<body>

<script>

(function() {

  var margin = {top: 20, right: 20, bottom: 80, left: 50},
      width = 944 - margin.left - margin.right,
      height = 480 - margin.top - margin.bottom;

  var x = d3.scale.ordinal()
      .rangeRoundBands([0, width], .1);

  var y = d3.scale.linear()
      .range([height, 0])
      .domain([0, 6000]);

  var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom");

  var yAxis = d3.svg.axis()
      .scale(y)
      .ticks(6)
      .orient("left");

  // Draw SVG
  var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  // Name of peak in top right
  var peakText = svg.append("text")
      .attr("id", "peak-text")
      .style("text-anchor", "end")
      .attr("x", width)
      .attr("y", 4);

  // Y Label
  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Highest Peak (m)");

  // Load the data from CSV file
  // Note the bits under this are all inside this!
  d3.csv("eu_peaks.csv", type, function(error, data) {
    x.domain(data.map(function(d) { return d.state; }));

    var bars = svg.selectAll(".bar")
        .data(data)
      .enter().append('g')
        .attr("class", "bar")
        .attr("transform", function(d) { return "translate(" + x(d.state)
              + "," + y(d.height) + ")"; })
      .on('mouseover', function(d){
          var nodeSelection = d3.select(this).style({opacity:'1.0'});
          d3.select('#peak-text').text(d.peak);
          // nodeSelection.select("text").style({opacity:'1.0'});
        })
      .on('mouseout', function(d){
          var nodeSelection = d3.select(this).style({opacity:'0.9'});
          // d3.select('#peak-name').text('');
          // nodeSelection.select("text").style({opacity:'0.8'});
      });

    // X axis
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis)
      .selectAll("text")
        .style("text-anchor", "end")
        .attr("dx", -6)
        .attr("dy", 2)
        .attr("transform", function(d) { return "rotate(-45)" });

    // Y axis
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis);

    // Bar rectangles
    var barRects = bars.append("rect")
        .attr("class", "bar")
        .attr("width", x.rangeBand())
        .attr("height", function(d) { return height - y(d.height); })

    // Bar height text labels
    var barLabels = bars.append("text")
        .attr("x", x.rangeBand()/2)
        .attr("dy", -4)
        .text(function(d) { return commaSep(d.height); });

  });

  function type(d) {
    d.value = +d.value; // coerce to number
    return d;
  }

  var commaSep = d3.format(',');

})()

</script>

</body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
state	peak	height
Austria	Großglockner	3798
Belgium	Signal de Botrange	694
Bulgaria	Musala	2925
Croatia	Dinara	1831
Cyprus	Mount Olympus	1952
Czech Republic	Sněžka	1602
Denmark	Møllehøj	171
Estonia	Suur Munamägi	318
Finland	Halti	1324
France	Mont Blanc	4810
Germany	Zugspitze	2962
Greece	Mount Olympus	2919
Hungary	Kékes	1014
Ireland	Carrauntoohil	1041
Italy	Mont Blanc	4810
Latvia	Gaizinkalns	313
Lithuania	Aukštojas Hill	294
Luxembourg	Kneiff	560
Malta	Ta' Dmejrek	253
Netherlands	Vaalserberg	321
Poland	Mount Rysy	2499
Portugal	Mount Pico	2351
Romania	Moldoveanu Peak	2544
Slovakia	Gerlachovský štít	2655
Slovenia	Triglav	2864
Spain	Mulhacén	3479
Sweden	Kebnekaise	2104
United Kingdom	Ben Nevis	1344
	<!DOCTYPE html>
	<meta charset="utf-8">

	<html>
	<head>
	<title>Highest Peaks of EU States</title>

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

	<style>

	body {
	/background-color: rgba(245,243,242,1);/
	font-family: "Helvetica", sans-serif;
	font-size: 10px;
	margin: 8px;
	}

	svg {
	background-color: white;
	/border: solid 1px rgba(208,199,198,1);/
	}

	.bar {
	fill: rgba(189,54,19,1);
	shape-rendering: crispEdges;
	opacity:0.9;
	}

	#peak-text {
	font: 14px sans-serif;
	}

	.bar text {
	fill: black;
	font: 8px sans-serif;
	text-anchor: middle;
	}

	.axis {
	font: 10px sans-serif;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.x.axis path {
	display: none;
	}

	</style>

	<body>

	<script>

	(function() {

	var margin = {top: 20, right: 20, bottom: 80, left: 50},
	width = 944 - margin.left - margin.right,
	height = 480 - margin.top - margin.bottom;

	var x = d3.scale.ordinal()
	.rangeRoundBands([0, width], .1);

	var y = d3.scale.linear()
	.range([height, 0])
	.domain([0, 6000]);

	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom");

	var yAxis = d3.svg.axis()
	.scale(y)
	.ticks(6)
	.orient("left");

	// Draw SVG
	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	// Name of peak in top right
	var peakText = svg.append("text")
	.attr("id", "peak-text")
	.style("text-anchor", "end")
	.attr("x", width)
	.attr("y", 4);

	// Y Label
	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", ".71em")
	.style("text-anchor", "end")
	.text("Highest Peak (m)");

	// Load the data from CSV file
	// Note the bits under this are all inside this!
	d3.csv("eu_peaks.csv", type, function(error, data) {
	x.domain(data.map(function(d) { return d.state; }));

	var bars = svg.selectAll(".bar")
	.data(data)
	.enter().append('g')
	.attr("class", "bar")
	.attr("transform", function(d) { return "translate(" + x(d.state)
	+ "," + y(d.height) + ")"; })
	.on('mouseover', function(d){
	var nodeSelection = d3.select(this).style({opacity:'1.0'});
	d3.select('#peak-text').text(d.peak);
	// nodeSelection.select("text").style({opacity:'1.0'});
	})
	.on('mouseout', function(d){
	var nodeSelection = d3.select(this).style({opacity:'0.9'});
	// d3.select('#peak-name').text('');
	// nodeSelection.select("text").style({opacity:'0.8'});
	});

	// X axis
	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis)
	.selectAll("text")
	.style("text-anchor", "end")
	.attr("dx", -6)
	.attr("dy", 2)
	.attr("transform", function(d) { return "rotate(-45)" });

	// Y axis
	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis);

	// Bar rectangles
	var barRects = bars.append("rect")
	.attr("class", "bar")
	.attr("width", x.rangeBand())
	.attr("height", function(d) { return height - y(d.height); })

	// Bar height text labels
	var barLabels = bars.append("text")
	.attr("x", x.rangeBand()/2)
	.attr("dy", -4)
	.text(function(d) { return commaSep(d.height); });

	});

	function type(d) {
	d.value = +d.value; // coerce to number
	return d;
	}

	var commaSep = d3.format(',');

	})()

	</script>

	</body>
	</html>