creating custom US District map using Datamaps - javascript

[gregdevs]

Hi there, very new to working with Datamaps

I am Working on a project that makes good use of most of Datamaps framework, which is working just fine.

For one of the maps, I need to show US districts. For this particular map, i'm working with a particular set of preexisting data that I have to use.

Is it possible to set a map geographyConfig based off of a json file with an object that resembles this:

var district_paths:[{
     "AL-01": {"name": "Alabama 1st District", "state":"AL", "path": "PATH COORDINATES here " },
     "AL-02": {"name": "Alabama 2nd District", "state":"AL", "path": "PATH COORDINATE here " }
     }]

I would need Datamaps to draw the district outline from the path property.

Code Im working with:

 var election = new Datamap({
 scope: 'districts',
 element: document.getElementById('map_election'),
  responsive: true,
 geographyConfig: {
     dataUrl: 'PATH TO JSON',

   },
fills: {
 defaultFill: '#EDDC4E'
 },
setProjection: function(element) {
    var projection = 
           d3.geo.albersUsa()                
           .scale(element.offsetWidth)
           .translate([element.offsetWidth / 2, element.offsetHeight / 2]);

           var path = d3.geo.path()
           .projection(projection);

             return {path: path, projection: projection};
        }
  });

Thanks

[markmarkoh]

Any chance you could take advantage of existing TopoJSON like this? https://github.com/jsongeo/cd113

[gregdevs]

Hi, Yes I tried that approach, I did the TopoJSON conversion of a districts file but, the problem is getting the data from the set i have to work with, to work in conjunction with that file. So thats why i wanted to see if its possible to import the paths this way..

[gregdevs]

One solution would be to just give the TopoJSON file, some properties that would match with the separate data set i have to use. Is it possible to import a property added to the TopoJSON file?

for example given this object:

{"type":"Topology","objects":{"districts":{"type":"GeometryCollection","geometries":[{"type":"Polygon","id":3701, "name" : "SOME NAME", "arcs":[[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101]]} }

would I be able to render the "name" property in the SVG element in the dom? something like

[gregdevs]

path name="SOME NAME" class="datamaps-subunit 3701" d="COORDINATES"></path

[markmarkoh]

@ginteractivenyc You can try downloading the sqllite DB from that Github account and edit the SQL data, then convert that into TopoJSON?