Skip to content

Commit e55963e

Browse files
sgratzlsgratzl
committed
formatting and slightly better website
1 parent cb174db commit e55963e

7 files changed

Lines changed: 462 additions & 435 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,6 @@ Appendix
7676

7777
- [TypeScript and D3](#typescript)
7878

79-
8079
> SURVEY: What do you guys already know?
8180
8281
---
@@ -931,7 +930,7 @@ SEE: [pie.html](examples/pie.html) [![Open in CodePen][codepen]](https://codepen
931930

932931
A force layout is a graph layout algorithm, which uses a simulation for positioning nodes. The goal is to minimize the force applied on the system introduced by gravity, node repulsive force, and edge attraction forces. In this case it is not a one layout step, but a continuous one, where on each `tick` a new set of positions are available.
933932

934-
![D3 Pie Layout](./i/force.png)
933+
![D3 Force Layout](./i/force.png)
935934

936935
---
937936

‎examples/miserables.json‎

Lines changed: 331 additions & 331 deletions
Large diffs are not rendered by default.

‎examples/mvc.css‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
1-
21
body {
32
max-width: 1200px;
43
margin: 25px auto;
5-
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande",
6-
sans-serif;
4+
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
75
}

‎examples/style.css‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
1-
21
body {
32
max-width: 800px;
43
margin: 25px auto;
5-
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande",
6-
sans-serif;
4+
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
75
}

‎examples/weather.json‎

Lines changed: 71 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,72 @@
1-
[
2-
{
3-
"temperature": 66.38,
4-
"location": {
5-
"city": "San Francisco",
6-
"country": "US"
7-
}
8-
},
9-
{
10-
"temperature": 21.51,
11-
"location": {
12-
"city": "Boston",
13-
"country": "US"
14-
}
15-
},
16-
{
17-
"temperature": 23.37,
18-
"location": {
19-
"city": "New York",
20-
"country": "US"
21-
}
22-
},
23-
{
24-
"temperature": 34.17,
25-
"location": {
26-
"city": "Tokyo",
27-
"country": "JP"
28-
}
29-
},
30-
{
31-
"temperature": 36.21,
32-
"location": {
33-
"city": "Washington, D. C.",
34-
"country": "US"
35-
}
36-
},
37-
{
38-
"temperature": 64.16,
39-
"location": {
40-
"city": "Los Angeles",
41-
"country": "US"
42-
}
43-
},
44-
{
45-
"temperature": 59.05,
46-
"location": {
47-
"city": "Mexico City",
48-
"country": "MX"
49-
}
50-
},
51-
{
52-
"temperature": 14.77,
53-
"location": {
54-
"city": "Seoul",
55-
"country": "KR"
56-
}
57-
},
58-
{
59-
"temperature": 28.93,
60-
"location": {
61-
"city": "Beijing",
62-
"country": "CN"
63-
}
64-
},
65-
{
66-
"temperature": 34.34,
67-
"location": {
68-
"city": "London",
69-
"country": "GB"
70-
}
71-
}
1+
[
2+
{
3+
"temperature": 66.38,
4+
"location": {
5+
"city": "San Francisco",
6+
"country": "US"
7+
}
8+
},
9+
{
10+
"temperature": 21.51,
11+
"location": {
12+
"city": "Boston",
13+
"country": "US"
14+
}
15+
},
16+
{
17+
"temperature": 23.37,
18+
"location": {
19+
"city": "New York",
20+
"country": "US"
21+
}
22+
},
23+
{
24+
"temperature": 34.17,
25+
"location": {
26+
"city": "Tokyo",
27+
"country": "JP"
28+
}
29+
},
30+
{
31+
"temperature": 36.21,
32+
"location": {
33+
"city": "Washington, D. C.",
34+
"country": "US"
35+
}
36+
},
37+
{
38+
"temperature": 64.16,
39+
"location": {
40+
"city": "Los Angeles",
41+
"country": "US"
42+
}
43+
},
44+
{
45+
"temperature": 59.05,
46+
"location": {
47+
"city": "Mexico City",
48+
"country": "MX"
49+
}
50+
},
51+
{
52+
"temperature": 14.77,
53+
"location": {
54+
"city": "Seoul",
55+
"country": "KR"
56+
}
57+
},
58+
{
59+
"temperature": 28.93,
60+
"location": {
61+
"city": "Beijing",
62+
"country": "CN"
63+
}
64+
},
65+
{
66+
"temperature": 34.34,
67+
"location": {
68+
"city": "London",
69+
"country": "GB"
70+
}
71+
}
7272
]

‎index.html‎

Lines changed: 56 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -6,85 +6,117 @@
66
<title>D3 Tutorial</title>
77
<meta name="description" content="D3 Tutorial" />
88
<meta name="viewport" content="width=device-width, initial-scale=1" />
9+
<style>
10+
body {
11+
margin: auto;
12+
max-width: 800px;
13+
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
14+
}
15+
a,
16+
a:visited {
17+
color: black;
18+
}
19+
</style>
920
</head>
1021

1122
<body>
23+
<h1>D3 Tutorial 📊📈</h1>
24+
1225
<section>
13-
<h2>Tutorial</h2>
14-
see
15-
<a href="https://github.com/sgratzl/d3tutorial/blob/master/README.md">Tutorial</a>
26+
<p>
27+
This is a short interactive tutorial introducing the basic elements and concepts of D3. The tutorial itself is
28+
hosted on Github. This page just contains a summary link list of all examples.
29+
</p>
30+
<p>
31+
The tutorial itself is located at
32+
<a href="https://github.com/sgratzl/d3tutorial/blob/master/README.md">https://github.com/sgratzl/d3tutorial</a>.
33+
</p>
1634
</section>
1735

1836
<section>
19-
<h3>Incremental Example: Barchart</h3>
20-
<ul>
37+
<h2>Part 1: Dive into D3 aka. Student's First Barchart</h2>
38+
<ol>
2139
<li>
2240
<a href="./examples/barchart01_initial.html">Initial</a>
23-
<a href="https://codepen.io/sgratzl/pen/xRrrgp" target="_blank">(@Codepen.io)</a>
41+
<a href="https://codepen.io/sgratzl/pen/xRrrgp" target="_blank" rel="noopener noreferer">(@Codepen.io)</a>
2442
</li>
2543
<li>
2644
<a href="./examples/barchart02_title.html">Adding Title</a>
27-
<a href="https://codepen.io/sgratzl/pen/PooYYzb" target="_blank">(@Codepen.io)</a>
45+
<a href="https://codepen.io/sgratzl/pen/PooYYzb" target="_blank" rel="noopener noreferer">(@Codepen.io)</a>
2846
</li>
2947
<li>
3048
<a href="./examples/barchart03_json.html">Loading Data</a>
31-
<a href="https://codepen.io/sgratzl/pen/poozzbL" target="_blank">(@Codepen.io)</a>
49+
<a href="https://codepen.io/sgratzl/pen/poozzbL" target="_blank" rel="noopener noreferer">(@Codepen.io)</a>
3250
</li>
3351
<li>
3452
<a href="./examples/barchart04_scale.html">Using Scales</a>
35-
<a href="https://codepen.io/sgratzl/pen/oNNvvzv" target="_blank">(@Codepen.io)</a>
53+
<a href="https://codepen.io/sgratzl/pen/oNNvvzv" target="_blank" rel="noopener noreferer">(@Codepen.io)</a>
3654
</li>
3755
<li>
3856
<a href="./examples/barchart05_interactive.html">Interactive Filtering</a>
39-
<a href="https://codepen.io/sgratzl/pen/JjjPPRQ" target="_blank">(@Codepen.io)</a>
57+
<a href="https://codepen.io/sgratzl/pen/JjjPPRQ" target="_blank" rel="noopener noreferer">(@Codepen.io)</a>
4058
</li>
4159
<li>
4260
<a href="./examples/barchart06_animation.html">Animation</a>
43-
<a href="https://codepen.io/sgratzl/pen/dyybbNP" target="_blank">(@Codepen.io)</a>
61+
<a href="https://codepen.io/sgratzl/pen/dyybbNP" target="_blank" rel="noopener noreferer">(@Codepen.io)</a>
4462
</li>
4563
<li>
4664
<a href="./examples/barchart07_final.html">Final Barchart</a>
47-
<a href="https://codepen.io/sgratzl/pen/NWWKKda" target="_blank">(@Codepen.io)</a>
65+
<a href="https://codepen.io/sgratzl/pen/NWWKKda" target="_blank" rel="noopener noreferer">(@Codepen.io)</a>
4866
</li>
49-
</ul>
67+
</ol>
5068
</section>
5169

5270
<section>
53-
<h3>Incremental Example: Multiple Coordinated View</h3>
54-
<ul>
71+
<h2>Part 2: Student's First Multiple Coordinated View</h2>
72+
<ol>
5573
<li>
5674
<a href="./examples/mcv01_initial.html">Initial</a>
57-
<a href="https://codepen.io/sgratzl/pen/bQzNBO" target="_blank">(@Codepen.io)</a>
75+
<a href="https://codepen.io/sgratzl/pen/bQzNBO" target="_blank" rel="noopener noreferer">(@Codepen.io)</a>
5876
</li>
5977
<li>
6078
<a href="./examples/mcv02_piechart.html">Pie Chart Layout</a>
61-
<a href="https://codepen.io/sgratzl/pen/abbooyg" target="_blank">(@Codepen.io)</a>
79+
<a href="https://codepen.io/sgratzl/pen/abbooyg" target="_blank" rel="noopener noreferer">(@Codepen.io)</a>
6280
</li>
6381
<li>
6482
<a href="./examples/mcv03_interaction.html">Interaction</a>
65-
<a href="https://codepen.io/sgratzl/pen/QWWLLqm" target="_blank">(@Codepen.io)</a>
83+
<a href="https://codepen.io/sgratzl/pen/QWWLLqm" target="_blank" rel="noopener noreferer">(@Codepen.io)</a>
6684
</li>
6785
<li>
6886
<a href="./examples/mcv04_morevisses.html">More Visualization</a>
69-
<a href="https://codepen.io/sgratzl/pen/VVgYqx" target="_blank">(@Codepen.io)</a>
87+
<a href="https://codepen.io/sgratzl/pen/VVgYqx" target="_blank" rel="noopener noreferer">(@Codepen.io)</a>
7088
</li>
7189
<li>
7290
<a href="./examples/mcv05_transitions.html">Advanced Animations</a>
73-
<a href="https://codepen.io/sgratzl/pen/WNNeeXM" target="_blank">(@Codepen.io)</a>
91+
<a href="https://codepen.io/sgratzl/pen/WNNeeXM" target="_blank" rel="noopener noreferer">(@Codepen.io)</a>
7492
</li>
7593
<li>
7694
<a href="./examples/mcv06_final.html">Final Result</a>
77-
<a href="https://codepen.io/sgratzl/pen/yLLBBPx" target="_blank">(@Codepen.io)</a>
95+
<a href="https://codepen.io/sgratzl/pen/yLLBBPx" target="_blank" rel="noopener noreferer">(@Codepen.io)</a>
7896
</li>
79-
</ul>
97+
</ol>
8098
</section>
8199

82100
<section>
83-
<h3>Examples</h3>
101+
<h2>Layout Examples</h2>
84102
<ul>
85-
<li><a href="./examples/pie.html">Pie Chart</a></li>
103+
<li>
104+
<a href="./examples/pie.html">Pie Chart</a>
105+
<a href="https://codepen.io/sgratzl/pen/BaaBBdZ" target="_blank" rel="noopener noreferer">(@Codepen.io)</a>
106+
</li>
86107
<li>
87108
<a href="./examples/miserables.html">Force Directed Layout Example</a>
109+
<a href="https://codepen.io/sgratzl/pen/poozzrK" target="_blank" rel="noopener noreferer">(@Codepen.io)</a>
110+
</li>
111+
</ul>
112+
</section>
113+
114+
<section>
115+
<h2>TypeScript Examples</h2>
116+
<ul>
117+
<li>
118+
<a href="./examples/barchart_final_ts.html">Bar Chart</a>
119+
<a href="https://codepen.io/sgratzl/pen/gObqdEG" target="_blank" rel="noopener noreferer">(@Codepen.io)</a>
88120
</li>
89121
</ul>
90122
</section>

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
"postinstall": "rm -rf web_modules/d3 && cp -r node_modules/d3 web_modules/ && npm run compile",
1010
"compile": "tsc -p .",
1111
"watch": "tsc -w -p .",
12-
"format": "prettier --print-width 120 --write examples/*.html examples/*.ts index.html README.md package.json"
12+
"format": "prettier --print-width 120 --write \"examples/*.(html|ts|css|json)\" index.html README.md package.json"
1313
},
1414
"repository": {
1515
"type": "git",

0 commit comments

Comments
 (0)