Article about data-driven visualization with Ractive.js

[mlarocca]

Hello, I'd like to write an article/how-to about data visualization using Ractive.js The post, after introducing Ractive and the reactive programming paradigm, could either focus on showing realtime data, for example various readings from a laptop OS, or charts and SVG (using PathsJs to exploit MVC separation). It could actually mention both, to stress that no matter the source and the language used to represent the data (HTML/CSS vs SVG[/CSS]), embracing a higher separation between the view (using templates, and now moved entirely to the HTML files) and the controller brings several advantages: 1) A cleaner result, easier to maintain and update; 2) A more intuitive way of coding charts, which in turn cuts down the time required for development; 3) Better performance, thanks to clever implementation of animations and event handling in Ractive.

You can take a look at a post I have already published on my blog about Ractive + Paths for data visualization: http://mlarocca.github.io/01-22-2014/pathsjs_ractive.html

Thanks, Marcello

P.S.: the beginning of the article could look like this:

Data-driven visualization with Ractive.js

Creating MVC-compliant visualizations using a template-driven JavaScript library

As the amount of data produced and made available on the web by social interactions and ecommerce grows larger and larger, structuring and visualizing these data in meaningful (and human-friendly) ways becomes increasingly crucial.

A new category of data-driven applications have, indeed, emerged during the last few years, and so it is for new technologies, patterns and frameworks support this new model. During the last year or so, in particular, a number of framework have arisen to support a better MVC compliance and therefore a better design of one-page applications: Angular, React, Ractive, etc.... All of these frameworks turn out to be a very good fit for data-visualization, both as SVG charts (using, f.i., PathsJs or n3-charts) and as HTML5 rich visualizations.

In this post we are going to introduce Ractive.js, a template-driven library, and show how to use it to create an application to monitor a set of resources, refreshing the visualization every time an update is received from the server. The application in the example, in particular, will have an interface that shows a laptop's battery status and a list of the Wi-Fi connections available. [As an alternative, an application with some sort of chart built with Ractive and PathsJs could be chosen instead]

[andreasbovens]

@mathiasbynens any comments?

[mlarocca]

Perhaps is there a different angle you'd like to adopt for this story?

[brucelawson]

mlarocca

thanks for the suggestion. We've discussed with the team and don't think that we can use these articles at the current time. They're interesting, and we encourage you to blog them, but there's so much happening at the moment in the world of direct web standards (web components, SVG 2, responsive images etc) that our editing/ publishing resources are already stretched trying to cover those.

Thanks again for the suggestions, though.

[mlarocca]

Hi, thanks :) I understand. Maybe, f.i., an article about ServiceWorkers could be more appropriate now? Would that be interesting to cover?

[andreasbovens]

@mlarocca we're investigating the topic and working on such an article ourselves at the moment, so we're good for now when it comes to ServiceWorkers.

[mlarocca]

@andreasbovens :) Well, it was just an example... it might as well be about polymer and creating custom HMTL elements, or starting from JsAction to take a tour of strategies for event handling and talking about the tendency to move this logic to templates (as in angular, ractive etc..). Or even maybe you could suggest what you'd be interested in having covered, and see if we have a match.

@brucelawson I know that when you are talking about resources you also mean time to read and edit drafts, but let's say I give up the compensation for this article, cutting at least the need for monetary resources: would that help? Would you be able/interested in pubblishing the article about template-based data visualization, in that case?

Thanks

[EC-O-DE]

Ractive is actually pretty interesting. http://www.ractivejs.org/ http://twitter.com/RactiveJS

Need to dive in though.