├── src ├── assets │ └── .placeholder ├── data │ ├── .placeholder │ └── data.csv ├── js │ ├── config.js │ ├── maps │ │ ├── world.js │ │ ├── usa-counties.js │ │ ├── usa-states.js │ │ ├── streets.js │ │ ├── base.js │ │ └── europe.js │ ├── detectFeatures.js │ ├── utils.js │ ├── share.js │ ├── geomath.js │ ├── fm.js │ └── thing.js ├── styl │ ├── maps │ │ ├── world.styl │ │ ├── usa-states.styl │ │ ├── streets.styl │ │ ├── base.styl │ │ └── europe.styl │ ├── qz │ │ ├── buttons.styl │ │ ├── share.styl │ │ ├── colors.styl │ │ ├── dropdowns.styl │ │ ├── icons.styl │ │ ├── chart-elements.styl │ │ └── type.styl │ ├── main.styl │ ├── layout.styl │ ├── thing.styl │ ├── responsive.styl │ └── normalize.styl └── jade │ ├── includes │ └── share.jade │ ├── thing.jade │ └── index.jade ├── README.md ├── .gitignore ├── medicare-medicaid.Rproj ├── maps ├── world.yml ├── europe.yml ├── usa-counties.yml ├── streets.yml └── usa-states.yml ├── gulp ├── cli.js ├── utils.js └── config.js ├── geodata.yml ├── __build.sh ├── package.json ├── analyze.R └── gulpfile.js /src/assets/.placeholder: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/data/.placeholder: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # medicare-medicaid 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/js/config.js: -------------------------------------------------------------------------------- 1 | var ENV = '/* @echo ENV */'; 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/* 2 | build 3 | !node_modules/stylus-normalize 4 | .DS_Store 5 | .tmp 6 | -------------------------------------------------------------------------------- /medicare-medicaid.Rproj: -------------------------------------------------------------------------------- 1 | Version: 1.0 2 | 3 | RestoreWorkspace: Default 4 | SaveWorkspace: Default 5 | AlwaysSaveHistory: Default 6 | 7 | EnableCodeIndexing: Yes 8 | UseSpacesForTab: Yes 9 | NumSpacesForTab: 2 10 | Encoding: UTF-8 11 | 12 | RnwWeave: Sweave 13 | LaTeX: pdfLaTeX 14 | -------------------------------------------------------------------------------- /maps/world.yml: -------------------------------------------------------------------------------- 1 | # 2 | bbox: '-180 -90 180 90' 3 | layers: 4 | countries: 5 | type: 'shp' 6 | path: 'http://www.naturalearthdata.com/http//www.naturalearthdata.com/download/110m/cultural/ne_110m_admin_0_countries_lakes.zip' 7 | id-property: 'name' 8 | -------------------------------------------------------------------------------- /gulp/cli.js: -------------------------------------------------------------------------------- 1 | var opts = require('nomnom') 2 | .option('build', { 3 | abbr: 'b', 4 | help: 'Build project. [local | move | commit | push]', 5 | choices: ['local', 'move', 'commit', 'push'] 6 | }) 7 | .option('dont-minify', { 8 | abbr: 'd', 9 | flag: true, 10 | help: 'Prevent build from minifying your js' 11 | }); 12 | 13 | module.exports = opts; 14 | -------------------------------------------------------------------------------- /maps/europe.yml: -------------------------------------------------------------------------------- 1 | # 2 | bbox: '-15 -10 80 70' 3 | layers: 4 | countries: 5 | type: 'shp' 6 | path: 'http://www.naturalearthdata.com/http//www.naturalearthdata.com/download/50m/cultural/ne_50m_admin_0_countries_lakes.zip' 7 | id-property: 'name' 8 | properties: 9 | - 'featurecla' 10 | - 'scalerank' 11 | -------------------------------------------------------------------------------- /src/styl/maps/world.styl: -------------------------------------------------------------------------------- 1 | // Paths 2 | .paths 3 | .countries path 4 | fill $qz-map-land-fill 5 | stroke $qz-map-land-stroke 6 | stroke-width 0.1% 7 | 8 | .cities path 9 | fill $qz-gray-2 10 | 11 | // Labels 12 | .labels 13 | text 14 | fill $qz-gray-2 15 | font-size: 60% 16 | text-anchor start 17 | alignment-baseline: middle 18 | -webkit-font-smoothing antialiased 19 | -------------------------------------------------------------------------------- /src/jade/includes/share.jade: -------------------------------------------------------------------------------- 1 | ul.share-buttons 2 | li.share-icon.twitter 3 | a(title='Tweet' class='share-action icon icon-twitter' target='_blank') 4 | li.share-icon.facebook 5 | a(title='Share on Facebook' class='share-action icon icon-facebook' target='_blank') 6 | li.share-icon.linkedin 7 | a(title='Share on LinkedIn' class='share-action icon icon-linkedin' target='_blank') 8 | li.share-icon.email 9 | a(title='Email' class='share-action icon icon-email' target='_blank') 10 | -------------------------------------------------------------------------------- /src/styl/qz/buttons.styl: -------------------------------------------------------------------------------- 1 | qz-button-group() 2 | text-align center 3 | button 4 | color white 5 | border none 6 | background-color $qz-gray-1 7 | font-family $qz-sans 8 | border-radius 3px 9 | margin 2px 4px 2px 0 10 | vertical-align middle 11 | padding 0px 8px 12 | line-height 2em 13 | display inline-block 14 | &.active 15 | //font-family $qz-sans-bold 16 | background-color $qz-purp-2 17 | transition background-color 0.2s linear 18 | &:focus 19 | outline 0 20 | -------------------------------------------------------------------------------- /gulp/utils.js: -------------------------------------------------------------------------------- 1 | function generateShellCmd (buildArg, qzdataPath, thingName) { 2 | var baseCmd = "./__build.sh " + qzdataPath + " " + thingName + " "; // then commit? push? 3 | 4 | switch (buildArg) { 5 | case "move": 6 | return baseCmd + "false false"; 7 | case "commit": 8 | return baseCmd + "true false"; 9 | case "push": 10 | return baseCmd + "true true"; 11 | default: 12 | return 'echo ""'; 13 | } 14 | } 15 | 16 | module.exports = { 17 | generateShellCmd: generateShellCmd 18 | }; 19 | -------------------------------------------------------------------------------- /geodata.yml: -------------------------------------------------------------------------------- 1 | # 2 | bbox: '-180 5 -50 90' 3 | layers: 4 | states: 5 | type: 'shp' 6 | path: 'http://www.naturalearthdata.com/http//www.naturalearthdata.com/download/50m/cultural/ne_50m_admin_1_states_provinces_lakes.zip' 7 | id-property: 'name' 8 | where: sr_adm0_a3 = 'USA' 9 | 10 | counties: 11 | type: 'shp' 12 | path: 'http://www2.census.gov/geo/tiger/GENZ2015/shp/cb_2015_us_county_5m.zip' 13 | id-property: 'GEOID' 14 | -------------------------------------------------------------------------------- /maps/usa-counties.yml: -------------------------------------------------------------------------------- 1 | # 2 | bbox: '-180 5 -50 90' 3 | layers: 4 | states: 5 | type: 'shp' 6 | path: 'http://www.naturalearthdata.com/http//www.naturalearthdata.com/download/50m/cultural/ne_50m_admin_1_states_provinces_lakes.zip' 7 | id-property: 'name' 8 | where: sr_adm0_a3 = 'USA' 9 | 10 | counties: 11 | type: 'shp' 12 | path: 'http://www2.census.gov/geo/tiger/GENZ2015/shp/cb_2015_us_county_5m.zip' 13 | id-property: 'GEOID' 14 | -------------------------------------------------------------------------------- /src/js/maps/world.js: -------------------------------------------------------------------------------- 1 | var d3 = require('d3'); 2 | var geo = require('d3-geo-projection'); 3 | 4 | var base = require('./base.js'); 5 | 6 | function configure(width) { 7 | var output = $.extend(true, {}, base()); 8 | 9 | return $.extend(true, output, { 10 | 'projection': geo.kavrayskiy7().center([10, 2.5]), 11 | 'scale_factor': 0.18, 12 | 'scale_bar_distance': null, 13 | 'paths': [ 14 | 'countries' 15 | ] 16 | }); 17 | } 18 | 19 | module.exports = configure 20 | -------------------------------------------------------------------------------- /src/styl/maps/usa-states.styl: -------------------------------------------------------------------------------- 1 | // Paths 2 | .paths 3 | .states path 4 | fill $qz-map-land-fill 5 | stroke $qz-map-land-stroke 6 | stroke-width 0.5px 7 | 8 | .cities path 9 | fill $qz-gray-2 10 | 11 | // Labels 12 | .labels 13 | text 14 | fill $qz-gray-2 15 | font-size 80% 16 | text-anchor start 17 | alignment-baseline: middle 18 | -webkit-font-smoothing antialiased 19 | 20 | @media screen and (max-width $width-mobile) 21 | .paths 22 | .cities 23 | display none 24 | 25 | .labels 26 | .cities 27 | display none 28 | -------------------------------------------------------------------------------- /maps/streets.yml: -------------------------------------------------------------------------------- 1 | # 2 | bbox: '-74.05 40.733 -73.95 40.753' 3 | layers: 4 | roads: 5 | type: 'shp' 6 | path: 'new-york_new-york.imposm-shapefiles/new-york_new-york_osm_roads.shp' 7 | properties: 8 | - 'type' 9 | 10 | parks: 11 | type: 'shp' 12 | path: 'new-york_new-york.imposm-shapefiles/new-york_new-york_osm_landusages.shp' 13 | where: type = 'park' 14 | 15 | points: 16 | type: 'csv' 17 | path: 'points.csv' 18 | id-property: 'name' 19 | -------------------------------------------------------------------------------- /src/js/maps/usa-counties.js: -------------------------------------------------------------------------------- 1 | var d3 = require('d3'); 2 | var geo = require('d3-geo-projection'); 3 | 4 | var base = require('./base.js'); 5 | 6 | function configure(width) { 7 | var output = $.extend(true, {}, base()); 8 | 9 | return $.extend(true, output, { 10 | 'projection': d3.geo.albersUsa(), 11 | 'scale_factor': 1.2, 12 | 'graticules': false, 13 | 'scale_bar_distance': null, 14 | 'paths': [ 15 | 'counties', 16 | 'states' 17 | ], 18 | }); 19 | } 20 | 21 | module.exports = configure 22 | -------------------------------------------------------------------------------- /src/js/detectFeatures.js: -------------------------------------------------------------------------------- 1 | module.exports = function () { 2 | var features = {}; 3 | 4 | features.hasDeviceMotion = 'ondevicemotion' in window; 5 | features.isAndroid = (/android/gi).test(navigator.appVersion); 6 | features.isIDevice = (/iphone|ipad/gi).test(navigator.appVersion); 7 | features.isTouchPad = (/hp-tablet/gi).test(navigator.appVersion); 8 | features.isKindle = (/silk/gi).test(navigator.appVersion); 9 | features.hasTouchEvents = ( 10 | features.isAndroid || 11 | features.isIDevice || 12 | features.isTouchPad || 13 | features.isKindle 14 | ); 15 | 16 | return features; 17 | }; 18 | -------------------------------------------------------------------------------- /src/styl/main.styl: -------------------------------------------------------------------------------- 1 | // Normalize -- https://github.com/bymathias/normalize.styl 2 | @import 'normalize' 3 | 4 | // nib -- http://visionmedia.github.io/nib/ 5 | @import 'nib' 6 | 7 | // Qz modules. Comment out the things you don't need. 8 | @import 'qz/type' 9 | @import 'qz/colors' 10 | 11 | // Optional components. Uncomment if you need them. See wiki for usage info 12 | // note: `share` depends on `icons` 13 | //@import 'qz/icons' 14 | //@import 'qz/share' 15 | //@import 'qz/dropdowns' 16 | //@import 'qz/buttons' 17 | //@import 'qz/chart-elements' 18 | 19 | // Thing-specific css 20 | @import 'responsive' 21 | @import 'layout' 22 | @import 'thing' 23 | -------------------------------------------------------------------------------- /maps/usa-states.yml: -------------------------------------------------------------------------------- 1 | # 2 | bbox: '-180 5 -50 90' 3 | layers: 4 | states: 5 | type: 'shp' 6 | path: 'http://www.naturalearthdata.com/http//www.naturalearthdata.com/download/50m/cultural/ne_50m_admin_1_states_provinces_lakes.zip' 7 | id-property: 'name' 8 | where: sr_adm0_a3 = 'USA' 9 | 10 | cities: 11 | type: 'shp' 12 | path: 'http://www.naturalearthdata.com/http//www.naturalearthdata.com/download/10m/cultural/ne_10m_populated_places_simple.zip' 13 | id-property: 'name' 14 | properties: 15 | - 'featurecla' 16 | - 'scalerank' 17 | where: adm0_a3 = 'USA' and scalerank < 3 18 | -------------------------------------------------------------------------------- /src/js/maps/usa-states.js: -------------------------------------------------------------------------------- 1 | var d3 = require('d3'); 2 | var geo = require('d3-geo-projection'); 3 | 4 | var base = require('./base.js'); 5 | 6 | function configure(width) { 7 | var output = $.extend(true, {}, base()); 8 | 9 | return $.extend(true, output, { 10 | 'projection': d3.geo.albersUsa(), 11 | 'scale_factor': 1.1, 12 | 'graticules': false, 13 | 'scale_bar_distance': null, 14 | 'paths': [ 15 | 'states', 16 | 'cities' 17 | ], 18 | 'labels': [ 19 | 'cities' 20 | ], 21 | 'label_nudges': { 22 | 'cities': { 23 | 'default': [0.3, -0.1] 24 | } 25 | } 26 | }); 27 | } 28 | 29 | module.exports = configure 30 | -------------------------------------------------------------------------------- /src/jade/thing.jade: -------------------------------------------------------------------------------- 1 | h2#title Share of Medicare beneficiaries who are also eligible for Medicaid 2 | 3 | table.key 4 | tbody 5 | tr 6 | td 0% 7 | td 13.9% 8 | td 19.1% 9 | td 25.2% 10 | tr 11 | td.cell.q1   12 | td.cell.q2   13 | td.cell.q3   14 | td.cell.q4   15 | 16 | div#graphic 17 | 18 | div.footer 19 | div.left 20 | div Quartz | qz.com 21 | div.right 22 | div Data are from CMS.gov. Data are unavailable for a small number of counties shown in gray. 23 | 24 | p   25 | -------------------------------------------------------------------------------- /src/styl/qz/share.styl: -------------------------------------------------------------------------------- 1 | // Icon-related colors 2 | $color-twitter = #00aced 3 | $color-facebook = #3b5998 4 | $color-linkedin = #007bb6 5 | $color-email = #0096b6 6 | $color-icon-hover = #c3c5c0 7 | 8 | ul.share-buttons 9 | list-style-type none 10 | margin 0 11 | padding 0 12 | 13 | li.share-icon 14 | display inline-block 15 | font-size 1.2em 16 | a 17 | text-decoration none 18 | cursor pointer 19 | 20 | .icon-email 21 | color $color-email 22 | &:hover 23 | color $color-icon-hover 24 | 25 | .icon-facebook 26 | color $color-facebook 27 | &:hover 28 | color $color-icon-hover 29 | 30 | .icon-linkedin 31 | color $color-linkedin 32 | &:hover 33 | color $color-icon-hover 34 | 35 | .icon-twitter 36 | color $color-twitter 37 | &:hover 38 | color $color-icon-hover 39 | -------------------------------------------------------------------------------- /src/styl/layout.styl: -------------------------------------------------------------------------------- 1 | // Page layout setup 2 | 3 | html, body 4 | min-width 270px 5 | font-family $qz-font-body 6 | color $qz-body-black 7 | background-color $qz-background-gray 8 | 9 | h1, h2, h4, h5 10 | font-family $qz-sans-bold 11 | color $qz-header-black 12 | 13 | h1 14 | line-height 50px 15 | margin-bottom 10px 16 | 17 | h2 18 | font-size 24px 19 | line-height 24px 20 | font-style bold 21 | margin 40px 0px 22 | 23 | h3 24 | font-size 20px 25 | font-family $qz-serif 26 | color: $qz-header-black 27 | font-weight: bold; 28 | 29 | p 30 | position relative 31 | margin 0 0 0 0 32 | padding 16px 0 16px 0 33 | line-height 1.6 34 | color #4c4c4c 35 | 36 | .item-body 37 | margin 0 auto 38 | //max-width 940px 39 | 40 | #interactive-content 41 | width 100% 42 | margin-left auto 43 | margin-right auto 44 | -------------------------------------------------------------------------------- /src/styl/maps/streets.styl: -------------------------------------------------------------------------------- 1 | // Paths 2 | .paths 3 | .roads path 4 | fill none 5 | stroke none 6 | stroke-width 0.5px 7 | 8 | &.type-motorway, 9 | &.type-motorway-link 10 | stroke $qz-gray-3 11 | 12 | &.type-trunk, 13 | &.type-trunk-link, 14 | &.type-primary, 15 | &.type-primary-link 16 | &.type-secondary, 17 | &.type-secondary-link, 18 | &.type-tertiary, 19 | &.type-tertiary-link 20 | stroke $qz-gray-2 21 | 22 | 23 | &.type-residential, 24 | &.type-service 25 | stroke $qz-gray-3 26 | 27 | .parks path 28 | fill $qz-gre-1 29 | stroke none 30 | 31 | .points path 32 | fill $qz-purp-2 33 | stroke none 34 | 35 | // Labels 36 | .labels 37 | text 38 | fill $qz-gray-2 39 | font-size 80% 40 | text-anchor start 41 | alignment-baseline: middle 42 | -webkit-font-smoothing antialiased 43 | -------------------------------------------------------------------------------- /src/jade/index.jade: -------------------------------------------------------------------------------- 1 | doctype html 2 | html 3 | head 4 | meta(charset='utf-8') 5 | meta(http-equiv='X-UA-Compatible', content='IE=edge') 6 | title medicare-medicaid 7 | meta(name='description', content='') 8 | meta(name='viewport', content='width=device-width, initial-scale=1') 9 | link(rel="stylesheet" href="https://fonts.googleapis.com/css?family=PT+Serif:400,700,400italic") 10 | link(rel='stylesheet', href='css/main.css') 11 | script(src='https://app.qz.com/js/frameMessager/min/frameMessager.min.js') 12 | 13 | body 14 | div.item-body 15 | div#interactive-content 16 | include thing.jade 17 | script(src='//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js') 18 | script window.jQuery || document.write('