mozilla / internet-health-report

MIT License
4 stars 9 forks source link

WIP - Update map projections use robinson #43

Open mrchrisadams opened 6 years ago

mrchrisadams commented 6 years ago

this isn't ready for a merging in, but I can't see a way to set up an issue on the main repo to ask this question

Hi there,

I wanted to start work on making a version of the internet health report which uses a different projection then the Mercator one. Specifically I'd like to try replacing the Mercator projection with the Robinson projection - one that tends to be better for showing the true sizes of countries on a map, and doesn't make greenland seem to overwhelmingly huge.

You can see more about the differences in the projection - there's even a game to show how much it distorts the size of countries:

The way I think I'd do this would be switch the line where the geoMercator projection, is specified here:

https://github.com/mozilla/internet-health-report/blob/master/src/javascripts/modules/visualizations/Choropleth.js#L66

    const countries = topojson.feature(this.shapeData, this.shapeData.objects[`countries`]);
    const projection = d3.geoMercator()
      .fitSize([this.width, this.height], countries);
    const path = d3.geoPath()
      .projection(projection);

…and instead use the geoRobinson projection

https://github.com/d3/d3-geo-projection/#geoRobinson

However, I can't seem to get the app to run when I call npm run as directed in the readme.

Here's what I'm getting when I try starting to develop locally on my macbook laptop running npm 5.5.1, and node v8.5.0

> gulp-starter@3.1.0 start /Users/chrisadams/Code/misc/internet-health-report
> gulp

/Users/chrisadams/Code/misc/internet-health-report/node_modules/require-dir/index.js:97
            if (!require.extensions.hasOwnProperty(ext)) {
                                    ^

TypeError: require.extensions.hasOwnProperty is not a function
    at requireDir (/Users/chrisadams/Code/misc/internet-health-report/node_modules/require-dir/index.js:97:37)
    at Object.<anonymous> (/Users/chrisadams/Code/misc/internet-health-report/gulpfile.js/index.js:17:1)
    at Module._compile (module.js:624:30)
    at Object.Module._extensions..js (module.js:635:10)
    at Module.load (module.js:545:32)
    at tryModuleLoad (module.js:508:12)
    at Function.Module._load (module.js:500:3)
    at Module.require (module.js:568:17)
    at require (internal/module.js:11:18)
    at Liftoff.handleArguments (/Users/chrisadams/Code/misc/internet-health-report/node_modules/gulp/bin/gulp.js:116:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! gulp-starter@3.1.0 start: `gulp`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the gulp-starter@3.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/chrisadams/.npm/_logs/2017-10-31T14_23_43_560Z-debug.log

My guess is that npm is loading the latest version of a library that has a breaking change, based on the TypeError: require.extensions.hasOwnProperty is not a function message I'm seeing.

Is it possible to share a list of the known good libraries, so I can add a something like a lockfile, to freeze the set of dependencies for any future work?

Thanks for sharing the source code to make forking it possible, and seeing how it works in the first place 👍