How can I make data available via URL in ghost to use with d3.json

#1

Hello I would like to put a d3.js map on a static page on my ghost blog. I have built my own custom theme. Routing to static pages such as page-about, page-contact via cyclingthecommons.org/about/ and cyclingthecommons.org/contact/ works great and was easy enough to set up following the documentation!

The problem I have d3.json() fetch module only takes a URL to retrieve the geo json data. I don’t know how I need to modify routes.yaml to make the geojson file available via the URL or if I should be doing this entirely differently. Right now I have:

The file located here:
/content/themes/biketheweb/data/custom.geo.json

my js code is
d3.json(
“/data/custom.geo.json”, function(json) {
//Bind data and create one path per GeoJSON feature
countriesGroup = svg.append(“g”).attr(“id”, “map”);

the error I get is:
GET http://localhost:2368/data/custom.geo.json/ 404 (Not Found)
my routes.yaml file is
routes:
/:
controller: channel
data: page.home
template:
- home
collections:
/blog/:
permalink: /blog/{slug}/
template:
- index

taxonomies:
  tag: /tag/{slug}/
  author: /author/{slug}/

My dev ghost version is:
Ghost-CLI version: 1.9.9
Ghost version: 2.2.0 (at ~/blog/dev)

Production versions is:
Ghost-CLI version: 1.9.9
Ghost version: 2.11.1 (at /var/www/ghost)

My browser is Chrome and I am viewing the js error via the console in developer tools.

My production stack is a digital ocean droplet configured as with ubuntu 18.04 etc. following the Ghost instructions.

I’ve read through the documentation but nothing seemed to really address this issue. However I can’t imagine I am the only person who would like put d3.js visualizations on their blog using their own data.

Thank you!

#2

Hey there :wave:

I can’t find the forum thread, but Ghost doesn’t send json files from a theme for security.

Your best bet for this is to use the content-type feature in Dynamic Routing to “render” a template (which is really a json file). Here’s what your routes might look like:

routes:
 /:
   controller: channel
   data: page.home
   template: home
 /custom.geo.json:
    template: geo
    content-type: json
collections:
 /blog/:
   permalink: /blog/{slug}/
   template: index

Just rename data/custom.geo.json to geo.hbs

I haven’t tested this locally, so there might be a bug or two :shushing_face:

1 Like
#3

Yes that worked thank you so much!!! It never occurred to me to render the json file as a template. My route.yaml ended up as

routes:
/:
controller: channel
data: page.home
template:
- home
/data/geo/:
template:
- geo
content-type: json
collections:
/blog/:
permalink: /blog/{slug}/
template:
- index

taxonomies:
  tag: /tag/{slug}/
  author: /author/{slug}/

Once again, I am ever so grateful!

1 Like
closed #4

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.