Plotting json data to d3js graph's axis

Question

Here is a sample json data which i had successfully plotted as x axis and y axis of d3js graph.

    var data = [
    {
      "count": "202",
      "year": "1590"
    },
    {
      "count": "215",
      "year": "1592"
    }, 
    {
      "count": "179",
      "year": "1593"
    }
];

Now my issue is how to plot the below json:

    var data =  {
  "count": [202,215,179],
  "year":[1590,1592,1593]
};

Here is the code of how i have plotted the axis for the former json data

    /******Sample Json data i'm trying to plot********/
var data1 =  {
  "count": [202,215,179],
  "year":[1590,1592,1593]
};

var data = [
    {
      "count": "202",
      "year": "1590"
    },
    {
      "count": "215",
      "year": "1592"
    }, 
    {
      "count": "179",
      "year": "1593"
    }
];

/*************************************************/


/*******************Real Stuff starts here*******************/
var vis = d3.select("#visualisation"),
  WIDTH = 600,
  HEIGHT = 400,
  MARGINS = {
    top: 20,
    right: 20,
    bottom: 20,
    left: 50
  },
  xRange = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([d3.min(data, function (d) {
      return (parseInt(d.year, 10) - 5);
    }),
    d3.max(data, function (d) {
      return parseInt(d.year, 10);
    })]),
  yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([d3.min(data, function (d) {
      return (parseInt(d.count, 10) - 5);
    }),
    d3.max(data, function (d) {
      return parseInt(d.count, 10);
    })]),


  xAxis = d3.svg.axis() // generate an axis
       .scale(xRange) // set the range of the axis
       .tickSize(5) // height of the ticks
       .tickSubdivide(true), // display ticks between text labels
  yAxis = d3.svg.axis() // generate an axis
       .scale(yRange) // set the range of the axis
       .tickSize(5) // width of the ticks
       .orient("left") // have the text labels on the left hand side
       .tickSubdivide(true); // display ticks between text labels 

function init() {
  vis.append("svg:g") // add a container for the axis
  .attr("class", "x axis") // add some classes so we can style it
  .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")") // move it into position
  .call(xAxis); // finally, add the axis to the visualisation

  vis.append("svg:g")
    .attr("class", "y axis")
    .attr("transform", "translate(" + (MARGINS.left) + ",0)")
    .call(yAxis);
}
init();

And here is a link to the jsfiddle demo

@NitishKumar are you able to see the x axis and y axis with markings?? — iJade
– iJade, Commented Oct 4, 2013 at 7:16

Nitish Kumar · Accepted Answer · 2013-10-04 07:28:25Z

1

Update xRange and yRange

   xRange = d3.scale.linear()
               .range([MARGINS.left, WIDTH - MARGINS.right])
               .domain([d3.min(data.year, function (d) {
                        return (parseInt(d, 10) - 5);
                }),

           d3.max(data.year, function (d) {
               return parseInt(d, 10);
          })]),

   yRange = d3.scale.linear()
              .range([HEIGHT - MARGINS.top, MARGINS.bottom])
              .domain([d3.min(data.count, function (d) {
                       return (parseInt(d, 10) - 5);
              }),

            d3.max(data.count, function (d) {
               return parseInt(d, 10);
            })]),

SEE DEMO

answered Oct 4, 2013 at 7:28

Nitish Kumar

4,8503 gold badges22 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

iJade Over a year ago

ahh...i tried this before posting on SO, but i missed the d3.max portion.Anywaz thnks buddy...;)

Collectives™ on Stack Overflow

Plotting json data to d3js graph's axis

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related