95 |
96 |
97 |
d3-exploder
98 |
99 |
100 |
101 |
102 |
What is this?
103 |
104 |
105 | This is a tiny d3 extension that lets you easily move and resize geographic features rendered with d3 and topojson.
106 |
107 |
108 |
Why would I want this?
109 |
110 |
111 | Say you have a map of the US (like above) and you want to gratuitously transition the map into a scatter plot where the states are the points. This will let you do that. To see this in action, click the "scatter" button above.
112 |
113 |
114 |
How can I use this?
115 |
116 | You can install via...
117 |
118 |
119 | npm install d3-exploder
120 |
121 |
122 | And then import within javascript
123 |
124 | import { exploder } from 'd3-exploder';
125 |
126 | var myExploder = exploder();
127 |
128 |
129 |
or include via a script tag
130 |
131 |
132 | <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
133 | <script src="http://d3js.org/topojson.v2.min.js"></script>
134 | <script src="d3-exploder.min.js"></script>
135 |
136 |
137 | Next, create a map with some geographic features... and then create an exploder function and call it!
138 |
139 |
140 |
141 | var width = 960,
142 | height = 500;
143 |
144 | var projection = d3.geoAlbersUsa().scale(width);
145 |
146 | var path = d3.geoPath()
147 | .projection(projection);
148 |
149 | var svg = d3.select("#map").append("svg")
150 | .attr("width", width)
151 | .attr("height", height);
152 |
153 | var g = svg.append("g");
154 |
155 |
156 | d3.json("us.json", function(error, us) {
157 |
158 | var state_features = topojson.feature(
159 | us, us.objects.states
160 | ).features;
161 |
162 | var states = g.append("g")
163 | .attr("id", "states")
164 | .selectAll("path")
165 | .data(state_features)
166 | .enter().append("path")
167 | .attr("d", path);
168 |
169 |
170 | // Here is the magic!
171 | // This exploder will create a grid of the states
172 | // when called on a featurelist selection
173 | var exploder = d3.exploder()
174 | // use the same projection as the map
175 | .projection(projection)
176 | // provide a function to determine the size
177 | // of each feature when called
178 | .size(function(d, i) { return 40; })
179 | // provide a function to determine the
180 | // new (grid) positions of the features
181 | // -> returns an [x, y] array (in pixels)
182 | .position(function(d, i) {
183 | var px = Math.max(0, width - 9*60)/2
184 | return [px + (i%10)*60, 70 + Math.floor(i/10)*60];
185 | })
186 | //
187 | // transition to the grid
188 | //
189 | states
190 | .transition()
191 | .duration(500)
192 | .call(exploder);
193 |
194 | });
195 |
196 |
197 |
198 |
199 |
200 |
