Questions tagged [d3]

D3.js is a small, open-source JavaScript visualization library for manipulating HTML and SVG documents based on data

Filter by
Sorted by
Tagged with
1
vote
0answers
28 views

Use a WFS-T layer in d3.js without adding a background map?

I am currently working on a d3.js project and would like to include a WFS-T layer to my SVG map to display and update location data stored in a PostGIS database. I know that I need to transform my ...
1
vote
1answer
40 views

Scale and fit GeoJSON to the SVG map with d3-geo

I am trying to follow the excellent tutorial by Mike Bostock on medium with my own data. Instead of a GeoJSON of California, I am trying to fit a small parcel somewhere in Norway to the map. My ...
0
votes
2answers
140 views

Mapbox GL JS - Trouble Loading Data to Create Layer

I am new to Mapbox GL JS and working with starter code from "Create a Time Slider" below: https://docs.mapbox.com/mapbox-gl-js/example/timeline-animation/ To pull in the data, the code uses d3.json ...
0
votes
2answers
192 views

Zoom to points using d3SvgOverlay

I have an application where a csv file is filtered and the filtered data is displayed on a leaflet map. What I would like to happen is for the map to zoom in to the points. I have tried using ...
5
votes
2answers
78 views

Removing space between objects of a shapefile

I'm trying to visualise the results french presidential elections of 2017 by departements. I found a shapefile of France with departements here When I try to export this file in TopoJSON format from ...
1
vote
0answers
51 views

Contours generated in Leaflet losing coordinates?

I am attempting to use a JavaScript library to generate contours in a leaflet map from a point layer on the map. I have tried this approach with d3 and turf and am getting the same issue where the ...
8
votes
3answers
676 views

Remove outlying territories/islands from Europe map

Using a shapefile from Natural earth, I am trying create a map of Europe with d3-geo’s new command-line interface. The following: shp2json -n ne_50m_admin_0_countries/ne_50m_admin_0_countries.shp \ | ...
1
vote
0answers
30 views

GeoJSON looks different using D3 [closed]

I'm trying to use D3 to draw a GeoJSON map from Washington State Open Data. On their website, and when using a tool like GeoJSONLint, the map looks like it renders correctly. When I try to use D3, it ...
1
vote
0answers
222 views

Making bar charts with values in popup windows in web map using QGIS?

I'm an amateur of QGIS. I've set up a map with a bar chart overlay. However, there are some charts overlaying each other. So I would like to create a map which when people click / however an area on ...
0
votes
1answer
419 views

Drawing line overlays and centering map [closed]

I have a dataset with start and end points of lines. Columns in the table are unique_line_id, line_start_point_lat, line_start_point_lon, line_end_point_lat, line_end_point_lon I need to use this in ...
0
votes
1answer
63 views

Replicating standard D3.js Conical US Albers projection in QGIS?

Oftentimes, when I see maps of the US rendered online, they use a custom version of the Albers projection, like so: Alaska and Hawaii are off to the side, nicely arranged. I'd like to replicate this ...
1
vote
0answers
226 views

Leaflet load CSV file [closed]

I want my CSV file load on the map, and catch my current location at the same time. Now, I can't load CSV successfully. This is my code: <html lang="en-US" xmlns="http://www.w3.org/1999/xhtml">...
0
votes
1answer
140 views

Adjusting Alaska and Hawai in d3

I am quite new to d3 and I am trying to make a choropleth map of the US. But my point is how to adjust Alaska and Hawaii in the final map. In the past I used to do this in Illustrator, but I am not ...
0
votes
0answers
288 views

Custom SVG world map usable for react-simple-maps (topojson, d3-geo)?

A client has supplied a "custom" SVG containing a very detailed world map that includes id's for all countries. I'm not sure how "custom" it is. Is it at all possible to convert it to topojson, which ...
0
votes
0answers
12 views

Moving Chart Title

I made a map(Histogram) in d3. Have everything working on the map, but I cant change the position of the chart's title. I want to have the title it in the middle of the chart frame or move it a bit up ...
0
votes
0answers
69 views

Matching projections between a GeoTIFF and a shapefile

I'm trying to make a very simple map of North Korea using SRTM elevation data from EarthExplorer, which starts life as 1-second GeoTIFF tiles, and a basic border shapefile from NaturalEarth. ...
1
vote
1answer
220 views

Building choropleth map using D3.js? [closed]

