Javascript d3 Bar Chart I have an array of data and need to make a bar chart usi
ID: 3800462 • Letter: J
Question
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]
Explanation / Answer
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>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.