Last active
December 30, 2019 22:29
-
-
Save AudunVN/20054b3294b14c726b6e8bc411919b60 to your computer and use it in GitHub Desktop.
PC
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body> | |
| <script src="//d3js.org/d3.v4.min.js"></script> | |
| <script src="//d3js.org/d3-geo-projection.v1.min.js"></script> | |
| <script src="//d3js.org/d3-selection-multi.v0.4.min.js"></script> | |
| <script src="//d3js.org/topojson.v2.min.js"></script> | |
| <svg></svg> | |
| </body> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function() { | |
| var contents, graticule, height, path, projection, svg, width, zoom, zoomable_layer; | |
| svg = d3.select('svg'); | |
| width = 1000; | |
| height = 1000; | |
| zoomable_layer = svg.append('g'); | |
| /*function resize(){ | |
| width = d3.select('.map-container svg').node().getBoundingClientRect().width; | |
| height = d3.select('.map-container svg').node().getBoundingClientRect().height; | |
| var svg_g = document.querySelector("svg > g"); | |
| var svg_g_height = svg_g.getBoundingClientRect().height; | |
| zoomable_layer.attrs({ | |
| transform: [ | |
| "translate(" + [0, 0] + ")", | |
| "scale(" + height/svg_g_height + ")" | |
| ].join(" ")}); | |
| }*/ | |
| zoom = d3.zoom().scaleExtent([1, 50]).on('zoom', function() { | |
| var e = d3.event.transform, | |
| // now, constrain the x and y components of the translation by the | |
| // dimensions of the viewport | |
| tx = Math.min(0, Math.max(e.x, width - width * e.k)), | |
| ty = Math.min(0, Math.max(e.y, height - height * e.k)); | |
| // then, update the zoom behavior's internal translation, so that | |
| // it knows how to properly manipulate it on the next movement | |
| // and finally, update the <g> element's transform attribute with the | |
| // correct translation and scale (in reverse order) | |
| zoomable_layer.attrs({ | |
| transform: [ | |
| "translate(" + [tx, ty] + ")", | |
| "scale(" + e.k + ")" | |
| ].join(" ") | |
| }); | |
| return zoomable_layer.selectAll('.label > text').attrs({ | |
| transform: "scale(" + (1 / d3.event.transform.k) + ")" | |
| }); | |
| }); | |
| svg.call(zoom); | |
| /*window.addEventListener('resize', resize);*/ | |
| projection = d3.geoPierceQuincuncial() // N.B. geoPeirceQuincuncial in 1.1+ | |
| .scale(223.5) | |
| .translate([width / 2, height / 2]) | |
| .precision(0.1); | |
| path = d3.geoPath(projection); | |
| graticule = d3.geoGraticule(); | |
| /*svg.append('defs').append('path').datum(graticule.outline()).attrs({ | |
| id: 'sphere', | |
| d: path | |
| });*/ | |
| zoomable_layer.append("path") | |
| .datum({type: "Sphere"}) | |
| .attr("id", "sphere") | |
| .attr("d", path); | |
| zoomable_layer.append('use').attrs({ | |
| "class": 'sphere_stroke', | |
| 'xlink:href': '#sphere' | |
| }); | |
| zoomable_layer.append('use').attrs({ | |
| "class": 'sphere_fill', | |
| 'xlink:href': '#sphere' | |
| }); | |
| contents = zoomable_layer.append('g'); | |
| zoomable_layer.append('path').datum(graticule).attrs({ | |
| "class": 'graticule', | |
| d: path | |
| }); | |
| d3.json("https://raw.githubusercontent.com/zcreativelabs/react-simple-maps/master/topojson-maps/world-50m.json", function(error, geo_data) { | |
| if (error) throw error; | |
| var countries, countries_data, en_labels, labels; | |
| geo_data.objects.ne_50m_admin_0_countries.geometries.sort(function(a,b){ | |
| return a.properties["POP_EST"] - b.properties["POP_EST"]; | |
| }); | |
| console.log(geo_data); | |
| countries_data = topojson.feature(geo_data, geo_data.objects.ne_50m_admin_0_countries).features; | |
| countries = contents.selectAll('.country').data(countries_data); | |
| countries.enter().append('path').attrs({ | |
| "class": 'country', | |
| d: path | |
| }).append("svg:title").text(function(a) { | |
| return a.properties.NAME_LONG; | |
| }); | |
| labels = contents.selectAll('.label').data(countries_data); | |
| en_labels = labels.enter().append('g').attrs({ | |
| "class": 'label', | |
| transform: function(d) { | |
| var ref, x, y; | |
| ref = projection(d3.geoCentroid(d)), x = ref[0], y = ref[1]; | |
| return "translate(" + x + "," + y + ")"; | |
| } | |
| }); | |
| en_labels.classed('no_iso_code', function(d) { | |
| return d.properties.ISO_A2 === '-99'; | |
| }); | |
| return en_labels.append('text').text(function(d) { | |
| return d.properties.NAME_LONG; | |
| }); | |
| }); | |
| }).call(this); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| svg { | |
| background: white; | |
| border: 1px solid black; | |
| width: 1000px; | |
| height: 1000px; | |
| } | |
| .sphere_stroke { | |
| fill: none; | |
| stroke: black; | |
| stroke-width: 0px; | |
| vector-effect: non-scaling-stroke; | |
| } | |
| .sphere_fill { | |
| fill: #336cc7; | |
| } | |
| .graticule { | |
| fill: none; | |
| stroke: #777; | |
| stroke-width: 0.5px; | |
| stroke-opacity: 0.5; | |
| vector-effect: non-scaling-stroke; | |
| pointer-events: none; | |
| } | |
| .country { | |
| fill: #DDD; | |
| stroke: #c1c1c1; | |
| stroke-width: 0.5; | |
| vector-effect: non-scaling-stroke; | |
| } | |
| .country:hover { | |
| fill: #CCC; | |
| } | |
| .label { | |
| font-family: sans-serif; | |
| font-size: 12.5px; | |
| pointer-events: none; | |
| text-anchor: middle; | |
| } | |
| .label.no_iso_code { | |
| font-style: italic; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment