A Simple Line chart with a Legend and Tooltips, in progress

[Bob Monteverde]

So, here's an example I'm working on, and considering writing a brief tutorial on how to develop it.

http://bl.ocks.org/2070123

I'm working on figuring out exactly how I want to generate reusable charts.  I'm attempting to follow what the community feels is the best practices, but there's not always 1 correct way.

Anyway, most of the functionality in the chart was implemented in the last day or two, so things may change a bit.  I just added the hover over the legend transition, which I lie, but it appears it may cause choppiness when other transitions are occurring at the same time.  I also need to implement data accessors to allow for a wider range of input formats.

I posted this at this stage of development so I could get advice, from "this is wrong" to "I would do it this way... not the way you are."  I haven't spent much time on getting the UX to be 100% timed as I want, a lot of this was just coded, the tooltips literally 15 minutes ago.

I also think there may be a lingering error in the code, but I have not been able to consistently reproduce any errors, but if you can, please let me know how.

Thanks,

Bob

[Zahir Hamroune]

hi Bob,

really excellent stuff , how to force the green line in other axis? (multi-axis or other mixed charts (like bars, pie)?

[Frank Guerino]

Hi Bob,

I like what you've been able to achieve.  I'm trying to do many of the same things with pie charts: http://bl.ocks.org/2054229.  (I don't think I'm as far along as you, though.)

I'm not a D3 expert and can't speak to the details of D3 but I can talk about successful libraries, in general, based on my own experience.

I don't know if this helps but, over the decades, I've always found that the most useful library functions are well documented and provide as much flexibility as possible at the call interface by making many controls "parameterized" (i.e. everything is simply configurable through the arguments passed into the function).

As a result, I'm trying to make the interface to my "drawPie" function allow for as many controls to be passed in as is possible (including the "select" criteria), so that the user of the function can do many things with "one" pieChart drawing function and not multiple different functions.

I also suggest making sure you can use your library, very easily, in normal day-to-day uses.  For example, showing people how to draw the chart, standalone, is the first hurdle.  Showing them how to embed the chart in typical HTML documents for normal day-to-day use is another.  Saving people the time related to figuring out the latter is just as important as saving them the time of figuring out the former.

I don't know how you feel about this but, maybe, when we're all done with these library utilities, we can work together to combine them all into one master library for business charting.

Anyhow, thanks for the great example.  I know I'll personally be spending a lot of time trying to understand it because you have a lot of features that I'm trying to understand for pie chart applications.

Frank

[Bob Monteverde]

I'll have more mixed chart example shortly (I consider this a mixed chart,  even the legend is essentially a standalone part).  I'm hoping I can get the OK to open source the rest of the reusable charts I'm working on b\from my company.  This one I just pulled together multiple components in a pretty straightforward way.  Its close enough to done that I have at least ironed out a good chunk of the reusable components I'll have, still plenty of room for improvement.

Anyway, I'm really hoping to get the core ideas down in these charts.  I'll be posting the data accessor stuff soon.  I know this is backwards to how most of the examples work, instead of just showing the one thing they are useful for, and minimal code beyond that, I'm trying to show something closer to a model we will shortly be using in production, to show a more complete example.

Any and all advice is welcome.

Bob

[Frank Guerino]

Hi Bob,

Was wondering if you could help answer a couple of questions about your code...

1) Could you please point to the section of code that specifically generates the legends and possibly explain the logic behind how you create them and control their placement on the canvas?

2) Given the creation of the legends, how do you link them back to the lines to animate the lines on mouseover?

I think the above two things, explained well, will go a long way for most users that are trying to create charts with legends.

Thanks,

Frank

[Bob Monteverde]

Guerino,

There is a separate legend "chart"... I call it a standalone chart, because the more I treat it like one, the more I like how my code is organized.

So the legend is pretty thrown together just to get something functional, but let me first explain the layout, then I'll explain the communication.

You give the legend a width, and it fills up each row, creating a new one if needed.  Like all my reusable components, the legend model generates a group element, that can be translated to any position within the visualization.  I do not have the columns lining up, except the first column in each row, if there is more than 1 row.  Each series is represented by a dot with a label, the component is built, then I measure its width and decide if it can stay on the current row or goes to the next.  Series are added to the legend from top left horizontally, then into a new row when the width exceeds the set width, and are positioned to be as far right within the legend's width (and the second row lines up with the beginning of the first).  Hope that makes sense, mess around with it and you'll see.  The simple goal was to not cut any text, and take up as little space as they can.  I'll likely be making things line up later (while I don't mind this way, I think it may be nicer to the user if everything is in nice rows and columns.  I'll also be customizing just a little more to ease placing the legend in different spots (there's no fail safe is a single legend series is larger than the max width... I'll soon clip tetx if that occurs).

