-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathreadme.hbs
100 lines (70 loc) · 4.02 KB
/
readme.hbs
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
# sota.js
Charting library for *The Phillipian*'s [annual State of the Academy survey project](https://sota.phillipian.net) by
Samson Zhang EDE CXLII (@wwsalmon) and Anthony Kim Digital Editor CXLII,CXLIII (@createandbuild). Built on d3. Currently
WIP.
# Setup
## Using plain JS (recommended for now):
1. Include d3.js and masonry.js (to use createSections, section selectors, and sotaMasonry), as well as
`dist/sota.min.js`, in your `<head>`:
```
<script src="PATH/TO/d3.min.v5.js"></script>
<script src="PATH/TO/masonry.pkgd.min.js"></script>
<script src="PATH/TO/sota.min.js"></script>
```
Or, using CDNs:
```
<script src="https://unpkg.com/d3@5.16.0/dist/d3.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script src="PATH/TO/sota.min.js"></script>
```
2. In your app or index js, configure `sotaConfig` and call setup functions like `setColors` and `setStyles`, and
`createSections` and `sotaNavbar` if desired. As an example, here is a snippet from `demo/index.js`:
```
// required for graphs to look okay -- specify at minimum a slug and array of colors
sota.sotaConfig.sections = [
{"slug": "sotajs", "name": "sota.js", "colors": sota.colorInterpolate("#222222")},
{"slug": "politics", "name": "Politics & Worldview", "blurb": "test blurb", "colors":
sota.colorInterpolate("#660066", "#dac7d8", 5, true)},
{"slug": "wellness", "name": "Health & Wellness", "colors": sota.colorInterpolate("#6cb643", "#cae3cb", 5, true)},
{"slug": "discipline", "name": "Discipline", "colors": sota.colorInterpolate("#b43432", "#f0d1ca", 5, true)}
]
// required for graphs to look okay -- call functions to inject color, style CSS based on sotaConfig
sota.setColors(sota.sotaConfig);
sota.setStyles(sota.sotaConfig);
// required only if you want to generate default layout containers. Can also specify directly through HTML and use
selectors for graphs
sota.createSections(sota.sotaConfig);
// optional, render navbar based on sotaConfig.sections
// make sure you call createSections first!
sota.sotaNavbar(sota.sotaConfig, "sota.js Demo", "szlogo.png", false, "https://www.samsonzhang.com/");
```
See [usage](#Usage) for specifics on these functions.
3. After calling setup functions, call all the chart-rendering functions you want inside `window.onload` (to ensure
that these functions can find containers and selectors being dynamically created). After all your chart-rendering
functions, call `sotaMasonry` to arrange the layout.
See [usage](#Usage) for specifics on these functions, as well as each of the chart-rendering functions.
```
// render graphs inside window.onload so they will be able to find parent containers dynamically created above
window.onload = () => {
sota.barChart({title: "What does a graph look like?", subtitle: "Here's a bar chart", section: "sotajs",
dataFile: "data/ethnicity", totalResp: 1052, maxVal: true, displayPercentage: true});
sota.multiLineGraph({section: "sotajs", title: "Multilinegraph", dataFile: "data/gpaXincome", maxVal: 30});
...
sota.stackedColumnChart({ section: "politics", title: "Reverse Racism Percentage by Gender",
subtitle: "Do you believe that reverse racism exists?", dataFile: "data/reverse-racism-gender",
totalResp: 1032 });
// after everything has loaded, use Masonry to fix up layout
sota.sotaMasonry();
}
```
If you're not using `sota-section` parent containers or if you're using selectors that are hard-coded rather than
dynamically created, you can forego `window.onload` and `sotaMasonry`.
## Using npm:
**I haven't tested using npm and believe there are some problems with dependencies, so I would advise against using
npm for now.**
Run:
npm i sota.js
d3 and masonry are dependencies, so you don't have to worry about them separately.
In your app, you can now use the functions of the `sota` object just as you would in plain js.
<a name="Usage"></a>
{{>main}}