I want to build a Choropleth map, from a specific region (in my case Portugal) with D3.JS and while searching for tutorials and support, I have found this website. Following the procedure, I have ...
2
votes
1answer
566 views

Drawing a GeoJSON with D3js on OpenLayers 4

The goal is to interact with the DOM based on users input using JavaScript. I have now considered using D3js (v5) to draw the points. Without the base vector layers (loaded as a geojson) and ...
1
vote
1answer
995 views

Get data from WFS and present in using d3js - correct projection

I'm trying to get data for map of Poland. I found WFS service that provides GML files. It is located under: http://sdi.geoportal.gov.pl/wfs_prg/wfservice.aspx?request=GetCapabilities&service=WFS ...
2
votes
1answer
617 views

D3 Map + TopoJSON (mapshaper) showing empty

Just started learn D3.js and TopoJSON. I had shapefile files and converted using mapshaper to TopoJSON, but when I tried on my local server my map showing empty page without any errors. I don't have ...
0
votes
1answer
246 views

Difficulty rendering a multipolygon from a GeoJSON using JQuery

I'm pulling polygon data (neighborhood boundaries in San Francisco) from an API on https://data.sfgov.org/Geographic-Locations-and-Boundaries/SF-Find-Neighborhoods/pty2-tcw4/data. While I made sure on ...
4
votes
3answers
6k views

Determining intersection between GeoJSON feature and given coordinates?

I'm overlaying a Leaflet map with features of GeoJSON, fetched with D3 and added as SVG elements to the DOM. My GeoJSON contains too many features to render at once, so my goal is to add to the map ...
1
vote
0answers
323 views

Show tooltip on the D3 map

I've created a basic map using D3 with countries GeoJSON. Here is the demo. Now when the user clicks on any coordinate on the map, I am showing a weather info within a tooltip with weather icon as a ...
1
vote
1answer
545 views

Choropleth map from voronoi map from a set of coordinates (d3+leaflet)

I have a csv file with a set of coordinates with the following structure: id,name,latitude,longitude (24 values). Those 24 points represent coordinates in a city. I would like to get a voronoi map ...
1
vote
1answer
3k views

GeoJSON and D3.js multipolygon

I have this geometric shapefile, so no map of a city. I store the two Shapefiles in a GIS database as a geometric form. Now, I want to visualize the GeoJSON data. I created the GeoJSON data first ...
0
votes
1answer
365 views

Project UTM Coordinates to three.js Coordinates With D3

I've been working on an application where I am building a 3d terrain, using three.js. The part I have working so far is building the 3d terrain mesh from standard 30m elevation data, and then draping ...
1
vote
0answers
187 views

Making a choropleth in D3 by intersecting a MultiPolygon and a Point GeoJSON

I am trying to generate a choropleth map showing crimes per neighborhoods: I have a layer showing the neighborhood boundaries of the city of San Francisco, and point data showing incidences of crime ...
2
votes
2answers
298 views

Natural earth tiles are not detailed enough

I am new to GIS, but I have been using the following set of tiles in some of my D3 applications: .tiles.mapbox.com/v3/mapbox.natural-earth-2/ The issue with these tiles is that they are not too '...
6
votes
1answer
5k views

D3: center a map feature using correct latitude and longitude, without rotation?

The following is a map of Chicago which I've created in D3.js, and the JS code to render it. I had a very hard time centering Chicago within my viewfinder (the white box). After much trial and error,...
0
votes
1answer
317 views

How to split Indian states and provinces from world states and provinces shapefile?

I am following Mike Bostock's D3 Lets make a map to create GeoJSON for states and provinces of a country. I got a shapefile for states and provinces from Natural Earth. I am trying to extract info for ...
1
vote
1answer
537 views

Add multiple strokes to Leaflet geojson feature path

Wondering if it's possible to add multiple strokes to a polygon or line feature (the same thing could apply to multiple fills for polygons too). The leaflet documentation on the L.Path style options ...
1
vote
4answers
8k views

How to move and open shapefiles with ogr2ogr?

I'm a total newb following along the d3 map tutorial. at this line: ogr2ogr \ -f GeoJSON \ -where "adm0_a3 IN ('GBR', 'IRL')" \ subunits.json \ ne_10m_admin_0_map_subunits.shp I get ...
2
votes
1answer
241 views

D3 Projection outputs Map wrong

I made a map with qgis. Unfortunately when I want to render the map with d3 map renderer, it shows weird structures. The map is in "1:116'622'714" scale. Could this be a problem? The website should ...
1
vote
0answers
268 views

