Introducing model.js for building reactive visualizations

[Curran]

Hi all,

I've been working on a small library, model.js, that helps with developing dynamic D3 visualizations. It provides a simple and lightweight solution for the following issues:

• developing visualizations that react to changes in models (kind of like Backbone Models)
• converting D3 examples into dynamic and reusable visualization components
• establishing complex update flows in a declarative way
• making different parts of the visualization only update when they need to
• eliminating redundant SVG updates
• building reusable visualizations with hooks for interactions (e.g. brushing)
• making visualization dashboards with linked views (e.g. when a scatter plot filters a bar chart)

This is not a library of pre-packaged reusable D3 visualizations like NVD3 or Dimple, but rather it introduces a new primitive (a "functional reactive model") and prescribes an approach for modifying any existing D3 visualization to be dynamic and reusable.

The pattern for using model.js to make existing D3 examples dynamic and reusable is illustrated with the following examples

• bar chart
• line chart
• scatter plot

I would love to hear any feedback on this approach, and welcome any pull requests with improvements or more examples!

Best regards,

Curran

[Matthew Pocock]

Hi Curran,

I've been gluing together my visualisations with bacon.js, but everything was a bit ad hoc. My components have busses for their reactive inputs, and expose signals for reactive outputs, taking care of the wiring internally. It lets you, for example, store some code in a signal, and use that in a call() to customise rendering. Unfortunately, I don't have any code I can make public. I'd love to use a library were somebody else has done all the hard work already.

Matthew

--
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/d/optout.

--

Dr Matthew Pocock

Turing ate my hamster LTD

mailto: turingate...@gmail.com

Integrative Bioinformatics Group, School of Computing Science, Newcastle University

mailto: matthew...@ncl.ac.uk

gchat: turingate...@gmail.com

msn: matthew...@yahoo.co.uk

irc.freenode.net: drdozer

skype: matthew.pocock

tel: (0191) 2566550

mob: +447535664143

[Curran]

Hi Matthew,

That's great! I had always wondered what it would look like to adopt a full functional reactive programming library like Bacon.js for working with D3. I started looking into using Bacon, but it seemed to be overkill for what I needed. All I wanted to do was react to changes on multiple model properties in a smart way, which seems awfully similar to Bacon's when function (though I'm not really sure if it's exactly the same). That's why I named the function for wiring up reactive components "when".

Regards,

Curran

[Curran]

Hello,

I recently gave a talk on building reactive visualizations with Model.js at the Bay Area D3 Meetup. The talk is posted on YouTube, and the presentation material is on GitHub. The talk introduces Model.js, then goes through how to transform Mike Bostock's original bar chart into a reusable reactive bar chart.

Any feedback or contributions would be warmly welcome. I would like to make Model.js and the reusable visualizations around it into a proper open source project, please let me know if you would be interested in this, or have any advice for making the project a success.

Best regards,

Curran

[Mark Rios]

Hi Curran,

I really like your work. 

I've sat down and studied your presentation. I'm considering using model.js in my work. But I'm not really sure how I would connect a cross filter dimension and group to a data visualization. 

Can you help me?

Thanks,

Mark

[Mark Rios]

Actually, I just watched Ian Johnson's video on crossfilter. I think key is on line 41 of this tributary. http://tributary.io/inlet/4101924/

[Curran Kelleher]

It is really great to hear you are interested in the approach. I am not very familiar with Crossfilter, but this sounds like a great application of model.js that would be useful for many developers.

I have established model-contrib as an open source collection of examples and reusable modules built with model.js. I welcome you to add what you have so far on your crossfilter integration as an example within model-contrib as a new example.

Has anyone else made something with model.js? Please feel free to contribute! I'd like to make model-contrib a collaborative effort to produce and maintain a pool of open source reusable visualizations.

I have started watching Ian Johnson's video on crossfilter, great stuff!

Best regards,

Curran

--
You received this message because you are subscribed to a topic in the Google Groups "d3-js" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/d3-js/TB8Qz-gDDNQ/unsubscribe.
To unsubscribe from this group and all its topics, send an email to d3-js+un...@googlegroups.com.

[Curran]

Hello,

I'm just wondering, has anyone used model.js? Does anyone have any feedback on it? Thank you.

Best regards,

Curran

[sundar]

Hi Curran,

  I have started look into it. It seems to be promising for my project. I tried to test using your firstname and lastname example. When I tried to print console.log in "when" function I could see it prints every millisec irrespective whether I change firstName or lastName. wondering whether this is expected behavior.

Thanks,

Sundar

[Curran]

Hi Sundar,

That's strange, it should only print when the properties change. Could you post a code example that reproduces the behavior? Here's an example of the firstName, lastName concept with forms.

Best,

Curran

[Sundar Ramalingam]

Hi Curran,

  Thank you. I checked my code and found the issue. It is my mistake. In my "model.when" code for firstName and lastName, I was assigning to model.firstName and model.lastName again which I am not supposed to do. I guess this triggers an infinite loop. Thank you for pointing me out.

Thank you,

Sundar

model.when(['firstName', 'lastName'], function (firstName, lastName) {

          console.log(firstName);

          model.firstName = firstName;

          model.lastName = lastName;

          model.fullName  = firstName + ' ' + lastName;

          fullNameText.attr("value", firstName + ' ' + lastName);

        });

--

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/d/optout.

--

-- 
"Experience is a hard teacher because she gives the test first, the lesson afterwards."