-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathp5_d3.html
154 lines (129 loc) · 6.3 KB
/
p5_d3.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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MA Digital Art Humanities UCC</title>
<link rel="stylesheet" href="main.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.23/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.23/addons/p5.dom.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class= "grid-wrapper">
<div id ="logo">
<svg width="121px" height="97px" viewBox="0 0 121 97" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50 (54983) - http://www.bohemiancoding.com/sketch -->
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group-2" transform="translate(0.000000, -14.000000)">
<g id="Group">
<rect id="Rectangle" stroke-opacity="0.867300725" stroke="#FF4500" stroke-width="3" x="1.5" y="15.5" width="106.623016" height="49"></rect>
<text id="mar" font-family="AmericanTypewriter-CondensedBold, American Typewriter" font-size="36" font-style="condensed" font-weight="bold" fill="#30749E">
<tspan x="18.7389771" y="58">ma</tspan>
<tspan x="18.7389771" y="101">r</tspan>
</text>
<text id="y" font-family="Impact" font-size="100" font-style="condensed" font-weight="700" fill="#30749E">
<tspan x="76.5" y="101">y</tspan>
</text>
<text id="p" font-family="AmericanTypewriter, American Typewriter" font-size="36" font-weight="normal" fill="#30749E">
<tspan x="55.7222222" y="89">p</tspan>
</text>
</g>
</g>
</g>
</svg>
</div>
<div id = "header"><span>"we know only what we made" </span>
(Gianbattista Vico)
</div>
<label for="show-menu" class="show-menu">menu</label>
<input type="checkbox" id="show-menu" role="button">
<div id="menu">
<span class = "dropdown">
<a href="index.html">welcome</a></span>
<nav class = "dropdown" id="here">
<span>practice</span>
<ul class="dropdown-content">
<li><a href="web_sites.html">Web design</a></li>
<li><a href="p5_d3.html">P5.js/D3.js</a></li>
<li><a href="python.html">Python</a></li>
</ul>
</nav>
<nav class = "dropdown">
<span>theory</span>
<ul class="dropdown-content">
<li><a href="learn.html">digital humanities</a></li>
<li><a href="data_art.html">research project</a></li>
<li><a href="rest.html">data viz</a></li>
</ul>
</nav>
<nav class = "dropdown">
<span><a href="mailto:handmadewebcork@gmail.com">contact</a></span>
</nav>
</div>
<div id = "main">
<div>
<h3>learning D3.js</h3>
<p>
There're the things (especially in programming) you strat many times...and never finish. Such is the D3 Javascript
library (created by Mike Bostock in 2011). It is a Mont Blanc. And you can try different ways to climb it. The best I found
so far is a book (yes, a real, paper book! (with some stuff to download))
<a href = "https://alignedleft.com/work/d3-book-2e" target = "blanc"><em>Interactive Data Visualization for the Web</em></a>
by Scott Murray. It is open on my desk all the time, some time taking the dust when I'm distracted (like,recently, by MA assements).
Most of the on-line tutorials and courses, while sometime interesting and handy, vanished in the time. Book is necessary (at least for me);
it is like an anchor and this one is very easy, progressive and even fun.
<br>
All Javascript (all programming?) and D3 are diificult to understand if not practice, regulary.
So, for keep my motivation, I will publish a link to a new created file... regulary.
<br>
So:
<br>
step 1: <a href = "circles2.html" target ="blank"> little vintage circles. </a>
<br>
step 2: <a href = "bar1.html" target ="blank"> the banal bars. </a>
<br>
step 3: <a href = "scatterplot.html" target ="blank"> the scatterplot </a>
<br>
step 4: <a href = "scatterplot2.html" target ="blank"> one more scatterplot </a>
<br>
step 5: <a href ="dogs/line_dogs.html" target = "blank"> dog's life's and death's chart lines</a>
<br>
Thesis artefact: <a href ="articles1.html" target = "blank"> visibility/disability dataviz</a>
<br>
Thesis artefact part 2: <a href ="articles.html" target = "blank"> visibility/disability dataviz part 2</a>
</p>
</div>
<div>
<h3>learning P5.js</h3>
<p>
When going back to these files I worked on year (or so) ago, I realize that it is may be too early
to say that on-line learning never gives as much as one, in real time. At least, my expirience with this course via <a href="https://www.kadenze.com/courses/the-nature-of-code/info",
target = "blabc"> Kadenze </a>,
by Daniel Shiefmann (one of co-founders of Processing foundation), compared with my current ("in-live") studies
on MA of Digital Arts & Humanities makes me think rather the opposite...
<br>
Some canvases (largely inspired by Daniel's samples):
<br>
<a href = "p5/p5_1.html" target = "blanc">kinetic</a>
<br>
<a href = "p5/p5_2.html" target = "blanc">some b/w basic animation</a>
<br>
<a href = "animation/index.html" target = "blanc">Ven Aqui!</a>
<br>
<a href = "p5/p5_3.html" target = "blanc">a kind of kaleidoscope, sligthly psychodelic</a>
<br>
<a href = "random_functions/index.html" target = "blanc">too much psychodelic</a>
<br>
<a href = "motion/index.html" target = "blanc">more and more green</a>
</p>
</div>
<dv></div>
</div>
<div id="footer"><span>CopyAllYouWant</span>
<span>Proudly free from Wordpress</span>
<span>Generously hosted on GitHub</span>
</div>
</div>
</body>
</html>