Étiqueté : D3js RSS Activer/désactiver les fils de commentaires | Raccourcis clavier

  • light_viz

    light_viz 10:18 le 20/03/2014 Permaliens
    Étiquettes : , canvas, , D3js, , divs, html, , , render, ,   

    SVG vs Canvas vs HTML, what’s the perf now, in 2017? 

    What’s the perf now (2014 updated 2015 updated 2016 updated 2017) between SVG, Canvas and simple DOM modification?


    Go to check http://devsigner.org/benchmark.html


    And a quick comparaison:


















    Conclusion, Chrome is 62% faster than Firefox, Safari 85% and IE10 67%.

    Firefox is still late, sadly.

  • light_js

    light_js 10:10 le 12/03/2013 Permaliens
    Étiquettes : , D3js, , départements, , , open, openfrance, opensource, regions   

    Welcome to Openfrance! 

    Anamorphic maps are very « stylish » visualization morphings

    light_js is opening his first opensourced project: Openfrance

    The goal is to cross datas from different origins about the old frenchy country.



    Feel free to edit or fork the Github Project!


    Departments and regions are included.



  • light_js

    light_js 03:21 le 25/01/2013 Permaliens
    Étiquettes : axis, component, D3js, , , , , , prototype, ,   

    Javascript part three: “very component oriented” 

    Find back articles from this serie...
    1/ Javascript part one: "very object oriented"
    2/ Javascript part two: "very package oriented"
    2/ Javascript part three: "very component oriented"

    It’s not easy to understand what we call component approach


    Component approach

    This is kind of « module pattern » but more limited.

    Even by googling component pattern javascript you won’t find anything yet.

    Some resources about object patterns in javascript: http://link.lightjs.org/modulepattern

    It’s the approach used by the famous D3.js library by Mike Bostock.

    Let’s understand how it’s working: if you are familiar with object pattern, you should know what is public / private variables and public / private methods.

    Components are the best tool to respect it!


    Axis D3 component example

    You begin by creating a scope with one function, the constructor: [cc lang= »javascript »]d3.svg.axis = function() {
    function axis() { console.log(‘I draw an axis!’) }

    Then, you inject your private variables and private methods.

    [cc lang= »javascript »]
    d3.svg.axis = function() {
    function axis() { console.log(‘I draw an axis!’) }
    var scale = d3.anothercomponent; // not callable from outside
    function ping() { return ‘pong’ }; // not callable from outside

    Now, come the « public methods » which can be accessor to your private variables.

    And return the object.

    [cc lang= »javascript »]
    d3.svg.axis = function() {
    // — constructor
    function axis() { console.log(‘I draw an axis!’) }

    // — private section
    var scale = d3.anothercomponent;
    function ping() { return ‘pong’ };

    // — public section
    axis.getscale = function() { return scale; }
    axis.constant = ’42’;

    // — return the entire object
    return axis;

    You get a component with all (private | public) && (variables | methods).

    This pseudo pattern is not my favorite because it enclosed too much the code into object and complicates interactions with other components. A better pattern should support privates entities but still make it accessible from outside.

    General willing is to well scope and get a clear separation between private and public but not hide or block anything. A softer approach could be an addition of « _ » before the first character of private variables like axis._scale

    Just a mind, not a rule but I don’t like this pattern, it reduces javascript capabilities! Very adapted for D3.js, component approach match svg drawing loop and make structure very clear but don’t use it for bigger project!

  • light_js

    light_js 22:18 le 07/10/2012 Permaliens
    Étiquettes : , , D3js, demo, , flash, , icons, , , morphing, path, polygon   

    « Give lifes to icons! » – demonstration of D3js Javascript HTML5 animations 

    Small demonstration of what can be done with HTML5, javascript D3.js and… simple icons.


  • light_js

    light_js 19:36 le 16/09/2012 Permaliens
    Étiquettes : , D3js, data, , , fr, , mbostock,   

    D3.js fun with France 

    Mike Bostock is the famous author of javascript’s library D3.js which manipulates data into browser’s DOM and more precisely into SVG.

    This guy has recently explored geographic side of data’s animation by targeting american area (for New York Time newspaper). For example, this final product, about drought over months : http://bost.ocks.org/mike/drought/

    I don’t want to be « chauvin » but he did geographical animations about USA like his great tool is only dedicated to american demonstrations with this new technologies.

    Based on his California’s example ( http://bl.ocks.org/3081153 ), I wanted to correct it… with a little bit of fun, that’s it!

    [Put you cursor on it]

compose new post
next post/next comment
previous post/previous comment
show/hide comments
go to top
go to login
show/hide help
shift + esc