Skip to main content

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
1 answer
162 views

Increasing size of chart inside pop-up window - Leaflet - d3.js?

I have created a chart inside a pop-up window for a marker on leaflet javascript. I am new to html, css, and javascript. I have also used d3js for the plot. The problem is that I cannot increase the ...
Ilias Machairas's user avatar
0 votes
0 answers
71 views

Compress GeoJSON by aliasing

I just come to know the GeoJSON files. I need to load the files as fast as possible to reduce render time in browser. So I want to reduce the file sizes by aliasing for example turning 'geometry' to '...
sicheng mao's user avatar
1 vote
1 answer
184 views

Using d3-windbarb (npm) in icon style of VectorLayer in OpenLayers

I was trying to have a vector layer(from OL) above Open Street Map (OSM()). I wanted a wind barb layer, for which I used d3-wind-barb from npm. I couldn't use it as style though it throws HTML objects ...
Aayush Subedi's user avatar
1 vote
1 answer
502 views

Converting points from British National Grid/OSGB to lat-long in client side

I'm working on a front-end application that needs points in pixels. The data array object from API calls returns GIS values as British National Grid/OSGB 1936 CRS (coordinate reference system) of ...
simpywatch's user avatar
1 vote
0 answers
46 views

Move cells across cell groups in a grid

Let's say there are a bunch of cell groups in a matrix/grid of n number of cells. What's the best way to move cells across cell groups? The use case: I want to convert Grid 1 to Grid 2. Notice that ...
addu390's user avatar
  • 11
0 votes
0 answers
463 views

Drawing a Custom Map Projection in D3 using Observable

I am trying to create a custom map projections in D3 using Observable, following the approach given in the d3-geo Docs. Essentially, you pass a function that takes in (lambda, phi) and returns [x, y]. ...
jonnyhuck's user avatar
  • 447
0 votes
1 answer
184 views

Stream GPS coordinates using D3 and Mapbox

I’m currently working on a project to stream GeoJSON data using D3 and Mapbox. But, I wasn’t able to plot my data based on their types. Basically, I have three different types of GPS data, when using ...
OrangeGoGo's user avatar
2 votes
1 answer
819 views

Why d3.js works only with GeoJSON violating right-hand rule?

