Bar Chart In-place Update

by Nivaldo

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<p>CLICK ME</p>
<svg id="daychart"></svg>

CSS

.bar {
    fill: steelblue;
}
.bar:hover {
    fill: brown;
}
.axis {
    font: 10px sans-serif;
}
.axis path, .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}
.x.axis path {
}
.line {
    fill: none;
    stroke: steelblue;
    stroke-width: 1.5px;
}

p {
    background-color: red; 
    width: 100px; 
    cursor: pointer;
    text-align: center;
}

JavaScript

data1 = [{
    "xaxis": "0",
        "max_energy": "10.000",
        "max_efficiency": "0.000"
}, {
    "xaxis": "1",
        "max_energy": "20.000",
        "max_efficiency": "0.000"
}, {
    "xaxis": "2",
        "max_energy": "30.000",
        "max_efficiency": "0.000"
}, {
    "xaxis": "3",
        "max_energy": "0.000",
        "max_efficiency": "0.000"
}, {
    "xaxis": "4",
        "max_energy": "0.000",
        "max_efficiency": "0.000"
}, {
    "xaxis": "5",
        "max_energy": "0.000",
        "max_efficiency": "0.000"
}, {
    "xaxis": "6",
        "max_energy": "6.910",
        "max_efficiency": "0.281"
}, {
    "xaxis": "7",
        "max_energy": "13.483",
        "max_efficiency": "0.548"
}, {
    "xaxis": "8",
        "max_energy": "18.708",
        "max_efficiency": "0.765"
}, {
    "xaxis": "9",
        "max_energy": "26.609",
        "max_efficiency": "1.081"
}, {
    "xaxis": "10",
        "max_energy": "31.620",
        "max_efficiency": "1.285"
}, {
    "xaxis": "11",
        "max_energy": "33.840",
        "max_efficiency": "1.375"
}, {
    "xaxis": "12",
        "max_energy": "35.415",
        "max_efficiency": "1.439"
}, {
    "xaxis": "13",
        "max_energy": "36.371",
        "max_efficiency": "1.476"
}, {
    "xaxis": "14",
        "max_energy": "36.352",
        "max_efficiency": "1.413"
}, {
    "xaxis": "15",
        "max_energy": "33.678",
        "max_efficiency": "1.403"
}, {
    "xaxis": "16",
        "max_energy": "30.418",
        "max_efficiency": "1.370"
}, {
    "xaxis": "17",
        "max_energy": "25.230",
        "max_efficiency": "1.197"
}, {
    "xaxis": "18",
        "max_energy": "18.545",
        "max_efficiency": "0.825"
}, {
    "xaxis": "19",
        "max_energy": "5.413",
        "max_efficiency": "0.546"
}, {
    "xaxis": "20",
        "max_energy": "0.000",
        "max_efficiency": "0.000"
}, {
    "xaxis": "21",
        "max_energy": "0.000",
        "max_efficiency": "0.000"
}, {
    "xaxis": "22",
    ...