-
Notifications
You must be signed in to change notification settings - Fork 1
/
layoutsD3.html
81 lines (78 loc) · 4.66 KB
/
layoutsD3.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
80
<!DOCTYPE html>
<html>
<head>
<title>Layouts and Generators</title>
<script src="./libraries/d3.js"></script>
<link rel="stylesheet" href="./styles/style.css">
</head>
<body>
<h1>D3 has different layouts depending on the data that is being</h1>
<p>How the data structure is modified is dictated by the layouts themselves. Learning to modify the data in the
way it will
</p>
<ul>
<li>Pie / Donut</li>
<li>Stacked Bar</li>
<li>Grouped Bar</li>
<li>Tree Map</li>
<li>Area Map</li>
</ul>
<h3>How to train on each of these layouts?</h3>
<p> <strong>Option 1</strong> There are datasets available, which can be explored using the Vega extension in VScode.
After the dataset can provide a good visual there, with any of the above layouts, then it
is programmed here.
<strong>Option 2</strong> is to forget datasets, and create the data by myself using random numbers, or
manually. This option will give me freedom to train than importing the data.
<strong>Option 3</strong> is to use the data that d3-gallery guys have used to explain these layouts. The chart I build will build
on the d3-gallery charts.
</p>
<h3>How to layout the charts?</h3>
<p> <strong>Option 1</strong> Since using the toy dataset, the charts are placed in g element and positioned on the top of page. The explanation and the
ideas explored will come at the bottom
<strong>Option 2</strong> Use multiple SVGs to be created for each layout with the datasets chosen for it.
</p>
<p>Choosing option 2 to use of multiple SVGs layout for each chart. Each chart has many features like
<ol>
<li>Adding Text</li>
<li>Interactivity</li>
<li>Specific features</li>
</ol>
Each of these variants of the chart will be rendered inside a single svg assigned to the chart using the id attribute. Example,
the "pie chart" will be assigned to svg with id = 'pie'. All its variants will also be under this same svg.
</p>
<p>The scripts that render the charts will be different.They will be appended to the page body with different names.</p>
<h3>What is clobbering in JS?</h3>
<p>When the element that is already on dom is removed, or modified in detrimental way it is called Cloberring. D3 and JQuery can create
such scenarios very easily.
</p>
<h3>D3's selectAll method clobbers my tags. What to do?</h3>
<p>It will take some time to realize that D3's selectAll is clobbering your DOM. This can be mitigated by classing or giving specific
id to the elements that are created with D3. In this way, the elements created manually is safeguarded. Classes and IDs are not only
to assign styles and attributes, they give identity to the tags on the page.
</p>
<svg id="pie" width="900" height="300"></svg>
<button onclick="update(renderData1)" translate="25,-110">Data1</button>
<button onclick="update(renderData2)" translate="50,-110">Data2</button>
<div id="pieData"></div>
<script src="layoutScripts/pie.js"></script>
<script src="layoutScripts/pieT.js"></script>
<script src="layoutScripts/pieInt.js"></script>
<h3>How to wrap the text in D3 text tag?</h3>
<p>There is no straight forward way. There is block by <a href="https://bl.ocks.org/mbostock/raw/7555321/">Bostock</a> which
is providing a long solution. Will explore further and implement.</p>
<h3>Marks in the 2nd Histogram stopped Rendering</h3>
<p>Asynchronous control flow means the function I thought that will execute, doesn't.
In case of Histogram charts, the data is downloaded. I initiate this download in 1st
script, and use it to make the marks. When I tried to use the same script, with the name
changed, the file download action did not execute...
</p>
<p>Using the window.addEventListner to load the file also failed when using multiple files.
The way out I chose is to refactor the code and decided to import the functions that are necessary
to build the charts.
</p>
<svg id="histo" width="900" height="350"></svg>
<div id="histData"></div>
<script type="module" src="layoutScripts/hist.js"></script>
<h1>Working out a different plan to document the learnings</h1>
</body>
</html>