bagasabisena/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Simple visualization of Indonesian student distribution in the Netherlands in 2013.

  
## city.csv

          
            name
            lat
            long
            percent
            uni_name
            uni_percent

            
              Amsterdam
              52.370216
              4.895168
              5.2
              University Van Amsterdam|VU Amsterdam|Royal Tropical Institute|Inholland Univerisity Of Applied Science Diemen|Duisenberg School Of Finance
              80|20

            
              Rotterdam
              51.92442
              4.477733
              12.5
              Erasmus University|Hogeschool Inholland Rotterdam|STC-Netherland Maritime University|Rotterdam Business School
              80|20

            
              Delft
              52.011577
              4.357068
              7.3
              TU Delft|Unesco IHE
              80|20

            
              Den Haag
              52.070498
              4.3007
              6.6
              The Hague University Of Applied Science|De Haagse Hogeschool|ISS
              80|20

            
              Deventer
              52.266075
              6.155217
              3.7
              Saxion University
              80|20

            
              Enschede
              52.221537
              6.893662
              12.7
              University Of Twente|ITC|Saxion University
              80|20

            
              Eindhoven
              51.441642
              5.469722
              3.7
              Eindhoven University|Fontys University|TU Eindhoven
              80|20

            
              Groningen
              53.219383
              6.566502
              18.5
              University Of Groningen|Hanze Hogeschool
              80|20

            
              Leiden
              52.160114
              4.49701
              6.3
              Leiden University|LUMC|KITLV Leiden|Vrite University
              80|20

            
              Leuwarden
              53.201233
              5.799913
              3
              University Twente
              80|20

            
              Maastricht
              50.851368
              5.690973
              2.3
              Maastricht University|Hotel School Maastricht- Zuyd University
              80|20

            
              Nijmegen
              51.812563
              5.837226
              4.4
              Radboud University|Hogeschool Van Nijmegen/Arnhem
              80|20

            
              Tilburg
              51.560596
              5.091914
              3.7
              Tilburg University|Tiasnimbas Business School
              80|20

            
              Utrecht
              52.090737
              5.12142
              3.5
              Utrecht University|Tiasnimbas Business School|Hogeschool Utrecht
              80|20

            
              Wageningen
              51.969187
              5.665395
              6.5
              University Wageningen|Van Hallarenstein|Wageningen Gelderland
              80|20

## index.html
<html>
<head>
<style>
    .place-label {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 10px;
        fill: #444;
    }

    .place {
        fill: #444;
    }

    .d3-tip {
      line-height: 1;
      font-weight: bold;
      padding: 12px;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      background: rgba(250, 250, 250, 0.8);
      color: #000;
      border-radius: 2px;
      pointer-events: none;
    }

    /* Creates a small triangle extender for the tooltip */
    .d3-tip:after {
      box-sizing: border-box;
      display: inline;
      font-size: 10px;
      width: 100%;
      line-height: 1;
      color: rgba(250, 250, 250, 0.8);
      position: absolute;
      pointer-events: none;
    }

    /* Northward tooltips */
    .d3-tip.n:after {
      content: "\25BC";
      margin: -1px 0 0 0;
      top: 100%;
      left: 0;
      text-align: center;
    }

    /* Eastward tooltips */
    .d3-tip.e:after {
      content: "\25C0";
      margin: -4px 0 0 0;
      top: 50%;
      left: -8px;
    }

    /* Southward tooltips */
    .d3-tip.s:after {
      content: "\25B2";
      margin: 0 0 1px 0;
      top: -8px;
      left: 0;
      text-align: center;
    }

    /* Westward tooltips */
    .d3-tip.w:after {
      content: "\25B6";
      margin: -4px 0 0 -1px;
      top: 50%;
      left: 100%;
    }
