Lab10 - PDF Free Download

Lab 10: Map Visualization 2015 Fall human-computer interaction + design lab. Joonhwan Lee

Map Visualization

Shape Shape (.shp): ESRI shp http://sgis.kostat.go.kr/html/index.html 3

d3.js SVG, GeoJSON, TopoJSON GeoJSON type, features features: multipolygon TopoJSON GeoJSON arc GeoJSON 70% 4

SHP to TopoJSON (or GeoJSON) QGIS 5

Open Source GIS data repositories https://github.com/southkorea https://github.com/southkorea/seoul-maps https://github.com/southkorea/southkorea-maps 6

(TopoJSON) 7

Lab1: TopoJSON Step1: Setup index.html <script src="http://d3js.org/ topojson.v1.min.js" charset="utf-8"></script> mycode.js var width = 800, height = 700 var svg = d3.select("#map").append("svg").attr("width", width).attr("height", height) var seoul = svg.append("g").attr("id", "seoul") 8

Lab1: TopoJSON Step2: Projection var projection = d3.geo.mercator().center([126.9895, 37.5651]).scale(100000).translate([width/2, height/2]) var path = d3.geo.path().projection(projection) 9

d3.js Projection Geo Projections https://github.com/mbostock/d3/wiki/geo-projections 10

Lab1: TopoJSON Step3: Data Loading d3.json("map/ seoul_municipalities_topo_simple.json", function(error, data) { console.log(data) var features = topojson.feature(data, data.objects.seoul_municipalities_geo).features console.log(features) }) 11

Lab1: TopoJSON console.log(data) 12

Lab1: TopoJSON console.log(features) 13

Lab1: TopoJSON Step4: Path seoul.selectall("path").data(features).enter().append("path").attr("class", function(d) { return "municipality c" + d.properties.code }).attr("d", path) 14

Lab1: TopoJSON Step5: Label seoul.selectall("text").data(features).enter().append("text").attr("class", "municipality-label").attr("transform", function(d) { return "translate(" +path.centroid(d)+ ")" }).attr("dy", ".35em").text(function(d) { return d.properties.name }) 16

Lab1: TopoJSON Step6: Styling.municipality { fill: silver; stroke: #fff; }.municipality-label { fill: white; text-anchor: middle; font: bold 10px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; } 17

Lab 2: Zoomable Map Zoom 18

Lab 2: Zoomable Map Idea path center (switch) path centered centered transform scale centered scale 19

Lab 2: Zoomable Map Step1: path seoul.selectall("path").data(features)....attr("d", path).on("click", clicked) 20

Lab 2: Zoomable Map Step2: clicked(d) method function clicked(d) { var x, y, k if (d && centered!= d) { var centroid = path.centroid(d) x = centroid[0] y = centroid[1] k = 4 centered = d } else { x = width / 2 y = height / 2 k = 1 centered = null } 21

Lab 2: Zoomable Map Step2: clicked(d) method function clicked(d) { seoul.selectall("path").classed("active", centered && function(d){ return d == centered }) seoul.transition().duration(750).attr("transform", "translate(" + width/2 + "," + height / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")") 22

Lab 2: Zoomable Map Step2: clicked(d) method path active function clicked(d) { seoul.selectall("path").classed("active", centered && function(d){ return d == centered }) seoul.transition().duration(750).attr("transform", "translate(" + width/2 + "," + height / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")") 22

Lab 2: Zoomable Map Step2: clicked(d) method path active function clicked(d) { seoul.selectall("path").classed("active", centered && function(d){ return d == centered }) zoom to path (x, y) seoul.transition().duration(750).attr("transform", "translate(" + width/2 + "," + height / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")") 22

Lab 2: Zoomable Map Step3: Places d3.csv("data/places.csv", function(error, data) { places.selectall("circle")....attr("cx", function(d) { return projection([d.lon, d.lat])[0] }).attr("cy", function(d) { return projection([d.lon, d.lat])[1]... }) 23

Lab 2: Zoomable Map Step4: Places zoom places.transition().duration(750).attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")") 24

Lab 2: Zoomable Map Step5: Places places.selectall("circle").classed("show", centered && k == 4) places.selectall("text").classed("show", centered && k == 4) 25

Lab3: Choropleth Map Choropleth Map http://bl.ocks.org/mbostock/4060606 Combine two data use d3 queue library https://github.com/mbostock/queue 26

Lab3: Choropleth Map Step1: Combine data var popbyname = d3.map() queue().defer(d3.json, "map/ seoul_municipalities_topo_simple.json").defer(d3.csv, "data/fire.csv", function(d) { popbyname.set(d.name, +d.value) }).await(ready) 27

Lab3: Choropleth Map Step2: color scale var colorscale = d3.scale.quantize().domain([0, 500]).range(d3.range(9).map(function(i) { return "p" + i })) *range 0 p8 28

Lab3: Choropleth Map Step3: path seoul.selectall("path").data(features).enter().append("path").attr("class", function(d) { return "municipality " + colorscale(popbyname.get(d.properties.name)) }).attr("d", path).attr("id", function(d) { return d.properties.name }) 29

Lab3: Choropleth Map Step3: path seoul.selectall("path").data(features).enter().append("path").attr("class", function(d) { class colorscale (p0-p8) return "municipality " + colorscale(popbyname.get(d.properties.name)) }).attr("d", path).attr("id", function(d) { return d.properties.name }) 29

Lab3: Choropleth Map Step4: Styling.municipality.p0 { fill: #ffffd9; }.municipality.p1 { fill: #edf8b1; }... 30

Lab4: Google Map + d3.js js api d3 google api: d3.js: overlay 31

Lab4: Google Map + d3.js Step1: Google Map API index.html <script type="text/javascript" src="http://maps.google.com/maps/api/js? sensor=true"></script> 32

Lab4: Google Map + d3.js Step2: var map = new google.maps.map( d3.select("#map").node(), { zoom: 15, center: new google.maps.latlng(37.463842, 126.949335), maptypeid: google.maps.maptypeid.roadmap } ) 33

Lab4: Google Map + d3.js Step3: Overlay map var overlay = new google.maps.overlayview() overlay overlay.onadd = function() { } overlay overlay.draw = function() {...} function transform(d) {...} overlay.draw overlay.setmap(map) map overlay 34

Assignment 7: Map Visualization : 11/23 ( )

Assignment 7: Map Visualization : Map Visualization : (11/23) html index.html, ( : x) zip 36

Questions...?