Skip to content

Commit 7495f60

Browse files
sgratzlsgratzl
committed
add vega and small fixes
1 parent d4e37d0 commit 7495f60

2 files changed

Lines changed: 26 additions & 14 deletions

File tree

‎README.md‎

Lines changed: 26 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# D3 Tutorial
22

3-
This is a short tutorial introducing the basic elements and concepts of D3. D3 stands for Data-Driven Documents and is a very popular JavaScript library written by [Mike Bostock](http://bost.ocks.org/mike/).
3+
This is a short tutorial introducing the basic elements and concepts of D3. D3 stands for Data-Driven Documents and is a very popular JavaScript library written by [Mike Bostock](https://bost.ocks.org/mike/).
44

55
Homepage: https://d3js.org/
66

@@ -21,7 +21,7 @@ Download / Include:
2121

2222
## Credits
2323

24-
This tutorial is based on the work of [Samuel Gratzl](https://github.com/sgratzl/d3tutorial), [Holger Stitz](https://github.com/thinkh/d3tutorial) and [Alexander Lex](https://dataviscourse.net/2016/tutorials/).
24+
This tutorial is created and maintained by [Samuel Gratzl](https://github.com/sgratzl/d3tutorial), with contributions from [Holger Stitz](https://github.com/thinkh/d3tutorial), and based on a tutorial by [Alexander Lex](https://dataviscourse.net/2016/tutorials/).
2525

2626
---
2727

@@ -56,8 +56,12 @@ Extras
5656
- [More D3](#more-d3)
5757
- [D3 Boilerplate](#boilerplate)
5858
- [What Else Besides D3](#beside-d3)
59+
60+
Appendix
61+
5962
- [TypeScript and D3][#typescript]
6063

64+
6165
> SURVEY: What do you guys already know?
6266
6367
---
@@ -66,7 +70,7 @@ Extras
6670

6771
# Development Environment
6872

69-
Using a good development environment can save you time and prevent you from pain. Editors like [Visual Studio Code](https://code.visualstudio.com), [Sublime](http://www.sublimetext.com/), or [Atom](https://atom.io) are a good start. Fully fledged integrated development environments such as [WebStorm](https://www.jetbrains.com/webstorm/) or [Eclipse](http://www.eclipse.org/webtools/) may be complex at a first glance but provide a bunch of useful features.
73+
Using a good development environment can save you time and prevent you from pain. Editors like [Visual Studio Code](https://code.visualstudio.com), [Sublime](https://www.sublimetext.com/), or [Atom](https://atom.io) are a good start. Fully fledged integrated development environments such as [WebStorm](https://www.jetbrains.com/webstorm/) or [Eclipse](https://www.eclipse.org/webtools/) may be complex at a first glance but provide a bunch of useful features.
7074

7175
## Chrome Developer Tools
7276

@@ -133,7 +137,7 @@ HTML elements can be nested:
133137
The opening tag of an element can contain extra information as attributes:
134138

135139
```html
136-
<a href="http://www.google.com">A link to Google's main page</a>
140+
<a href="https://www.google.com">A link to Google's main page</a>
137141
```
138142

139143
The `a` element (which stood for "anchor") describes a link. The attribute `href` means "HTML reference". The meaning given to each attribute changes from element to element.
@@ -187,7 +191,7 @@ Most important selectors explained in an example
187191

188192
```html
189193
<!DOCTYPE html>
190-
<html>
194+
<html lang="en">
191195
<head>
192196
<title>CSS Example</title>
193197
<style>
@@ -438,7 +442,7 @@ The basic idea of D3 is binding data items to DOM elements and manipulate them a
438442

439443
![D3 Data Join Set Relationship](i/join_types.png)
440444

441-
For each of the cases we have to tell D3 what to do. e.g. when we have more data items than DOM elements, we are in the _enter_ phase and need to specify a way how to create the remaining ones. Similarly if we more DOM elements than data items we are in the _exit_ phase and need to take care of removing the superfluous ones.
445+
For each of the cases we have to tell D3 what to do. e.g. when we have more data items than DOM elements, we are in the _enter_ phase and need to specify a way how to create the remaining ones. Similarly if we have more DOM elements than data items we are in the _exit_ phase and need to take care of removing the superfluous ones.
442446

443447
Basic workflow:
444448

@@ -587,7 +591,7 @@ Adding a title attribute: [barchart02_title.html](examples/barchart02_title.html
587591

588592
In the current version we have static hard-coded data in our files. D3 provides a bunch of function for loading external files. The most important ones are `d3.json` for loading JSON files and `d3.csv` for CSV files respectively. Both return a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises) that will resolve when the file has been loaded.
589593

590-
**Important: Data Loading is asynchronous**! That means you won't get the data immediately as a return value. But you get a Promise that will be resolved , as soon as the data are ready. You can't predict when this happens. You have to structure your code accordingly.
594+
**Important: Data loading is asynchronous**! That means you won't get the data immediately as a return value. But you get a Promise that will be resolved , as soon as the data are ready. You can't predict when this happens. You have to structure your code accordingly.
591595

592596
```js
593597
d3.json("file_to_load.json")
@@ -648,7 +652,7 @@ D3 provides different scales:
648652
### Colors
649653

650654
With version 5 D3 extracted the color schemes to it on repository located at
651-
https://github.com/d3/d3-scale-chromatic. Including both D3 standard schemes (e.g. `d3.schemeCategory10`) but also the ones from [ColorBrewer](http://colorbrewer2.org/) (e.g. `d3.schemeSet3`). These can be used as `range` for an ordinal scale.
655+
https://github.com/d3/d3-scale-chromatic. Including both D3 standard schemes (e.g. `d3.schemeCategory10`) but also the ones from [ColorBrewer](https://colorbrewer2.org/) (e.g. `d3.schemeSet3`). These can be used as `range` for an ordinal scale.
652656

653657
```js
654658
const cscale = d3.scaleOrdinal().domain(["a", "b", "c"]).range(d3.schemeCategory10);
@@ -825,7 +829,7 @@ Final results [barchart07_final.html](examples/barchart07_final.html) [![Open in
825829

826830
## Code Structure
827831

828-
One interactive visualization is nice multiple coordinated ones are better. Combined with filtering and linking and brushing it enables explore datasets in way more detail and discover new insights. Before creating a multiple coordinated view setup a proper code structure helps. A possible way to structure ones code is
832+
One interactive visualization is nice multiple coordinated ones are better. Combined with filtering and linking and brushing it enables explore datasets in way more detail and discover new insights. Before creating a multiple coordinated view setup a proper code structure helps. A possible way to structure ones code based on its function is
829833

830834
```js
831835

@@ -990,7 +994,7 @@ Final Outcome: [mcv06_final.html](examples/mcv06_final.html) [![Open in CodePen]
990994

991995
D3 provides way more that has not been covered in this tutorial including:
992996

993-
- Geo Projection: GeoJSON, TopoJSON, Projection: https://github.com/mbostock/d3/wiki/Geo-Projections
997+
- Geo Projection: GeoJSON, TopoJSON, Projection: https://observablehq.com/collection/@d3/d3-geo
994998
- Time: Scales, Formatting/Parsing, ...
995999
- Behaviors:
9961000
- Zoom
@@ -1016,6 +1020,12 @@ Github repository: https://github.com/sgratzl/d3boilerplate
10161020

10171021
# What Else Besides D3?
10181022

1023+
## Vega
1024+
1025+
[Vega](https://vega.github.io/vega/) is a visualization grammar, a declarative language for creating, saving, and sharing interactive visualization designs. With Vega, you can describe the visual appearance and interactive behavior of a visualization in a JSON format, and generate web-based views using Canvas or SVG.
1026+
1027+
![Vega Examples](./i/vega.png)
1028+
10191029
## Tableau
10201030

10211031
https://www.tableau.com/
@@ -1024,11 +1034,11 @@ The big player for commercial fat client data visualization.
10241034

10251035
![Tableau Screenshot](./i/tableau.png)
10261036

1027-
(c) http://www.marketwatch.ro
1037+
(c) https://www.marketwatch.ro
10281038

10291039
## Processing
10301040

1031-
https://processing.org/ and http://processingjs.org/ for a web-version
1041+
https://processing.org/ and https://processingjs.org/ for a web-version
10321042

10331043
Own programming language for visualizations with OpenGL backend
10341044

@@ -1064,15 +1074,17 @@ free and commerical charting library.
10641074

10651075
## Frameworks on top of D3:
10661076

1067-
- NVD3 (http://nvd3.org/) - reusable plots on top of D3
1077+
- NVD3 (https://nvd3.org/) - reusable plots on top of D3
10681078
- Cubism (https://square.github.io/cubism/) - Time Series Data
10691079
- Vega (https://vega.github.io/vega/) - declarative description of plots
10701080
- Crossfilter (https://square.github.io/crossfilter/) - Fast Multidimensional Filtering for Coordinated Views
10711081
- ...
10721082

10731083
<a id="typescript"></a>
10741084

1075-
# TypeScript and D3
1085+
# Appendix
1086+
1087+
## TypeScript and D3
10761088

10771089
[TypeScript](https://www.typescriptlang.org/) is a programming language on top of JavaScript. Foremost it allows to specify types to variables and parameters similar to other typed langugages such as Java, C#, and so on. The TypeScript compiler compiles the TypeScript code to regular JavaScript code and also performs checks on it. Every JavaScript code is valid TypeScript code.
10781090

‎i/vega.png‎

95.8 KB
Loading

0 commit comments

Comments
 (0)