Lab10

Size: px

Start display at page:

Download "Lab10"

재영 부
6 years ago
Views:

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

2 Map Visualization

3 Shape Shape (.shp): ESRI shp 3

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

5 SHP to TopoJSON (or GeoJSON) QGIS 5

6 Open Source GIS data repositories

7 (TopoJSON) 7

8 Lab1: TopoJSON Step1: Setup index.html <script src=" 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

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

10 d3.js Projection Geo Projections 10

11 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

12 Lab1: TopoJSON console.log(data) 12

13 Lab1: TopoJSON console.log(features) 13

14 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

15 15

16 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

17 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

18 Lab 2: Zoomable Map Zoom 18

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

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

21 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

22 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 } path centered 21

23 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 } path centered centered 21

24 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

25 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

26 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

27 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

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

29 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.

30 Lab3: Choropleth Map Choropleth Map Combine two data use d3 queue library 26

31 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

32 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

33 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

34 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

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

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

37 Lab4: Google Map + d3.js Step1: Google Map API index.html <script type="text/javascript" src=" sensor=true"></script> 32

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

39 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

40 Assignment 7: Map Visualization : 11/23 ( )

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

42 Questions...?

Lab7

Lab7 Lab 7: Pie Chart & Line Graph 2015 Fall human-computer interaction + design lab. Joonhwan Lee Pie Chart d3.js d3.js bundle chord pack cluster force histogram 3 d3.js Layout Bundle - apply Holten's hierarchical