NVD3 question - mapping data with JSON

[Ian Wren]

I probably shouldn't be asking this here, as it pertains to Bob Monteverde's project, NVD3, which are re-usable charts based on D3, but I'm not sure where else to ask.

I have a chart, found here: http://bl.ocks.org/3036633 that has a lot of data embedded as a variable, which is really slowing down the chart. I'm just trying to figure out how to call this as JSON but having a hard time, as I can't figure out how to use the nest or map function to create separate series for each desired line. If anyone has used NVD3 with JSON data or could point me in the right direction I'd really appreciate it. Thanks.

[Bob Monteverde]

Hey, sorry, I haven;t been on this forum in a bit (and don;t have one set up for nvd3).

Are you still having issues with nesting?  The data format my charts expect is very easy to get to using d3's nest.  https://github.com/mbostock/d3/wiki/Arrays#wiki-d3_nest

If you'd like, give me a flat data example (an array of points with whatever data is relevant in each point) and I'll show you how to nest to correctly.

Bob

[Stuti]

Hello

 I have some data in a csv that I  want parsed into a JSON object. Ill be really grateful if you could show me how to do it.

     X                   Y                Segment_ID

    4.1                11.5               6

4.35511	12.41918	6
88.03001	27.57273	17
88.3183	27.65302	17
88.58899	27.45653	17
88.77894	27.43749	17

Every unique segment id has a set of x,y coordinates which I want to connect by lines. 

I am expecting  the result to be something like

{[{segment_id : 6,    points:[{x: , y: },{x:, y:},{x:,y:}]},{}......]}

-S

Thanks in advance

[Kai Chang]

S, check out:

https://github.com/mbostock/d3/wiki/CSV

Also the "Loading Data From a File" section on this page:

http://christopheviau.com/d3_tutorial/

[Ian Wren]

Hi Bob,

Sorry for not getting back sooner - but yes, I did end up figuring this out: 

http://baykeeper.org/data_viz/official-sea-level-rise-projection

http://bl.ocks.org/3036633

I'm forgetting why I gave up on using an external JSON file and instead embedded the data, but if you have an example of that it might be helpful for working with larger data sets.

And thank you for all your work on this library - it helps a lot of us just getting into D3 and js-based visualizations 

Cheers,

Ian

On Tuesday, July 31, 2012 2:06:22 PM UTC-7, Bob Monteverde wrote:

[Bob Monteverde]

Umm, dealing with an external JSON file as opposed to embedded data should be almost trivial.

    d3.json('filename', function(data) {

      nv.addGraph(function() {

        var chart = nv.models.lineChart(); //or whatever model with settings chained on

        // ......

        d3.select('#chartSVGcontainerID')

            .datum(data)

            .call(chart);

        return chart;

      });

    });

There should be a few examples of this, I'm not sure where there would be confusion.

Bob

[Ian Wren]

Hi Bob,

Thanks for the reply. I remembered that my problem was using the external file with Drupal, rather than using the excellent examples you've provided. Sorry for the trouble.

Ian

[Ian Wren]

Hi Bob,

Sorry to bother you, but I was wondering if there is a way to assign custom tooltips for your linePlusBarChart. I can edit the global tooltip, e.g.:

nv.addGraph(function() {

    var testdata = exampleData(),

        chart = nv.models.linePlusBarChart()

          .tooltipContent(function(key, x, y, e, graph) {

        return '<h3>' + key + '</h3>' +

               '<p>' +  y + ' this is a test ' + x + '</p>'

      });

But I'm not sure if there's a straight forward way to create separate tooltips for the bar and line. Thanks for all your efforts on this.

 

On Tuesday, August 21, 2012 6:19:02 AM UTC-7, Bob Monteverde wrote: