martin-martin/index.html Secret

## index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Sealed Cities</title>
        <script type="text/javascript" src="d3/d3.v3.js"></script><script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
        <script type="text/javascript" src="<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>"></script>
        <!--<script type="text/javascript" src="javascript/modal.js"></script>-->
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <style type="text/css">
            .example {
                display: flex;
                flex-wrap: wrap;
                width: 400px;
            }
        </style>
    </head>
    <body>
        <script type="text/javascript">
          // importing the geoJSON file for drawing the map
          // Resource: http://grokbase.com/t/gg/d3-js/1372gq18j9/geojson-maps - Thanks :)
          d3.json("region_un_Europe_subunits.json", function(geo_data) {
            "use strict";
            var margin = 75,
                width = 1920 - margin,
                height = 1080 - margin;

            var svg = d3.select('body')
                .append('svg')
                .attr('width', width + margin)
                .attr('height', height + margin)
                .append('g')
                .attr('class', 'map');

            var projection = d3.geo.mercator()
                  .scale(700)
                  .translate([width / 2 - 600, height + 250]);

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

            var map = svg.selectAll('path')
                  .data(geo_data.features)
                  .enter()
                  .append('path')
                  .attr('d', path)
                  .attr('id', function(d) {
                    return d.properties.brk_a3;
                  })
                  .attr('class', function(d) {
                    var country_id = d.properties.brk_a3;
                    if (country_id == "SCT" || country_id == "ENG" || country_id == "WLS" || country_id == "NIR") {
                      return "UK";
                    } else {
                      return "entity";
                    };
                  })
                  .on("mouseover", mapMouseOver)
                  .on("mouseout", mapMouseOut)
                  .on("click", showDetails)
                  .style('fill', 'gray')
                  .style("stroke", "white");

            function mapMouseOver(d) {
              // highlights the country on mouseover
              var country_id = d.properties.brk_a3;
              console.log(country_id, "is", d.properties.name)
              // in this map, the U.K. is represented in the different countries
              // however my dataset has data for "United Kingdom".
              // therefore I assigned a class "UK" to the countries and here I
              // am chaining them to color at the same time.
              var country = d3.selectAll($("#" + country_id));
              if (country.attr('class') == 'UK') {
                var selected = d3.selectAll('.UK');
              } else {
                var selected = country;
              }
              selected
                  .style("fill", "red")
                  .style("stroke", "white");
            };

            function mapMouseOut(d) {
              // returns the country to it's original state
              // when the cursor leaves the area
              var country_id = d.properties.brk_a3;
              var country = d3.selectAll($("#" + country_id));
              if (country.attr('class') == 'UK') {
                var selected = d3.selectAll('.UK');
              } else {
                var selected = country;
              }
              selected
                  .style("fill", "gray")
                  .style("stroke", "white");
            };


            function showDetails(d) {
              console.log("you just clicked!")
            };


          });


          // importing the csv file
          d3.json('soil_sealing_cities.json', function(error, data) {
            ////
            //// PART 1 - DATA CLEANING
            ////
            // perform the data wrangling for each row
            data.forEach(function(d) {
              d.country = d.country;
              // transform string to integer
              d.cat_below_25_percent = +d.cat_below_25_percent;
              d.cat_25_to_49_percent = +d.cat_25_to_49_percent;
              d.cat_50_to_74_percent = +d.cat_50_to_74_percent;
              d.cat_75_and_above_percent = +d.cat_75_and_above_percent;
              d.sum_of_cities = +d.sum_of_cities;
              d.percentage_cities_50_and_above_percent = +d.percentage_cities_50_and_above_percent;
              });
            ////
            // //// PART 2 - DRAWING BARS
            // ////
            // // starting to draw on the page
            // // at first a heading
            // d3.select('body').append('h1').text('Statistics on soil sealing in European cities');
            // // THIS WILL GO - currently checking for one integer value to be represented in a bar chart
            // d3.select('body').append('h2').text('Number of cities investigated by country');
            // d3.select('body').append('div').attr('class', 'container');
            // // logic of appending the div-bars
            // d3.select('.container').selectAll('div')
            //   .data(data)
            //   .enter()
            //   .append('div')
            //   // "United Kingdom" was too long a string for one representation within a bar
            //   // so I took it as an example to try using functions within
            //   .text(function(d) {
            //       if (d.country === "United Kingdom") {
            //           return "U.K.";
            //       } else {
            //       return d.country;
            //       }
            //     })
            //   // using the percentage_cities_50_and_above_percent value
            //   .style('width', function(d) {
            //       return d.percentage_cities_50_and_above_percent + '%'
            //   })
            //   // make them bar-like. this could be done in CSS instead
            //   .style('color', 'black')
            //   .style('background-color', 'red')
            //   .style('border-color', 'white')
            //   .style('border-style', 'solid')
            //   .style('border-width', '1px');


            ////
            //// PART 3 - DRAWING HOUSES AND TREES
            ////
            d3.select('body').append('span').attr('class', 'example');

            // modify the initial data
            data.forEach(function(d){
                    // calling the function to generate the range for each row entry
                    d.num_blocks = d3.range(0,d.total_sealed_in_percent,1);
                    d.num_squares = d3.range(0,100 - d.total_sealed_in_percent,1);
            })

            // insert a div for each row
            var rows = d3.select('.example').selectAll('div')
                .data(data, function(d, i) {
                    // binding a key to each row. It is not really necessary on this example
                    // but I will leave it here to make the use of key functions clear
                    return "row_" + i;
                })
                .enter()
                .append('div');

            // insert imgs with class block in each row
            var blocks = rows.selectAll('.block')
                    .data(function (d){
                        return d.num_blocks
                    })
                    .enter()
                    .append('img')
                        .attr('class', 'block')
                        .attr('src', 'http://www.clipartbest.com/cliparts/dTr/zby/dTrzbyLT9.png')
                        .attr('alt', 'example block')
                        .style('width', '40px')
                        .style('height', '40px')

            // insert imgs with class squares in each row
            var squares = rows.selectAll('.square')
                    .data(function (d){
                        return d.num_squares
                    })
                    .enter()
                    .append('img')
                        .attr('class', 'square')
                        .attr('src', 'http://www.micnatur.pt/img/tree.svg')
                        .attr('alt', 'example square')
                        .style('width', '40px')
                        .style('height', '40px');

          //// AND HERE IT ALL ENDS
          });
        </script>
        <!-- Trigger/Open The Modal -->
        <button id="myBtn">Open Modal</button>

        <!-- The Modal -->
        <!-- <h1>here</h1> -->
        <div id="myModal" class="modal">
        <h1>see this</h1>
          <!-- Modal content -->
          <div class="modal-content">
            <span class="close">x</span>
            <p>Some text in the Modal..</p>
          </div>
