binding api

by Igor Cuckovic

HTML

<svg></svg>

CSS

.axis path, .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}
.bar {
    fill: steelblue;
}
.x.axis path {
    display: none;
}

JavaScript

/* binding api */

var data = [50, 80, 150, 200];

var data1 = [50, 80, 27, 55];

var margin = {
    top: 50,
    right: 50,
    bottom: 50,
    left: 100
};

var width = 500;
var height = 400;

var svg = d3.select("svg").attr({
    width: width + "px",
    height: height + "px"
}).append("g")
    .attr("transform", "translate(" + [margin.left, margin.top] + ")");






var createChart = function () {
    /*
    var width = 720, // default width
      height = 340,
        data = [50, 80, 150, 200];
        */
        

  
    
    var chart = function (where) {
        
        
        var formatPercent = d3.format(".0%");    
        
        var xScale = d3.scale.ordinal()
            .domain(data.map(function (d, i) {
            return i;
        }))
            .range([0, width]);

        var yScale = d3.scale.linear()
            .domain([0, d3.max(data, function (d) {
            return d;
        })])
            .range([height, 0]);

        var xAxis = d3.svg.axis()
            .scale(xScale)
            .orient("bottom");

        var yAxis = d3.svg.axis()
            .scale(yScale)
            .orient("left")
            .tickFormat(formatPercent);
        
        where.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);
        
        where.append("g")
            .attr("class", "y axis")
            .call(yAxis)
            .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", ".71em")
            .style("text-anchor", "end")
            .text("Frequency");
        
        var circles = where.selectAll("circle")
            .data(data)
            .enter().append("circle")
            .attr({
            "cx": function (d, i) {
                return width / data.length * i;
            },
                "cy": function (d, i) {
                return (height - (margin.bottom + margin.top)) - d;
      ...