What are the steps to execute Mike Bostock's D3 demonstrations?

Question

What are the steps to execute Mike Bostock's D3 demonstrations?

I've been attempting to run Mike Bostock's See-Through Globe demonstration, but I encountered issues with the correct referencing of his json files when attempting to replicate it locally.

The problem stems from this particular line of code:

d3.json("/mbostock/raw/4090846/world-110m.json", function(error, topo) {
      var land = topojson.feature(topo, topo.objects.land),
          grid = graticule();
});

I have looked into this example: d3: us states in topojson format filesize is way too large

and attempted altering the URLs to various versions in order to correctly reference those files for an external user;

"https://raw.github.com/mbostock/topojson/master/examples/world-110m.json"
"https://render.github.com/mbostock/topojson/master/examples/world-110m.json"
"http://bl.ocks.org/mbostock/raw/4090846/world-110m.json"

However, access is consistently denied. Any suggestions on how to accurately specify the json file?

I have also tested some of his other examples, facing the same issue each time. Has anyone managed to successfully replicate the examples?

Issue demonstrated in a fiddle: http://jsfiddle.net/agconti/wBfLd/

Link to gallery demonstration

Link to github gist

javascript json d3.js

Answer 1

Answer №1

Due to the same origin policy, accessing remote JSON files is restricted. Trying to retrieve a JSON object using the file: protocol will also not work. The solution is to embed the JSON directly into the code or run a local server.

To set up a local web server quickly, you can use the following command:

python -m SimpleHTTPServer 8888 &

Navigate to http://localhost:8888 after executing this command from the root directory of your site.

Answer 2

Due to the same origin policy, accessing remote JSON files is restricted. Trying to retrieve a JSON object using the file: protocol will also not work. The solution is to embed the JSON directly into the code or run a local server.

To set up a local web server quickly, you can use the following command:

python -m SimpleHTTPServer 8888 &

Navigate to http://localhost:8888 after executing this command from the root directory of your site.

Answer 3

Answer №2

For direct access to the data, you can visit: http://bl.ocks.org/mbostock/raw/4090846/world-110m.json

To implement this, create a new variable in your script and assign the json data directly to it.

Here is the code snippet from your provided fiddle:

var topo = // Copy and paste data from the given link here. It will form a single large object literal.

var width = 960,
    height = 960,
    speed = -1e-2,
    start = Date.now();

var sphere = {type: "Sphere"};

var projection = d3.geo.orthographic()
    .scale(width / 2.1)
    .translate([width / 2, height / 2])
    .precision(.5);

var graticule = d3.geo.graticule();

var canvas = d3.select("body").append("canvas")
    .attr("width", width)
    .attr("height", height);

var context = canvas.node().getContext("2d");

var path = d3.geo.path()
    .projection(projection)
    .context(context);

// d3.json("https://render.github.com/mbostock/topojson/master/examples/world-110m.json", function(error, topo) {
  var land = topojson.feature(topo, topo.objects.land), // 'topo' variable now gets data from pasted content instead of fetched JSON.
      grid = graticule();

  d3.timer(function() {
    context.clearRect(0, 0, width, height);

    projection.rotate([speed * (Date.now() - start), -15]).clipAngle(90);

    context.beginPath();
    path(sphere);
    context.lineWidth = 3;
    context.strokeStyle = "#000";
    context.stroke();
    context.fillStyle = "#fff";
    context.fill();

    projection.clipAngle(180);

    context.beginPath();
    path(land);
    context.fillStyle = "#dadac4";
    context.fill();

    context.beginPath();
    path(grid);
    context.lineWidth = .5;
    context.strokeStyle = "rgba(119,119,119,.5)";
    context.stroke();

    projection.clipAngle(90);

    context.beginPath();
    path(land);
    context.fillStyle = "#737368";
    context.fill();
    context.lineWidth = .5;
    context.strokeStyle = "#000";
    context.stroke();
  });
// });

d3.select(self.frameElement).style("height", height + "px");

I intended to edit the fiddle directly but jsfiddle struggles to handle the large size of the JSON file when pasted.

Hope this information proves helpful.

Answer 4

For direct access to the data, you can visit: http://bl.ocks.org/mbostock/raw/4090846/world-110m.json

To implement this, create a new variable in your script and assign the json data directly to it.

Here is the code snippet from your provided fiddle:

var topo = // Copy and paste data from the given link here. It will form a single large object literal.

var width = 960,
    height = 960,
    speed = -1e-2,
    start = Date.now();

var sphere = {type: "Sphere"};

var projection = d3.geo.orthographic()
    .scale(width / 2.1)
    .translate([width / 2, height / 2])
    .precision(.5);

var graticule = d3.geo.graticule();

var canvas = d3.select("body").append("canvas")
    .attr("width", width)
    .attr("height", height);

var context = canvas.node().getContext("2d");

var path = d3.geo.path()
    .projection(projection)
    .context(context);

// d3.json("https://render.github.com/mbostock/topojson/master/examples/world-110m.json", function(error, topo) {
  var land = topojson.feature(topo, topo.objects.land), // 'topo' variable now gets data from pasted content instead of fetched JSON.
      grid = graticule();

  d3.timer(function() {
    context.clearRect(0, 0, width, height);

    projection.rotate([speed * (Date.now() - start), -15]).clipAngle(90);

    context.beginPath();
    path(sphere);
    context.lineWidth = 3;
    context.strokeStyle = "#000";
    context.stroke();
    context.fillStyle = "#fff";
    context.fill();

    projection.clipAngle(180);

    context.beginPath();
    path(land);
    context.fillStyle = "#dadac4";
    context.fill();

    context.beginPath();
    path(grid);
    context.lineWidth = .5;
    context.strokeStyle = "rgba(119,119,119,.5)";
    context.stroke();

    projection.clipAngle(90);

    context.beginPath();
    path(land);
    context.fillStyle = "#737368";
    context.fill();
    context.lineWidth = .5;
    context.strokeStyle = "#000";
    context.stroke();
  });
// });

d3.select(self.frameElement).style("height", height + "px");

I intended to edit the fiddle directly but jsfiddle struggles to handle the large size of the JSON file when pasted.

Hope this information proves helpful.

What are the steps to execute Mike Bostock's D3 demonstrations?

Issue demonstrated in a fiddle: http://jsfiddle.net/agconti/wBfLd/

Answer №1

Answer №2

Similar questions

What steps can be taken to design a unique CSS pop-up that triggers upon page load, limited to one appearance per visitor every week

Can Masonry.js content be perfectly centered?

cross-domain ajax response

In JavaScript, the clearTimeout function may not always return a

After receiving a data token from the server in one controller, how can I efficiently utilize that token in a different AngularJS controller?

Top method for generating a complete object using information from various APIs

Angular 2: Enhancing User Experience with Pop-up Dialogs

After clicking, revert back to the starting position

Is there a gentle approach to transferring calendar event variables in JavaScript?

Exploring a multitude of data within a hefty json log document using node.js

Implementing modifications to all HTML elements simultaneously

Can you identify the reason for the hydration issue in my next.js project?

I'm noticing that my CSS is behaving differently than expected. Despite setting position: absolute, the output is displaying as inline-block instead of block. Why is this happening

Error encountered while attempting to retrieve a JSON file from a URL due to a

Currently I am developing a Minimax Algorithm implementation for my reversi game using react.js, however I am encountering a RangeError

Update Button Colour upon clicking the Button

Automated playback of integrated Twitter video

Execute functions in a random order

React: Import default export as a string

Navigating a table while keeping headers in place at the top