valex · November 5, 2017 20:29
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
    <meta name="description" content="D3byEX 4.4" />
    <meta charset="utf-8">
 </head>
 <body>
    <script>
    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 data = [55, 44, 30, 23, 17, 14, 16, 25, 41, 61, 85,
        101, 95, 105, 114, 150, 180, 210, 125, 100, 71,
        75, 72, 67];
    var maxValue = d3.max(data);

    var barWidth = 15, barPadding = 3;

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

    var graphWidth = data.length * (barWidth + barPadding)
        - barPadding;

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

    var d3Container = d3.select('body');

    var svg = d3Container
        .append('svg')
        .attrs({ width: totalWidth, height: totalHeight });

    svg.append('rect').attrs({
        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').attrs({
        fill: 'rgba(0,0,0,0.1)',
        width: totalWidth - (margin.left + margin.right),
        height: totalHeight - (margin.bottom + margin.top)
    });

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

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

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

    barGroups.append('text')
        .text(function(d) { return d; })
        .attrs({
            fill: 'white',
            'dominant-baseline': 'text-before-edge',
            'text-anchor': 'middle',
            transform: textTranslator
        })
        .style('font', '10px sans-serif');

    var leftAxisGroup = svg.append('g');

    var axisPadding = 3;
    leftAxisGroup.attrs({
        transform: 'translate(' + (margin.left - axisPadding) + ',' + margin.top + ')' });

    var scale = d3.scaleLinear()
        .domain([maxValue, 0])
        .range([0, maxValue]);

    var axis = d3.axisLeft(scale);
    leftAxisGroup.call(axis);
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
	<meta name="description" content="D3byEX 4.4" />
	<meta charset="utf-8">
	</head>
	<body>
	<script>
	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 data = [55, 44, 30, 23, 17, 14, 16, 25, 41, 61, 85,
	101, 95, 105, 114, 150, 180, 210, 125, 100, 71,
	75, 72, 67];
	var maxValue = d3.max(data);

	var barWidth = 15, barPadding = 3;

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

	var graphWidth = data.length * (barWidth + barPadding)
	- barPadding;

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

	var d3Container = d3.select('body');

	var svg = d3Container
	.append('svg')
	.attrs({ width: totalWidth, height: totalHeight });

	svg.append('rect').attrs({
	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').attrs({
	fill: 'rgba(0,0,0,0.1)',
	width: totalWidth - (margin.left + margin.right),
	height: totalHeight - (margin.bottom + margin.top)
	});

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

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

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

	barGroups.append('text')
	.text(function(d) { return d; })
	.attrs({
	fill: 'white',
	'dominant-baseline': 'text-before-edge',
	'text-anchor': 'middle',
	transform: textTranslator
	})
	.style('font', '10px sans-serif');

	var leftAxisGroup = svg.append('g');

	var axisPadding = 3;
	leftAxisGroup.attrs({
	transform: 'translate(' + (margin.left - axisPadding) + ',' + margin.top + ')' });

	var scale = d3.scaleLinear()
	.domain([maxValue, 0])
	.range([0, maxValue]);

	var axis = d3.axisLeft(scale);
	leftAxisGroup.call(axis);
	</script>
	</body>
	</html>