As for the more interesting stuff, communication between charts:

I worked around a couple of options of how to communicate between the legend and line chart.  I eventually got to where I am here, where the legend dispatches an event and the event is caught in the combined chart and I adjust the data (set disabled flags) and update all the charts.  I think from now on I'll have all the interaction simply trigger an event so that any component can use the event.  I make use of the internal d3.dispatch function, its very simple, but does the job right.

If people are interested, I could make a write up of how to piece together all the components to make somewhat 'complete' re-usable charts.  But before I do that, I'd like to clean up my code first (though I guess I could always rework things as I get comments).

Anyway, hope that helps a little.

Bob

[Frank Guerino]

Hi Bob,

Thanks for the response.  I think a write-up on how to piece everything together is a great idea.  The more tutorials we can put together the easier everything becomes for everyone.  Another option, which I try to adhere to, is to comment every section of code so that everyone reading it knows exactly what it's doing and why.

My Best,

Frank

[Kai Chang]

Great approach. I've been using Backbone.js for interchart
communication, but d3.dispatch would be simpler.

[Frank Guerino]

Hi Kai,

Is there a simple tutorial, somewhere, that shows a step by step approach to applying d3.dispatch for interchart communications?  I went through all of the site's documentation.  I see the reference docs but don't see any detailed user docs or tutorials that show how to use the dispatch  method.

Thx,

Frank

[pax roman]

As a side question:

Is there a way to use jQuery for dispatching (delegates, observe) instead of the d3 dispatch?

That would be great because that would make interface programmers not care about d3 at all when they will use the charts....

[Kai Chang]

Frank, None that I know of. I hope Bob writes one!

You can use d3.dispatch to create the observer pattern:

http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/#observerpatternjavascript

Synapse is a more fleshed-out library based on this pattern:

http://bruth.github.com/synapse/docs/

pax, You could use jQuery events, but that'd add an extra dependency
to your chart. Chart users shouldn't have to use d3.dispatch itself.
Instead, they listen for events from the chart which use d3.dispatch
internally.

[pax roman]

Kai,

Your idea sounds good, and close to what I'm looking for:

Chart users shouldn't have to use d3.dispatch itself.

Instead, they listen for events from the chart which use d3.dispatch
internally. 

I agree, but I will have to test if this works for events which will trigger chain of events (you select a bar from a bar chart 

and this event triggers a change in the pie chart that sits next to it and also in another chart). 

I will try an example later or tomorrow, to understand the problem better.

Best regards!

[Bob Monteverde]

I'll try to make a quick write up with a very simple example.  I found using d3.dispatch very simple and straightforward, I can considered using jquery for events but decided not to.  as Much as I'm using jquery for the tooltips, that code is not part of the reusable charts, its just used with them.  If I were to use jquery for events, then the charts would require the use of jquery, and I didn't feel that was necessary.  The only slight annoyance is I have to access the chart's dispatch object in order to bind handlers to chart events.  But so far that's not a problem.  I still need to cleanup/automate the API used to generate charts, its slightly repetitive, hopefully in the near future I'll make it so the resize and tooltip code is much shorter, if not 'automatic' when the charts created.

Anyway, glad you guys like it.  There's still work that needs to be done, I'm doing a few things in a some what brute force manor.  I'll keep you guys updated, and will continue listening for advice.

Bob

[Bob Monteverde]

Just got the OK to open source all my graph code :)

Hopefully I'll get to that before the end of the week, will throw it on my companies github.  Also will attempt to do a quick write up or two (Well hopefully on a regular basis I will).

I do apologize for not commenting much, I usually try to name my variable in an intelligent manor, and keep the code straightforward where comments aren't critical.  But on the other hand, I know they can be useful for other, and the code could use a little more organization, not to mention better variable names, haha.

[Fan Mongxie]

Bob,

Writing a tutorial on this type of more advanced example would be extremely useful to me; tutorials have incredible value to support the growth of the D3 community and spread of efficient visual displays.

If this can be highlighted in a tutorial, I would particularly appreciate understanding the actual development of this plot, i.e. from the initial simple line plot until the sophistical interactive graphic, with legends, annotations, highlighted lines, etc.

