D3 data binding

This is an sample code that shows how D3 bind data to DOM elements. It uses CSS selectors to select the container(#placeholder). The method data() passes dataset array, whose elements are placed 'virtually' by the method enter() to selected elements (p). The method append() actually creates DOM elements.

JS Bin on jsbin.com

        <script type="text/javascript">
            var dataset = [ 5, 10, 15, 20, 25 ];
            d3.select("#placeholder").selectAll("p")
            .data(dataset)
            .enter()
            .append("p")
            .attr("class", function(d, i) { return i + "chart"; })
            .text(function(d) { return d; })
            .style("color", function(d) {
                if (d > 15) {   //Threshold of 15
                    return "red";
                } else {
                    return "black";
                }
            });
        </script>