Leaflet+D3 how to show multiple layers as plane with markers on it

I'm trying to draw map which looks similar to 3 Dimensional. It has 3 layers bottom most is base layer which is OSM map layer. 2 and 3 is svg layer. as shown in below diagram, I'm able to tilt/rotate ...
10
votes
1answer
1k views

Any Examples of D3.brush() used with Leaflet?

I have a leaflet map that I have placed an SVG "on top of" using the leaflet overlay pane. I want to add a D3 brush to the overlay pane that will then update a separate chart. I've looked around for ...
1
vote
0answers
402 views

d3.js rectangle feature plotted as arc in Mollweide projection [closed]

I am trying to plot a rectangle using d3.js under the Mollweide projection. However, when I run the following script the rectangle appears as an arc or curved rectangle. I find the bahaviour somewhat ...
2
votes
1answer
166 views

Tangram YAML, use external function?

I would like to use some functions from D3 in my Tangram scene.yaml, but I'm not finding anything about it in the documentation. I've tried referencing D3 in the YAML, like so: layers: give: ...
1
vote
0answers
619 views

OpenLayers 2 and D3.js:Set the right size of the SVG overlay

I am following an example of D3.js used in conjunction with OpenLayers 2 to display GeoJSON on a map. http://bl.ocks.org/mbertrand/raw/5218300/quakes.html In this example, the author set the bounds ...
1
vote
1answer
416 views

d3 map rendering sideways

I have a simple d3 map displaying data from Canada in topojson format, but the entire map is rendering sideways. I have been playing with the rotation parameters but I can't seem to get it just right....
4
votes
1answer
4k views

Conversion from Shapefile to TopoJSON format results in incorrect map when rendered using d3js

I am trying to build a map of Canada showing FSA boundaries using d3js. I got shape data from Statistics Canada [http://www12.statcan.gc.ca/census-recensement/2011/geo/bound-limit/bound-limit-2011-eng....
3
votes
1answer
410 views

How to Merge polygons while zooming out using leaflet?

I have created a map using leaflet, with polygons. Each polygon has its proper color(style) based on the number of inhabitants. please see the following example: Map I want to merge polygons as I ...
12
votes
5answers
12k views

Methods to Convert .SVG File to GeoJSON

Question How do I convert an SVG file to GeoJSON format? Desired Outcome: I want to make a choropleth map using something like D3.js, or any of the other libraries out there. Challenge: I have an ...
4
votes
1answer
895 views

d3 + Leaflet apply class value from geojson data

I have a geojson file that I'm able to draw just fine with D3 + Leaflet. I'm having trouble applying a class to the svg objects with a value from the geojson file. Each feature in the geojson file has ...
1
vote
1answer
921 views

ogr2ogr problem mapping shapefile to geojson ETRS89 / Poland CS92

I'm trying to convert official boundaries of administrative regions of Poland from official governmental site (codgik.gov.pl). I want to use those data because they are official ones, and set contains ...
2
votes
1answer
831 views

d3.js Projection for Washington DC area

I'm making a small thematic map of the Washington DC area using d3.js. Everything I've tried "tilts" the square of DC. Is there a d3 projection that will put DC at the right angle? https://github....
4
votes
1answer
764 views

GeoJSON maps created with D3 appear flipped/inverted

I am learning how to convert ESRI shapefiles to GeoJSON and then work with it in D3. I am following Mike Bostock's tutorial on Medium (https://medium.com/@mbostock/command-line-cartography-part-1-...
2
votes
0answers
161 views

Choropleth map in html

I am making a choropleth map of population estimate by counties in United States. I am almost done but the problem is a few counties have population count in seven figures and they are the ones that ...
1
vote
1answer
684 views

Good projections for Middle East and North Africa in D3?

I'm a data visualizer who's mostly worked with US data, and I'm familiar with AlbersUSA project. However, I'm going to be doing a series of graphics on the Middle East. Any suggestions or interesting ...
3
votes
0answers
701 views

Draw d3 svg circles on openlayers 3 maps

I am new to openlayers and d3. I tried following example http://openlayers.org/en/master/examples/d3.html I see we need to add d3 features on a canvas and project it on an openlayers Vector layer. ...
3
votes
1answer
529 views

Esri Cedar.js (based on D3.js)

Does anyone have experience with Esri's js charting library called cedar.js? It is apparently based on D3. I may be using it for work, but wondering if there are any pitfalls I should know about vs ...