testing d3.js with chart

http://d3js.org/

by chrisloughnane

HTML

<script src="http://d3js.org/d3.v2.js"></script>
<div id='graph'></div>
<button id='addbar'>add data</button>
<button id='deletebar'>delete data</button>
<button id='randomize'>randomize data</button>

CSS

body {background-color:#eee; font-family:verdana; text-align:center;}

#graph {max-width:90%}

svg {margin:20px;background-color:white; width:100%}

#line{ fill:none; stroke:red; stroke-width:2pt; pointer-events:none }
svg circle{ fill:white; stroke:black; stroke-width:0.5pt; }
svg #linegroup text {font-size: 12pt; }
svg rect, svg circle {cursor:pointer}

svg #yaxis line {stroke:black; fill:none; stroke-width:0.2pt; pointer-events:none; stroke-dasharray:5 5;}
svg #yaxis_text {font-size: 13px; }

JavaScript

_id = 0;

random_data = function() {
    return {
        id: _id++,
        value: Math.round(Math.random() * 100)
    }
}
        

data = [random_data(), random_data(), random_data()];
    
max_val = function() {
    return d3.max(data, function(d) {
        return d.value
    })
};

color = d3.scale.category20();

w = 1000, h = 500;

vis = d3.select("#graph").append("svg:svg")
    .attr("width", w)
    .attr("height", h)
    .attr("viewBox",0+" "+0+" "+w+" "+h);

vis.append("svg:g").attr('id', 'bargroup');
vis.append("svg:g").attr("id", "yaxis");
vis.append("svg:g").attr("id", "yaxis_text");
vis.append("svg:g").attr("id", "linegroup");

        
fline = d3.svg.line().interpolate("cardinal").x(function(d, i) {
    return x_f(i + 0.5);
}).y(function(d) {
    return y_f(d.value);
});





function update() {

    // actualiser echelle
    y_f = d3.scale.linear().domain([0, max_val()]).range([h - 20, (h - 20) * .1]);
    h_f = d3.scale.linear().domain([0, max_val()]).range([0, (h - 20) * .9]);
    x_f = d3.scale.linear().domain([0, data.length]).range([40, w]);



    var yaxis_line = vis.select("#yaxis").selectAll('line').data(y_f.ticks(5));

    yaxis_line.enter().append("svg:line")
        .attr("x1", 40)
        .attr("x2", w)
        .attr("y1", y_f)
        .attr("y2", y_f);

    yaxis_line.transition().duration(800)
        .attr("y1", y_f)
        .attr("y2", y_f);

    yaxis_line.exit().remove();

    var yaxis_text = vis.select("#yaxis_text").selectAll('text').data(y_f.ticks(5));

    yaxis_text.enter().append("svg:text")
        .attr("x", 20)
        .attr("y", y_f)
        .attr("dy", "3pt")
        .attr("text-anchor", "middle")
        .text(function(d) {
                return d
            });


    yaxis_text.transition().duration(800)
        .attr("y", y_f)
        .text(function(d) {
                return d
            });

    yaxis_text.exit().remove();






    /***/


    var rects = vis.select('#bargroup').selectAll('rect').data(data,...