bar chart update - randomized input

by Nivaldo

HTML

<div class="chart"></div>

CSS

.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}

JavaScript

var data = [4, 8, 15, 16, 23, 42];

var x = d3.scale.linear()
    .domain([0, d3.max(data)])
    .range([0, 420]);

d3.select(".chart")
  .selectAll("div")
    .data(data)
  .enter().append("div")
    .style("width", function(d) { return x(d) + "px"; })
    .text(function(d) { return d; });

d3.select("body").append("button").text("Randomize")
    .on("click",add);

d3.select("body").append("button").text("Pie").on("click",drawpie);

function drawpie(){
    var w = 300;
            var h = 300;

            var dataset = [ 5, 10, 20, 45, 6, 25 ];

            var outerRadius = w / 2;
            var innerRadius = 70;
            var arc = d3.svg.arc()
                            .innerRadius(innerRadius)
                            .outerRadius(outerRadius);

            var pie = d3.layout.pie();

            //Easy colors accessible via a 10-step ordinal scale
            var color = d3.scale.category10();

            //Create SVG element
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);

            //Set up groups
            var arcs = svg.selectAll("g.arc")
                          .data(pie(data))
                          .enter()
                          .append("g")
                          .attr("class", "arc")
                          .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")");

            //Draw arc paths
            arcs.append("path")
                .attr("fill", function(d, i) {
                    return color(i);
                })
                .attr("d", arc);

            //Labels
            arcs.append("text")
                .attr("transform", function(d) {
                    return "translate(" + arc.centroid(d) + ")";
                })
                .attr("text-anchor", "middle")
                .text(function(d) {
                    return d.value;
                });
}


function...