D3:Learning:Data + local array -> simple html bar chart

A starting point to clone and get investigating quickly.

by Sky Sigal

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="vis">
</div>

CSS

#vis {border:Solid 1px;}
#vis div {background:steelblue;height:1.5em;margin:2px 0 2px 0;}

JavaScript

jQuery(document).ready(function() {

    var pdata=[4, 8, 15, 16, 23, 42]

    //Select the single work area in which 
    var playArea = d3.select("#vis");
    
    //Create a set of *all* the div bars that
    // *we want to exist* (the set is still empty for now):
    var bars = playArea.selectAll("div");
    
    
    //Join the previously defined data, 
    //For each data item joined (enter'ed) to the set, 
    //add a 'div', using 'functors' delegates to set the data:
    bars
    .data(pdata, function(x){return x;})
    .enter()
    .append("div")
    .style("width", function(d){return d*10 + "px"})
    .text(function(d) { return "Orig: "+ d; });    
});