├── index.html
├── chaining-transition.js
└── README.md
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | d3-cheatsheet examples
5 |
6 |
7 |
8 |
9 |
10 | github
11 |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/chaining-transition.js:
--------------------------------------------------------------------------------
1 | var data = [
2 | [10, 50, 10, "red"],
3 | [70, 20, 15, "blue"],
4 | [80, 60, 20, "green"]
5 | ];
6 |
7 | function endall(transition, callback) {
8 | if (transition.size() === 0) { callback() }
9 | var n = 0;
10 | transition
11 | .each(function() { ++n; })
12 | .each("end", function() { if (!--n) callback.apply(this, arguments); });
13 | }
14 |
15 | d3.select("#run").on("click", function() {
16 | d3.select(".container")
17 | .selectAll("circle")
18 | .data(data)
19 | .enter()
20 | .append('circle')
21 | // initial values
22 | .style("fill", function (d) { return d[3]; })
23 | .attr("cx", 0)
24 | .attr("cy", 0)
25 | .attr("r", 5)
26 | .transition(200)
27 | // final values for positions
28 | .attr("cx", function (d) { return d[0]; })
29 | .attr("cy", function (d) { return d[1]; })
30 | .call(endall, function() {
31 | // previous transition has ended
32 | d3.selectAll("circle")
33 | .transition(200)
34 | .attr("r", function (d) { return d[2]; });
35 | });
36 |
37 | });
38 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # D3.js Cheatsheet
2 |
3 | ## d3.js quick reference sheet
4 |
5 | ### Table of contents
6 |
7 | - [Attributes/Styles](#attributesstyles)
8 | - [Classes](#classes)
9 | - [Link/Href](#linkhref)
10 | - [Properties](#properties)
11 | - [Axis](#axis)
12 | - [Time parsing/formatting](#time-parsingformatting)
13 | - [Color](#color)
14 | - [General Update Pattern](#general-update-pattern)
15 | - [Transition](#transition)
16 |
17 | ### Attributes/Styles
18 |
19 | #### Attributes/Styles - initialization
20 |
21 | ```javascript
22 | var svgWrapper = d3.select("body")
23 | .append("svg")
24 | .attr("id", "viz")
25 | .attr("width", width + margin.left + margin.right)
26 | .attr("height", height + margin.top + margin.bottom);
27 |
28 | var container = svgWrapper.append("g")
29 | .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
30 | .style("pointer-events", "all");
31 | ```
32 |
33 | #### Attributes/Styles - circle
34 |
35 | ```javascript
36 | selection.attr("r", style.r)
37 | .attr("fill", style.fill)
38 | .attr("stroke", style.color)
39 | .attr("stroke-width", style["stroke-width"])
40 | ```
41 |
42 | ### Classes
43 |
44 | ```javascript
45 | selection.classed('my-class', true);
46 | ```
47 |
48 | ### Link/Href
49 |
50 | #### In SVG
51 |
52 | ```javascript
53 | selection.select('text')
54 | .text(function(d) {
55 | return d.name;
56 | })
57 | .attr("xlink:href", function(d){
58 | return d.url;});
59 | ```
60 | #### In HTML
61 |
62 | ```javascript
63 | selection
64 | .append('a')
65 | .attr('href', function(d) {
66 | return d.url;
67 | })
68 | .text(function(d) {
69 | return d.name;
70 | });
71 | ```
72 |
73 | ### Properties
74 |
75 | ```javascript
76 | var id = d3.select("#id").property("value");
77 | d3.select("input").property("value", d3.event.keyCode);
78 | ```
79 |
80 | ### Axis
81 |
82 | ```javascript
83 | var xAxis = d3.svg.axis()
84 | .scale(_xScale)
85 | .orient("bottom")
86 | .ticks(4)
87 | .tickFormat(d3.time.format('%d %b %I%p')) //14 Feb 12AM
88 | .tickSize(5);
89 | ```
90 |
91 | ### Time parsing/formatting
92 |
93 | ```javascript
94 | var parseDate = d3.time.format("%Y-%m-%dT%H:%M:%SZ").parse,
95 | formatDate = d3.time.format("%d %b %H:%M:%S"),
96 | formatDateForQuery = d3.time.format("%Y-%m-%dT%H:%M:%SZ"),
97 | formatTime = d3.time.format("%H:%M:%S");
98 | ```
99 |
100 | ### Color
101 |
102 | #### Custom color ordinal scale
103 |
104 | ```javascript
105 | var myCategory20Colors = [
106 | 0x1f77b4, 0xaec7e8,
107 | 0xff7f0e, 0xffbb78,
108 | 0x2ca02c, 0x98df8a,
109 | 0xd62728, 0xff9896,
110 | 0x9467bd, 0xc5b0d5,
111 | 0x8c564b, 0xc49c94,
112 | 0xe377c2, 0xf7b6d2,
113 | 0xbcbd22, 0xdbdb8d,
114 | 0x17becf, 0x9edae5
115 | ].map(function(x) {
116 | var value = x + "";
117 | return d3.rgb(value >> 16, value >> 8 & 0xff, value & 0xff).toString();
118 | });
119 |
120 | var myCategory20 = d3.scale.ordinal().range(myCategory20Colors);
121 | console.log(myCategory20("x"), myCategory20("y"));
122 | // #1f77b4 #aec7e8
123 | ```
124 |
125 | ### General Update Pattern
126 |
127 | ```javascript
128 | function update(data) {
129 |
130 | // DATA JOIN
131 | // Join new data with old elements, if any.
132 | var text = svg.selectAll("text")
133 | .data(data);
134 |
135 | // UPDATE
136 | // Update old elements as needed.
137 | text.attr("class", "update");
138 |
139 | // ENTER
140 | // Create new elements as needed.
141 | text.enter().append("text")
142 | .attr("class", "enter")
143 | .attr("x", function(d, i) { return i * 32; })
144 | .attr("dy", ".35em");
145 |
146 | // ENTER + UPDATE
147 | // Appending to the enter selection expands the update selection to include
148 | // entering elements; so, operations on the update selection after appending to
149 | // the enter selection will apply to both entering and updating nodes.
150 | text.text(function(d) { return d; });
151 |
152 | // EXIT
153 | // Remove old elements as needed.
154 | text.exit().remove();
155 | }
156 | ```
157 |
158 | ### Transition
159 |
160 | #### Chaining transition
161 |
162 | ```javascript
163 | function endall(transition, callback) {
164 | if (transition.size() === 0) {
165 | callback()
166 | }
167 | var n = 0;
168 | transition
169 | .each(function() {
170 | ++n;
171 | })
172 | .each("end", function() {
173 | if (!--n) callback.apply(this, arguments);
174 | });
175 | }
176 |
177 | selection.transition()
178 | .attr("cx", xMap)
179 | .attr("cy", yMap)
180 | .call(endall, function() {
181 | console.log("all loaded");
182 | // do your next transition
183 | });
184 | ```
185 |
186 | [source](https://stackoverflow.com/questions/10692100/invoke-a-callback-at-the-end-of-a-transition)
187 | [demo](http://paradite.github.io/d3-cheatsheet/)
188 |
189 |
190 | ---
191 |
192 | ## Other cheatsheets
193 | - [bash-cheatsheet](https://github.com/paradite/bash-cheatsheet)
194 |
195 | ## License
196 |
197 | MIT
198 |
--------------------------------------------------------------------------------