├── src
├── assets
│ └── .placeholder
├── data
│ ├── .placeholder
│ ├── graphic.csv
│ └── data.csv
├── js
│ ├── config.js
│ ├── detectFeatures.js
│ ├── utils.js
│ ├── share.js
│ ├── fm.js
│ ├── libs
│ │ └── frameMessager.min.js
│ └── thing.js
├── fonts
│ ├── qz-icons.eot
│ ├── qz-icons.ttf
│ ├── qz-icons.woff
│ ├── Calibre-Medium.otf
│ ├── PTSerif
│ │ ├── PTF55F.ttf
│ │ ├── PTF56F.ttf
│ │ ├── PTF55F-webfont.eot
│ │ ├── PTF55F-webfont.ttf
│ │ ├── PTF55F-webfont.woff
│ │ ├── Paratype PT Sans Free Font License.txt
│ │ └── PTF55F-webfont.svg
│ ├── PT_Serif-Web-Bold.ttf
│ ├── AdelleSansWeb
│ │ ├── AdelleSans_Light.otf
│ │ ├── AdelleSansBasic_Bold.eot
│ │ ├── AdelleSansBasic_Bold.ttf
│ │ ├── AdelleSansBasic_Bold.woff
│ │ ├── AdelleSansBasic_Light.eot
│ │ ├── AdelleSansBasic_Light.ttf
│ │ ├── AdelleSansBasic_Light.woff
│ │ ├── AdelleSansBasic_Regular.eot
│ │ ├── AdelleSansBasic_Regular.ttf
│ │ └── AdelleSansBasic_Regular.woff
│ ├── qz-icons.svg
│ └── qz-icons.json
├── jade
│ ├── thing.jade
│ ├── includes
│ │ └── share.jade
│ └── index.jade
└── 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
├── README.md
├── .gitignore
├── How-Many-Adults-Identify-as-Transgender-in-the-United-States.pdf
├── gulp
├── cli.js
├── utils.js
└── config.js
├── content.json
├── package.json
├── __build.sh
└── gulpfile.js
/src/assets/.placeholder:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/data/.placeholder:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # trans-population
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
--------------------------------------------------------------------------------
/src/fonts/qz-icons.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/quartz/trans-population/master/src/fonts/qz-icons.eot
--------------------------------------------------------------------------------
/src/fonts/qz-icons.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/quartz/trans-population/master/src/fonts/qz-icons.ttf
--------------------------------------------------------------------------------
/src/fonts/qz-icons.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/quartz/trans-population/master/src/fonts/qz-icons.woff
--------------------------------------------------------------------------------
/src/fonts/Calibre-Medium.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/quartz/trans-population/master/src/fonts/Calibre-Medium.otf
--------------------------------------------------------------------------------
/src/fonts/PTSerif/PTF55F.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/quartz/trans-population/master/src/fonts/PTSerif/PTF55F.ttf
--------------------------------------------------------------------------------
/src/fonts/PTSerif/PTF56F.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/quartz/trans-population/master/src/fonts/PTSerif/PTF56F.ttf
--------------------------------------------------------------------------------
/src/fonts/PT_Serif-Web-Bold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/quartz/trans-population/master/src/fonts/PT_Serif-Web-Bold.ttf
--------------------------------------------------------------------------------
/src/fonts/PTSerif/PTF55F-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/quartz/trans-population/master/src/fonts/PTSerif/PTF55F-webfont.eot
--------------------------------------------------------------------------------
/src/fonts/PTSerif/PTF55F-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/quartz/trans-population/master/src/fonts/PTSerif/PTF55F-webfont.ttf
--------------------------------------------------------------------------------
/src/fonts/PTSerif/PTF55F-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/quartz/trans-population/master/src/fonts/PTSerif/PTF55F-webfont.woff
--------------------------------------------------------------------------------
/src/fonts/AdelleSansWeb/AdelleSans_Light.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/quartz/trans-population/master/src/fonts/AdelleSansWeb/AdelleSans_Light.otf
--------------------------------------------------------------------------------
/src/fonts/AdelleSansWeb/AdelleSansBasic_Bold.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/quartz/trans-population/master/src/fonts/AdelleSansWeb/AdelleSansBasic_Bold.eot
--------------------------------------------------------------------------------
/src/fonts/AdelleSansWeb/AdelleSansBasic_Bold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/quartz/trans-population/master/src/fonts/AdelleSansWeb/AdelleSansBasic_Bold.ttf
--------------------------------------------------------------------------------
/src/fonts/AdelleSansWeb/AdelleSansBasic_Bold.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/quartz/trans-population/master/src/fonts/AdelleSansWeb/AdelleSansBasic_Bold.woff
--------------------------------------------------------------------------------
/src/fonts/AdelleSansWeb/AdelleSansBasic_Light.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/quartz/trans-population/master/src/fonts/AdelleSansWeb/AdelleSansBasic_Light.eot
--------------------------------------------------------------------------------
/src/fonts/AdelleSansWeb/AdelleSansBasic_Light.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/quartz/trans-population/master/src/fonts/AdelleSansWeb/AdelleSansBasic_Light.ttf
--------------------------------------------------------------------------------
/src/fonts/AdelleSansWeb/AdelleSansBasic_Light.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/quartz/trans-population/master/src/fonts/AdelleSansWeb/AdelleSansBasic_Light.woff
--------------------------------------------------------------------------------
/src/fonts/AdelleSansWeb/AdelleSansBasic_Regular.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/quartz/trans-population/master/src/fonts/AdelleSansWeb/AdelleSansBasic_Regular.eot
--------------------------------------------------------------------------------
/src/fonts/AdelleSansWeb/AdelleSansBasic_Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/quartz/trans-population/master/src/fonts/AdelleSansWeb/AdelleSansBasic_Regular.ttf
--------------------------------------------------------------------------------
/src/fonts/AdelleSansWeb/AdelleSansBasic_Regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/quartz/trans-population/master/src/fonts/AdelleSansWeb/AdelleSansBasic_Regular.woff
--------------------------------------------------------------------------------
/src/data/graphic.csv:
--------------------------------------------------------------------------------
1 | year,value
2 | 2005,1
3 | 2006,3
4 | 2007,5
5 | 2008,6
6 | 2009,4
7 | 2010,5
8 | 2011,6
9 | 2012,7
10 | 2013,8
11 | 2014,6
12 | 2015,3
13 |
--------------------------------------------------------------------------------
/How-Many-Adults-Identify-as-Transgender-in-the-United-States.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/quartz/trans-population/master/How-Many-Adults-Identify-as-Transgender-in-the-United-States.pdf
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/src/jade/thing.jade:
--------------------------------------------------------------------------------
1 | h3 Percentage of population that identifies as transgender
2 |
3 | h4 Lines show range of estimates, based on a 95% confidence interval
4 |
5 | div#graphic
6 |
7 | div.footer.clearfix
8 | div.source Data: The Williams Institute
9 | div.brand Quartz | qz.com
10 |
11 | p.break
12 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/content.json:
--------------------------------------------------------------------------------
1 | {
2 | "hed": "This Quartz Thing has not connected to a Google Doc",
3 | "dek": "Perhaps you forgot to start the server? Make viewable to anyone with the link?",
4 | "items": [{
5 | "copy": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
6 | }, {
7 | "copy": "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
8 | }, {
9 | "copy": "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"
10 | }]
11 | }
12 |
--------------------------------------------------------------------------------
/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/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 trans-population
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('