I am new to Mapbox GL JS and working with starter code from "Create a Time Slider" below:


To pull in the data, the code uses d3.json to perform a fetch (also I am new to d3....). I have imported this starter code into a Ruby on Rails app that I am creating for some basic data visualization.


My goal is to modify the starter code to suit my own data set. So I had saved down the data...


..into a local file earthquakes.geojson in the root directory of my app, assuming that the d3.json would just as easily point to my internal file instead of the Mapbox hosted URL

So the original starter code here:

d3.json('https://docs.mapbox.com/mapbox-gl-js/assets/significant-earthquakes-2015.geojson', function(err, data) {
if (err) throw err;

Is modified with a new URL for my local file:

d3.json('./earthquakes.geojson', function(err, data) {
if (err) throw err;

After making the above modification, none of the data pulls through, but I am not receiving any errors or info to point me in a new direction to investigate the issue.

Can someone give me a hint or point me in the right direction as to how to get Mapbox to connect with the data using d3?


The dot "." in a path is something used in Linux to mean the current directory. On the web you can either use "/file.json" if in the root or just "file.json" if relative to your HTML file.

It's not really using D3, just d3.json as a shorthand for XMLHttpRequest.

  • thank you. i tried various iterations of updating the file path to point to the file in the root directory of my app and it is not working. my server error says "Started GET "/earthquakes.geojson" for at 2019-04-09 07:42:47 -0500 ActionController::RoutingError (No route matches [GET] "/earthquakes.geojson")" which i do not understand because when the server runs with the mapbox url link there is no message about the controller or routing at all – Mike P Apr 9 '19 at 12:51

i figured out the answer... was a file location, directory issue. i relocated to a newly created folder in ending up with "app/public/data/earthquakes.geojson"

then in my .js the proper path updated

d3.json("/data/earthquakes.geojson", function(err, data) { if (err) throw err;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.