yaph / d3-geomap

A library for creating geographical maps based on D3.js

d3-geomap

d3-geomap is designed to be a reusable geographic map for D3. In its current stage it consists of a class to create plain maps d3.geomap() and one for choropleth maps d3.choropleth().

Refer to the documentation on how to use d3-geomap and to download a bundle that contains minified versions of d3-geomap and its dependencies as well as TopoJSON files for creating world and individual country maps.

Install

$ npm install d3-geomap

Usage

ES6:

import { select } from 'd3-selection';
import { geomap } from 'd3-geomap';

const worldMap = geomap();
worldMap.geofile('./node_modules/d3-geomap/src/world/countries.json');

worldMap.draw(select('#map'));

Otherwise, see examples in the /examples directory.

Develop

Clone the repo & install dependencies:

$ git clone https://github.com/yaph/d3-geomap.git
$ cd d3-geomap
$ npm install

Start the development server:

$ npm run serve

A browser should open pointed to http://localhost:8000/examples/. Choose to view one of the example maps.

Map Showcase

The map above, showing birth countries of Football World Cup 2014 players, was created with d3-geomap. You can find more example maps here.

d3-geomap's Issues

RTL support for d3 geomap - choropleth

When i try to add dir="rtl" in HTML tag, As per observation d3 geomap does not have RTL processing, Is there any RTL related config or how to add RTL support in D3 geomap library?

Choropleth maps dont work on iOS

http://jsconsole.com/?%3Alisten

ReferenceError: Can't find variable: Symbol

d3.geomap.dependencies.min.js Error

I get this error in the console (chrome) when using the d3.geomap libraries. I've tried both with the 0.1 release and master, same deal.

d3.geomap.dependencies.min.js:1 Error: Invalid value for attribute transform="translate(0, 0"

any ideas?

For legends try http://d3-legend.susielu.com/

http://d3-legend.susielu.com/

Add support for adding units to legend and tooltips

Choropleth scales always start at 0

Zoom alternative

Try Jason Davis' zoom implementation from Animated World Zoom http://www.jasondavies.com/maps/zoom/

No default jsDelivr CDN file set

This package doesn't have a default file set. You can set it via jsdelivr, browser, or main field in package.json

width and height have no effect when no additional attributes are set

also setting scale and translate works

Deprecate columnVal function

• Replace code with: self.extent = d3Array.extent(self.data, d => d[self.column()]);
• Mark as deprecated and to be removed in the next major release
• Update docs

use d3.functor

Add support for US counties map

Current USA.json file only supports states map. For counties I need a different data source. Also a new directory structure for topojson files would make sense, examples

US specific

• /topojson/counties/USA/states.json
• /topojson/counties/USA/counties.json

vs.

More generic

• /topojson/counties/USA.json
• /topojson/counties/USA/counties.json

Update topojson on docs site

Use make or fabric to automate building topojson files

Pros and Cons

• make has no additional dependencies on *nix systems, wheras fabric needs to be installed first
• make syntax sucks, wheras Python syntax rules

Minnesota id in USA.json should be "US27" not "US32"

Update docs with new draw worklfow

Add support for pre-defined data domains

A pre-defined data domain is used for the mapping of colors to data values.

onClick event in d3-geomap

0
down vote
favorite
I'm trying to change onclick event in d3-geomap from zoom to another function. How can I do this ?

Thanks

my code is here :

var map = d3.geomap.choropleth()
            .geofile('json/IRN2.json')
            .unitId('fips')
            .projection(function(){return d3.geo.albers().center([51,35]);})
            .column('point')
            .scale(2000)
            .rotate([-40, 0])
            .translate([1.25*width ,-200 ])
            .colors(['green','yellow' , 'pink' ,'red'])
            .domain([0, 20 , 50,100])
            //.clicked(function(){console.log("hiiiiiiiiiiiiiiii");})
            .legend(true);


          d3.select('#map')
            .datum(mydata)
            .call(map.draw, map);

Add support for setting min and max for choropleth in calling code

Missing lakes make some maps look awkward

Especially the US map without the great lakes. So find a way to incorporate lakes at least in country level maps, even better in all maps, i. e. the topojson sources.

Problematic Country Codes from Natural Earth Data

The SU_A3 country for Palestine is PSX whereas the ISO_A3 code is PSE, so all maps currently created don't display data for Palestine, even if it exists. Using ISO_A3 instead doesn't work either because of wrong/missing values for France and Norway.

See also nvkelso/natural-earth-vector#112

Uncaught TypeError: d[self.properties.column].trim is not a function

when called with array:

.datum([ {iso3: "RUS", Requests: 10}])

The trim() method cant be applied on integer:
d3.geomap.js:491
val = d[self.properties.column].trim();

Look for alternative to FIPS code for admin regions

State labels for US map

See

• http://stackoverflow.com/questions/17425268/d3js-automatic-labels-placement-to-avoid-overlaps-force-repulsion
• http://bl.ocks.org/larskotthoff/11406992

v2.0.0alpha doesn't work on iOS

Remote debugging via https://jsconsole.com/ only produced :0 Script error. as output. Other debugging methods all seem to require OSX.

Optional choropleth legend

Left of South America.

Getting Error when trying to draw map: geomap.properties.projection is not a function

I am trying to draw the map (with no data) and I am receiving two errors.