What I find difficult currently is to fill the gap between the tutorials explaining the basics of D3 and the complex real applications that some people have succeeded in setting up. It appears to me this particular example (http://bl.ocks.org/2070123) might be right on the spot !

Thanks a lot for your help,
Best regards
Fan

2012/3/19 Bob Monteverde <b...@novus.com>

[Bob Monteverde]

Fan, that was kinda my reasoning for submitting this example.   I've been using d3 in production for just about a year now (started using it in march 2011, and had been using protovis for a few months before that).  There's definitely some repetitive problems I've ran into, which I am attempting to avoid this time around.

I guess what you are getting at, instead of having 1 slightly too broad tutorial, maybe have a couple of articles explaining the different parts of the architecture.  I definitively see that being very useful (both for me to better my architecture) and probably a decent example for people trying to piece together multiple examples into a functional visualization.  I'll try to find some time, and I'll start writing.

Bob

[Joseph Dalton]

Please let us know when the rest of the code is posted! :)

Your current example has been quite helpful to me, and I would love to read through the rest of your graph code as well.

I'm primarily interested in adding better support for data transitions in the chart model, so I'm hoping that there will be some examples of that in the rest of the code.

Thanks,

Joseph

[Bob Monteverde]

Joseph transitions between different chart types is absolutely on my TODO list.  I'll be using as much as I can from this study: http://vis.berkeley.edu/papers/animated_transitions/

Hopefully in the next 2 days, I can clean up a little bit of code, and get the source up on my companies github account.  Its definitely a work in development, I'm sure lots of changes will occur.  In fact, my current code is quite a bit different than this example already.  I've adjusted the data to be in a more standard form ( {key: "series label", values: [ { point data}, ..]}.... among some other changes). I also have a scatter done in a similar manor to this, and am working on a few other common charts.   After I really get the core done, I'll be moving onto more complex combinations of charts, and transitions between charts (from historical line to snapshot in either a bar or scatter format, etc).

Bob

[Zahir Hamroune]

Hi all,

http://bl.ocks.org/2070123 

I tested it in FireFox and the hover effects for circles points is not the same under Chrome

[Bob Monteverde]

Firefox apparently isn't liking the css transition delay.  I'll look into it, maybe just a bug with Firefox and CSS3 transitions.  As for the point stroke looking different, chrome and firefox render slightly different when a stroke overlaps, I don't know which I like more, but both are fine with me.

Bob

[Frank Guerino]

Hi Bob,

BTW, you may want to consider a permutation of your line chart generator that uses a standardized input representation for data that gets passed to your graph generator so that you can graph any line.

I'm trying to do so in my own Pie Chart Generator  (http://bl.ocks.org/2054229), where I use the CSV post-parsed string format.  For example, the following represents my view of a complete data set for generating a Pie Chart...

      var dataSet1 = [
        {"setName": "Data Set 1", "label": "Label 1", "value": "25"},
        {"setName": "Data Set 1", "label": "Label 2", "value": "10"},
        {"setName": "Data Set 1", "label": "Label 3", "value": "2"},
        {"setName": "Data Set 1", "label": "Label 4", "value": "45"},
        {"setName": "Data Set 1", "label": "Label 5", "value": "15"},
        {"setName": "Data Set 1", "label": "Label 6", "value": "85"}
      ];

The only thing I believe it's missing is an HTML link for each label, to make "both" legends and pie arcs "linkable" or "drillable."

I would imagine you could do the same type of thing for your line chart generator so that the user of your library has a very simplistic and organized way to pass in the entire set of data and can chart any type of line graphs, not just mathematical constructs like sine, cosine, etc.

I noticed in many of the other examples that the "values" for each arc are passed in separately from things like the "labels", which I believe only serves to confuse the people trying to use the libraries.

I hope this helps and makes sense.

My Best,

Frank

[Bob Monteverde]

I've actually re-wrote the way the chart accepts data, and will take accessor functions.  I'm stil working on a general way to have data for all the chart types I will be making, to make it easy to switch between charts.  Still doing the grunt work of building each chart, and all the reusable components I need.  Then I will be re-evaluating the data model.

Bob

[Stephen Bannasch]

At 9:10 AM -0700 3/20/12, Bob Monteverde wrote:
>Firefox apparently isn't liking the css transition delay. I'll look into it, maybe just a bugwith Firefox and CSS3 transitions.

Also see the problem on Safari v5.1.4 (6534.54.16) on Mac OS X 10.6.8

[Bob Monteverde]

Can you provide more info... whats wrong? error message?  I'll see what I can do.  I know there's some minor lingering errors, which I will be investigating more in a day or two.

