-
Notifications
You must be signed in to change notification settings - Fork 1
/
temp.html
95 lines (91 loc) · 5.02 KB
/
temp.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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html lang="en">
<head>
<title>Template for the charts</title>
<link rel="stylesheet" href="vendor/tachyons/tachyons.min.css">
</head>
<body class="calisto pa1">
<div class="mw9 center">
<h1 class="f1 tc">Tachyon Template</h1>
<div class="flex ph2">
<p class="f4 lh-copy measure fl">Building webpages has been a major challenge, thanks to the complex
interaction of html tags, the CSS syntax and the underlying tech barrier. webpage design no longer
needs to be an arcane art. Especially when it comes to CSS, all the mist has been blown away. Icing on
the cake is, abstraction layer is established.
</p>
<p class="f4 lh-copy measure fl">Now that is no longer the case, thanks to Tachyons. The style sheet
mayhem has been finally conquered. You can observe how the Template is having a rythm to the fonts,
the headings and the layouts. It is created through mathematical rythm created by the Tachyons css.
</p>
</div>
</div>
<div class="mw9 center ph1-ns">
<div class="cf ph1-ns">
<div class="fl w-100 w-50-l pa1 tc">
<div class="pv4 tc">
<h1 class="f3 lh-title">Pseudo Code</h1>
<p class="tl lh-copy">Data flows from the moment it is created and
flows into the containers with a sole purpose
of giving insights.Steps below show how the
insights are gleaned out of the data</p>
<h2 class="f6 tl">Steps Taken</h2>
<ul>
<li class="lh-copy tl">Create the svg element to start the rendering</li>
<li class="lh-copy tl">Build the rect element with starting and ending coordinates</li>
<li class="lh-copy tl">Second rectangle is built on top of the 1st rect. With a fill color of
red</li>
<li class="lh-copy tl">Circles can be easier since the center along with radius does the trick
</li>
<li class="lh-copy tl">Rect can be of any width and start from any coordinates. Creating another
rect</li>
<li class="lh-copy tl">Circle is copied and the center coordinate is shifted</li>
<li class="lh-copy tl">Other two rectangles are similarly copied and moved</li>
</ul>
</div>
</div>
<div class="fl w-100 w-50-l pa1 tc">
<div class="pv4">
<h1 class="f3 lh-title">Chart</h1>
<svg width="500" height="300">
<rect width="100" height="100" x="0" y="0" />
<rect width="100" height="100" x="50" y="50" fill="red" />
<circle cx="150" cy="150" r="50" fill="green" />
<circle cx="300" cy="150" r="50" fill="green" />
<rect width="150" height="20" x="150" y="140" fill="red" />
<rect width="100" height="100" x="350" y="0" />
<rect width="100" height="100" x="300" y="50" fill="red" />
</svg>
</div>
</div>
</div>
<div class="cf ph1-ns">
<div class="fl w-100 w-50-l pa1 tc">
<div class="pv4">
<h1 class="f3 lh-title">Data Format</h1>
<p class="tl f4 lh-copy measure">Data to make the shape is randomly imagined. It is formatted into
X, Y and width, height
or radius in case of circle.There is data involved in the fills too. The location of the mid
rectangle is colored "Red"
and the bottom circle is colored green</p>
</div>
</div>
<div class="fl w-100 w-50-l pa1 tc">
<div class="pv4">
<h1 class="f3 lh-title">Code</h1>
<code class="pa3 b--black-10 h5 bg-white-20" id="html">
<svg width="500" height="300">
<rect width="100" height="100" x="0" y="0" />
<rect width="100" height="100" x="50" y="50" fill="red" />
<circle cx="150" cy="150" r="50" fill="green" />
<circle cx="300" cy="150" r="50" fill="green" />
<rect width="150" height="20" x="150" y="140" fill="red" />
<rect width="100" height="100" x="350" y="0" />
<rect width="100" height="100" x="300" y="50" fill="red" />
</svg>
</code>
</div>
</div>
</div>
</div>
</body>
</html>