1. Unexpected token ILLEGAL (in D3 dependencies — not too worried about this)
2. geomap.properties.projection is not a function.
   When I click on error in Chrome dev tools):
   Geomap.draw @ d3.geomap.js:444
   _a.call @ d3.v3.min.js:3
   (anonymous function) @ app.js:5

I am using the code from: http://d3-geomap.github.io/ just trying to get the basics.

Here is the repository: https://github.com/zreitano/h_campaign

This is my app.js file

var map = d3.geomap()
    .geofile('d3-geomap/topojson/countries/USA.json');

d3.select('#map')
    .call(map.draw, map);

This is my index.html file

<!DOCTYPE html>

<html >

    <head>
        <title>H Campaign</title>

        <link rel="stylesheet" type="text/css" href="style.css">
      <link rel="stylesheet" type="text/css" href="styles/usa.css">

      <!-- Latest compiled and minified CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

      <!-- Optional theme -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
      <!-- D3 Styling -->
      <link rel="stylesheet" href="d3-geomap/css/d3.geomap.css">
    </head>

    <body>

      <div class="container">
        <h1>Header</h1>
      </div>


      <div id="map">
      </div>

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
      <!-- Latest compiled and minified JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
      <!-- D3 with geomap -->
      <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
      <script type="text/javascript" src="d3-geomap/vendor/d3.geomap.dependencies.min.js"></script>
      <script type="text/javascript" src="d3-geomap/js/d3.geomap.js"></script>
      <!-- My JS -->
      <script type="text/javascript" src="js/app.js"></script>

    </body>
</html>

Please let me know if I can help with any more information.

Make click to zoom optional via accessor

Add a zoom property that defaults to true. If set to false don't add zoom class on map units group.

Custom marker support

Is there any way to visualize with custom country markers?

readme instructions error: cd d3.geomap, folder is d3-geomap

Legend is affected by values that don't map to a country

Example: the population data from the World Bank includes a row for the world (id: WLD) that causes the legend to go up to the total world population thus rendering the map useless.

How to handle such data in d3.geomap? Leave it to the user or remove values that don't map to countries?

Test L*a*b* and HCL color spaces

See
http://bl.ocks.org/mbostock/3014589

How to use this library with typescript or any other module loaders?

Currently, its difficult to integrate this library with angular project. Neither this is compatible with module bundlers not there is a dist/build folder part of this repo.

Add thousands separator for formatted numbers

Zoom all groups in svg

In https://github.com/yaph/d3-geomap/blob/master/src/coffee/geomap.coffee#L55 try:

geomap.properties.svg.selectAll('g')

to see of all groups are scaled. If it conflicts with legend or footer apply only on class zoom and set via accessor, which fixes #16

Rename geo files and map units

Create directory structure for geo files and rename them accordingly, e. g.

geo/
    world/
        countries.topojson
        continents.topojson
    countries/
        usa/
            states.topojson

Give map units a generic term, e. g. units or subunits instead of countries.

Better default legend

• Set fixed height to 250.
• Set fixed width to 120.
• Add rectangle around legend with medium opacity white background.

Documentation

Add documentation so that d3.geomap can be used by others.

Make value parsing a setting

parseFloat hard coded right now

No distributable provided for import/require

Usually, a library delivered over npm provides a built version that another module can directly consume with import or require. This is usually done by pointing main in package.json to a file within the source bundle. If I'm understanding #44, this is the same problem they are facing - although jsDelivr is not a standard key in package.json so is not the proper solution.

To fix this, either (a) the distributable needs to be included in the source bundle uploaded to npm, (b) the package needs to be built by import/require instead of concatenation, or - ideally - (c) both!

(a) is the easiest and requires the least restructuring, and the simplicity of this library means (b) probably isn't too far off as well. If you're looking for assistance, happy to make a PR (although it may seem drastic)

Empty values in CSV are colored and NaN values show up in tooltip

Question on StackOverflow: https://stackoverflow.com/questions/37821940/using-d3-geomap-to-display-1-0-data

geomap.min.js broken

When using the basic code on your intro page (at http://d3-geomap.github.io/), I get the following error:
TypeError: d is undefined (at 1:20972). Still not able to get a basic map running.

Try using d3.scale.threshold() for color scales

http://bl.ocks.org/mbostock/5144735

var color = d3.scale.threshold()
.domain([30, 60, 120, 360])
.range(["#ffffcc","#c2e699","#78c679","#31a354","#006837"]);

Automatically use it for range if domain is set and longer than 2 elements?

How to handle releases

• Where store minified release files
• What to include (all topojson?)
• Consider http://cdnjs.com/
• Document library download.

Make map responsive

Set width, height, scale and translate to null as defaults and calculate in draw function if not given. Check each accessor individually, to not overrider user settings.

Is setting geomap.private.g really necessary

See if it can be replaced with geomap.properties.svg.select X.

map callback

Currently callback is only called in draw, rather move to map initialization and call automatically at the end of update.

d3.geomap 2.0.0alpha: "this is null" in choropleth.draw in FireFox and iOS

The super call fails since this is not defined and nothing gets drawn.

Find a way to indicate disputed territories

http://en.wikipedia.org/wiki/List_of_states_with_limited_recognition

Using diagonal stripes as an SVG background pattern might work. Dashed borders would not work, because topojson eliminates redundancy of boundary lines.

For tooltips check out d3-tip

https://github.com/Caged/d3-tip