</style>
</head>
<body>
<div id="example"></div>

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.8.1/mustache.min.js"></script>
<script id="template" type="x-tmpl-mustache">
    <div class="tip-container">
        <p style="font-size:80%">{{name}}: {{percent}}%</p>
        {{#uni_name}}
        <p style="font-size: 60%">{{.}}</p>
        {{/uni_name}}
    </div>
</script>
<script>

    var template = $('#template').html();
    Mustache.parse(template);

    var tip = d3.tip()
        .attr('class', 'd3-tip')
        .direction(function(d){
            if (d.name == 'Delft' || d.name == "Tilburg") {
                return "sw";
            } else if (d.name == 'Groningen') {
                return "e";
            } else {
            	return "ne";
            }
        })
        .html(function(d) {
            return Mustache.render(template, d);
        });

    var width = 960;
    var height = 780;

    var svg = d3.select('div#example').append('svg')
        .attr('width', width)
        .attr('height', height);

    svg.call(tip);

    var projection = d3.geo.mercator()
        .center([6.5,53.5])
        .scale(8500)
        .translate([width / 2, length / 3]);

    d3.json('nld.json', function(err, nld) {
        if (err) return console.log(err);

        var subunits = topojson.feature(nld, nld.objects.subunits);

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

        svg.append('path')
            .datum(subunits)
            .attr('d', path)
            .attr('fill', '#f0f0f0');

        d3.csv('city.csv', function(error, data) {

	        data.forEach(function(d){
	            d.name = d.name;
	            d.lat = +d.lat;
	            d.long = +d.long;
	            d.percent = +d.percent;
	            d.uni_name = d.uni_name.split("|");
	            d.uni_percent = d.uni_percent.split("|");
	            for (var i = d.uni_name.length - 1; i >= 0; i--) {
	                d.uni = {uni_name: d.uni_name, uni_percent: d.uni_percent};
	            };
	        })

	        var color = d3.scale.category20();
	        var radiusScale = d3.scale.linear()
	            .domain(d3.extent(data, function(d){return d.percent}))
	            .range([5,30])

	        svg.append('g')
	            .attr('class', 'places')
	            .selectAll("circle")
	            .data(data)
	            .enter()
	            .append('circle')
	                .attr('class','place')
	                .attr('cx',function(d){return projection([d.long, d.lat])[0]})
	                .attr('cy',function(d){return projection([d.long, d.lat])[1]})
	                .attr('r', function(d){return radiusScale(d.percent)})
	                .style('fill', function(d){return color(d.name);})
	                .on('mouseover', function(d){
	                    var radius = radiusScale(d.percent);
	                    d3.select(this)
	                        .attr('r', radius)
	                        .transition()
	                        .duration(250)
	                        .attr('r', 1.2*radius)

	                    tip.show(d);
	                        // .transition()
	                        // .duration(500)
	                        // .attr('r', radius)
	                        // .transition()
	                        // .duration(500)
	                        // .attr('r', 1.5*radius)
	                        // .transition()
	                        // .duration(500)
	                        // .attr('r', radius)
	                })
	                .on('mouseout', function(d){
	                    var radius = radiusScale(d.percent);
	                    d3.select(this)
	                        .transition()
	                        .duration(250)
	                        .attr('r',radius)

	                    tip.hide(d);
	                });

	        svg.select('g.places')
	            .selectAll('.place-label')
	            .data(data)
	            .enter()
	            .append('text')
	                .attr("class", "place-label")
	                .attr("transform", function(d) {return "translate(" + projection([d.long, d.lat]) + ")"; })
	                .attr("dy", ".35em")
	                .attr('dx', '1.2em')
	                .text(function(d) { return d.name; });


	    });


    });


</script>
</body>
</html>

## nld.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              nld.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.
name	lat	long	percent	uni_name	uni_percent
Amsterdam	52.370216	4.895168	5.2	University Van Amsterdam\|VU Amsterdam\|Royal Tropical Institute\|Inholland Univerisity Of Applied Science Diemen\|Duisenberg School Of Finance	80\|20
Rotterdam	51.92442	4.477733	12.5	Erasmus University\|Hogeschool Inholland Rotterdam\|STC-Netherland Maritime University\|Rotterdam Business School	80\|20
Delft	52.011577	4.357068	7.3	TU Delft\|Unesco IHE	80\|20
Den Haag	52.070498	4.3007	6.6	The Hague University Of Applied Science\|De Haagse Hogeschool\|ISS	80\|20
Deventer	52.266075	6.155217	3.7	Saxion University	80\|20
Enschede	52.221537	6.893662	12.7	University Of Twente\|ITC\|Saxion University	80\|20
Eindhoven	51.441642	5.469722	3.7	Eindhoven University\|Fontys University\|TU Eindhoven	80\|20
Groningen	53.219383	6.566502	18.5	University Of Groningen\|Hanze Hogeschool	80\|20
Leiden	52.160114	4.49701	6.3	Leiden University\|LUMC\|KITLV Leiden\|Vrite University	80\|20
Leuwarden	53.201233	5.799913	3	University Twente	80\|20
Maastricht	50.851368	5.690973	2.3	Maastricht University\|Hotel School Maastricht- Zuyd University	80\|20
Nijmegen	51.812563	5.837226	4.4	Radboud University\|Hogeschool Van Nijmegen/Arnhem	80\|20
Tilburg	51.560596	5.091914	3.7	Tilburg University\|Tiasnimbas Business School	80\|20
Utrecht	52.090737	5.12142	3.5	Utrecht University\|Tiasnimbas Business School\|Hogeschool Utrecht	80\|20
Wageningen	51.969187	5.665395	6.5	University Wageningen\|Van Hallarenstein\|Wageningen Gelderland	80\|20
	<html>
	<head>
	<style>
	.place-label {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 10px;
	fill: #444;
	}

	.place {
	fill: #444;
	}

	.d3-tip {
	line-height: 1;
	font-weight: bold;
	padding: 12px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	background: rgba(250, 250, 250, 0.8);
	color: #000;
	border-radius: 2px;
	pointer-events: none;
	}

	/* Creates a small triangle extender for the tooltip */
	.d3-tip:after {
	box-sizing: border-box;
	display: inline;
	font-size: 10px;
	width: 100%;
	line-height: 1;
	color: rgba(250, 250, 250, 0.8);
	position: absolute;
	pointer-events: none;
	}

	/* Northward tooltips */
	.d3-tip.n:after {
	content: "\25BC";
	margin: -1px 0 0 0;
	top: 100%;
	left: 0;
	text-align: center;
	}

	/* Eastward tooltips */
	.d3-tip.e:after {
	content: "\25C0";
	margin: -4px 0 0 0;
	top: 50%;
	left: -8px;
	}

	/* Southward tooltips */
	.d3-tip.s:after {
	content: "\25B2";
	margin: 0 0 1px 0;
	top: -8px;
	left: 0;
	text-align: center;
	}

	/* Westward tooltips */
	.d3-tip.w:after {
	content: "\25B6";
	margin: -4px 0 0 -1px;
	top: 50%;
	left: 100%;
	}
	</style>
	</head>
	<body>
	<div id="example"></div>

	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script src="http://d3js.org/topojson.v1.min.js"></script>
	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
	<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.8.1/mustache.min.js"></script>
	<script id="template" type="x-tmpl-mustache">
	<div class="tip-container">
	<p style="font-size:80%">{{name}}: {{percent}}%</p>
	{{#uni_name}}
	<p style="font-size: 60%">{{.}}</p>
	{{/uni_name}}
	</div>
	</script>
	<script>

	var template = $('#template').html();
	Mustache.parse(template);

	var tip = d3.tip()
	.attr('class', 'd3-tip')
	.direction(function(d){
	if (d.name == 'Delft' \|\| d.name == "Tilburg") {
	return "sw";
	} else if (d.name == 'Groningen') {
	return "e";
	} else {
	return "ne";
	}
	})
	.html(function(d) {
	return Mustache.render(template, d);
	});

	var width = 960;
	var height = 780;

	var svg = d3.select('div#example').append('svg')
	.attr('width', width)
	.attr('height', height);

	svg.call(tip);

	var projection = d3.geo.mercator()
	.center([6.5,53.5])
	.scale(8500)
	.translate([width / 2, length / 3]);

	d3.json('nld.json', function(err, nld) {
	if (err) return console.log(err);

	var subunits = topojson.feature(nld, nld.objects.subunits);

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

	svg.append('path')
	.datum(subunits)
	.attr('d', path)
	.attr('fill', '#f0f0f0');

	d3.csv('city.csv', function(error, data) {

	data.forEach(function(d){
	d.name = d.name;
	d.lat = +d.lat;
	d.long = +d.long;
	d.percent = +d.percent;
	d.uni_name = d.uni_name.split("\|");
	d.uni_percent = d.uni_percent.split("\|");
	for (var i = d.uni_name.length - 1; i >= 0; i--) {
	d.uni = {uni_name: d.uni_name, uni_percent: d.uni_percent};
	};
	})

	var color = d3.scale.category20();
	var radiusScale = d3.scale.linear()
	.domain(d3.extent(data, function(d){return d.percent}))
	.range([5,30])

	svg.append('g')
	.attr('class', 'places')
	.selectAll("circle")
	.data(data)
	.enter()
	.append('circle')
	.attr('class','place')
	.attr('cx',function(d){return projection([d.long, d.lat])[0]})
	.attr('cy',function(d){return projection([d.long, d.lat])[1]})
	.attr('r', function(d){return radiusScale(d.percent)})
	.style('fill', function(d){return color(d.name);})
	.on('mouseover', function(d){
	var radius = radiusScale(d.percent);
	d3.select(this)
	.attr('r', radius)
	.transition()
	.duration(250)
	.attr('r', 1.2*radius)

	tip.show(d);
	// .transition()
	// .duration(500)
	// .attr('r', radius)
	// .transition()
	// .duration(500)
	// .attr('r', 1.5*radius)
	// .transition()
	// .duration(500)
	// .attr('r', radius)
	})
	.on('mouseout', function(d){
	var radius = radiusScale(d.percent);
	d3.select(this)
	.transition()
	.duration(250)
	.attr('r',radius)

	tip.hide(d);
	});

	svg.select('g.places')
	.selectAll('.place-label')
	.data(data)
	.enter()
	.append('text')
	.attr("class", "place-label")
	.attr("transform", function(d) {return "translate(" + projection([d.long, d.lat]) + ")"; })
	.attr("dy", ".35em")
	.attr('dx', '1.2em')
	.text(function(d) { return d.name; });


	});



	});



	</script>
	</body>
	</html>