Using External json file for creating bubble chart using d3js

Question

I am novice in D3js and currently trying to use this link d3js bubble Animated for creating bubble charts

But in this Link they have used data which is written in the script only . 
What i want is to use an external json File . 

i tried replacing this Code` 
data: {
      items: [
        {text: "Java", count: "236"},
        {text: ".Net", count: "382"},
        {text: "Php", count: "170"},
        {text: "Ruby", count: "123"},
        {text: "D", count: "12"},
        {text: "Python", count: "170"},
        {text: "C/C++", count: "382"},
        {text: "Pascal", count: "10"},
        {text: "Something", count: "170"},
      ],`

with 

      var data=  d3.json("../AnimateBubble.json", function() {

The Full Code goes here

BubbleAnimated.js

$(document).ready(function() {
  var bubbleChart = new d3.svg.BubbleChart({
    supportResponsive: true,
    //container: => use @default
    size: 600,
    //viewBoxSize: => use @default
    innerRadius: 600 / 3.5,
    //outerRadius: => use @default
    radiusMin: 50,
    //radiusMax: use @default
    //intersectDelta: use @default
    //intersectInc: use @default
    //circleColor: use @default
    var data = d3.json("../AnimateBubble.json", function() {

      plugins: [{
        name: "central-click",
        options: {
          text: "(See more detail)",
          style: {
            "font-size": "12px",
            "font-style": "italic",
            "font-family": "Source Sans Pro, sans-serif",
            //"font-weight": "700",
            "text-anchor": "middle",
            "fill": "white"
          },
          attr: {
            dy: "65px"
          },
          centralClick: function() {
            alert("Here is more details!!");
          }
        }
      }, {
        name: "lines",
        options: {
          format: [{ // Line #0
            textField: "count",
            classed: {
              count: true
            },
            style: {
              "font-size": "28px",
              "font-family": "Source Sans Pro, sans-serif",
              "text-anchor": "middle",
              fill: "white"
            },
            attr: {
              dy: "0px",
              x: function(d) {
                return d.cx;
              },
              y: function(d) {
                return d.cy;
              }
            }
          }, { // Line #1
            textField: "text",
            classed: {
              text: true
            },
            style: {
              "font-size": "14px",
              "font-family": "Source Sans Pro, sans-serif",
              "text-anchor": "middle",
              fill: "white"
            },
            attr: {
              dy: "20px",
              x: function(d) {
                return d.cx;
              },
              y: function(d) {
                return d.cy;
              }
            }
          }],
          centralFormat: [{ // Line #0
            style: {
              "font-size": "50px"
            },
            attr: {}
          }, { // Line #1
            style: {
              "font-size": "30px"
            },
            attr: {
              dy: "40px"
            }
          }]
        }
      }]
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.7/d3.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title>Hello Bubble Chart</title>
  <meta charset="utf-8">

  <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,600,200italic,600italic&subset=latin,vietnamese' rel='stylesheet' type='text/css'>

  <script src="http://phuonghuynh.github.io/js/bower_components/jquery/dist/jquery.min.js"></script>
  <script src="http://phuonghuynh.github.io/js/bower_components/d3/d3.min.js"></script>
  <script src="http://phuonghuynh.github.io/js/bower_components/d3-transform/src/d3-transform.js"></script>
  <script src="http://phuonghuynh.github.io/js/bower_components/cafej/src/extarray.js"></script>
  <script src="http://phuonghuynh.github.io/js/bower_components/cafej/src/misc.js"></script>
  <script src="http://phuonghuynh.github.io/js/bower_components/cafej/src/micro-observer.js"></script>
  <script src="http://phuonghuynh.github.io/js/bower_components/microplugin/src/microplugin.js"></script>
  <script src="http://phuonghuynh.github.io/js/bower_components/bubble-chart/src/bubble-chart.js"></script>
  <script src="http://phuonghuynh.github.io/js/bower_components/bubble-chart/src/plugins/central-click/central-click.js"></script>
  <script src="http://phuonghuynh.github.io/js/bower_components/bubble-chart/src/plugins/lines/lines.js"></script>
  <script src="../js/BubbleAnimated.js"></script>
  <style>
    .bubbleChart {
      min-width: 100px;
      max-width: 700px;
      height: 700px;
      margin: 0 auto;
    }
    .bubbleChart svg {
      background: #000000;
    }
  </style>
</head>

<body style="background: #000000">
  <div class="bubbleChart" />
</body>

</html>

Error

Uncaught SyntaxError: Unexpected identifier BubbleAnimated.js

* Can anyone help me solve this problem 
Bare with me if problem is silly*

so i want to use this piece of code as per the json which i have . I want to replace the data which is embedded in the code to replace it with the json file i have that too with the same data

John · Accepted Answer · 2016-03-11 10:58:53Z

Your problem is a basic misconception some have when dealing with callbacks in JavaScript for the first time. I would read up a bit on callbacks. Callbacks are commonly used as an asynchronous way of getting data at some future time. You pass in a function to the function handling the callback, and at the future time the data is ready for you it passes it into that function so you can use it.

So to get the data and use it instead of this:

var data=  d3.json("../AnimateBubble.json", function() {});
// trying to use the data here wouldn't be what you expect

You would do this:

d3.json("../AnimateBubble.json", function(data) {
  // use the data here inside this function
});
// trying to use the data out here wouldn't work as it's not in scope

So your example would look more like this:

$(document).ready(function() {
  d3.json("../AnimateBubble.json", function(data) {
    var bubbleChart = new d3.svg.BubbleChart({
      ...
      radiusMin: 50,
      //radiusMax: use @default
      //intersectDelta: use @default
      //intersectInc: use @default
      //circleColor: use @default
      data: data,
      plugins: [{
       ...
      }]
    });
  });
});

The ...'s are for brevity and you should replace them with your code that is in that spot.

EDIT:

As a note about callbacks here is a simple kind of fairly useless example (besides what it can teach) of a callback.

function timeout1000 (cb) {
    setTimeout(function () {
      if(typeof cb === "function") {
        cb(100) // this 100 is passed to the callback function's first parameter
      }
    }, 1000)
}

timeout1000(function(data) {
  console.log(data) // 100 is logged
});
// note how the function is being passed into timeout1000 as cb

JS Bin Demo

In a very similar way that d3.json method is calling the function you are sending in to it. As a side note data passed into a callback is completely dependent on how the function handling the callback (d3.json in your example and timeout1000 in this contrived example.) decides to send it.

EDIT

Here is your JSON stringified. I would just copy it like that and put it in the JSON file. You also forgot an end curly brace } on your code sample above so I added that.

{"items":[{"text":"Java","count":"236"},{"text":".Net","count":"382"},{"text":"Php","count":"170"},{"text":"Ruby","count":"123"},{"text":"D","count":"12"},{"text":"Python","count":"170"},{"text":"C/C++","count":"382"},{"text":"Pascal","count":"10"},{"text":"Something","count":"170"}]}

This is how I turned the javascript object to proper JSON. I just did it in the browser console to be quick. You just need to pass the object you want as JSON to JSON.stringify()

JSON.stringify({
      items: [
        {text: "Java", count: "236"},
        {text: ".Net", count: "382"},
        {text: "Php", count: "170"},
        {text: "Ruby", count: "123"},
        {text: "D", count: "12"},
        {text: "Python", count: "170"},
        {text: "C/C++", count: "382"},
        {text: "Pascal", count: "10"},
        {text: "Something", count: "170"},
      ]
});

I implemented your suggestion but now its like showing me an error in the cdn which i am using .The error is * Uncaught TypeError: Cannot read property 'items' of undefined* [bubble-chart.js:123 ](phuonghuynh.github.io/js/bower_components/bubble-chart/src/…)
You should probably add that to your question or start a new question. If you start a new question feel free to put a link in the comments here. I can look at it tomorrow, but it is getting late here so I am going to bed soon.
I'm guessing your trying to access data.items, and it says that. data is appearantly undefined I would make sure your json is in the proper format. I'll post the proper format for your json in an edit to my answer real quick.
ooh that would be great @john .Thanks in advance for your efforts
@PrateekGangwal okay just posted the edit, and no problem feel free to mark the green check mark once your question has been answered.

Collectives™ on Stack Overflow

Using External json file for creating bubble chart using d3js

1 Answer 1

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Linked

Related