JavaScript: SVG bar chart using D3

Here are links to the topic series of representing and processing data.

R examples:

Python examples:

JavaScript and D3 examples:

JavaScript: SVG bar chart using D3 (this page)

Julia examples:

Julia: Bar chart from JSON data using StatsPlots

... more to be added ... This page looks at using JavaScript and D3 to create a SVG bar chart.

Creating the chart using D3 by doing more of the computational work.
Creating the chart using D3 by doing less of the computational work by using D3 shortcuts.

To keep things simple data that is hard-coded in the JavaScript is used.

Here is the data used in JSON form.

[ ["a",59900], ["b",11302], ["c",14311], ["d",34483], ["e",95247], ["f",17852], ["g",13528], ["h",62509], ["i",46347], ["j",2321], ["k",4449], ["l",25939], ["m",19154], ["n",51311], ["o",54741], ["p",9918], ["q",183], ["r",37468], ["s",44630], ["t",72396], ["u",20651], ["v",7458], ["w",18376], ["x",376], ["y",14814], ["z",234] ]

JSON is the built-in form that JavaScript uses so it is easy to hard-code the above data in JavaScript code, as done below. Here is the CSS used for the SVG examples.

.rmsSvg {
	border:solid 1px #000000;
	}
.rmsRect {
	background-color:#FF9999;
	fill:#FFCCCC;
	stroke-width:1px;
	stroke:#330000;
	}
.rmsText {
	font-size:12px;
	font-weight:bold;
	fill:#660000;
	text-anchor:middle;
	}

The rmsSvg is for all SVG (Scalable Vector Graphics) images and puts a obvious border around the SVG for demonstration purposes.

Here is the SVG code [#1]

<svg id="words21-01" viewBox="0 0 640 320" width="640" height="320" class="rmsSvg">
</svg>

Notice that the SVG code is empty. It is a placeholder for JavaScript to use D3 to fill in.

Here is how the SVG code appears.

Here is the JavaScript code. The hard-coded data needs a variable name. A semicolon after the data is recommended (required in strict mode).

var dataList1 = [
	["a",59900],
	["b",11302],
	["c",14311],
	["d",34483],
	["e",95247],
	["f",17852],
	["g",13528],
	["h",62509],
	["i",46347],
	["j",2321],
	["k",4449],
	["l",25939],
	["m",19154],
	["n",51311],
	["o",54741],
	["p",9918],
	["q",183],
	["r",37468],
	["s",44630],
	["t",72396],
	["u",20651],
	["v",7458],
	["w",18376],
	["x",376],
	["y",14814],
	["z",234]
	];
var chartWidth1 = 640;
var chartHeight1 = 320;
var barGap1 = 1;
var leftMargin1 = 30;
var rightMargin1 = 30;
var topMargin1 = 60;
var bottomMargin1 = 30;
var plotWidth1 = chartWidth1-leftMargin1-rightMargin1;
var plotHeight1 = chartHeight1-topMargin1-bottomMargin1;
var xData1 = [];
var xData2 = [];
var yData1 = [];
var yMax1 = 0;
for (var pos1=0; pos1 < dataList1.length; pos1++) {
	var pairList1 = dataList1[pos1];
	var xValue1 = pairList1[0];
	xData1.push(xValue1);
	var xLabel1 = xValue1.charAt(0);
	if ((xLabel1 >= "0") && (xLabel1 <= "9")) {
		xLabel1 += xValue1.charAt(2);
		}
	xData2.push(xLabel1);
	var yValue1 = pairList1[1];
	if (yValue1 > yMax1) {
		yMax1 = yValue1;
		}
	yData1.push(yValue1);
	}
var yData2 = [];
for (var pos1=0; pos1 < yData1.length; pos1++) {
	var yValue1 = yData1[pos1];
	var yValue2 = plotHeight1 * (yValue1 / yMax1);
	yData2.push(yValue2);
	}
var dataLen1 = dataList1.length;
var barWidth1 = (plotWidth1 / dataLen1) - barGap1;
svg1 = d3.select("#words21-01");
svg1.selectAll("rect")
.data(xData1)
.enter()
.append("rect")
.attr("class", "rmsRect")
.attr("x", function(d1, pos1) {
	return leftMargin1+pos1*(barWidth1+barGap1);
	})
.attr("y", function(d1, pos1) {
	return chartHeight1 - bottomMargin1 - yData2[pos1];
	})
.attr("width", barWidth1)
.attr("height", function(d1, pos1) {
	return yData2[pos1];
	});
svg1
.selectAll("text")
.data(xData2)
.enter()
.append("text")
.attr("class", "rmsText")
.text(function (d1) {
	return d1;
	})
.attr("x", function(d1, pos1) {
	return leftMargin1+pos1*(barWidth1+barGap1)+0.5*barWidth1;
	})
.attr("y", function(d1, pos1) {
	return chartHeight1 - bottomMargin1 + 20;
	});

The data is hard-coded as a list in JavaScript. This data would usually be generated by the server (e.g., by PHP code) or dynamically loaded by JavaScript by a request to the server and response from the server (e.g., by AJAX (Asynchronous Java and XML)).

The same chart is now done using some D3 shortcut methods.

... more to be added ...