Vue.js Voyagers Gamified Travel SPA with D3.js
Vue.js Voyagers 🪐 Gamified Travel SPA with D3.js
Vue.js D3.js Star Wars programming challenge
Vue.js D3.js Star Wars Responsive view
Vue.js D3.js Star Wars LinkedIn Post
Client Requirements:
Use Vue.js
Use https://swapi.co/ API for your data. (http://stapi.co/api/)
Display a list of Voyagers (characters) and some of their stats.
Display a selectable list of starships.
Create the ability to assign selected voyagers to a starship to create a Voyage.
Have the ability to assign a captain.
Add any other interactive data visualization ideas you think this UI might benefit from.
Portfolio Blog | 🦄 Résumé | NPM | Github | LinkedIn | Gists | Salesforce | Code Pen | Machvive | Arcanus 55 | Repl | Twitter | Keybase | Docker | W3C
watch: {
RESTCount : function(){ // All JSON have been received
const NUM_COMPLETE = 4, NUM_NOT_COMPLETE_ONE = 1, NUM_NOT_COMPLETE_TWO = 2;
if( this.RESTCount === NUM_NOT_COMPLETE_ONE ) snck.q("Loading ...");
if( this.RESTCount === NUM_NOT_COMPLETE_TWO ){
if( this.one2ten() >= 6 ) snck.q("Please Wait ...");
}
if( this.RESTCount === NUM_COMPLETE ) this.RESTPost(); // Init Sort and Gen Rank
},
aPeopleSel: function(){
var that = this;
d3.select(".visual__data--species").selectAll("div").remove(); // Change color by value, rnd if 1
d3.select(".visual__data--species") // d3.js dynamic charting (d3js.org) (http://circos.ca/)
.selectAll("div")
.data( this.aPeopleSel_species )
.enter().append("div")
.style("width", function( d ) { return d.value * 28 + 84 + "px"; })
.attr("class", function(d) {
var colorClass = ( d.value == 1 ) ? that.one2ten() : d.value;
return "visual__data--bg" + colorClass; })
.text(function( d ) { return ( d.label + " | " + d.value ); });
},
aShps: function(){
if( this.aShps.length == 2 ){ a55Rev.autoOpen("js-rev__splash--id"); }
}
}
Download Details:
Author: neodigm
Demo: https://neodigm.github.io/vue_voyagers/index.html
Source Code: https://github.com/neodigm/vue_voyagers
#vuejs #vue #javascript
