Modules - NathanNeelis/frontend-data GitHub Wiki

Why use modules?

To make my code more accessible and readable I decided I wanted to use modules.
This means that I will have multiple javascript files that correspond together.

Modules

To use modules you need something that combines all the modules into 1 javascript file.
This is because browsers do not simply accept modules, there are some tricks to get this working anyway, but the best way I found is to use bundler. For example rollup, is an NPM package that can create this combined file.
But after a day of trying to get this working, I sadly had to move on with another option, called Vizhub.
This does not mean I have given up, but I will simply try to get this working later on. Today we actually got some bonus information from a teacher (Danny) that explained the basics of how I can get this working. But I have tight deadlines, so I will have to come back later to get this working locally.

Vizhub

In Vizhub modules are already working from the start. This way you can easily use the D3 library and keep your code clean. The downside is that it isn't local and you will have to export it and then push it to Github.

Imports

When using modules, you have to import and export functions from other javascript files.
So in my case I am working in index.js. In here you will find the most important code.
But I have two other javascript files, transform.js and visual.js where I export functions and import them in the index.js.
For example, in my visual.js I have a function called setupScales that setup my scales for my visual. Before I start the function I tell it to export so I then can import it in my index.js.

export function setupScales(data){
      yScale
        .domain([max(data, yValue), 0])
        .range([0, innerHeight])
        .nice();

      xScale
        .domain(data.map(xValue))
        .range([0, innerWidth])
        .padding(0.2); 
    }

import {
  setupScales
} from './visual'

The example below shows Vizhub where I import functions from another javascript file called transform.js.

My modules

To clean my code I created two different javascript files containing functions:
transform.js This includes all data cleaning and transforming functions so that these functions don't make a mess of my main javascript file.
visual.js This includes all the functions for rendering my D3 visual
index.js The functions left in the main file are the gathering of the data itself and the final function that creates and updates the visual. Unfortunately, there are two extra functions in this file due to the issue described below.

Issue with creating modules for specific functions

When using these imports I got my code really clean, but I ran into an issue that has yet to be fixed.
At this moment inside my index.js file, there are two functions called setupInput and changeOutput.
I would love to create a new javascript file or add it to visual.js, but I have to following issue:

function setupInput() {
  // &CREDITS code example by Laurens
  const input = select('#filter')
    .on("click", () => changeOutput(data));
    // .on('click', changeOutput)
}

function changeOutput() {
  const filterOn = this ? this.checked : false;
  console.log('checkbox', this.checked)

  const dataSelection = filterOn ? combineDoubleCities(prDataSet) : prDataSet
  console.log('new data', dataSelection)
}

When I try to send data on calling the changeOutput function the this isn't bound to the checkbox anymore, not giving me a way to read the status of the checkbox and changing the data if it returns true. This would be nice to have fixed when I have some spare time to spend on this issue.

The long import list for the visual.js file is because of this issue. There should only be 4-5 imports.

Update module issue

I fixed the issue and found a way to select my checkbox.

const dataSelection = select('input').property('checked') ? combineDoubleCities(data) : data

Now my main index file got really clean with only 37 lines of code.