-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathstackedBar.html
79 lines (76 loc) · 3.18 KB
/
stackedBar.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html lang="en">
<head>
<title>Stack Bars</title>
<style>
.axis .domain {
display: none;
}
</style>
<link rel="stylesheet" href="styles/style.css">
<script src="libraries/d3.js"></script>
</head>
<body>
<h1>Aiming Stacks to Groups transition</h1>
<p>Inspired by the transition in this <a href="http://bl.ocks.org/mbostock/3943967">block</a>, I had created this
study page. What is required to transit between 2 states? No, not the algorithm or the interface to make the
transition, but the states themselves.
As a beginner in D3, it is challenging to come up with a decent and simple bar chart. One can aim higher or
dream bigger. To get there is different
</p>
<p>After understanding how to create the <a href="https://kamalabot.github.io/M3nD3/barChartTutor_b.html">bars</a>,
stacks(this page) and <a href="https://kamalabot.github.io/M3nD3/groupedBar.html">grouped bars</a>. Transition is
tackled in <a href="https://kamalabot.github.io/M3nD3/stackedGroup.html">stacked to group bars</a>.
</p>
<pre>
d3-dsv - load and parse data
d3-scale - x- and y-position, and color encoding
d3-format - SI prefix formatting (e.g., “10M” for 10,000,000)
d3-array - compute simple statistics (e.g., max)
d3-axis - display axes
d3-shape - computed stacked positions
</pre>
<p>One of the challenges I faced was having different styles needed across different charts that is created. The
base style of the
page is imported through the style.css file outside the page. While the style specific to the charts and page
are created using
the
<!-- <style> --> tag.
</p>
<h3>How to wrangle the data as it is imported using d3.csv</h3>
<pre>
function wrangle(d, i, columns){
console.log(d) //this is the entire row
console.log(i) // index of the row
console.log(columns) // columns headers are already seperated
for (i = 1, t = 0; i < columns.length; ++i){
d[columns[i]] = +d[columns[i]] //converting the cell vals to numbers
t += d[columns[i]]
d.total = t
}
return d
}
//bringing in the data
d3.csv("cityPopulation.csv", wrangle).then((data) =>{
console.log(data)
})
</pre>
<p>The complex charts are created as layouts in D3. Stack chart is one such
complex chart. The rectangles has to be placed on top of the other, and
their size needs to be modified based on the scale. Following is the
main script part that makes the data ready for stacking.
</p>
<pre>
.data(d3.stack().keys(keys)(data))
</pre>
<p>Two more notable commands were the following. They
show how important is to know the data structures
</p>
<pre>
keys.slice().reverse() reversing the keys to append it to chart
y(y.ticks().pop()) getting the top most value of the scale
</pre>
<svg height="500" width="960" class="exTab"></svg>
<script src="stackedBar.js"></script>
</body>
</html>