7 |
8 | **[Moon Phase Visualizer Demo Link](http://palerdot.github.io/moon-phase-visualizer)**
9 |
10 | Moon Phase Visualizer is created using [d3.js](https://d3js.org/). There is a short introduction to d3.js using Moon Phase Visualizer.
11 |
12 | **[Short d3.js Introduction Link](http://palerdot.github.io/moon-phase-visualizer/d3-moon-viz.html)**
13 |
14 | # Feedback & Contributing
15 |
16 | Feedback, Improvements and Contributions are greatly appreciated. Checkout the [github issues](https://github.com/palerdot/moon-phase-visualizer/issues) for the current list of issues.
17 |
--------------------------------------------------------------------------------
/css/highlightjs/default.css:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | Original style from softwaremaniacs.org (c) Ivan Sagalaev
240 |
241 | // select the moon using 'select'. 'select' returns only one element
242 | var moon = d3.select("#moon");
243 |
244 | // calculate the co-ordinates
245 | // x = somevalue; y = somevalue;
246 |
247 | // now update the position using our selection
248 | moon.attr("cx", x).attr("cy", y);
249 |
250 | // ------------------------------------------------------------------
251 |
252 | // With 'selectAll' we can select all the elements for the selection
253 | // Here there are 2 timer elements in the page; returns both
254 | var timer = d3.selectAll(".phase.timer");
255 |
256 | // calculate the time
257 | // time = somevalue;
258 |
259 | // now update 'all' the elements from the 'selectAll'.
260 | timer.text( time );
261 |
262 |
263 |
264 | 275 | Data Joins helps us to associate some data (which is given as an array) with html elements. If the data array changes, corresponding html elements can be easily associated or disassociated with the data. 276 |
277 | 278 |279 | 280 | Data Joins involve the following 281 | 282 |
294 |
307 |
308 | // our data array containing star co-ordinates; initially it will be empty
309 | var starData = [];
310 |
311 | // lets fill the starData with sets of 10 random co-ordinates; Each co-ordinate represent a star position.
312 | // [ {x: 1, y: 1}, {x: 34, y: 56}, {x: 32, y: 8}, {x: 22, y: 48} ....... ] // total of 10 sets
313 |
314 | // the holder that will contain all the stars
315 | var canvas = d3.select("#starCanvas");
316 |
317 |
318 |
319 |
320 |
331 |
332 | canvas.selectAll("circle") // select the circle elements (0 elements currently)
333 | .data( starData ); // bind the data to the circles (10 co-ordinates)
334 |
335 |
336 |
337 | If we had initially 5 circle elements, the previous statement would have bound the first 5 co-ordinates to the 5 circle elements.
338 |
339 | If we see the above statement, we have 0 circle elements. But we have 10 co-ordinates. There are no circles to associate the co-ordinate data. In other words, we have 10 extra co-ordinate data for which we need circle elements to associate with.
340 |
341 |
347 |
348 | canvas.selectAll("circle") // select the circle elements (0 elements currently)
349 | .data( starData ); // bind the data to the circles (10 co-ordinates)
350 | .enter() // gets the new data without elements associated
351 | .append("circle") // add the new elements for the new data
352 |
353 |
354 |
355 |
362 |
363 | canvas.selectAll("circle") // select the circle elements (0 elements currently)
364 | .data( starData ); // bind the data to the circles (10 co-ordinates)
365 | .enter() // gets the new data without elements associated
366 | .append("circle") // add the new elements for the new data
367 | .attr("r", 1); // static radius value is used for all elements
368 | .attr("cx", function (d) { return d.x; } ) // dynamically takes x position from bound data for this element
369 | .attr("cy", function (d) { return d.y; } ) // dynamically takes y position from bound data for this element
370 |
371 |
372 |
373 | d3.js has attr() methods, that takes a value or a function as second argument. If a value is used, it is used directly. This is done for the r attribute. All the stars have a default radius of one. But for the (x,y) positions we need values from our co-ordinates which we associated with the circle. d3.js allows us to use a function as second argument, with our bound data as the argument. So we return our (x, y) value from our co-ordinate object for (cx, cy) attributes respectively.
374 |
375 |
385 |
386 | // let us remove 3 stars from the data Array
387 | starData = starData.slice(0, starData.length - 3);
388 |
389 | canvas.selectAll("circle") // select the circle elements (10 elements currently)
390 | .data( starData ); // bind the new data to the circles (7 co-ordinates)
391 | .exit() // gets the extra circle elements not bound to new data, in this case last 3
392 | // let us change their color to red for 2 seconds before removing them
393 | .transition().duration(2000).style("stroke", "red").style("fill", "red")
394 | // only now the extra html elements are removed.
395 | .remove();
396 |
397 |
398 |
399 |
407 |
408 | // let us add 3 stars to our data array
409 | starData.push( {x: 23, y: 44} );
410 | starData.push( {x: 33, y: 54} );
411 | starData.push( {x: 43, y: 24} );
412 |
413 | canvas.selectAll("circle") // select the circle elements (7 elements currently)
414 | .data( starData ); // bind the new data to the circles (10 co-ordinates)
415 | .enter() // gets the extra data without bound html elements (last 3 co-ordinates)
416 | .append("circle") // add the new elements for the new data
417 | .attr("r", 1); // static radius value is used for all elements
418 | .attr("cx", function (d) { return d.x; } ) // dynamically takes x position from bound data for this element
419 | .attr("cy", function (d) { return d.y; } ) // dynamically takes y position from bound data for this element
420 | .style("stroke", "blue").style("fill", "blue") // initial star color
421 | // let us change their color back to white from blue after 2 seconds
422 | .transition().duration(2000).style("stroke", "white").style("fill", "white");
423 |
424 |
425 |
426 |
433 |
434 | canvas.selectAll("circle") // select the circle elements (10 elements currently)
435 | .data( starData ); // bind the current data to the circles (10 co-ordinates)
436 | // now we have got our existing stars; do whatever we want to do to them
437 | .style("stroke", "silver").style("fill", "silver");
438 |
439 |
440 |
441 | Every time Data Join is done, the data is updated with the corresponding html element. For example, if we have changed some of the stars' co-ordinates, previous data join would have updated them. To reflect that change, we need to update their position. Expanding on the previous statement,
442 |
443 |
444 |
445 | // we have updated some of the stars' co-ordinates; So update to their new positions
446 | canvas.selectAll("circle") // select the circle elements
447 | .data( starData ); // bind the current data to the circles (changed co-ordinates will be updated now)
448 | // update the circle elements to new position
449 | .attr("cx", function (d) { return d.x; } ) // all stars gets their new x co-ordinate
450 | .attr("cy", function (d) { return d.y; } ) // all stars gets their new y co-ordinate
451 |
452 |
453 |
454 | 189 | 190 |
201 |
224 | Feedbacks, Improvements and Contributions are greatly appreciated. If you are familiar with Github, you can find the source computer program for this demo here. Check out Github issue tracker here for current issues and problems. 225 |
226 | 227 |