</div>
    </body>
</html>

## region_un_Europe_subunits.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              region_un_Europe_subunits.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## soil_sealing_cities.json

      
    Raw
  

              soil_sealing_cities.json
            
          
            View raw
              (Sorry about that, but we can’t show files that are this big right now.)
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Sealed Cities</title>
	<script type="text/javascript" src="d3/d3.v3.js"></script><script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script type="text/javascript" src="<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>"></script>
	<!--<script type="text/javascript" src="javascript/modal.js"></script>-->
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<style type="text/css">
	.example {
	display: flex;
	flex-wrap: wrap;
	width: 400px;
	}
	</style>
	</head>
	<body>
	<script type="text/javascript">
	// importing the geoJSON file for drawing the map
	// Resource: http://grokbase.com/t/gg/d3-js/1372gq18j9/geojson-maps - Thanks :)
	d3.json("region_un_Europe_subunits.json", function(geo_data) {
	"use strict";
	var margin = 75,
	width = 1920 - margin,
	height = 1080 - margin;

	var svg = d3.select('body')
	.append('svg')
	.attr('width', width + margin)
	.attr('height', height + margin)
	.append('g')
	.attr('class', 'map');

	var projection = d3.geo.mercator()
	.scale(700)
	.translate([width / 2 - 600, height + 250]);

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

	var map = svg.selectAll('path')
	.data(geo_data.features)
	.enter()
	.append('path')
	.attr('d', path)
	.attr('id', function(d) {
	return d.properties.brk_a3;
	})
	.attr('class', function(d) {
	var country_id = d.properties.brk_a3;
	if (country_id == "SCT" \|\| country_id == "ENG" \|\| country_id == "WLS" \|\| country_id == "NIR") {
	return "UK";
	} else {
	return "entity";
	};
	})
	.on("mouseover", mapMouseOver)
	.on("mouseout", mapMouseOut)
	.on("click", showDetails)
	.style('fill', 'gray')
	.style("stroke", "white");

	function mapMouseOver(d) {
	// highlights the country on mouseover
	var country_id = d.properties.brk_a3;
	console.log(country_id, "is", d.properties.name)
	// in this map, the U.K. is represented in the different countries
	// however my dataset has data for "United Kingdom".
	// therefore I assigned a class "UK" to the countries and here I
	// am chaining them to color at the same time.
	var country = d3.selectAll($("#" + country_id));
	if (country.attr('class') == 'UK') {
	var selected = d3.selectAll('.UK');
	} else {
	var selected = country;
	}
	selected
	.style("fill", "red")
	.style("stroke", "white");
	};

	function mapMouseOut(d) {
	// returns the country to it's original state
	// when the cursor leaves the area
	var country_id = d.properties.brk_a3;
	var country = d3.selectAll($("#" + country_id));
	if (country.attr('class') == 'UK') {
	var selected = d3.selectAll('.UK');
	} else {
	var selected = country;
	}
	selected
	.style("fill", "gray")
	.style("stroke", "white");
	};


	function showDetails(d) {
	console.log("you just clicked!")
	};



	});






	// importing the csv file
	d3.json('soil_sealing_cities.json', function(error, data) {
	////
	//// PART 1 - DATA CLEANING
	////
	// perform the data wrangling for each row
	data.forEach(function(d) {
	d.country = d.country;
	// transform string to integer
	d.cat_below_25_percent = +d.cat_below_25_percent;
	d.cat_25_to_49_percent = +d.cat_25_to_49_percent;
	d.cat_50_to_74_percent = +d.cat_50_to_74_percent;
	d.cat_75_and_above_percent = +d.cat_75_and_above_percent;
	d.sum_of_cities = +d.sum_of_cities;
	d.percentage_cities_50_and_above_percent = +d.percentage_cities_50_and_above_percent;
	});
	////
	// //// PART 2 - DRAWING BARS
	// ////
	// // starting to draw on the page
	// // at first a heading
	// d3.select('body').append('h1').text('Statistics on soil sealing in European cities');
	// // THIS WILL GO - currently checking for one integer value to be represented in a bar chart
	// d3.select('body').append('h2').text('Number of cities investigated by country');
	// d3.select('body').append('div').attr('class', 'container');
	// // logic of appending the div-bars
	// d3.select('.container').selectAll('div')
	// .data(data)
	// .enter()
	// .append('div')
	// // "United Kingdom" was too long a string for one representation within a bar
	// // so I took it as an example to try using functions within
	// .text(function(d) {
	// if (d.country === "United Kingdom") {
	// return "U.K.";
	// } else {
	// return d.country;
	// }
	// })
	// // using the percentage_cities_50_and_above_percent value
	// .style('width', function(d) {
	// return d.percentage_cities_50_and_above_percent + '%'
	// })
	// // make them bar-like. this could be done in CSS instead
	// .style('color', 'black')
	// .style('background-color', 'red')
	// .style('border-color', 'white')
	// .style('border-style', 'solid')
	// .style('border-width', '1px');


	////
	//// PART 3 - DRAWING HOUSES AND TREES
	////
	d3.select('body').append('span').attr('class', 'example');

	// modify the initial data
	data.forEach(function(d){
	// calling the function to generate the range for each row entry
	d.num_blocks = d3.range(0,d.total_sealed_in_percent,1);
	d.num_squares = d3.range(0,100 - d.total_sealed_in_percent,1);
	})

	// insert a div for each row
	var rows = d3.select('.example').selectAll('div')
	.data(data, function(d, i) {
	// binding a key to each row. It is not really necessary on this example
	// but I will leave it here to make the use of key functions clear
	return "row_" + i;
	})
	.enter()
	.append('div');

	// insert imgs with class block in each row
	var blocks = rows.selectAll('.block')
	.data(function (d){
	return d.num_blocks
	})
	.enter()
	.append('img')
	.attr('class', 'block')
	.attr('src', 'http://www.clipartbest.com/cliparts/dTr/zby/dTrzbyLT9.png')
	.attr('alt', 'example block')
	.style('width', '40px')
	.style('height', '40px')

	// insert imgs with class squares in each row
	var squares = rows.selectAll('.square')
	.data(function (d){
	return d.num_squares
	})
	.enter()
	.append('img')
	.attr('class', 'square')
	.attr('src', 'http://www.micnatur.pt/img/tree.svg')
	.attr('alt', 'example square')
	.style('width', '40px')
	.style('height', '40px');

	//// AND HERE IT ALL ENDS
	});
	</script>
	<!-- Trigger/Open The Modal -->
	<button id="myBtn">Open Modal</button>

	<!-- The Modal -->
	<!-- <h1>here</h1> -->
	<div id="myModal" class="modal">
	<h1>see this</h1>
	<!-- Modal content -->
	<div class="modal-content">
	<span class="close">x</span>
	<p>Some text in the Modal..</p>
	</div>
	</div>
	</body>
	</html>