mromanoff/D3.markdown

## D3.markdown

      
    Raw
  

              D3.markdown
            
          
    D3

D3 column chart with data labels
A Pen by Michael on CodePen.
License.

  
## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>chart</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>
<body>
<div class="container">
  <h1>D3 charts</h1>
    <div class="row">
    <div class="col-md-6 graph-a"></div>
    <div class="col-md-6 graph-b"></div>
  </div>
  <div class="row">
    <div class="col-md-6 graph-c"></div>
    <div class="col-md-6 graph-d"></div>
  </div>
</div>
 <script src="script.js"></script>
</body>
</html>

## script.js
var VerticalBarGraph = function (el, series, options) {
    options = (options || {});

    this.el = d3.select(el);
    this.width = options.width || 300;
    this.height = options.height || 150;
    this.padding = options.padding || 1;
    this.className = options.className;
    this.series = series;
};

VerticalBarGraph.prototype.colorPicker = function (v) {
    var color;
    if (v <= 10) {
        color = "#ccc";
    }
    else if (v >= 20) {
        color = "#ff3300";
    }
    else {
        color = "#ff9911";
    }
    return color;
};

VerticalBarGraph.prototype.draw = function () {
    var w = this.width;
    var h = this.height;
    var series = this.series;
    var padding = this.padding;
    var colorPicker = this.colorPicker;

    console.log('this', this);
    console.log('this.series.length', this.series.length);

    var svg = this.el.append("svg")
        //.attr("width", this.w)
        //.attr("height", this.h);

    svg.selectAll("rect")
        .data(series)
        .enter()
        .append("rect")
        .attr({
            x: function (d, y) {
                return y * (w / series.length);
            },
            y: function (d) {
                return h - d * 4;
            },
            width: function (d) {
                return w / series.length - padding;
            },
            height: function (d) {
                return d * 4;
            },
            //fill:    function (d)     { return "rgb(" + (d*10) + "," + (d*3) + " ,0)"; }
            fill: function (d) {
                return colorPicker(d);
            }
        });

    svg.selectAll("text")
        .data(series)
        .enter()
        .append("text")
        .text(function (d) {
            return d;
        })
        .attr({
            "text-anchor": "middle",
            x: function (d, y) {
                return y * (w / series.length) + (w / series.length - padding) / 2;
            },
            y: function (d) {
                return h - (d * 4) + 15;
            },
            "font-family": "sans-serif",
            "font-size": 12,
            "fill": "#ffffff"
        });

};

var graphA = new VerticalBarGraph('.graph-a', [5, 6, 10, 13, 19, 21, 25, 23, 24, 22, 18, 12, 8]);
var graphB = new VerticalBarGraph('.graph-b', [19, 21, 25, 23, 24, 22, 18, 12, 8]);

var graphC = new VerticalBarGraph('.graph-c', [1, 1.6, 2, 1.3, 1.5, 2.1, 2.2, 2.1, 2, 1.9, 1.7, 1.6, 1.3, 1, 0.8]);


graphA.draw();
graphB.draw();
graphC.draw();
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>chart</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	</head>
	<body>
	<div class="container">
	<h1>D3 charts</h1>
	<div class="row">
	<div class="col-md-6 graph-a"></div>
	<div class="col-md-6 graph-b"></div>
	</div>
	<div class="row">
	<div class="col-md-6 graph-c"></div>
	<div class="col-md-6 graph-d"></div>
	</div>
	</div>
	<script src="script.js"></script>
	</body>
	</html>
	var VerticalBarGraph = function (el, series, options) {
	options = (options \|\| {});

	this.el = d3.select(el);
	this.width = options.width \|\| 300;
	this.height = options.height \|\| 150;
	this.padding = options.padding \|\| 1;
	this.className = options.className;
	this.series = series;
	};

	VerticalBarGraph.prototype.colorPicker = function (v) {
	var color;
	if (v <= 10) {
	color = "#ccc";
	}
	else if (v >= 20) {
	color = "#ff3300";
	}
	else {
	color = "#ff9911";
	}
	return color;
	};

	VerticalBarGraph.prototype.draw = function () {
	var w = this.width;
	var h = this.height;
	var series = this.series;
	var padding = this.padding;
	var colorPicker = this.colorPicker;

	console.log('this', this);
	console.log('this.series.length', this.series.length);

	var svg = this.el.append("svg")
	//.attr("width", this.w)
	//.attr("height", this.h);

	svg.selectAll("rect")
	.data(series)
	.enter()
	.append("rect")
	.attr({
	x: function (d, y) {
	return y * (w / series.length);
	},
	y: function (d) {
	return h - d * 4;
	},
	width: function (d) {
	return w / series.length - padding;
	},
	height: function (d) {
	return d * 4;
	},
	//fill: function (d) { return "rgb(" + (d10) + "," + (d3) + " ,0)"; }
	fill: function (d) {
	return colorPicker(d);
	}
	});

	svg.selectAll("text")
	.data(series)
	.enter()
	.append("text")
	.text(function (d) {
	return d;
	})
	.attr({
	"text-anchor": "middle",
	x: function (d, y) {
	return y * (w / series.length) + (w / series.length - padding) / 2;
	},
	y: function (d) {
	return h - (d * 4) + 15;
	},
	"font-family": "sans-serif",
	"font-size": 12,
	"fill": "#ffffff"
	});

	};

	var graphA = new VerticalBarGraph('.graph-a', [5, 6, 10, 13, 19, 21, 25, 23, 24, 22, 18, 12, 8]);
	var graphB = new VerticalBarGraph('.graph-b', [19, 21, 25, 23, 24, 22, 18, 12, 8]);

	var graphC = new VerticalBarGraph('.graph-c', [1, 1.6, 2, 1.3, 1.5, 2.1, 2.2, 2.1, 2, 1.9, 1.7, 1.6, 1.3, 1, 0.8]);



	graphA.draw();
	graphB.draw();
	graphC.draw();