Thanks,

Bob

[Gudmundur Ingvarsson]

Hi Bob

I'm trying to utilize your fine scripting to my advantage

I have a json dataset I'm trying to push into your method but I cannot get it to work. I always get the same error "Uncaught TypeError: Cannot call method 'filter' of undefined" - referenced to d3linewithlegend.js:21.

My arrays don't have "series" but the generate sin/cos arrays do so I'm guessing your code adds this "series" to the array properties but in this case it can't?

Here is what I've changed

function generateData() {
        var read = [],
            write = [];

   $.getJSON("data.php<? echo $fullurl ?>", function(json) {

        json.forEach(function(values) {
         read.push([ new Date(values.timestamp), parseFloat(values.read) ]);
         write.push([ new Date(values.timestamp), parseFloat(values.write) ]);
        })

        console.log(read);
        console.log(write);
    return [
      {
        data: read,
        label: "<? echo $label1 ?>"
      },
      {
        data: write,
        label: "<? echo $label2 ?>"
      }
    ];
   })
  }
});

Example JSON data I'm working with

[
 {"timestamp":"2013-02-25 17:29:47","read":"24.37","write":"0.01"},
 {"timestamp":"2013-02-25 17:34:47","read":"64.05","write":"0.02"},
 {"timestamp":"2013-02-25 17:39:47","read":"37.44","write":"0.01"},
 {"timestamp":"2013-02-25 19:09:47","read":"48.37","write":"0.01"},
 {"timestamp":"2013-02-25 19:14:47","read":"24.91","write":"0.01"},
 {"timestamp":"2013-02-25 19:19:47","read":"45.81","write":"0.03"},
 {"timestamp":"2013-02-25 20:49:47","read":"25.44","write":"0.02"}
]

[Simon Russell]

It's hard to tell, the formatting of the code seems to have been
muddled up, but I'm going to have a guess and say that you're
expecting generateData to return the data, and because your JSON call
is asynchronous, it's actually returning "undefined", and the data
you're getting back from the server is being thrown away.

Unless my brain-JS-parser is confused by the formatting.

> --
> You received this message because you are subscribed to the Google Groups
> "d3-js" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to d3-js+un...@googlegroups.com.
> For more options, visit https://groups.google.com/groups/opt_out.
>
>

[Gudmundur Ingvarsson]

Here is for array print for my data

values[0] is =>1361813387,0
values[1] is =>1361813687,0
values[2] is =>1361813987,0
values[3] is =>1361819387,0
values[4] is =>1361819687,0
values[5] is =>1361819987,29.88
values[6] is =>1361825387,0
values[7] is =>1361825687,0
values[8] is =>1361825987,0.01
values[9] is =>1361831987,0

And to comparison here is the array print for sin in the original example

values[0] is =>0,0.0033990997763702516
values[1] is =>1,0.06015001139184007
values[2] is =>2,0.11463993903446479
values[3] is =>3,0.16482065610826108
values[4] is =>4,0.20880591530546674
values[5] is =>5,0.24494235091949085
values[6] is =>6,0.27187162735124587
values[7] is =>7,0.2885814977032894
values[8] is =>8,0.2944438532158712
values[9] is =>9,0.28923833330134785

I don't see much difference in that so I'm quite stuck with this... Maybe time for another solution

best regards

Gudmo

[Simon Russell]

What does generateData return in the example, and what does it return in your code?

[Gudmundur Ingvarsson]

I cannot be sure as I lack the know-how to debug that part.

regards

Gudmo

[Simon Russell]

Well, this is stepping out of d3 a bit; but:

The line that says:

var svg = d3.select('#test1 svg').datum(generateData());

Tells me that my initial suspicions were correct; generateData is
supposed to return something, and your function doesn't return
anything. To illustrate the point, if you change it to:
var theData = generateData();
console.log(theData);
var svg = d3.select('#test1 svg').datum(theData);

You'll see what I mean.

[Gudmundur Ingvarsson]

Okay, I've now gone past this

<script src="nvd3/lib/d3.v2.js"></script>
<script src="nvd3/nv.d3.js"></script>
<script src="nvd3/src/tooltip.js"></script>
<script src="nvd3/src/utils.js"></script>
<script src="nvd3/src/models/legend.js"></script>
<script src="nvd3/src/models/axis.js"></script>
<script src="nvd3/src/models/scatter.js"></script>
<script src="nvd3/src/models/line.js"></script>
<script src="nvd3/src/models/lineChart.js"></script>
<script>
// Wrapping in nv.addGraph allows for '0 timeout render', stores rendered charts in nv.graphs, and may do more in the future... it's NOT required

