https://github.com/urbaninstitute/urban-map

Urban Insitute county map template
https://github.com/urbaninstitute/urban-map

Last synced: 3 months ago
JSON representation

Urban Insitute county map template

• Host: GitHub
• URL: https://github.com/urbaninstitute/urban-map
• Owner: UrbanInstitute
• Created: 2015-05-14T19:48:29.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2015-08-06T19:12:17.000Z (almost 10 years ago)
• Last Synced: 2024-04-16T01:08:34.913Z (about 1 year ago)
• Language: JavaScript
• Homepage:
• Size: 4.35 MB
• Stars: 5
• Watchers: 8
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
#Urban Institute reusable county map template

d3 template for county and state level maps using Urban's style

* Primary goal: make standard maps with as little work as possible for the blog, website, etc

* Make map in child.html as a fully responsive [pym](https://github.com/nprapps/pym.js) object, call in parent

* Nice side effect: coerce good mapmaking decisions by having good defaults and style. [% > count](https://xkcd.com/1138/).

###Options

```javascript

    //minimum options necessary

    data_url = "path/to/data.csv",

        valuetomap = "colnamenofvalue",

        countyid = "colnameofid",

    //additional options if desired

        nullcondition = "somevalue/symbol", //default = ""

        colors = [custom or predefined array], //default = palette.blue5

        missingcolor = "#xxxxxx", //default = "#ccc"

        breaks = [array excluding min and max], //default = [0.2, 0.4, 0.6, 0.8]

        legend_breaks = breaks OR [array including min and max], //default = [0, 0.2, 0.4, 0.6, 0.8, 1.0]

        formatter =  d3.format("something"); //default =  d3.format("%"), percents rounded to whole number

    var pymChild = new pym.Child();

```

###Example

Parent: [index.html](/index.html)

Children: [defaults-example.html](/defaults-example.html)

![All defaults map](/img/defaults-fallback.png)

[customs-example.html](/customs-example.html)

![All customs map](/img/customs-fallback.png)

##Usage

Child - minimum code needed for a default Urban blue percentage map:

```html

    

    

    

        

        

        

        

    

    

        
Title

        


        


        

        

        

        

        

        

        

        

        

        

            data_url = "path/to/data.csv",

                valuetomap = "colnamenofvalue",

                countyid = "colnameofid",

            var pymChild = new pym.Child();

        

    

    

```

Optional footer for links after map in child URL:

```html

        


            
Source: Urban Institute, 2015

                Urban Institute

            

            


                Save map as image

            

        

```


Include in parent:

```html 

    

        @import url("http://fonts.googleapis.com/css?family=Lato");

        body {

            font-family: 'Lato', sans-serif;

            color: #000;

        }

        

        .map {

            width: 100%;

            height: 100%;

            margin-bottom: 20px;

            max-width: 1400px;

        }

    

    

    


    

    

    

        var pymParent = new pym.Parent('mapname', 'path/to/map.html', {});

    

```