Homework SourseJavascript d3 Bar Chart I have an array of data and need to
Javascript d3 Bar Chart
I have an array of data and need to make a bar chart using d3. I am inexperienced with Javascript and SVG, and am unsure of how to make that happen.
The function to get the array is in a div called \"partone\". Here is the data:
[146158, 27206, 19946, 36507, 111363, 207116, 159252, 98096, 61218, 70393, 67704,62146, 4528,75750, 105520, 119057, 111600, 131649, 119197, 112981, 99974, 76403, 70488, 77080, 85525, 73147, 69886, 27131, 28403, 52873, 53813, 41223, 48282, 60191, 74654, 73311, 56424, 58238, 69926, 69987, 69933, 84995]
Solution
Div name is not required.
I have used the svg and d3 and have made the code. Used the values given in your problem.
<!DOCTYPE html>
<meta charset=\"utf-8\">
<style>
form {
font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;
position: absolute;
left: 10px;
top: 10px;
}
label {
display: block;
}
</style>
<svg width=\"960\" height=\"500\"></svg>
<script src=\"https://d3js.org/d3.v4.min.js\"></script>
<script>
var n = 1, // The number of series.
m = 42; // The number of values per series.
// The xz array has m elements, representing the x-values shared by all series.
// The yz array has n elements, representing the y-values of each of the n series.
// Each yz[i] is an array of m non-negative numbers representing a y-value for xz[i].
// The y01z array has the same structure as yz, but with stacked [y0, y1] instead of y.
var xz = d3.range(1,m-1),
yz = d3.range(n).map(function() { return bumps(m); }),
y01z = d3.stack().keys(d3.range(n))(d3.transpose(yz)),
yMax = d3.max(yz, function(y) { return d3.max(y); }),
y1Max = d3.max(y01z, function(y) { return d3.max(y, function(d) { return d[1]; }); });
var svg = d3.select(\"svg\"),
margin = {top: 40, right: 10, bottom: 20, left: 10},
width = +svg.attr(\"width\") - margin.left - margin.right,
height = +svg.attr(\"height\") - margin.top - margin.bottom,
g = svg.append(\"g\").attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\");
var x = d3.scaleBand()
.domain(xz)
.rangeRound([0, width])
.padding(0.08);
var y = d3.scaleLinear()
.domain([0, y1Max])
.range([height, 0]);
var color = d3.scaleOrdinal()
.domain(d3.range(n))
.range(d3.schemeCategory20c);
var series = g.selectAll(\".series\")
.data(y01z)
.enter().append(\"g\")
.attr(\"fill\", function(d, i) { return color(i); });
var rect = series.selectAll(\"rect\")
.data(function(d) { return d; })
.enter().append(\"rect\")
.attr(\"x\", function(d, i) { return x(i); })
.attr(\"y\", height)
.attr(\"width\", x.bandwidth())
.attr(\"height\", 0);
rect.transition()
.delay(function(d, i) { return i * 10; })
.attr(\"y\", function(d) { return y(d[1]); })
.attr(\"height\", function(d) { return y(d[0]) - y(d[1]); });
g.append(\"g\")
.attr(\"class\", \"axis axis--x\")
.attr(\"transform\", \"translate(0,\" + height + \")\")
.call(d3.axisBottom(x)
.tickSize(0)
.tickPadding(6));
d3.selectAll(\"input\")
.on(\"change\", changed);
var timeout = d3.timeout(function() {
d3.select(\"input[value=\\\"grouped\\\"]\")
.property(\"checked\", true)
.dispatch(\"change\");
}, 2000);
function changed() {
timeout.stop();
if (this.value === \"grouped\") transitionGrouped();
else transitionStacked();
}
function transitionGrouped() {
y.domain([0, yMax]);
rect.transition()
.duration(500)
.delay(function(d, i) { return i * 10; })
.attr(\"x\", function(d, i) { return x(i) + x.bandwidth() / n * this.parentNode.__data__.key; })
.attr(\"width\", x.bandwidth() / n)
.transition()
.attr(\"y\", function(d) { return y(d[1] - d[0]); })
.attr(\"height\", function(d) { return y(0) - y(d[1] - d[0]); });
}
function transitionStacked() {
y.domain([0, y1Max]);
rect.transition()
.duration(500)
.delay(function(d, i) { return i * 10; })
.attr(\"y\", function(d) { return y(d[1]); })
.attr(\"height\", function(d) { return y(d[0]) - y(d[1]); })
.transition()
.attr(\"x\", function(d, i) { return x(i); })
.attr(\"width\", x.bandwidth());
}
// Returns an array of m psuedorandom, smoothly-varying non-negative numbers.
// Inspired by Lee Byron’s test data generator.
// http://leebyron.com/streamgraph/
function bumps(m) {
var values = [146158, 27206, 19946, 36507, 111363, 207116, 159252, 98096, 61218, 70393, 67704,62146, 4528,75750, 105520, 119057, 111600, 131649, 119197, 112981, 99974, 76403, 70488, 77080, 85525, 73147, 69886, 27131, 28403, 52873, 53813, 41223, 48282, 60191, 74654, 73311, 56424, 58238, 69926, 69987, 69933, 84995];
return values;
}
</script>
