00_Color-Coded_Map_Workshop.md

No Server Data Visualization: Build a Color-Coded Map Project!

Thank you for attending our Kintone x Color-Coded Map workshop!

Use the following CSV, JavaScript, & PDF files and CDN URLs for the hands-on section!

Download Links

Click here or the button on the upper right corner for all the code, data, & slide you need for our workshop!

Getting your FREE Kintone Database

Step 1 - Sign Up for Kintone Developer Account (Website)

• bit.ly/KDP_signup
  • ⚠ Do NOT use Safari
  • ⚡Accept Cookies First
  • ✅ Use Chrome & Firefox

Step 2 - Create a Kintone Subdomain (Environment)

• bit.ly/K_DevLic
  • ⚡ Only use lowercase, numbers, & hyphens in your subdomain
  • ⚠ Do not use uppercase nor special characters

Quick video on the sign-up process:

https://youtu.be/Gzz8SbTuoFg

References

The CSV file's data is from the Highest Earnings By Country list on esportsearnings.com.
Top 100 countries' total earned prize money (in USD) & player count were extracted and we generated the Prize Money per Player figure.

01_Esports_Earnings.csv

02_CDN_URLs.txt

// Order matters when inserting CDN URLs into Kintone App settings

https://www.amcharts.com/lib/4/core.js
https://www.amcharts.com/lib/4/maps.js
https://cdn.amcharts.com/lib/4/geodata/worldLow.js
https://www.amcharts.com/lib/4/themes/animated.js

03_Map_Script.js

(function () {
  'use strict';

  // Kintone event triggered after the record list page is displayed.
  kintone.events.on('app.record.index.show', function (event) {

    // Retrieve & configure the space element below the record list's header
    var spaceDiv = kintone.app.getHeaderSpaceElement();
    spaceDiv.style.height = '500px';
    spaceDiv.style.marginLeft = '25px';
    spaceDiv.style.marginRight = '25px';
    spaceDiv.style.border = 'solid';
    spaceDiv.style.borderColor = '#ED7B84';

    // Apply amCharts Themes for automatic animation
    am4core.useTheme(am4themes_animated);

    // Create map instance
    var chart = am4core.create(spaceDiv, am4maps.MapChart);
    // Set map definition
    chart.geodata = am4geodata_worldLow;
    // Set projection
    chart.projection = new am4maps.projections.Miller();

    // Create map polygon series
    var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
    // Exclude Antarctica
    polygonSeries.exclude = ['AQ'];
    // Make map load polygon (like country names) data from GeoJSON
    polygonSeries.useGeodata = true;
    polygonSeries.calculateVisualCenter = true;
    polygonSeries.mapPolygons.template.tooltipPosition = 'fixed';

    //Set min & max fill color
    polygonSeries.heatRules.push({
      'property': 'fill',
      'target': polygonSeries.mapPolygons.template,
      'min': am4core.color('#e5f5e0'),
      'max': am4core.color('#31a354'),
      'logarithmic': true
    });

    // Set tooltip with data to be displayed when hovered over
    var polygonTemplate = polygonSeries.mapPolygons.template;
    polygonTemplate.tooltipText = '{name}: ${value}';

    // Create JSON object from Kintone records & pass it onto amCharts
    var polygonData = event.records.map(function (record) {
      return {
        // Country Code default field code = Text_0
        // Prize Money per Player default field code = Number_1
        'id': record.Text_0.value.toUpperCase(),
        'value': Number(record.Number_1.value)
      }
    });
    polygonSeries.data = polygonData;

    // - - - - - Extra Functionality - - - - -
    // Enable export
    chart.exporting.menu = new am4core.ExportMenu();
    chart.exporting.menu.align = 'left';
    chart.exporting.menu.verticalAlign = 'top';
    chart.exporting.backgroundColor = am4core.color('#f00', 0);

    // Create a zoom control
    var zoomControl = new am4maps.ZoomControl();
    chart.zoomControl = zoomControl;
    zoomControl.slider.height = 100;

    // Add Home button to reset zoom
    var home = chart.chartContainer.createChild(am4core.Button);
    home.label.text = 'Home';
    home.align = 'right';
    home.events.on('hit', function (ev) {
      chart.goHome();
    });

    // Disable mouse wheel zooming
    chart.chartContainer.wheelable = false;
  });
})();

04_Post_Event_Survey.md

Thank you for attending our workshop!

Your Feedback Please

Please fill out this quick survey for a chance to win $25 Amazon Gift Card:

http://bit.ly/KDP_Q

Next Step

For those wanting more visualization projects:

• Try linking to different amChart libraries, and reuse the code we used in the workshop!

For those wanting to create projects on Kintone and want to retrieve & store data from public APIs:

• Call public APIs from Kintone!

For those wanting to use Kintone as a back-end database:

• Check out Deploy a REST API calling node.js App to Heroku tutorial!

Where to Get Help?

• Kintone Developer Community forum
• Stack Overflow

05_xkcd.js

(function () {
  'use strict';
  var url = "https://xkcd.com/327/info.0.json";

  kintone.events.on('app.record.index.show', function (event) {
    kintone.proxy(url, 'GET', {}, {}, function (success) {
      var jsonResponse = JSON.parse(success);
      console.log(jsonResponse);
      window.open(jsonResponse.img, "", "width=800, height=200, top=200");
    }, function (error) {
      console.log(error);
    });
    return event;
  });
})();

z_Slide.pdf