Why d3.js works only with GeoJSON that is left-hand formatted? { "type": "FeatureCollection", "features": [ { "type": "Feature", ...
reducing activity's user avatar
0 votes
1 answer
388 views

How to programmatically create a bivariate choropleth in d3.js?

Question and Situation I'm using d3.js to visualize some data on a map. The user clicks on one checkbox and all path elements get filled according to a color-preset, which all works fine. Now what we ...
moeses's user avatar
  • 101
0 votes
1 answer
314 views

Smoothing isobar d3 js from GeoTIFF

I'm using d3.js to display isobars from GeoTIFF in Leaflet. The problem I would like to solve is the smoothing of those isolines. Here is my code: var xhr = new XMLHttpRequest(); xhr.open('GET', `....
Davide Raro's user avatar
2 votes
2 answers
2k views

Putting different id in different paths on my Leaflet map

I have many polygons to display on map like this: L.geoJSON(polygon, { style: function (feature) { return { stroke: true, fillColor: feature.color, ...
Rayssa Rocha's user avatar
1 vote
1 answer
2k views

Changing style of only selected polygons in L.geoJSON layer?

So, I'm going to show a lot of polygons in my Leaflet map but I need an id for each polygon, the URL comes in a path like this. In fact I wouldn't even need an id, if I could somehow get some ...
Rayssa Rocha's user avatar
1 vote
1 answer
2k views

Transforming custom coordinates to pixel in vector layer in OpenLayers 6

I have a XYZ layer for tiles(generated from an 1065 * 950 Image using gdal2tiles), and a vector layer for features, I want to use my own pixel transformation to set the coordinates of the features. ...
Chi's user avatar
  • 111
1 vote
1 answer
2k views

Leaflet map with D3.js dynamic graph from geojson data

I build a Leaflet map and display data from a GeoJSON. I add a Leaflet-Sidebar to my map, and embed the info control inside this sidebar. When a user hovering polygons on the map, raw values are ...
GeoGyro's user avatar
  • 1,656
1 vote
1 answer
310 views

How to show Puerto Rico in "albersUsa" projection in Vega-Lite or Vega?

I have a shapefile that has all the US counties along with Puerto Rico and I want to visualize them in "albersUsa" projection using Vega or Vega-Lite. Problem is that in other projections, ...
jar's user avatar
  • 173
0 votes
0 answers
210 views

Can't correctly display GeoJSON on D3

I'm trying to display some GeoJSON files with D3. The code is pretty simple: import europe_data from "./data/europe.json"; import areas_data from "./data/LV.json"; /**********************************...
epilurzu's user avatar
1 vote
0 answers
2k views

D3.json doesn't fetch data but no error [closed]

I am trying to load a geojson file. I get an error (404) if the file doesn't exist but nothing happens if the file exists. I have tried different versions of D3 ... v3, v4, v5 console.log("hello"); //...
PatriciaW's user avatar
  • 111
1 vote
0 answers
1k views

Add new values to properties of a GeoJSON by matching the name on an array with objects

I have an array of objects with the following structure: population = [{county: "Alachua", population: 269956} {county: "Baker", population: 28355} {county: "Bay", population: 185287}...
Alonsoag's user avatar
1 vote
1 answer
670 views

Combine D3 node and HTML

I followed this example of putting a d3 graph in a leaflet popup. The code returns with div.node(). What exactly is a node? I would like the Leaflet Popup To display this custom HTML, and then have ...
ANimator120's user avatar
1 vote
0 answers
413 views

Drawing the Tropics on D3.js geojson using Linestring

I am using the geoMercator projection on D3.js and want to draw the Tropic of Cancer and Tropic of Capricorn on my map. Right now I added the Equator using plot.append("path") .datum({type: "...
ccsv's user avatar
  • 133
3 votes
1 answer
2k views

How to create dashboard combining maps and charts open source way?

As far as I am aware there is no open source user interface (framework) which would allow easily design website as combination of interactive maps and charts like ArcGIS dashboard tool does. And you ...
Miro's user avatar
  • 9,764
1 vote
0 answers
104 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 ...
JoeBe's user avatar
  • 1,230
1 vote
1 answer
1k 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 ...
DOMINUS MIHI ADIUTOR's user avatar
1 vote
0 answers
523 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 ...
GIS87's user avatar
  • 89
5 votes
2 answers
235 views

Removing space between objects of a shapefile [closed]

I'm trying to visualise the results french presidential elections of 2017 by departments (meaning states). I found a shapefile of France with departments here When I try to export this file in ...
Atharva Tidke's user avatar
1 vote
0 answers
1k 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">...
wei shiuan's user avatar
0 votes
1 answer
377 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 ...
scrollex's user avatar
  • 229
0 votes
0 answers
748 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 ...
riccardolardi's user avatar
1 vote
2 answers
305 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 ...
Mike P's user avatar
  • 11
1 vote
2 answers
431 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 ...
bmancell's user avatar
0 votes
1 answer
973 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 ...
Abdullah's user avatar
2 votes
1 answer
1k 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 ...
b_jugger's user avatar
  • 103
2 votes
0 answers
845 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 ...
Saurabh Palatkar's user avatar
2 votes
1 answer
1k 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 ...
Daniel F's user avatar
2 votes
0 answers
359 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 ...
HP-Nunes's user avatar
0 votes
1 answer
540 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 ...
HP-Nunes's user avatar
2 votes
2 answers
880 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 '...
Noobster's user avatar
  • 121
1 vote
1 answer
985 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 ...
user890's user avatar
  • 5,733
2 votes
1 answer
1k 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 ...
da_root's user avatar
  • 169
1 vote
0 answers
367 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 ...
Lap Pan Chong's user avatar
1 vote
0 answers
386 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 ...
Karthik Prasad's user avatar
2 votes
1 answer
756 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 ...
Michael Ziegler's user avatar
1 vote
0 answers
551 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 ...
spyrostheodoridis's user avatar
1 vote
1 answer
1k 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....
wfgeo's user avatar
  • 3,598
3 votes
1 answer
1k 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 ...
Zak's user avatar
  • 313
2 votes
1 answer
205 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: ...
Iamlukesky's user avatar
2 votes
0 answers
200 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 ...
Syed Taqi's user avatar
3 votes
1 answer
675 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 ...
Waztrop Multax's user avatar
1 vote
0 answers
237 views

GeoJSON or TopoJSON outline of Milky Way [closed]

I'm looking for a GeoJSON or TopoJSON file with the Milky Way outline on the Sky sphere, for an astronomical almanac web application I'm building with the D3js JavaScript library. I have searched in ...
Kromir's user avatar
  • 11
2 votes
0 answers
11k views

"Map container not found"error with dc.js charts

I am trying to show marker cluster on dc.js charts ,I have around 30,346 data in json file i an stuck with one error map container not found <script> var map = L.map( 'map', { center: [20....
anushri sharma's user avatar