Skip to content

Commit 7713abe

Browse files
sgratzlsgratzl
committed
use codepen shield
1 parent 0c72a8f commit 7713abe

2 files changed

Lines changed: 80 additions & 34 deletions

File tree

‎README.md‎

Lines changed: 32 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -181,7 +181,8 @@ Great way to spearate the style from the actual content. In addition, the select
181181

182182
Good overview of CSS Selectors: https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
183183

184-
Most important selectors explained in an example ([Open in CodePen](https://codepen.io/thinkh/pen/rybJVE)):
184+
Most important selectors explained in an example
185+
[![Open in CodePen][codepen]](https://codepen.io/thinkh/pen/rybJVE):
185186

186187
```html
187188
<!DOCTYPE html>
@@ -309,7 +310,8 @@ JavaScript can be used with imperative/procedural, object-oriented, and function
309310

310311
It is a dynamically typed language, which can be strange for developers who mainly work with strongly typed languages such as C/C++ and Java.
311312

312-
**Note** To follow the examples below, you can open the Developer Tools’s JavaScript console on a browser window, and type the examples to see what they do. Or [open in CodePen](http://codepen.io/thinkh/pen/qrwxdb?editors=0012).
313+
**Note** To follow the examples below, you can open the Developer Tools’s JavaScript console on a browser window, and type the examples to see what they do. Or
314+
[![Open in CodePen][codepen]](https://codepen.io/thinkh/pen/qrwxdb).
313315

314316
```js
315317
// variables
@@ -411,7 +413,7 @@ d3.select("text").text("Hello");
411413
d3.select("div").html(`<strong>Hello</strong>`);
412414
```
413415

414-
[Open in CodePen](https://codepen.io/sgratzl/pen/POVKRj)
416+
[![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/POVKRj)
415417

416418
The function come in different shapes: as setter (previous examples) as in a getter version. In the later case the value of the first element in the list will be returned. e.g. `circle.attr('cx')`
417419

@@ -429,7 +431,7 @@ body
429431
d3.select("svg").remove();
430432
```
431433

432-
[Open in CodePen](https://codepen.io/sgratzl/pen/YEBxaW)
434+
[![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/YEBxaW)
433435

434436
<a id="d3-data-join"></a>
435437

@@ -485,7 +487,7 @@ circles.attr("cx", (d, i) => d * 10);
485487
circles.attr("cy", (d, i) => i * 50);
486488
```
487489

488-
[Open in CodePen](https://codepen.io/sgratzl/pen/poozzga)
490+
[![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/poozzga)
489491

490492
Common shortcut:
491493

@@ -499,7 +501,7 @@ d3.select("svg")
499501
.attr("cy", (d, i) => i * 50);
500502
```
501503

502-
[Open in CodePen](https://codepen.io/sgratzl/pen/oNNvvxv)
504+
[![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/oNNvvxv)
503505

504506
Even shorter:
505507

@@ -514,7 +516,7 @@ d3.select("svg")
514516
.attr("cy", (d, i) => i * 50);
515517
```
516518

517-
[Open in CodePen](https://codepen.io/sgratzl/pen/GRRKKZq)
519+
[![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/GRRKKZq)
518520

519521
**Notes**
520522

@@ -526,15 +528,15 @@ d3.select("svg")
526528

527529
**INTERACTIVE**
528530

529-
Creating a bar chart: [barchart01_initial.html](examples/barchart01_initial.html) ([Open in CodePen](https://codepen.io/sgratzl/pen/xRrrgp))
531+
Creating a bar chart: [barchart01_initial.html](examples/barchart01_initial.html) [![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/xRrrgp)
530532

531533
---
532534

533535
### Nested Selections and Nested Data Joins
534536

535537
Nested selections can be used for adding inner elements. A common approach is creating one `g` element for each data item and add several sub DOM elements. The sub element will be created during the enter-phase and updated using `select`. By using `select` function the data-join remains using `selectAll` a nested data join will be created. Nested data joins are useful for hierarchical data.
536538

537-
Nested data join ([Open in CodePen](https://codepen.io/sgratzl/pen/yLLBBOj)):
539+
Nested data join [![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/yLLBBOj):
538540

539541
```js
540542
// hierarchical data
@@ -560,7 +562,7 @@ const circles = groups
560562
circles.attr("r", d => d * 2).attr("cy", (d, i) => i * 20);
561563
```
562564

563-
Nested selection ([Open in CodePen](https://codepen.io/sgratzl/pen/VwwZZjY)):
565+
Nested selection [![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/VwwZZjY):
564566

565567
```js
566568
const data = [1, 2, 3];
@@ -584,7 +586,7 @@ circles.select("title").text(d => d);
584586

585587
**INTERACTIVE**
586588

587-
Adding a title attribute: [barchart02_title.html](examples/barchart02_title.html) ([Open in CodePen](https://codepen.io/sgratzl/pen/PooYYzb))
589+
Adding a title attribute: [barchart02_title.html](examples/barchart02_title.html) [![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/PooYYzb)
588590

589591
---
590592

@@ -626,7 +628,7 @@ See also: https://github.com/d3/d3-request/blob/master/README.md#csv for formatt
626628

627629
**INTERACTIVE**
628630

629-
Loading [weather.json](examples/weather.json): [barchart03_json.html](examples/barchart03_json.html) ([Open in CodePen](https://codepen.io/sgratzl/pen/poozzbL))
631+
Loading [weather.json](examples/weather.json): [barchart03_json.html](examples/barchart03_json.html) [![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/poozzbL)
630632

631633
---
632634

@@ -709,13 +711,13 @@ const axis_container = d3
709711
axis_container.call(axis);
710712
```
711713

712-
[Open in CodePen](https://codepen.io/sgratzl/pen/zPedpX)
714+
[![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/zPedpX)
713715

714716
---
715717

716718
**INTERACTIVE**
717719

718-
Adding linear and ordinal scale: [barchart04_scale.html](examples/barchart04_scale.html) ([Open in CodePen](https://codepen.io/sgratzl/pen/oNNvvzv))
720+
Adding linear and ordinal scale: [barchart04_scale.html](examples/barchart04_scale.html) [![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/oNNvvzv)
719721

720722
---
721723

@@ -745,15 +747,15 @@ const circles = d3
745747
);
746748
```
747749

748-
[Open in CodePen](https://codepen.io/sgratzl/pen/zYYOOKe)
750+
[![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/zYYOOKe)
749751

750752
Commonly used events: `click`, `mouseover/mouseout`, `mouseenter/mouseleave`, `change`, `input`
751753

752754
---
753755

754756
**INTERACTIVE**
755757

756-
Filter US cities: [barchart05_interactive.html](examples/barchart05_interactive.html) ([Open in CodePen](https://codepen.io/sgratzl/pen/JjjPPRQ))
758+
Filter US cities: [barchart05_interactive.html](examples/barchart05_interactive.html) [![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/JjjPPRQ)
757759

758760
---
759761

@@ -788,7 +790,7 @@ circles
788790
.attr("r", 20);
789791
```
790792

791-
[Open in CodePen](https://codepen.io/sgratzl/pen/QWWLLGa)
793+
[![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/QWWLLGa)
792794

793795
D3 is rather dumb when it comes to mapping data items to DOM elements. It doesn't take the order into account. So, if element 'a' was previously at the first position and now on the third it will bind it to the third element. However, this hampers animations, i.e. animated sorting. By using the _key_ argument of the `data` function, one can force that the same DOM element is bound to the same data item regardless of the item order.
794796

@@ -832,21 +834,21 @@ setTimeout(() => {
832834
}, 2000);
833835
```
834836

835-
[Open in CodePen](https://codepen.io/sgratzl/pen/ExxYYNM)
837+
[![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/ExxYYNM)
836838

837839
---
838840

839841
**INTERACTIVE**
840842

841-
Animated filter: [barchart06_animation.html](examples/barchart06_animation.html) ([Open in CodePen](https://codepen.io/sgratzl/pen/dyybbNP))
843+
Animated filter: [barchart06_animation.html](examples/barchart06_animation.html) [![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/dyybbNP)
842844

843845
---
844846

845847
---
846848

847849
**INTERACTIVE**
848850

849-
Final results [barchart07_final.html](examples/barchart07_final.html) ([Open in CodePen](https://codepen.io/sgratzl/pen/NWWKKda))
851+
Final results [barchart07_final.html](examples/barchart07_final.html) [![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/NWWKKda)
850852

851853
---
852854

@@ -919,7 +921,7 @@ Besides this functional approach an object oriented way is an valid alternative.
919921

920922
**INTERACTIVE**
921923

922-
MCV Inital Setup: [mcv01_initial.html](examples/mcv01_initial.html) ([Open in CodePen](https://codepen.io/sgratzl/pen/bQzNBO))
924+
MCV Inital Setup: [mcv01_initial.html](examples/mcv01_initial.html) [![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/bQzNBO)
923925

924926
---
925927

@@ -937,7 +939,7 @@ A pie-layout is a simple layout algorithm. It takes the data and a way to sort/c
937939

938940
---
939941

940-
SEE: [pie.html](examples/pie.html) ([Open in CodePen](https://codepen.io/sgratzl/pen/BaaBBdZ))
942+
SEE: [pie.html](examples/pie.html) [![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/BaaBBdZ)
941943

942944
---
943945

@@ -949,13 +951,13 @@ A force layout is a graph layout algorithm, which uses a simulation for position
949951

950952
---
951953

952-
SEE: [miserables.html](examples/miserables.html) ([Open in CodePen](https://codepen.io/sgratzl/pen/poozzrK))
954+
SEE: [miserables.html](examples/miserables.html) [![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/poozzrK)
953955

954956
---
955957

956958
**INTERACTIVE**
957959

958-
Pie chart layout: [mcv02_piechart.html](examples/mcv02_piechart.html) ([Open in CodePen](https://codepen.io/sgratzl/pen/abbooyg))
960+
Pie chart layout: [mcv02_piechart.html](examples/mcv02_piechart.html) [![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/abbooyg)
959961

960962
---
961963

@@ -969,7 +971,7 @@ So far the visualizations doesn't influence each other and the user can only fil
969971

970972
**INTERACTIVE**
971973

972-
Interactive Visualizations: [mcv03_interaction.html](examples/mcv03_interaction.html) ([Open in CodePen](https://codepen.io/sgratzl/pen/QWWLLqm))
974+
Interactive Visualizations: [mcv03_interaction.html](examples/mcv03_interaction.html) [![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/QWWLLqm)
973975

974976
---
975977

@@ -983,7 +985,7 @@ An advantage of our code structure is that we can use the factory methods to cre
983985

984986
**INTERACTIVE**
985987

986-
Reuse Visualizations: [mcv04_morevisses.html](examples/mcv04_morevisses.html) ([Open in CodePen](https://codepen.io/sgratzl/pen/VVgYqx))
988+
Reuse Visualizations: [mcv04_morevisses.html](examples/mcv04_morevisses.html) [![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/VVgYqx)
987989

988990
---
989991

@@ -1005,15 +1007,15 @@ The biggest flexibility is to specify how attributes or styles should be tweened
10051007

10061008
**INTERACTIVE**
10071009

1008-
Custom Transition: [mcv05_transitions.html](examples/mcv05_transitions.html) ([Open in CodePen](https://codepen.io/sgratzl/pen/WNNeeXM))
1010+
Custom Transition: [mcv05_transitions.html](examples/mcv05_transitions.html) [![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/WNNeeXM)
10091011

10101012
---
10111013

10121014
---
10131015

10141016
**INTERACTIVE**
10151017

1016-
Final Outcome: [mcv06_final.html](examples/mcv06_final.html) ([Open in CodePen](https://codepen.io/sgratzl/pen/yLLBBPx))
1018+
Final Outcome: [mcv06_final.html](examples/mcv06_final.html) [![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/yLLBBPx)
10171019

10181020
---
10191021

@@ -1104,3 +1106,5 @@ free and commerical charting library.
11041106
- ...
11051107

11061108
Thank You
1109+
1110+
[codepen]: https://img.shields.io/badge/CodePen-open-blue?logo=codepen

‎index.html‎

Lines changed: 48 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -28,39 +28,81 @@ <h3>Incremental Example: Barchart</h3>
2828
</li>
2929
<li>
3030
<a href="./examples/barchart02_title.html">Adding Title</a>
31-
<a href="https://codepen.io/sgratzl/pen/PbjjWv" target="_blank"
31+
<a href="https://codepen.io/sgratzl/pen/PooYYzb" target="_blank"
3232
>(@Codepen.io)</a
3333
>
3434
</li>
3535
<li>
3636
<a href="./examples/barchart03_json.html">Loading Data</a>
37-
<a href="https://codepen.io/sgratzl/pen/JbJJWL" target="_blank"
37+
<a href="https://codepen.io/sgratzl/pen/poozzbL" target="_blank"
3838
>(@Codepen.io)</a
3939
>
4040
</li>
4141
<li>
4242
<a href="./examples/barchart04_scale.html">Using Scales</a>
43-
<a href="https://codepen.io/sgratzl/pen/aBwwWE" target="_blank"
43+
<a href="https://codepen.io/sgratzl/pen/oNNvvzv" target="_blank"
4444
>(@Codepen.io)</a
4545
>
4646
</li>
4747
<li>
4848
<a href="./examples/barchart05_interactive.html"
4949
>Interactive Filtering</a
5050
>
51-
<a href="https://codepen.io/sgratzl/pen/BQZZZB" target="_blank"
51+
<a href="https://codepen.io/sgratzl/pen/JjjPPRQ" target="_blank"
5252
>(@Codepen.io)</a
5353
>
5454
</li>
5555
<li>
5656
<a href="./examples/barchart06_animation.html">Animation</a>
57-
<a href="https://codepen.io/sgratzl/pen/BQZZZB" target="_blank"
57+
<a href="https://codepen.io/sgratzl/pen/dyybbNP" target="_blank"
5858
>(@Codepen.io)</a
5959
>
6060
</li>
6161
<li>
6262
<a href="./examples/barchart07_final.html">Final Barchart</a>
63-
<a href="https://codepen.io/sgratzl/pen/gLRRRJ" target="_blank"
63+
<a href="https://codepen.io/sgratzl/pen/NWWKKda" target="_blank"
64+
>(@Codepen.io)</a
65+
>
66+
</li>
67+
</ul>
68+
</section>
69+
70+
<section>
71+
<h3>Incremental Example: Multiple Coordinated View</h3>
72+
<ul>
73+
<li>
74+
<a href="./examples/mcv01_initial.html">Initial</a>
75+
<a href="https://codepen.io/sgratzl/pen/bQzNBO" target="_blank"
76+
>(@Codepen.io)</a
77+
>
78+
</li>
79+
<li>
80+
<a href="./examples/mcv02_piechart.html">Pie Chart Layout</a>
81+
<a href="https://codepen.io/sgratzl/pen/abbooyg" target="_blank"
82+
>(@Codepen.io)</a
83+
>
84+
</li>
85+
<li>
86+
<a href="./examples/mcv03_interaction.html">Interaction</a>
87+
<a href="https://codepen.io/sgratzl/pen/QWWLLqm" target="_blank"
88+
>(@Codepen.io)</a
89+
>
90+
</li>
91+
<li>
92+
<a href="./examples/mcv04_morevisses.html">More Visualization</a>
93+
<a href="https://codepen.io/sgratzl/pen/VVgYqx" target="_blank"
94+
>(@Codepen.io)</a
95+
>
96+
</li>
97+
<li>
98+
<a href="./examples/mcv05_transitions.html">Advanced Animations</a>
99+
<a href="https://codepen.io/sgratzl/pen/WNNeeXM" target="_blank"
100+
>(@Codepen.io)</a
101+
>
102+
</li>
103+
<li>
104+
<a href="./examples/mcv06_final.html">Final Result</a>
105+
<a href="https://codepen.io/sgratzl/pen/yLLBBPx" target="_blank"
64106
>(@Codepen.io)</a
65107
>
66108
</li>

0 commit comments

Comments
 (0)