Infinity zoomable timeChart

README.md

This exemple use reusable time chart proposed by Mike Bostock : http://bost.ocks.org/mike/chart/ and I add :

• Zoom like http://mbostock.github.io/d3/talk/20111018/area-gradient.html , but data is loaded in AJAX on each zoom action
• Spot viewer on mouse hover like http://bl.ocks.org/mbostock/3902569
• and nano chart. for display in text block

curve.js

/** curve.js
* @package  Probe
* @author   alban lopez <[email protected]>
* @license  http://creativecommons.org/licenses/by-nc-sa/3.0/legalcode CC-by-nc-sa-3.0
* @Model    http://bost.ocks.org/mike/chart/
*/




function timeSeriesChart_curves() {
    var color=d3.scale.category20();

    var data,margin = {top: 5, right: 5, bottom: 28, left: 40},
        width = null,
        height = 160,
        station = null,
        sensor = null,
        dataheader = null,
        dateDomain = [formatDate(new Date(0)), formatDate(new Date())],
        ajaxUrl = "/data/curve",
        withAxis = true,
        nude = false,
        trend=false,
        onClickAction = function(d) { console.error (d); },
        unit = false,
        md5 = false,
        darkColor = false,
        lightColor = false,
        toHumanUnit = function(SI){if (!arguments.length) return '';return +SI;},
        toHumanDate = function(SI){if (!arguments.length) return '';return +SI;},
        timeFormat = d3.time.format("%Y-%m-%dT%H:%M:%S"),
        dateParser = function(d) { return timeFormat.parse (d.date); },
        val = function(d) { return toHumanUnit(+d.val); },
        xPos=0,
        yPos=0,
        xScale = d3.time.scale().range([0, width]),
        yScale = d3.scale.linear().range([height, 0]),
        xAxis = d3.svg.axis().scale(xScale).orient("bottom").tickSize(4,6),
        yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(4).tickSize(3,5),
        line = d3.svg.line().x(X).y(Y);
        // circle = d3.svg.circle().

    function chart(selection) {
        md5 = MD5(station+sensor+(new Date()).getMilliseconds());
        if (!darkColor)  darkColor=color(md5+'0');
        if (!lightColor)  lightColor=color(md5+'1');
        //selection represente la liste de block ou ecire les donnees
        selection.each(function(rawdata) {
           
            // Convert data to standard representation greedily;
            // this is needed for nondeterministic accessors.
            data = rawdata.map(function(d, i) {
                return {
                    date:dateParser.call(rawdata, d, i),
                    val:val.call(rawdata, d, i)
                };
            });
            console.log(data);


            // Update the x-scale.
            xScale
                .domain(d3.extent(data, function(d) { return d.date; }))
                .range([0, width - margin.left - margin.right]);
                // rangeRoundBands

            // Update the y-scale.
            yScale
                .domain(d3.extent(data, function(d) {return +d.val; })) // [toHumanUnit(dataheader.min),toHumanUnit(dataheader.max)]
                .range([height - margin.top - margin.bottom, 0]);

            // Select the svg element, if it exists.
            var svg = d3.select(this).selectAll("svg").data([{date:0,val:yScale.domain()[0]},{date:new Date(),val:yScale.domain()[0]}])

            svg = svg.data([data]);

            // Otherwise, create the skeletal chart.
            var gEnter = svg.enter()
                .append("svg")
                    .attr("viewBox", "0 0 "+width+" "+height)
                    // // .attr("preserveAspectRatio", "xMinYMin")
                    .attr("width", function(){return nude ? width : "100%";})
                    .attr("height", height)
                    .append("g");

            gEnter.append("path")
                .attr("class", "line")
                .attr("stroke", darkColor);

            // Update the inner dimensions.
            var g = svg.select("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
            g.updateCurve = function(){
                yScale.domain(
                    d3.extent(
                        data.filter(function(element, index, array){
                          return (element.date>=xScale.domain()[0] && element.date<=xScale.domain()[1]);
                      }), function(d) {return d.val; }));

                    // Update the line path.
                    this.select(".line")
                        .attr("d", line(data))
                        .attr("clip-path", "url(#" + md5 + ")");
                    return this;
                };

            gEnter.append("svg:clipPath")
                .attr("id", "" + md5)
                .append("svg:rect")
                .attr('width', width - margin.left - margin.right)
                .attr('height', height - margin.top - margin.bottom);


            if (!nude) {
                gEnter.append('line')
                    .attr("class", "zero")
                    // .attr("clip-path", "url(#" + md5 + ")")
                    .attr("stroke", lightColor)
                    .attr("x1", xScale.range()[0])
                    .attr("y1", (0))
                    .attr("x2", xScale.range()[1])
                    .attr("y2", (0));
                g.drawAxis = function(){
                                    // chose the possition of x-Axis
                        // if (0<yScale.domain()[0]) {
                            xPos = yScale.range()[0]+12;
                        // }
                        // else if (yScale.domain()[1]<0) {
                        //     xPos = yScale.range()[1];
                        // }
                        // else {
                        //     xPos = yScale(0);
                        // }

                        if (withAxis) {
                        // Update the x-axis.
                            this.select(".x.axis")//.transition().duration(1000)
                                .attr("transform", "translate(-1," + xPos + ")") // axe tjrs en bas : yScale.range()[0] + ")")
                                .call(xAxis);
                            this.select(".zero")//.transition().duration(1000)
                                .attr("transform", "translate(0," + yScale(0) + ")"); // axe tjrs en bas : yScale.range()[0] + ")")
                            this.select(".y.axis")
                                .attr("transform", "translate(-1,0)")
                                .call(yAxis)
                            legendSum.text(Infos);
                        }
                        return this;
                    };
                var legend = gEnter.append("g")
                    .attr("class", "legend")
                    .attr("transform", "translate(0,"+(height - margin.bottom +5)+")")
                    .attr("fill", darkColor);

                var legendTitle = legend.append('text')
                    .attr("class","title")
                    .text(dataheader.sensor.SEN_HUMAN_NAME);

                var legendXleft = width - margin.left- margin.right-4;
                var legendDate = legend.append('text')
                    .attr("class","date")
                    .attr('x', legendXleft-(formatVal(dataheader.max).length+2)*6)
                    .text('Scroll for Zoom');
                   // console.log(legendDate.getComputedTextLength());

                var legendVal = legend.append('text')
                    .attr("class","val")
                    .attr('x', legendXleft)
                    .text(formatVal(data[data.length-1].val));

                var Infos = function() {return "Min : "+formatVal(toHumanUnit(dataheader.min), 2)+
                "  —  Average : "+formatVal(toHumanUnit(dataheader.avg), 2)+
                "  —  Max : "+formatVal(toHumanUnit(dataheader.max), 2);},
                    legendSum = legend.append('text')
                        .attr("class","Infos")
                        .attr('x', legendXleft/2)
                        .text(Infos);

                var spotSize = 8;
                var spot=gEnter.append("g")
                    .attr("id", "spot")
                    .attr("opacity", 0)
                    .attr("x", 0)
                    .attr("y", 0);
                    spot.append('circle')
                        .attr("class", "Dot")
                        .attr("stroke", darkColor)
                        .attr("r", spotSize/2)
                        .attr("cx", 0)
                        .attr("cy", 0);
                    spot.append('circle')
                        .attr("class", "spotCircle")
                        .attr("stroke", lightColor)
                        .attr("r", spotSize)
                        .attr("cx", 0)
                        .attr("cy", 0);
                var tendance=gEnter.append('line')
                        .attr("stroke", darkColor);


                var Sensitive = gEnter.append("rect")
                    .attr("class", "sensitive")
                    .attr('width', width - margin.left - margin.right)
                    .attr('height', height - margin.top - margin.bottom);

                var Y_val=0, timeoutID=null;
                Sensitive.on("mousemove", function() {
                // http://bl.ocks.org/mbostock/3025699
                    // var d = offsets[Math.round((xScale.invert(d3.mouse(this)[0]) - startDate) / step)];
                    // focus.select("circle").attr("transform", "translate(" + xScale(d[0]) + "," + yScale(d[1]) + ")");

                        var X_px = d3.mouse(this)[0],
                            X_date = xScale.invert(X_px);

                        Y_px = yScale(Y_val);
                        var iSpot;
                        data.forEach(function(element, index, array) {
                            if ((index+1 < array.length) && (array[index].date <= X_date) && (array[index+1].date >= X_date)) {
                                if (X_date-array[index].date < array[index+1].date-X_date) {
                                    iSpot=index;
                                } else {
                                    iSpot=index+1;
                                }
                                Y_val = array[iSpot].val;
                                X_date = array[iSpot].date;
                                X_px=Math.round(xScale(X_date));
                                Y_px=Math.round(yScale(Y_val));
                            }
                        });
                        spot.attr("opacity", 1)
                            .attr("transform", "translate("+X_px+","+Y_px+")");

                        if (trend){
                            var steps = data.filter(function(element, index, array){
                                    return (element.date>data[iSpot-trend].date && element.date<data[iSpot+trend].date);
                                });
                            var afine=linearRegression(steps);
                            tendance
                                .attr("x1", xScale(steps[0].date))
                                .attr("y1", yScale(afine.slope*(steps[0].date.getTime()/60000)+afine.middle_intercept))
                                .attr("x2", xScale(steps[steps.length-1].date))
                                .attr("y2", yScale(afine.slope*(steps[steps.length-1].date.getTime()/60000)+afine.middle_intercept));
                        }
                        legendDate.text(timeFormat(X_date,' '));
                        legendVal.text(formatVal(Y_val));
                    });

                Sensitive.call(zm=d3.behavior.zoom().x(xScale).scaleExtent([1,1000]).on("zoom", function(){
                    window.clearTimeout(timeoutID);
                    timeoutID = window.setTimeout(function(){zoom(g)}, 400);
                    // Update the line path.
                    // g.select(".line").transition().duration(1000)
                    //     .attr("d", line(data))
                    // g.select(".x.axis").transition().duration(1000)
                    //             .attr("transform", "translate(-1," + (xPos+12) + ")") // axe tjrs en bas : yScale.range()[0] + ")")
                    //             .call(xAxis);
                     g.updateCurve()
                      .drawAxis ();
                }));



                gEnter.append("g").attr("class", "x axis");
                gEnter.append("g").attr("class", "y axis");

                // Update the line path.
                g.updateCurve()
                    .drawAxis ()
                    .selectAll(".y")
                    .append("text")
                    .attr("transform", "rotate(-90)")
                    .attr("y", 6)
                    .attr("dy", ".71em")
                    .style("text-anchor", "end")
                    .text(toHumanUnit());

            } else { // for nude chart
                var path = g.updateCurve(line).select(".line");
                var totalLength = path.node().getTotalLength();

                path
                  .attr("stroke-dasharray", totalLength + " " + totalLength)
                  .attr("stroke-dashoffset", totalLength)
                  .transition()
                    .duration(2000)
                    .ease("linear")
                    .attr("stroke-dashoffset", 0);

                var legend = gEnter.append("g")
                    .attr("class", "legend")
                    .attr("transform", "translate("+(width - margin.right+2)+",0)")
                    // .attr("transform", "translate(0,"+(height - margin.bottom +5)+")")
                    .attr("fill", darkColor);

                var legendmax = legend.append('text')
                    .attr("class","legend_max")
                    .attr("y", (6))
                    .text('↑ '+formatVal(toHumanUnit(dataheader.max), 1))
                    .append('title')
                        .text('↑ max:'+formatVal(toHumanUnit(dataheader.max), 2));

                var legendavg = legend.append('text')
                    .attr("class","legend_avg")
                    .attr("y", (height+6)/2)
                    .text('↔ '+formatVal(toHumanUnit(dataheader.avg), 1))
                    .append('title')
                        .text('↔ Average:'+formatVal(toHumanUnit(dataheader.avg), 2));

                var legendmin = legend.append('text')
                    .attr("class","legend_min")
                    .attr("y", (height-1))
                    .text('↓ '+formatVal(toHumanUnit(dataheader.min), 1))
                    .append('title')
                        .text('↓ min:'+formatVal(toHumanUnit(dataheader.min), 2));


            }
            // Update the outer dimensions.
            // svg .attr("width", width)
            //     .attr("height", height);
        });
    }  


    function zoom(g) {
        var ready = false,
            dataTsv = false,
            zmDomain=xScale.domain();
        // on demande les infos importante au sujet de notre futur tracé
        // ces infos permettent de finir le parametrage de notre "Chart"
        // on charge les données et on lance le tracage
        console.TimeStep('Zoom');
        d3.tsv( ajaxUrl + "1.tsv?station="+ station +"&sensor="+ sensor +"&XdisplaySizePxl="+width+"&Since="+formatDate(zmDomain[0],'T')+"&To="+formatDate(zmDomain[1],'T'),
            function(data2add) {
                console.TimeStep('load Data Zoom');
                // console.log(data2add);
                data2add = data2add.map(function(d, i) {
                    return {
                        date:dateParser.call(data2add, d, i),
                        val:val.call(data2add, d, i)
                    };
                });
                
                data = data.filter(function(element, index, array){
                          return (element.date<data2add[0].date || element.date>data2add[data2add.length-1].date);
                      })
                   .concat(data2add)
                   .sort(function (a, b) {
                       return a.date-b.date;
                      });

                if (ready) {
                    g.updateCurve()
                     .drawAxis ();
                }
                ready = true;
                dataTsv = data;
            }
        );

        d3.json( ajaxUrl + "1.json?station="+ station +"&sensor="+ sensor +"&XdisplaySizePxl="+width+"&infos=dataheader"+"&Since="+formatDate(zmDomain[0],'T')+"&To="+formatDate(zmDomain[1],'T'),
            function(header) {
                console.TimeStep('load Header Zoom');
                console.log(header);
                chart//.yDomain([header.min, header.max])
                    .dataheader(header);
                
                if (ready) {
                    g.updateCurve()
                     .drawAxis ();
                }
                ready = true;
            }
        );
    }
    // The x-accessor for the path generator; xScale ∘ dateParser.
    function X(d) {
        return xScale(d.date);
    }

    // The x-accessor for the path generator; yScale ∘ Speed.
    function Y(d) {
        return yScale(+d.val);
    }

    function formatVal(v, decimal) {
        if (arguments.length<2)
            decimal=2;
        //console.log(v, (+v).toPrecision(5));
        return (+v).toFixed(decimal) +' '+ toHumanUnit();
    }

    // calcule la regression lineaire sur une srie de donnee
    function linearRegression(lst){
        var n = lst.length;
        var sum_x = 0;
        var sum_y = 0;
        var sum_xy = 0;
        var sum_xx = 0;
        var sum_yy = 0;
        
        lst.forEach ( function(d) {
                intDate = d.date.getTime()/(60*1000)
                sum_x += intDate;
                sum_y += d.val;
                sum_xy += (intDate*d.val);
                sum_xx += (intDate*intDate);
                sum_yy += (d.val*d.val);
            }
        );
        
        slope = (n * sum_xy - sum_x * sum_y) / (n*sum_xx - sum_x * sum_x);
        intercept = (sum_y - slope * sum_x)/n;
        // console.log(lst, lst[(lst.length-1)/2]);
        middle_intercept = -slope*lst[(lst.length-1)/2].date.getTime()/(60*1000)+lst[(lst.length-1)/2].val;
        r2 = Math.pow((n*sum_xy - sum_x*sum_y)/Math.sqrt((n*sum_xx-sum_x*sum_x)*(n*sum_yy-sum_y*sum_y)),2);
        
        return {slope:slope, intercept:intercept, middle_intercept:middle_intercept, r2:r2};
    }

// ================= Property of chart =================

    chart.loader = function(container, callback) {
        var ready = false,
            dataTsv = false;

        // on demande les infos importante au sujet de notre futur tracé
        // ces infos permettent de finir le parametrage de notre "Chart"
        // on charge les données et on lance le tracage
        d3.tsv( ajaxUrl + "0.tsv?station="+ station +"&sensor="+ sensor +"&XdisplaySizePxl="+(width - margin.left - margin.right)+"&Since="+dateDomain[0]+"&To="+dateDomain[1],
            function(data) {
                // console.TimeStep('load Data');
                // console.log(data);
                if (ready) {
                    d3.select(container)
                        .datum(data)
                        .call(chart);
                    if (typeof callback === "function") 
                        callback(chart);
                }
                ready = true;
                dataTsv = data;
            }
        );

        d3.json( ajaxUrl + "0.json?station="+ station +"&sensor="+ sensor +"&XdisplaySizePxl="+(width - margin.left - margin.right)+"&infos=dataheader"+"&Since="+dateDomain[0]+"&To="+dateDomain[1],
            function(data) {
                // console.TimeStep('load Header');
                // console.log(data);

                chart
                    .dataheader(data)
                    .toHumanUnit(formulaConverter (data.sensor.SEN_MAGNITUDE, data.sensor.SEN_USER_UNIT));

                if (dataheader.sensor.SEN_FUNCTION.length>0)
                    eval(dataheader.sensor.SEN_FUNCTION );
                // chart.val(xx);

                if (ready) {
                    // console.log(data);
                    d3.select(container)
                        .datum(dataTsv)
                        .call(chart);
                    if (typeof callback === "function")
                        callback(chart);
                }
                ready = true;
            }
        );
        return chart;
    }

// ================= Accesseurs =====================


    chart.nude = function(_) {
        if (!arguments.length) return nude;
        nude = _;
        if (_) {
            margin = {top: 1, left: 0, bottom: 1, right: 55};
        }
        return chart;
    };
    chart.dateParser = function(_) { // genere la fonction de conversion du champ [string]:date en [date]:date
        if (!arguments.length) return dateParser;
        if (typeof _ === "string") {
            timeFormat = d3.time.format(_);
            dateParser = function(d) { return timeFormat.parse (d.date); };
        } else dateParser = _;
        return chart;
    };
    chart.Color = function(_) {
        if (/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(_)) {
            darkColor = _;
            lightColor = '#c7c7c7';
        } else {
            darkColor = color(_+'1');
            lightColor = color(_+'2');
        }
        return chart;
    };

    chart.dateDomain = function(_) {
        if (!arguments.length) return dateDomain;
        dateDomain = _;
        return chart;
    };
    chart.withAxis = function(_) {
        if (!arguments.length) return withAxis;
        withAxis = _;
        return chart;
    };
    chart.trend = function(_) {
        if (!arguments.length) return trend;
        trend = _;
        return chart;
    };
    chart.margin = function(_) {
        if (!arguments.length) return margin;
        margin = _;
        return chart;
    };
    chart.width = function(_) {
        if (!arguments.length) return width;
        width = _;
        return chart;
    };
    chart.height = function(_) {
        if (!arguments.length) return height;
        height = _;
        return chart;
    };
    chart.val = function(_) {
        console.log(_);
        if (!arguments.length) return val;
        val = _;
        return chart;
    };
    chart.ajaxUrl = function(_) {
        if (!arguments.length) return ajaxUrl;
        ajaxUrl = _;
        return chart;
    };
    chart.station = function(_) {
        if (!arguments.length) return station;
        station = _;
        return chart;
    };
    chart.sensor = function(_) {
        if (!arguments.length) return sensor;
        sensor = _;
        return chart;
    };
    chart.dataheader = function(_) {
        if (!arguments.length) return dataheader;
        dataheader = _;
        return chart;
    };
    chart.sensor = function(_) {
        if (!arguments.length) return sensor;
        sensor = _;
        return chart;
    };

    chart.toHumanUnit = function(_) {
        if (!arguments.length) return toHumanUnit;
        toHumanUnit = _;
        return chart;
    };
    chart.toHumanDate = function(_) {
        if (!arguments.length) return toHumanDate;
        toHumanDate = _;
        return chart;
    };

  return chart;
  }

curve.sublime-workspace

{
	"auto_complete":
	{
		"selected_items":
		[
			[
				"va",
				"valDown"
			],
			[
				"sen",
				"sensor_lst"
			],
			[
				"jso",
				"json_decode"
			],
			[
				"for",
				"foreach	foreach …"
			],
			[
				"dat",
				"dataHeader"
			],
			[
				"a",
				"append"
			],
			[
				"cal",
				"callback"
			],
			[
				"date",
				"dateDomain"
			],
			[
				"st",
				"stationsConf"
			],
			[
				"var_",
				"var_export"
			],
			[
				"lengt",
				"length-1"
			],
			[
				"y",
				"yScale"
			],
			[
				"selec",
				"selectAll"
			],
			[
				"hover",
				"hoverBox"
			],
			[
				"step",
				"stepPointBox"
			],
			[
				"data",
				"data2add"
			],
			[
				"du",
				"duration"
			],
			[
				"sele",
				"selectAll"
			],
			[
				"se",
				"selectAll"
			],
			[
				"max",
				"maxDate"
			],
			[
				"Real",
				"realLag"
			],
			[
				"fun",
				"function"
			]
		]
	},
	"buffers":
	[
	],
	"build_system": "",
	"command_palette":
	{
		"height": 201.0,
		"selected_items":
		[
			[
				"snippet",
				"Snippet: for (…) {…} (Improved Native For-Loop)"
			]
		],
		"width": 575.0
	},
	"console":
	{
		"height": 0.0,
		"history":
		[
		]
	},
	"distraction_free":
	{
		"menu_visible": true,
		"show_minimap": false,
		"show_open_files": false,
		"show_tabs": false,
		"side_bar_visible": false,
		"status_bar_visible": false
	},
	"file_history":
	[
		"/var/www/Gist/8105667/README.md",
		"/var/www/Probe/resources/js/libs/THSW.js",
		"/var/www/Probe/application/views/d3/curves.php",
		"/var/www/Probe/application/views/d3/global.php",
		"/var/www/Probe/application/models/dao/dao_data.php",
		"/var/www/Probe/application/libraries/Log.php",
		"/var/www/Probe/resources/js/libs/suncalc.js",
		"/home/sctfic/Downloads/data (16).tsv",
		"/var/www/Probe/system/helpers/download_helper.php",
		"/home/sctfic/Downloads/data (13).tsv",
		"/home/sctfic/Downloads/data (12).tsv",
		"/home/sctfic/Downloads/data (11).tsv",
		"/home/sctfic/Downloads/data (10).tsv",
		"/home/sctfic/Downloads/data (9).tsv",
		"/home/sctfic/Downloads/data (8).tsv",
		"/home/sctfic/Downloads/data (6).tsv",
		"/home/sctfic/Downloads/data (7).tsv",
		"/home/sctfic/Downloads/data (5).tsv",
		"/var/www/Probe/logs/log-2013-11-22.php",
		"/var/www/Probe/resources/js/libs/sunphase.js",
		"/var/www/Probe/resources/js/libs/moonPhase.js",
		"/var/www/Probe/application/models/sql/histoWind.sql",
		"/var/www/Probe/application/models/sql/station.sql",
		"/var/www/Probe/resources/js/binders/histoRose.js",
		"/var/www/Probe/logs/cron.log",
		"/var/www/Probe/resources/js/libs/DewPoint.js",
		"/var/www/Probe/resources/js/binders/global.js",
		"/var/www/Probe/application/helpers/cli_tools_helper.php",
		"/var/www/Probe/resources/js/binders/barChart.js",
		"/var/www/Probe/resources/js/ProbeTools.js",
		"/home/sctfic/Downloads/data (15).json",
		"/home/sctfic/Downloads/data (12).json",
		"/home/sctfic/Downloads/data (13).json",
		"/home/sctfic/Downloads/data (14).json",
		"/home/sctfic/Downloads/data (11).json",
		"/home/sctfic/Downloads/data (10).json",
		"/home/sctfic/Downloads/data (15).tsv",
		"/home/sctfic/Downloads/data (14).tsv",
		"/home/sctfic/Downloads/data (9).json",
		"/home/sctfic/Downloads/data (8).json",
		"/home/sctfic/Downloads/data (7).json",
		"/var/www/Probe/logs/log-2013-11-12.php",
		"/home/sctfic/Downloads/data (6).json",
		"/home/sctfic/Downloads/data (5).json",
		"/home/sctfic/Downloads/data (4).tsv",
		"/home/sctfic/Downloads/data (2).tsv",
		"/home/sctfic/Downloads/data (4).json",
		"/home/sctfic/Downloads/data (2).json",
		"/var/www/Probe/log-SETTIME-2013-11-07.php",
		"/var/www/Probe/logs/log-2013-11-06.php",
		"/var/www/Probe/logs/log-2013-11-05.php",
		"/var/www/Probe/log-SETTIME-2013-11-05.php",
		"/var/www/Probe/application/libraries/I18n.php",
		"/var/www/Probe/round_date.php",
		"/var/www/Probe/logs/log-2013-11-04.php",
		"/var/www/Probe/system/core/Common.php",
		"/var/www/Probe/log-SETTIME-2013-11-04.php",
		"/var/www/Probe/resources/js/binders/curves.js",
		"/var/www/Probe/application/views/d3/histoRose.php",
		"/var/www/Probe/application/views/d3/wind.php",
		"/var/www/Probe/application/views/d3/histoWind.php",
		"/var/www/Probe/resources/js/binders/histoWind.js",
		"/var/www/Probe/resources/js/binders/wind.js",
		"/var/www/Probe/application/views/d3/barChart.php",
		"/var/www/Probe/application/controllers/data.php",
		"/var/www/Probe/application/models/vp2/EepromDumpAfter.h.php",
		"/var/www/Probe/data/VP2_GTD/LOOP.php",
		"/var/www/Probe/data/VP2_GTD/LOOP2.php",
		"/var/www/Probe/application/helpers/s.i.converter_helper.php",
		"/var/www/Probe/data/VP2_GTD/LOOP.json",
		"/var/www/Probe/data/VP2_GTD/LOOP2.json",
		"/var/www/Probe/application/controllers/viewer.php",
		"/var/www/Probe/application/models/station.php",
		"/var/www/Probe/application/controllers/cmd.php",
		"/var/www/Probe/system/core/Model.php",
		"/var/www/Probe/application/controllers/configuration.php",
		"/var/www/Probe/application/views/configuration/list-stations.php",
		"/var/www/Probe/application/models/vp2.php",
		"/var/www/Probe/application/views/configuration/stations-form.php",
		"/var/www/Probe/application/models/sql/wind.sql",
		"/var/www/Probe/resources/js/libs/base64.js",
		"/var/www/Probe/application/views/d3/bracketChart.php",
		"/home/sctfic/Downloads/data (3).json",
		"/home/sctfic/Downloads/data (3).tsv",
		"/var/www/Probe/logs/log-2013-10-29.php",
		"/var/www/Probe/application/libraries/Page_manager.php",
		"/var/www/Probe/application/views/templates/js-libs.php",
		"/var/www/Probe/logs/log-2013-10-28.php",
		"/var/www/Probe/application/views/templates/list-viewer.php",
		"/var/www/Probe/application/config/routes.php",
		"/home/sctfic/.conkyrc",
		"/home/sctfic/.conky/conky_red.lua",
		"/home/sctfic/.cache/.fr-oJ5je0/conky-manager-bzr/conky-manager-bzr.install",
		"/home/sctfic/.cache/.fr-8b1WjJ/conky-manager-bzr/PKGBUILD",
		"/home/sctfic/.conkyrc2",
		"/var/www/Probe/application/config/db-default.php",
		"/var/www/Probe/application/views/templates/footer.php",
		"/var/www/Probe/application/views/d3/windrose.php",
		"/var/www/Probe/application/models/db_builder.php",
		"/var/www/Probe/application/models/vp2/EepromDumpAfter.json",
		"/home/sctfic/Downloads/data.tsv",
		"/home/sctfic/Downloads/TR_CONFIG (2).csv",
		"/home/sctfic/Downloads/TR_CONFIG.csv",
		"/home/sctfic/Downloads/TR_CONFIG (1).csv",
		"/var/www/Probe/resources/js/binders/exemple.js",
		"/var/www/Probe/resources/js/binders/SmartCurve.js",
		"/var/www/Probe/application/config/database.php",
		"/var/www/Probe/application/models/vp2/EepromLoop2.h.php",
		"/var/www/Probe/application/models/vp2/EepromLoop.h.php",
		"/var/www/Probe/application/views/d3/SmartCurve.php",
		"/var/www/Probe/application/views/d3/exemple.php",
		"/var/www/Probe/resources/css/probe.css",
		"/home/sctfic/.config/sublime-text-3/Packages/User/probe-meteo.sublime-snippet",
		"/var/www/Probe/application/views/templates/breadcrumb.php",
		"/var/www/Probe/application/views/templates/header.php"
	],
	"find":
	{
		"height": 35.0
	},
	"find_in_files":
	{
		"height": 93.0,
		"where_history":
		[
			""
		]
	},
	"find_state":
	{
		"case_sensitive": false,
		"find_history":
		[
			"bisector",
			"base64",
			"line",
			"force_download",
			"xPos",
			"dataheader",
			"</path>",
			"innerRadius",
			"eval",
			"C_OFFSET",
			"dewPoint",
			"C_OFFSET",
			"filter",
			"str2id(d.SEN_NAME)",
			"dataheader",
			"forecast",
			"yAxis",
			"formatVal",
			"call",
			"axis",
			"fsockopen",
			"file_put_contents",
			"fsockopen",
			"conf\\['.*\\:.*\\:.*'\\]",
			"conf['.*:.*:.*']",
			"conf\\[\\'.*:.*:.*\\'\\]",
			"strtolower",
			"lower(",
			"Time:Archive:Period",
			"$confs[$item]",
			"SETTIME",
			"fetchStationTime",
			"VerifAnswersAndCRC",
			"CalculateCRC",
			"SETTIME",
			"_log_path",
			"write_log",
			"n log_message",
			"is_date",
			"fetchStationTime",
			"VerifAnswersAndCRC",
			"is_date",
			"open-connexion",
			"TA:",
			"toHumanUnit",
			"dateParser",
			".attr(\"class\", \"arrow\")",
			"arrowhead",
			"stroke",
			"nude",
			"BarChar",
			"Color",
			".log(",
			"formatV",
			"callback",
			"dataheader",
			"title",
			"barChart",
			"formatVal",
			"range",
			"sensitive",
			"rect",
			"width",
			"color(",
			"dateDomain",
			"color(",
			"dataheader",
			"formatVal",
			"toHumanUnit",
			"nude",
			"ET_h",
			",\"",
			"\\\",\\\"",
			"someDate",
			"val(",
			"toHumanUnit",
			"margin",
			"station->config",
			"config(",
			"list-stations.php",
			"list-station.php",
			"list-statio",
			"stations-form",
			"Base64",
			"base64",
			",\"",
			"\\},\\{",
			"},{",
			"dao_data",
			"SELECT SEN_NAME",
			"dateParser",
			"loader",
			"dataheader",
			"$dataBinder",
			"list-viewer",
			"${goto 90}",
			"30,60",
			"x=85",
			"HDD",
			"txt_size=",
			"color 32",
			"${color }",
			"class=\"SmallCurve",
			"list-viewser",
			"js-libs",
			"probeViewer()",
			"<td></td>\n			  </tr>",
			"			    					<span class=\"SmallCurve\" style=\"width:100px\">\n",
			"<td class=\"tg-center\">",
			"tg-center\">",
			"meanDate",
			"new date",
			"yScale.domain",
			"stepBarBox",
			"updateCurve",
			"PetalsBox",
			"stepPetalsBox",
			"stepPointBox",
			"5px",
			".domain",
			"exten",
			"line",
			"updateCurve",
			"clockSync",
			"updateStationTime",
			"\\[\\n\\t\\t\\tNULL,\\n\\t\\t\\tNULL\\n\\t\\t\\],",
			");\n",
			"getComputedTextLength"
		],
		"highlight": true,
		"in_selection": false,
		"preserve_case": false,
		"regex": false,
		"replace_history":
		[
			"273.15",
			"ArrowChart",
			"chart",
			"ET1000",
			",\\t\\n\"",
			"\",\\n\"",
			"Day_",
			",\\n\\t\\t\"",
			"\\t\\t,\\n\"",
			"},\\n{",
			"${color 32}",
			"dateParser",
			"\"domain\":[\\n\\t\\t\\t-32767,\\n\\t\\t\\t65535\\n\\t\\t],",
			"\"domain\":[\\n\\t\\t\\t-32700\\t\\t\\t65535\\n\\t\\t],",
			"\"domain\":[\\n\\t\\t\\t$1\\t\\t\\t$2\\n\\t\\t],",
			"\"accesors\":{\\n\\t\\t\\t$1\\t$2\\n\\t\\t},",
			"\"eeprom\":{\\n\\t\\t\\t$1\\t$2\\n\\t\\t},",
			"\"eeprom\":{\\n\\t\\t\\t$1\\t$2\\n},",
			"\"eeprom\":{\\n\\t\\t\\t$1},",
			"\"eeprom\":{\\t\\t\\t$1},",
			"\"",
			"\\n\\t\\},\\n",
			":",
			"':{\\n",
			"\\n\\},\\n\\t'",
			"\\t\\t",
			",\\n\\t\\t'",
			",\\n'",
			"{\\n\\t\\t$1\\n},\\n",
			"{\\n$1\\n},\\n"
		],
		"reverse": false,
		"show_context": true,
		"use_buffer2": true,
		"whole_word": false,
		"wrap": true
	},
	"groups":
	[
		{
			"sheets":
			[
			]
		}
	],
	"incremental_find":
	{
		"height": 21.0
	},
	"input":
	{
		"height": 0.0
	},
	"layout":
	{
		"cells":
		[
			[
				0,
				0,
				1,
				1
			]
		],
		"cols":
		[
			0.0,
			1.0
		],
		"rows":
		[
			0.0,
			1.0
		]
	},
	"menu_visible": true,
	"project": "curve.sublime-project",
	"replace":
	{
		"height": 40.0
	},
	"save_all_on_build": true,
	"select_file":
	{
		"height": 0.0,
		"selected_items":
		[
			[
				"curve",
				"resources/js/binders/curve.js"
			],
			[
				".sql",
				"application/models/sql/station.sql"
			],
			[
				"glo",
				"resources/js/binders/global.js"
			],
			[
				"sql",
				"application/models/sql/histoWind.sql"
			],
			[
				"hist",
				"resources/js/binders/histoWind.js"
			],
			[
				"sun",
				"resources/js/libs/suncalc.js"
			],
			[
				"log.",
				"application/libraries/Log.php"
			],
			[
				"dao",
				"application/models/dao/dao_data.php"
			],
			[
				"glob",
				"application/views/d3/global.php"
			],
			[
				"moon",
				"resources/js/libs/moonPhase.js"
			],
			[
				"curves",
				"application/views/d3/curves.php"
			],
			[
				"tool",
				"resources/js/ProbeTools.js"
			],
			[
				"histor",
				"resources/js/binders/histoRose.js"
			],
			[
				"histo",
				"application/views/d3/histoRose.php"
			],
			[
				"data",
				"application/controllers/data.php"
			],
			[
				"barc",
				"resources/js/binders/barChart.js"
			],
			[
				"cur",
				"resources/js/binders/curves.js"
			],
			[
				"eep",
				"application/models/vp2/EepromDumpAfter.h.php"
			],
			[
				"wind",
				"application/views/d3/wind.php"
			],
			[
				"dao_d",
				"application/models/dao/dao_data.php"
			],
			[
				"bar",
				"application/views/d3/barChart.php"
			],
			[
				"ee",
				"application/models/vp2/EepromDumpAfter.h.php"
			],
			[
				"stat",
				"application/models/station.php"
			],
			[
				"model",
				"system/core/Model.php"
			],
			[
				"configuration",
				"application/controllers/configuration.php"
			],
			[
				"stations-form",
				"application/views/configuration/stations-form.php"
			],
			[
				"base64",
				"resources/js/libs/base64.js"
			],
			[
				"list",
				"application/views/templates/list-viewer.php"
			],
			[
				"page",
				"application/libraries/Page_manager.php"
			],
			[
				"js-l",
				"application/views/templates/js-libs.php"
			],
			[
				"win",
				"resources/js/binders/wind.js"
			],
			[
				"viewer",
				"application/controllers/viewer.php"
			],
			[
				"rou",
				"application/config/routes.php"
			],
			[
				"db-",
				"application/config/db-default.php"
			],
			[
				"footer",
				"application/views/templates/footer.php"
			],
			[
				"curv",
				"application/views/d3/curves.php"
			],
			[
				"list-v",
				"application/views/templates/list-viewer.php"
			],
			[
				"vp2",
				"application/models/vp2.php"
			],
			[
				"data.",
				"application/controllers/data.php"
			],
			[
				"his",
				"resources/js/binders/histoWind.js"
			],
			[
				"histow",
				"application/views/d3/histoWind.php"
			],
			[
				"histw",
				"resources/js/binders/histoWind.js"
			],
			[
				"tools",
				"resources/js/ProbeTools.js"
			],
			[
				"exem",
				"resources/js/binders/exemple.js"
			],
			[
				"smart",
				"resources/js/binders/SmartCurve.js"
			],
			[
				"wind.p",
				"application/views/d3/wind.php"
			],
			[
				"exe",
				"resources/js/binders/exemple.js"
			],
			[
				"css",
				"resources/css/probe.css"
			],
			[
				"eeprom",
				"application/models/vp2/EepromLoop2.h.php"
			],
			[
				"eepr",
				"application/models/vp2/EepromDumpAfter.h.php"
			],
			[
				"breadcrumb",
				"application/views/templates/breadcrumb.php"
			],
			[
				"js-li",
				"application/views/templates/js-libs.php"
			],
			[
				"page_manager",
				"application/libraries/Page_manager.php"
			],
			[
				"foo",
				"application/views/templates/footer.php"
			],
			[
				"head",
				"application/views/templates/header.php"
			],
			[
				"rout",
				"application/config/routes.php"
			],
			[
				"s.i.converter_helper.php",
				"application/helpers/s.i.converter_helper.php"
			]
		],
		"width": 0.0
	},
	"select_project":
	{
		"height": 0.0,
		"selected_items":
		[
		],
		"width": 0.0
	},
	"select_symbol":
	{
		"height": 0.0,
		"selected_items":
		[
		],
		"width": 0.0
	},
	"settings":
	{
	},
	"show_minimap": true,
	"show_open_files": false,
	"show_tabs": true,
	"side_bar_visible": true,
	"side_bar_width": 70.0,
	"status_bar_visible": true,
	"template_settings":
	{
	}
}

data0.json

{"ISS":{"lat":44.5,"lon":0.3,"alt":73.15,"name":"VP2_GTD","id":0,"wCup":1,"rConv":0.2},"sensor":{"SEN_ID":12,"SEN_NAME":"TA:Arch:Various:Wind:SpeedAvg","SEN_HUMAN_NAME":"HUMAN NAME is more than TA:Arch:Various:Wind:SpeedAvg","SEN_MAGNITUDE":"WindSpeed","SEN_ENGINE_UNIT":"m\/s","SEN_USER_UNIT":"km\/h","SEN_DESCRIPTIF":"DESCRIPT","SEN_MIN_REALISTIC":0,"SEN_MAX_REALISTIC":65000,"SEN_DEF_PLOT":"standard","SEN_MAX_ALARM":32000,"SEN_MIN_ALARM":0,"SEN_LAST_CALIBRATE":"2013-05-09","SEN_CALIBRATE_PERIOD":"P0Y6M0DT0H0M0S"},"step":256.08190709046,"lastValue":1.788,"first":"2013-05-21 03:10:00","last":"2013-10-13 14:25:00","count":41805,"min":0,"max":7.5999999046326,"avg":1.1458968759339,"sum":47904.218898416}

data0.tsv

index.html

<!-- 
/** histoWind.php
* D3 binder to visualize <dataset> data
*
* @category D3Binder
* @package  Probe
* @author   alban lopez <[email protected]>
* @license  http://creativecommons.org/licenses/by-nc-sa/3.0/legalcode CC-by-nc-sa-3.0
* @link     http://probe.com/doc
 */
 -->
<html><head></head><body>
<div id="resizable" class="ui-widget-content">
    <h4 class="ui-widget-header">Average Curve Historical Chart</h4>
    <p>Today <span id="TodayBarChar">
        <!-- d3 content should be -dynamically- placed here -->
    </span> graph</p>
    <div id="barSvgArea">
        <!-- d3 content should be -dynamically- placed here -->
    </div>
</div>

<style>
    svg {
        font-size: 10px;
    }
    .spot {
        fill: none;
        stroke-width: 1px;
    }
    .Dot {
        fill: none;
        stroke-width: 1px;
    }
    .spotCircle {
        fill: none;
        stroke-opacity: .3;
        stroke-width: 6px;
    }
    .legend text {
        text-shadow: 0 1px 0 #f0f, 1px 0 0 #f0f, 0 -1px 0 #f0f, -1px 0 0 #f0f;
    }
    .legend .val, .legend .date {
        text-anchor:end;
    }
    .legend .Infos {
        text-anchor:middle;
    }
    .legend .legend_min, .legend .legend_avg, .legend .legend_max { 
        font-size: 8px;
    }

    .sensitive {
        opacity: 0;
    }
    .line {
        fill: none;
        stroke-width: 1px;
    }

    .axis line,.axis path {
        fill: none;
        stroke: #000;
        stroke-width: 1px;
        shape-rendering: crispEdges;
    }

</style>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="http://d3js.org/d3.v3.min.js" type="text/javascript"></script>
<script src="ProbeTools.js" type="text/javascript"></script>
<script src="curve.js" type="text/javascript"></script>
<script>
    var station='station', sensor='sensor';
        var Day_1 = new Date();
        Day_1.setDate(Day_1.getDate() -1);
        var Day_365 = new Date();
        Day_365.setDate(Day_365.getDate() -365);

        var chartD = timeSeriesChart_curves()
                            .width(24*4+50)
                            .height(40)
                            .ajaxUrl('data')
                            .dateParser("%Y-%m-%d %H:%M")
                            .dateDomain([formatDate(Day_1), formatDate(new Date())])
                            .station(station)
                            .sensor(sensor)
                            .toHumanDate(formulaConverter ('strDate', 'ISO'))
                            .Color()
                            .nude(true);
        chartD.loader("#TodayBarChar");


        var chartZoom = timeSeriesChart_curves()
                            .width($('#barSvgArea').width()-16)
                            .height(200)
                            .ajaxUrl('data')
                            .dateParser("%Y-%m-%d %H:%M")
                            .dateDomain([formatDate(Day_365), formatDate(new Date())])
                            .station(station)
                            .sensor(sensor)
                            .toHumanDate(formulaConverter ('strDate', 'ISO'))
                            .Color()
                            .nude(false);
        chartZoom.loader("#barSvgArea");
</script>

</body>
</html>

ProbeTools.js

/** ProbeTools.js
* D3 binder to visualize <dataset> data
*
* @category Tools
* @package  Probe
* @author   alban lopez <[email protected]>
* @license  http://creativecommons.org/licenses/by-nc-sa/3.0/legalcode CC-by-nc-sa-3.0
* @link     http://probe.com/doc
*/

function formatDate(value, separator)
{
    //toDateString()
    if(typeof(separator)==='undefined') separator = 'T';
    var dd = value.getDate(); 
    var mm = value.getMonth()+1;//January is 0! 
    var yyyy = value.getFullYear();
    var H = value.getHours();
    var m = value.getMinutes()
    if(dd<10) dd='0'+dd ; 
    if(mm<10) mm='0'+mm ; 
    if(H<10) H='0'+H ; 
    if(m<10) m='0'+m ; 
    return yyyy + "-" + mm + "-" + dd + separator + H + ":" + m  + ":00";
}

(function() {
    var previousStep = Date.now();
    // console.debug('[0.000 sec]', 'Initialize( console.TimeStep )');
    console.TimeStep = function(msg) {
        var step = Date.now()-previousStep;
        previousStep = Date.now();
        console.debug('['+(step/1000)+' sec]', msg);
    }
})();


/**
retourne la fonction de convertion pour obtenir l'unitée souhaitee
    * @ Si aucun parametre formulaConverter() retourne la liste des grandeur connue
    * @ Si seulement la Grandeur est fournie alors formulaConverter() retourne la liste des unitees possible pour cette grandeur
    * @param inputObj:{Type_De_Grandeur, Unité_SI}
    * @param 
    * @exemple: console.log(formulaConverter());
    * @exemple: console.log(formulaConverter('Temperature'));
    * @exemple: console.log(formulaConverter('Temperature','K'));
    */
function formulaConverter (grandeur, outputUnit)
{
    var units = {

        WindSpeed:{
        	// ref: 'http://en.wikipedia.org/wiki/Speed'
            'm/s':     { name: 'Metres per second',	    symbol: 'm/s',	formula: function(SI){if (!arguments.length) return 'm/s'; return +SI;}},	// ok
            'm.s¹':    { name: 'Metres per second',	    symbol: 'm.s¹',	formula: function(SI){if (!arguments.length) return 'm.s¹'; return +SI;}},	// ok
            'km/h':    { name: 'kilometres per hour',	symbol: 'km/h',	formula: function(SI){if (!arguments.length) return 'km/h'; return 3.6*SI;}},	// ok
            'mph':     { name: 'miles per hour',		symbol: 'mph',	formula: function(SI){if (!arguments.length) return 'mph'; return 2.236936*SI;}},	// ok
            'mi/h':    { name: 'miles per hour',		symbol: 'mi/h',	formula: function(SI){if (!arguments.length) return 'mi/h'; return 2.236936*SI;}},	// ok
            'fps':     { name: 'feet per second',		symbol: 'fps',	formula: function(SI){if (!arguments.length) return 'fps'; return 3.280840*SI;}},	// ok
            'ft/s':    { name: 'feet per second',		symbol: 'ft/s',	formula: function(SI){if (!arguments.length) return 'ft/s'; return 3.280840*SI;}},	// ok
            'knot':    { name: 'Nautical mile',		    symbol: 'knot',	formula: function(SI){if (!arguments.length) return 'knot'; return 1.943844*SI;}},	// ok
            'kn':      { name: 'Nautical mile',		    symbol: 'kn',	formula: function(SI){if (!arguments.length) return 'kn'; return 1.943844*SI;}},	// ok
            'kt':      { name: 'Nautical mile',		    symbol: 'kt',	formula: function(SI){if (!arguments.length) return 'kt'; return 1.943844*SI;}},	// ok
        },
        Temperature:{
            // ref:'http://en.wikipedia.org/wiki/Temperature_conversion_formulas',
            'K':       { name: 'Kelvin',				symbol: 'K',	formula: function(SI){if (!arguments.length) return 'K'; return +SI;}},	// ok
            '°C':      { name: 'Celsius',				symbol: '°C',	formula: function(SI){if (!arguments.length) return '°C'; return SI-273.15;}},	// ok
            '°F':      { name: 'Fahrenheit',			symbol: '°F',	formula: function(SI){if (!arguments.length) return '°F'; return SI*9/5-459.67;}},	// ok
            '°R':      { name: 'Rankine',				symbol: '°R',	formula: function(SI){if (!arguments.length) return '°R'; return SI*9/5;}},	// ok
            '°De':     { name: 'Delisle',				symbol: '°De',	formula: function(SI){if (!arguments.length) return '°De'; return (273.15-SI)*3/2;}},	// ok
            '°N':      { name: 'Newton',				symbol: '°N',	formula: function(SI){if (!arguments.length) return '°N'; return (SI-273.15)*33/100;}},	// ok
            '°Ré':     { name: 'Réaumur',				symbol: '°Ré',	formula: function(SI){if (!arguments.length) return '°Ré'; return (SI-273.15)*4/5;}},	// ok
            '°Rø':     { name: 'Rømer',				    symbol: '°Rø',	formula: function(SI){if (!arguments.length) return '°Rø'; return (SI-273.15)*21/40+7.5;}},	// ok
        },
        Rain:{
            'mm':    { name: 'Millimeters per hour',              symbol: 'mm',     formula: function(SI){if (!arguments.length) return 'mm'; return SI;}},    // ok
            'l/m²':  { name: 'Litre per square metre per hour',   symbol: 'l/m²',   formula: function(SI){if (!arguments.length) return 'l/m²'; return SI;}},    // ok
            'in':    { name: 'inch per hour',                     symbol: 'in',     formula: function(SI){if (!arguments.length) return 'in'; return SI/25.4;}},    // ok
        },
        RainSpeed:{
            'mm/h':    { name: 'Millimeters per hour',              symbol: 'mm/h',     formula: function(SI){if (!arguments.length) return 'mm/h'; return +SI;}},    // ok
            'l/m²/h':  { name: 'Litre per square metre per hour',   symbol: 'l/m²/h',   formula: function(SI){if (!arguments.length) return 'l/m²/h'; return +SI;}},    // ok
            'l/m²/min':{ name: 'Litre per square metre per minute', symbol: 'l/m²/min', formula: function(SI){if (!arguments.length) return 'l/m²/min'; return SI/60;}},  // ok
            'mm/min':  { name: 'Millimeters per ',                  symbol: 'mm/min',   formula: function(SI){if (!arguments.length) return 'mm/min'; return SI/60;}},  // ok
            'in/h':    { name: 'inch per hour',                     symbol: 'in/h',     formula: function(SI){if (!arguments.length) return 'in/h'; return SI/25.4;}},    // ok
            'in/min':  { name: 'inch per minut',                    symbol: 'in/min',   formula: function(SI){if (!arguments.length) return 'in/min'; return SI/25.4/60;}}, // ok
        },
        Percent:{
            '%':   { name: 'amount of water vapor',         symbol: '%',		formula: function(SI){if (!arguments.length) return '%'; return +SI;}},	// ok
        },
        Pressure:{
        	// ref: 'http://en.wikipedia.org/wiki/Pressure'
        	// ref: 'http://www.sensorsone.co.uk/pressure-measurement-glossary/pa-pascal-pressure-unit.html'
            'Pa':      { name: 'Pascal', 					symbol: 'Pa',		formula: function(SI){if (!arguments.length) return 'Pa'; return +SI;}},
            'hPa':     { name: 'Hecto Pascal', 			    symbol: 'hPa',		formula: function(SI){if (!arguments.length) return 'hPa'; return SI/100;}},	// ok
            'bar':     { name: 'Bar', 						symbol: 'bar',		formula: function(SI){if (!arguments.length) return 'bar'; return SI/100000;}},	// ok
            'mbar':    { name: 'milliBar', 				    symbol: 'mbar',		formula: function(SI){if (!arguments.length) return 'mbar'; return SI/100;}},	// ok
            'at':      { name: 'Technical atmosphere', 	    symbol: 'at',		formula: function(SI){if (!arguments.length) return 'at'; return 0.0000101972*SI;}},	// ok
            'atm':     { name: 'Standard atmosphere', 		symbol: 'atm',		formula: function(SI){if (!arguments.length) return 'atm'; return 0.00000986923*SI;}},	// ok
            'Torr':    { name: 'Torr', 					    symbol: 'Torr',		formula: function(SI){if (!arguments.length) return 'Torr'; return 0.00750062*SI;}},	// ok
            'psi':     { name: 'Pounds per square inch', 	symbol: 'psi',		formula: function(SI){if (!arguments.length) return 'psi'; return 0.0001450377*SI;}},	// ok
            'N/m2':    { name: 'Newtons per square metre',  symbol: 'N/m2',		formula: function(SI){if (!arguments.length) return 'N/m2'; return +SI;}},	// ok
            'mmHg':    { name: 'Millimeters of Mercury', 	symbol: 'mmHg',		formula: function(SI){if (!arguments.length) return 'mmHg'; return 0.00750062*SI;}},	// ok
            'mmH2O':   { name: 'Millimeters of Wather', 	symbol: 'mmH2O',	formula: function(SI){if (!arguments.length) return 'mmH2O'; return 0.000101972*SI;}},	// ok
        },
        Evapotranspiration:{
        	// ref: 'http://en.wikipedia.org/wiki/Evapotranspiration'
            'mm':      { name: 'Evapo Transpiration',        symbol: 'mm',		formula: function(SI){if (!arguments.length) return 'mm'; return +SI;}},	// ok
        },
        angle:{
        	// ref: 'http://en.wikipedia.org/wiki/Evapotranspiration'
            '°':       { name: 'Degrees',			        symbol: '°',		formula: function(SI){if (!arguments.length) return '°'; return +SI;}},	// ok
            'Rad':     { name: 'Radians',				    symbol: 'Rad',		formula: function(SI){if (!arguments.length) return 'Rad'; return SI*(Math.pi()/180);}},	// ok
            'tr':      { name: 'Turns',			    	    symbol: 'tr',		formula: function(SI){if (!arguments.length) return 'tr'; return SI/360;}},	// ok
            'CarDir':  { name: 'Cardinal directions',	    symbol: '',			formula: function(SI){if (!arguments.length) return ''; 	// ok
                	var windDir = ['N', 'NNE','NE','ENE','E','ESE','SE','SSE','S','SSW','SW','WSW','W','WNW','NW','NNW'];
                	return windDir[Math.round(SI/22.5)%16];	// ok
                }
            },
        },
        UV: {
            'Idx': { name: 'UV index',     symbol: '',		formula: function(SI){if (!arguments.length) return ''; return +SI;}},	// ok
        },
        Solar: {
            'w/m²':    { name: 'Solar radiation',     symbol: 'w/m²',   formula: function(SI){if (!arguments.length) return 'w/m²'; return +SI;}},    // ok
        },
        strDate: {
            'Auto':    { name: 'Auto',     symbol: 'Browser display',   formula: function(d){if (!arguments.length) return ''; return d;}},    // ok
            'ISO':    { name: 'ISO-8601',     symbol: 'yyyy-mm-dd hh:mm:ss',   formula: function(d){if (!arguments.length) return ''; return formatDate(d, ' ');} },    // ok
        }
    };

    // si on as pas d'argument demandé
    if (!arguments.length) return d3.keys(units); // return units
    // si on demande une grandeur sans lunite de conversion
    if (arguments.length==1) return d3.keys( units[grandeur] ); // return units[grandeur]
    // units.foreach(logArrayElements);
    if (units[grandeur] && units[grandeur][outputUnit]) {
        // console.log(grandeur, outputUnit);
        return units[grandeur][outputUnit].formula;
    }
    return function(SI){if (!arguments.length) return '';return +SI;};
}

function logArrayElements(element, index, array) {
    console.log("a[" + index + "] = " + element);
}

/**
*
*  MD5 (Message-Digest Algorithm)
*  http://www.webtoolkit.info/
*
**/
 
var MD5 = function (string) {
 
    function RotateLeft(lValue, iShiftBits) {
        return (lValue<<iShiftBits) | (lValue>>>(32-iShiftBits));
    }
 
    function AddUnsigned(lX,lY) {
        var lX4,lY4,lX8,lY8,lResult;
        lX8 = (lX & 0x80000000);
        lY8 = (lY & 0x80000000);
        lX4 = (lX & 0x40000000);
        lY4 = (lY & 0x40000000);
        lResult = (lX & 0x3FFFFFFF)+(lY & 0x3FFFFFFF);
        if (lX4 & lY4) {
            return (lResult ^ 0x80000000 ^ lX8 ^ lY8);
        }
        if (lX4 | lY4) {
            if (lResult & 0x40000000) {
                return (lResult ^ 0xC0000000 ^ lX8 ^ lY8);
            } else {
                return (lResult ^ 0x40000000 ^ lX8 ^ lY8);
            }
        } else {
            return (lResult ^ lX8 ^ lY8);
        }
    }
 
    function F(x,y,z) { return (x & y) | ((~x) & z); }
    function G(x,y,z) { return (x & z) | (y & (~z)); }
    function H(x,y,z) { return (x ^ y ^ z); }
    function I(x,y,z) { return (y ^ (x | (~z))); }
 
    function FF(a,b,c,d,x,s,ac) {
        a = AddUnsigned(a, AddUnsigned(AddUnsigned(F(b, c, d), x), ac));
        return AddUnsigned(RotateLeft(a, s), b);
    };
 
    function GG(a,b,c,d,x,s,ac) {
        a = AddUnsigned(a, AddUnsigned(AddUnsigned(G(b, c, d), x), ac));
        return AddUnsigned(RotateLeft(a, s), b);
    };
 
    function HH(a,b,c,d,x,s,ac) {
        a = AddUnsigned(a, AddUnsigned(AddUnsigned(H(b, c, d), x), ac));
        return AddUnsigned(RotateLeft(a, s), b);
    };
 
    function II(a,b,c,d,x,s,ac) {
        a = AddUnsigned(a, AddUnsigned(AddUnsigned(I(b, c, d), x), ac));
        return AddUnsigned(RotateLeft(a, s), b);
    };
 
    function ConvertToWordArray(string) {
        var lWordCount;
        var lMessageLength = string.length;
        var lNumberOfWords_temp1=lMessageLength + 8;
        var lNumberOfWords_temp2=(lNumberOfWords_temp1-(lNumberOfWords_temp1 % 64))/64;
        var lNumberOfWords = (lNumberOfWords_temp2+1)*16;
        var lWordArray=Array(lNumberOfWords-1);
        var lBytePosition = 0;
        var lByteCount = 0;
        while ( lByteCount < lMessageLength ) {
            lWordCount = (lByteCount-(lByteCount % 4))/4;
            lBytePosition = (lByteCount % 4)*8;
            lWordArray[lWordCount] = (lWordArray[lWordCount] | (string.charCodeAt(lByteCount)<<lBytePosition));
            lByteCount++;
        }
        lWordCount = (lByteCount-(lByteCount % 4))/4;
        lBytePosition = (lByteCount % 4)*8;
        lWordArray[lWordCount] = lWordArray[lWordCount] | (0x80<<lBytePosition);
        lWordArray[lNumberOfWords-2] = lMessageLength<<3;
        lWordArray[lNumberOfWords-1] = lMessageLength>>>29;
        return lWordArray;
    };
 
    function WordToHex(lValue) {
        var WordToHexValue="",WordToHexValue_temp="",lByte,lCount;
        for (lCount = 0;lCount<=3;lCount++) {
            lByte = (lValue>>>(lCount*8)) & 255;
            WordToHexValue_temp = "0" + lByte.toString(16);
            WordToHexValue = WordToHexValue + WordToHexValue_temp.substr(WordToHexValue_temp.length-2,2);
        }
        return WordToHexValue;
    };
 
    function Utf8Encode(string) {
        string = string.replace(/\r\n/g,"\n");
        var utftext = "";
 
        for (var n = 0; n < string.length; n++) {
 
            var c = string.charCodeAt(n);
 
            if (c < 128) {
                utftext += String.fromCharCode(c);
            }
            else if((c > 127) && (c < 2048)) {
                utftext += String.fromCharCode((c >> 6) | 192);
                utftext += String.fromCharCode((c & 63) | 128);
            }
            else {
                utftext += String.fromCharCode((c >> 12) | 224);
                utftext += String.fromCharCode(((c >> 6) & 63) | 128);
                utftext += String.fromCharCode((c & 63) | 128);
            }
 
        }
 
        return utftext;
    };
 
    var x=Array();
    var k,AA,BB,CC,DD,a,b,c,d;
    var S11=7, S12=12, S13=17, S14=22;
    var S21=5, S22=9 , S23=14, S24=20;
    var S31=4, S32=11, S33=16, S34=23;
    var S41=6, S42=10, S43=15, S44=21;
 
    string = Utf8Encode(string);
 
    x = ConvertToWordArray(string);
 
    a = 0x67452301; b = 0xEFCDAB89; c = 0x98BADCFE; d = 0x10325476;
 
    for (k=0;k<x.length;k+=16) {
        AA=a; BB=b; CC=c; DD=d;
        a=FF(a,b,c,d,x[k+0], S11,0xD76AA478);
        d=FF(d,a,b,c,x[k+1], S12,0xE8C7B756);
        c=FF(c,d,a,b,x[k+2], S13,0x242070DB);
        b=FF(b,c,d,a,x[k+3], S14,0xC1BDCEEE);
        a=FF(a,b,c,d,x[k+4], S11,0xF57C0FAF);
        d=FF(d,a,b,c,x[k+5], S12,0x4787C62A);
        c=FF(c,d,a,b,x[k+6], S13,0xA8304613);
        b=FF(b,c,d,a,x[k+7], S14,0xFD469501);
        a=FF(a,b,c,d,x[k+8], S11,0x698098D8);
        d=FF(d,a,b,c,x[k+9], S12,0x8B44F7AF);
        c=FF(c,d,a,b,x[k+10],S13,0xFFFF5BB1);
        b=FF(b,c,d,a,x[k+11],S14,0x895CD7BE);
        a=FF(a,b,c,d,x[k+12],S11,0x6B901122);
        d=FF(d,a,b,c,x[k+13],S12,0xFD987193);
        c=FF(c,d,a,b,x[k+14],S13,0xA679438E);
        b=FF(b,c,d,a,x[k+15],S14,0x49B40821);
        a=GG(a,b,c,d,x[k+1], S21,0xF61E2562);
        d=GG(d,a,b,c,x[k+6], S22,0xC040B340);
        c=GG(c,d,a,b,x[k+11],S23,0x265E5A51);
        b=GG(b,c,d,a,x[k+0], S24,0xE9B6C7AA);
        a=GG(a,b,c,d,x[k+5], S21,0xD62F105D);
        d=GG(d,a,b,c,x[k+10],S22,0x2441453);
        c=GG(c,d,a,b,x[k+15],S23,0xD8A1E681);
        b=GG(b,c,d,a,x[k+4], S24,0xE7D3FBC8);
        a=GG(a,b,c,d,x[k+9], S21,0x21E1CDE6);
        d=GG(d,a,b,c,x[k+14],S22,0xC33707D6);
        c=GG(c,d,a,b,x[k+3], S23,0xF4D50D87);
        b=GG(b,c,d,a,x[k+8], S24,0x455A14ED);
        a=GG(a,b,c,d,x[k+13],S21,0xA9E3E905);
        d=GG(d,a,b,c,x[k+2], S22,0xFCEFA3F8);
        c=GG(c,d,a,b,x[k+7], S23,0x676F02D9);
        b=GG(b,c,d,a,x[k+12],S24,0x8D2A4C8A);
        a=HH(a,b,c,d,x[k+5], S31,0xFFFA3942);
        d=HH(d,a,b,c,x[k+8], S32,0x8771F681);
        c=HH(c,d,a,b,x[k+11],S33,0x6D9D6122);
        b=HH(b,c,d,a,x[k+14],S34,0xFDE5380C);
        a=HH(a,b,c,d,x[k+1], S31,0xA4BEEA44);
        d=HH(d,a,b,c,x[k+4], S32,0x4BDECFA9);
        c=HH(c,d,a,b,x[k+7], S33,0xF6BB4B60);
        b=HH(b,c,d,a,x[k+10],S34,0xBEBFBC70);
        a=HH(a,b,c,d,x[k+13],S31,0x289B7EC6);
        d=HH(d,a,b,c,x[k+0], S32,0xEAA127FA);
        c=HH(c,d,a,b,x[k+3], S33,0xD4EF3085);
        b=HH(b,c,d,a,x[k+6], S34,0x4881D05);
        a=HH(a,b,c,d,x[k+9], S31,0xD9D4D039);
        d=HH(d,a,b,c,x[k+12],S32,0xE6DB99E5);
        c=HH(c,d,a,b,x[k+15],S33,0x1FA27CF8);
        b=HH(b,c,d,a,x[k+2], S34,0xC4AC5665);
        a=II(a,b,c,d,x[k+0], S41,0xF4292244);
        d=II(d,a,b,c,x[k+7], S42,0x432AFF97);
        c=II(c,d,a,b,x[k+14],S43,0xAB9423A7);
        b=II(b,c,d,a,x[k+5], S44,0xFC93A039);
        a=II(a,b,c,d,x[k+12],S41,0x655B59C3);
        d=II(d,a,b,c,x[k+3], S42,0x8F0CCC92);
        c=II(c,d,a,b,x[k+10],S43,0xFFEFF47D);
        b=II(b,c,d,a,x[k+1], S44,0x85845DD1);
        a=II(a,b,c,d,x[k+8], S41,0x6FA87E4F);
        d=II(d,a,b,c,x[k+15],S42,0xFE2CE6E0);
        c=II(c,d,a,b,x[k+6], S43,0xA3014314);
        b=II(b,c,d,a,x[k+13],S44,0x4E0811A1);
        a=II(a,b,c,d,x[k+4], S41,0xF7537E82);
        d=II(d,a,b,c,x[k+11],S42,0xBD3AF235);
        c=II(c,d,a,b,x[k+2], S43,0x2AD7D2BB);
        b=II(b,c,d,a,x[k+9], S44,0xEB86D391);
        a=AddUnsigned(a,AA);
        b=AddUnsigned(b,BB);
        c=AddUnsigned(c,CC);
        d=AddUnsigned(d,DD);
    }
 
    var temp = WordToHex(a)+WordToHex(b)+WordToHex(c)+WordToHex(d);
 
    return temp.toLowerCase();
}

thumbnail.png