zhonglism/stock_bar

## stock_bar
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>
      var url="https://gist.githubusercontent.com/zhonglism/2d4312a44fca9880e0339104f27dea81/raw/02b513037b69c881a4cc8da7ceee52bcc88caa05/column_stock"
      d3.csv(url, function (error, data) {

        var values= data.map(function (d) {
                return +d.value;
            });


        var barWidth = 35, barPadding = 3;
        var maxValue = d3.max(values);

        var graphWidth = data.length * (barWidth + barPadding) - barPadding;
        var margin = { top: 10, right: 10, bottom: 100, left: 50 };

        var totalWidth = graphWidth + margin.left + margin.right;
        var totalHeight = maxValue + margin.top + margin.bottom;

        var axisPadding = 3;

        var svg = d3.select('body')
            .append('svg')
            .attr({ width: totalWidth, height: totalHeight });

        svg.append('rect').attr({
                width: totalWidth, height: totalHeight,
                fill: 'white',
                stroke: 'black', 'stroke-width': 1
            });

        var mainGroup = svg
            .append('g')
            .attr('transform', 'translate(' + margin.left + ',' + margin.top + ")");

        mainGroup.append('rect').attr({
            fill: 'rgba(0,0,0,0.1)',
            width: totalWidth - (margin.left + margin.right),
            height: totalHeight - (margin.bottom + margin.top)
        });

        function xloc(d, i) { return i * (barWidth + barPadding); }
        function yloc(d) { return maxValue - d; }
        function translator(d, i) {
            return "translate(" + xloc(d, i) + "," + yloc(d) + ")";
        }

        var barGroup = mainGroup.selectAll('g')
            .data(values)
            .enter()
            .append('g')
            .attr('transform', translator);

        barGroup.append('rect')
            .attr({
                fill: 'steelblue',
                width: barWidth,
                height: function (d) { return d; }
            });

        var textTranslator = "translate(" + barWidth / 2 + ",0)";

        barGroup.append('text')
            .text(function(d) { return d; })
            .attr({
                fill: 'white',
                'alignment-baseline': 'before-edge',
                'text-anchor': 'middle',
                transform: textTranslator
            })
            .style('font', '16px sans-serif');

        var leftAxisGroup = svg.append('g');
        var axisPadding = 3;
        leftAxisGroup.attr({ transform: 'translate(' + (margin.left - axisPadding) + ',' + margin.top + ')' });
        var scale = d3.scale
          .linear()
          .domain([maxValue, 0])
          .range([0, maxValue]);

        var axis = d3.svg.axis()
            .orient('left')
            .scale(scale);

        var axisNodes = leftAxisGroup.call(axis);
        var domain = axisNodes.selectAll('.domain');
        domain.attr({
            fill: 'none',
            'stroke-width': 1,
            stroke: 'black'
        });
        var ticks = axisNodes.selectAll('.tick line');
        ticks.attr({
            fill: 'none',
            'stroke-width': 1,
            stroke: 'black'
        });


        var date = data.map(function(d) { return d.date; });
        var bottomAxisScale = d3.scale.ordinal()
            .domain(date)
            .rangeBands([axisPadding, graphWidth + axisPadding]);

        var bottomAxis = d3.svg
            .axis()
            .scale(bottomAxisScale)
            .orient("bottom");

        var bottomAxisX = margin.left - axisPadding;
        var bottomAxisY = totalHeight - margin.bottom + axisPadding;

        var bottomAxisGroup = svg.append("g")
            .attr({ transform: 'translate(' + bottomAxisX + ',' + bottomAxisY + ')' });

        var bottomAxisNodes = bottomAxisGroup.call(bottomAxis);
        styleAxisNodes(bottomAxisNodes);

        bottomAxisNodes.selectAll("text")
            .style('text-anchor', 'center')
            .attr({
                dx: -35,
                dy: -5,
                transform: 'rotate(-90)'
            });

        function styleAxisNodes(axisNodes) {
            axisNodes.selectAll('.domain')
                .attr({
                    fill: 'none',
                    'stroke-width': 1,
                    stroke: 'black'
                });
            axisNodes.selectAll('.tick line')
                .attr({
                    fill: 'none',
                    'stroke-width': 1,
                    stroke: 'black'
                });
        }

        });
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	</head>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>
	var url="https://gist.githubusercontent.com/zhonglism/2d4312a44fca9880e0339104f27dea81/raw/02b513037b69c881a4cc8da7ceee52bcc88caa05/column_stock"
	d3.csv(url, function (error, data) {

	var values= data.map(function (d) {
	return +d.value;
	});


	var barWidth = 35, barPadding = 3;
	var maxValue = d3.max(values);

	var graphWidth = data.length * (barWidth + barPadding) - barPadding;
	var margin = { top: 10, right: 10, bottom: 100, left: 50 };

	var totalWidth = graphWidth + margin.left + margin.right;
	var totalHeight = maxValue + margin.top + margin.bottom;

	var axisPadding = 3;

	var svg = d3.select('body')
	.append('svg')
	.attr({ width: totalWidth, height: totalHeight });

	svg.append('rect').attr({
	width: totalWidth, height: totalHeight,
	fill: 'white',
	stroke: 'black', 'stroke-width': 1
	});

	var mainGroup = svg
	.append('g')
	.attr('transform', 'translate(' + margin.left + ',' + margin.top + ")");

	mainGroup.append('rect').attr({
	fill: 'rgba(0,0,0,0.1)',
	width: totalWidth - (margin.left + margin.right),
	height: totalHeight - (margin.bottom + margin.top)
	});

	function xloc(d, i) { return i * (barWidth + barPadding); }
	function yloc(d) { return maxValue - d; }
	function translator(d, i) {
	return "translate(" + xloc(d, i) + "," + yloc(d) + ")";
	}

	var barGroup = mainGroup.selectAll('g')
	.data(values)
	.enter()
	.append('g')
	.attr('transform', translator);

	barGroup.append('rect')
	.attr({
	fill: 'steelblue',
	width: barWidth,
	height: function (d) { return d; }
	});

	var textTranslator = "translate(" + barWidth / 2 + ",0)";

	barGroup.append('text')
	.text(function(d) { return d; })
	.attr({
	fill: 'white',
	'alignment-baseline': 'before-edge',
	'text-anchor': 'middle',
	transform: textTranslator
	})
	.style('font', '16px sans-serif');

	var leftAxisGroup = svg.append('g');
	var axisPadding = 3;
	leftAxisGroup.attr({ transform: 'translate(' + (margin.left - axisPadding) + ',' + margin.top + ')' });
	var scale = d3.scale
	.linear()
	.domain([maxValue, 0])
	.range([0, maxValue]);

	var axis = d3.svg.axis()
	.orient('left')
	.scale(scale);

	var axisNodes = leftAxisGroup.call(axis);
	var domain = axisNodes.selectAll('.domain');
	domain.attr({
	fill: 'none',
	'stroke-width': 1,
	stroke: 'black'
	});
	var ticks = axisNodes.selectAll('.tick line');
	ticks.attr({
	fill: 'none',
	'stroke-width': 1,
	stroke: 'black'
	});



	var date = data.map(function(d) { return d.date; });
	var bottomAxisScale = d3.scale.ordinal()
	.domain(date)
	.rangeBands([axisPadding, graphWidth + axisPadding]);

	var bottomAxis = d3.svg
	.axis()
	.scale(bottomAxisScale)
	.orient("bottom");

	var bottomAxisX = margin.left - axisPadding;
	var bottomAxisY = totalHeight - margin.bottom + axisPadding;

	var bottomAxisGroup = svg.append("g")
	.attr({ transform: 'translate(' + bottomAxisX + ',' + bottomAxisY + ')' });

	var bottomAxisNodes = bottomAxisGroup.call(bottomAxis);
	styleAxisNodes(bottomAxisNodes);

	bottomAxisNodes.selectAll("text")
	.style('text-anchor', 'center')
	.attr({
	dx: -35,
	dy: -5,
	transform: 'rotate(-90)'
	});

	function styleAxisNodes(axisNodes) {
	axisNodes.selectAll('.domain')
	.attr({
	fill: 'none',
	'stroke-width': 1,
	stroke: 'black'
	});
	axisNodes.selectAll('.tick line')
	.attr({
	fill: 'none',
	'stroke-width': 1,
	stroke: 'black'
	});
	}

	});
	</script>
	</body>
	</html>