Vue.js Voyagers 🪐 Gamified Travel SPA with D3.js, Web Notifications, and Web Audio

Screen.Recording.2021-12-09.at.11.26.34.AM.mp4

Vue.js D3.js Star Wars programming challenge

Vue.js D3.js Star Wars Responsive view

Vue.js D3.js Star Wars LinkedIn Post

Vue.js D3.js Star Wars Tweet

Client Requirements:

Use Vue.js and Advanced JavaScript

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.

  watch: {  //  Fly the Unfriendly Skies
      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 ...");
          } // TypeScript ⚡ WASM ✨ NestJS
          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"); }
      }
  }

---

Portfolio Blog | 🌶️ Résumé | UX micro-library | PWA WASM | Web Tool Toys | Neodigm UX Wiki | NPM | Github | LinkedIn | Gists | Salesforce | Code Pen | Machvive | Arcanus 55 | Medium | W3C | InfoSec