topojson

D3.Geo performance on Pan/Zoom

时光怂恿深爱的人放手 提交于 2019-12-04 14:26:36
Last year I made a couple experiments on web maps using the Mapnik library (server-side, bitmap/tiling). Now I'm trying to replicate the same experiments using the vector, client-side approach with d3.js. I have a map (~680 shapes) where zoom is slow and pan is sluggish ( this example by Mike Bostock works well). I suspect the problem is in the zoommove callback, the selectAll("path").attr("d", path) takes too long. function zoommove() { projection.translate(d3.event.translate).scale(d3.event.scale); mapa.selectAll("path").attr("d", path); console.log('zoommove fired...'); } Questions : Am I

Error mapping US Zip codes with topojson

一笑奈何 提交于 2019-12-04 12:47:09
问题 After loading a US zipcode topojson file I am getting an error in d3.js. groupdata is undefined on this line: function bind(group, groupData) { var i, n = group.length, m = groupData.length, n0 = Math.min(n, m), updateNodes = new Array(m), enterNodes = new Array(m), exitNodes = new Array(n), node, nodeData; with an error of: Uncaught TypeError: Cannot read property 'length' of undefined My code that is calling and creating the paths is: d3.json("data/us-atlas/us-zipcodes.json", function(error

Put markers to a map generated with topoJSON and d3.js

生来就可爱ヽ(ⅴ<●) 提交于 2019-12-04 11:44:54
I am creating a map of a particular state, I have been experimenting with d3.js and topojson and have created a great map, but now I want to add a marker on the map. But now I have problems because as I add the marker have a GeoJSON file to add markers to the map generated and also the power I'd like to open a tooltip whenever a marker is pressed. My map is very similar to this: http://bl.ocks.org/mbostock/4699541 and all I want is to add markers to states through a GeoJSON file that has the geographical coordinates of the markers. So the map is currently Map expected... You can add somthing

d3: us states in topojson format filesize is way too large

爷,独闯天下 提交于 2019-12-04 09:47:50
问题 I am rendering two maps in my web page and I'm using d3 to do it. One is a world map with all the countries' borders represented. The file I'm using is a version of this: https://raw.github.com/mbostock/topojson/master/examples/world-110m.json The second map is of US states. All I need are state borders (not counties). I am using a modified version of this file: http://bl.ocks.org/mbostock/raw/4090846/us.json I've modified both files to include the name and two letter state or country code)

Adding external properties to TopoJSON file of counties

大兔子大兔子 提交于 2019-12-04 08:49:51
related question I'm trying to add external properties to a topojson file, us-counties.json (made with us-atlas using make topo/us-counties.json ). I'm working off this example . But my resulting topojson file us-counties-with-population.json has no properties at all . My call looks like: topojson --external-properties data.csv \ --id-property id_county \ --properties population=+percent_population \ -o us-counties-with-population.json \ -- us-counties.json and my data looks like ( head -n5 data.csv ): id_county,county_name,percent_population 01003,"Baldwin County, Alabama",9.71576144493279

D3.js - how to add zoom button with the default wheelmouse zoom behavior

早过忘川 提交于 2019-12-04 08:46:12
问题 So I got a worldmap with mouse zoom using the default d3.behavior.zoom() and limits to prevent the map from being dragged completely out of the page. This was a pain to get working, but it now work. My problem now is that this project also require useless zoom + and - button in the interface and I can't found example featuring both type of zoom. It's either mouse zoom only or a crappy zoom by button only. I tried simply calling zoom.scale(newScale); but it don't update anything. I seem to be

Problems converting from shape to topojson

百般思念 提交于 2019-12-04 08:31:19
问题 I'm trying to convert a shapefile of mexican municipalities into a topojson and displaying it using d3.js using this tutorial http://bost.ocks.org/mike/map/#converting-data. I've managed to convert it but I can't manage to display it. Any help will be greatly appreciated. This is my workflow so far: 1) Download and unzip the shapefile wget http://mapserver.inegi.org.mx/MGN/mgm2010v5_0a.zip unzip mgm2010v5_0a.zip 2) Converting to JSON, reprojecting to lat-long and subsetting the shapefile

How to remove a leaflet label when a topojson layer containing it is removed

荒凉一梦 提交于 2019-12-04 08:02:08
I am trying to create an interactive map that visualizes certain data. I used leaflet map and a topojson layer on it. Next, I tried to add static labels on each of the topojson polygons using leaflet label plugin i.e. the labels should always be there and should not react to mouseover event. I tried implementing bindLabel() method with noHide:true , but it didn't seem to work. Therefore, I implemented the solution provided to this question Simple label on a leaflet (geojson) polygon . I succeeded in adding static labels. Then, I have a function that removes a topojson polygon on click event. I

D3js cartography: auto-focus on geographic area ? (svg canvas, zoom scale, coordinate translation)

吃可爱长大的小学妹 提交于 2019-12-03 22:38:57
问题 I processed SRTM raster data to generate shapefiles -> geojson -> topojson so I may feed D3js with a suitable format. The result look like this (the blue area is my oversized svg canvas): Given geographic area of interest geo-borders (west border, North, East, South) and center : // India geo-frame borders in decimal ⁰ var WNES = { "W": 67.0, "N":37.5, "E": 99.0, "S": 5.0 }; // India geo-center : var latCenter = (WNES.S + WNES.N)/2, lonCenter = (WNES.W + WNES.E)/2; // HTML expected frame

D3.js canvas context fill wrong

独自空忆成欢 提交于 2019-12-03 18:13:42
问题 I make a map with D3, it's my code d3.json('https://unpkg.com/world-atlas@1/world/110m.json', (error, topology) => { if (error) throw error; let width = map.offsetWidth, height = map.offsetHeight; let projection = d3.geoMercator().scale('200').translate([width / 2, height / 1.4]); let canvas = d3.select('.map').append('canvas') .attr('width', width) .attr('height', height); let context = canvas.node().getContext('2d'), path = d3.geoPath() .context(context) .projection(projection); context