var chart;
nv.addGraph(function() {  
   chart = nv.models.cumulativeLineChart()
             .x(function(d) { return d[0] })
             .y(function(d) { return d[1] })
             .color(d3.scale.category10().range())
             .clipVoronoi(false);
   chart.xAxis
      .axisLabel('Timestamp')
      .tickFormat(function(d) {
          return d3.time.format('%x')(new Date(d))
        });
  chart.yAxis
      .axisLabel('<? echo $ylabel; ?>')
      .tickFormat(d3.format('.02f'));
  var theData = getData(); 
        console.log(theData); 
  d3.select('#chart1 svg')
      .datum(getData())
      .call(chart);
  nv.utils.windowResize(chart.update);
  chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
  return chart;
}); 

function getData() {

        var read = [],
            write = [];

   d3.json("data.php<? echo $fullurl; ?>", function(json) {
    json.forEach(function(values) {
        
         timestamp = new Date(values.timestamp).getTime()/1000;
         read.push({ x: timestamp, y: parseFloat(values.read) });
         write.push({ x: timestamp, y: parseFloat(values.write) });
        })
   })
        return [
                {
                key: "<? echo $label1; ?>",
                values: read
                },
                {
                key: "<? echo $label2; ?>",
                values: write
                }
        ]
  }

The data it returns in the console.log is structured thus.

 [Object, Object] 

   -> 0: Object

     -> key: "Read IO/s"

     -> values: Array [34]

         -> 0: Object

             -> x: 1361813387

             -> y: 0.54

   -> 1:Object

etc..

Still No Data Available

I'm structuring the data wrong, but I'm a bit lost on how to construct an object or an array and what is inside what.

[Gudmundur Ingvarsson]

Here is a wierd fact

Turning the javaconsole off and on displays the chart... But I cannot get it to work "normally"

If I refresh I get "No Data" until I turn off/on the javaconsole..

This is true for Chrome, FF and IE

regards

Gudmo

[Gudmundur Ingvarsson]

Actually the graph data doesn't display in IE or FF, only in Chrome

But the No Data doesn't appear in IE or FF, just an empty graph

FF spews out a whole lot of "Unexpected value NaN parsing cx attribute." and IE has some "SVG4601: SVG Path data has incorrect format and could not be completely parsed." errors

With so many scripts behind this it's impossible for me as a novice javascript guy to understand where the problems lie.

best regards

Gudmo

[Ziggy Jonsson]

The d3.json query is asynchronous.  This means that the callback function ( second argument in d3.json)  will only be executed once the data has arrived from d3.json.  

The rest of the code is not "blocked" in the meantime,   This means that {key,values} has not been set yet when the getdata function returns.   

Solutions: update/redraw (or simply generate) the graph from inside the callback function (i.e. when data has arrived) or alternatively do this synchronously by embedding the data into a variable at page generation (php). 

[Simon Russell]

Indeed, the behaviour you're seeing is probably just chance that that callback executes before the function returns.

--

[Gudmundur Ingvarsson]

humm, I'm not sure how though.

I've tried with ob_start fopen and varius methods but I keep stranding on the same issue.

Getting the data "synchronous" into the chart.

I think the big problem is that I cannot fully understand how this is supposed to work and am using a different way of thinking about this than I should

Any and all help would be highly appreciated

best regards

Gudmo

[Dave Boyce]

You want something along the lines of the following:

function drawMyChart(data) {
console.log("drawMyChart");
// draw chart
}

function processJson(json) {
console.log("data loaded");
// process your json data here
drawMyChart(data);
}

function init() {
console.log("init started");
d3.json(url, processJson);
console.log("init finished");
}

init();

(I've split out the function to process the json so that you can more easily see what's going on.)

When you call d3.json, the function makes a request to the remove webserver, and returns
immediately. The processJson function only gets called once the webserver has returned
with the data, so you can only process the graph properly once that's done. Remember,
these webserver loads are asynchronous, ie, the response comes back some time after
you make the request.

If you run the above code, what you see in the console should be:

init started
init finished
data loaded
drawMyChart

Hope this helps.

- Dave

Dave Boyce

da...@iconomical.com
http://www.iconomical.com/

[Ram]

Hi Bob

Thank you for the fantastic example using d3. This has all the features except Zoom. Is there a possibility of adding zoom feature to this example.
I find it difficult using zoom for reusable charts.

Ram