diff --git a/.gitignore b/.gitignore index 5793aed..a8f7609 100644 --- a/.gitignore +++ b/.gitignore @@ -51,7 +51,7 @@ coverage.xml # Django stuff: *.log -local_settings.py +#local_settings.py # Flask stuff: instance/ @@ -92,7 +92,7 @@ data/pandas-refrence .idea .vscode -static +#static # Elastic Beanstalk Files .elasticbeanstalk/* !.elasticbeanstalk/*.cfg.yml diff --git a/janaganana/profiles.py b/janaganana/profiles.py index f663100..740c265 100644 --- a/janaganana/profiles.py +++ b/janaganana/profiles.py @@ -33,30 +33,32 @@ def sort_stats_result(ip,key=None): rv['metadata'] = metadata return rv -def get_census_profile(geo_code, geo_level, profile_name=None): +def get_census_profile(geo, profile_name, request): - logger.info('Begin of transaction for {}: {}'.format(geo_level, geo_code)) + #logger.info('Begin of transaction for {}: {}'.format(geo_level, geo_code)) session = get_session() try: - geo_summary_levels = geo_data.get_summary_geo_info(geo_code, geo_level) + geo_summary_levels = geo_data.get_comparative_geos(geo) data = {} for section in PROFILE_SECTIONS: function_name = 'get_%s_profile' % section if function_name in globals(): func = globals()[function_name] - data[section] = func(geo_code, geo_level, session) + data[section] = func(geo , session) # get profiles for province and/or country - for level, code in geo_summary_levels: - # merge summary profile into current geo profile - merge_dicts(data[section], func(code, level, session), level) - return data - + for comp_geo in geo_summary_levels: + try: + merge_dicts(data[section], func(comp_geo, session), comp_geo.geo_level) + except KeyError as e: + msg = "Error merging data into %s for section '%s' from %s: KeyError: %s" % (geo.geoid, section, comp_geo.geoid, e) + logger.fatal(msg, exc_info=e) + raise ValueError(msg) finally: - logger.info('End of transaction for {}: {}'.format(geo_level, geo_code)) session.close() + return data SEX_RECODES = OrderedDict([ @@ -82,10 +84,10 @@ def get_census_profile(geo_code, geo_level, profile_name=None): ('SIKH', 'Sikh') ]) -def get_demographics_profile(geo_code, geo_level, session): +def get_demographics_profile(geo , session): population_by_area_dist_data, total_population_by_area = get_stat_data( - 'area', geo_level, geo_code, session, + 'area', geo , session, recode=dict(AREA_RECODES), key_order=AREA_RECODES.values(), table_fields=['area', 'sex']) @@ -93,7 +95,7 @@ def get_demographics_profile(geo_code, geo_level, session): population_by_area_dist_data = sort_stats_result(population_by_area_dist_data) population_by_sex_dist_data, _ = get_stat_data( - 'sex', geo_level, geo_code, session, + 'sex', geo , session, recode=dict(SEX_RECODES), key_order=SEX_RECODES.values(), table_fields=['area', 'sex']) @@ -101,7 +103,7 @@ def get_demographics_profile(geo_code, geo_level, session): population_by_sex_dist_data = sort_stats_result(population_by_sex_dist_data) literacy_dist_data, _ = get_stat_data( - 'literacy', geo_level, geo_code, session, + 'literacy', geo , session, recode=dict(LITERACY_RECODES), key_order=LITERACY_RECODES.values(), table_fields=['area', 'literacy', 'sex']) @@ -109,14 +111,14 @@ def get_demographics_profile(geo_code, geo_level, session): literacy_dist_data = sort_stats_result(literacy_dist_data) literacy_by_sex, t_lit = get_stat_data( - ['sex', 'literacy'], geo_level, geo_code, session, + ['sex', 'literacy'], geo , session, table_fields=['area', 'literacy', 'sex'], recode={'literacy': dict(LITERACY_RECODES)}, key_order={'literacy': LITERACY_RECODES.values()}, percent_grouping=['sex']) literacy_by_area, t_lit = get_stat_data( - ['area', 'literacy'], geo_level, geo_code, session, + ['area', 'literacy'], geo , session, table_fields=['area', 'literacy', 'sex'], recode={'literacy': dict(LITERACY_RECODES)}, key_order={'literacy': LITERACY_RECODES.values()}, @@ -144,7 +146,7 @@ def get_demographics_profile(geo_code, geo_level, session): return final_data -def get_religion_profile(geo_code, geo_level, session): +def get_religion_profile(geo , session): def religion_category_recode(f, x): if x in ('Hindu', 'Muslim', 'Christian', 'Sikh'): @@ -190,14 +192,14 @@ def sort_religion_stats_result(ip, key=None): return rv religion_dist_data, _ = get_stat_data( - 'religion', geo_level, geo_code, session, + 'religion', geo , session, recode=religion_category_recode, table_fields=['area', 'religion', 'sex']) religion_dist_data = sort_stats_result(religion_dist_data) religion_by_sex, t_lit = get_stat_data( - ['religion', 'sex'], geo_level, geo_code, session, + ['religion', 'sex'], geo , session, table_fields=['area', 'religion', 'sex'], recode=religion_recode, key_order={'sex': SEX_RECODES.values()}, @@ -206,7 +208,7 @@ def sort_religion_stats_result(ip, key=None): religion_by_sex = sort_religion_stats_result(religion_by_sex, 'Female') religion_by_area, t_lit = get_stat_data( - ['religion', 'area'], geo_level, geo_code, session, + ['religion', 'area'], geo , session, table_fields=['area', 'religion', 'sex'], recode=religion_recode, key_order={'area': AREA_RECODES.values()}, @@ -227,7 +229,7 @@ def sort_religion_stats_result(ip, key=None): return final_data -def get_age_profile(geo_code, geo_level, session): +def get_age_profile(geo , session): # age category def age_cat_recode(f, x): @@ -269,7 +271,7 @@ def age_recode(f, x): try: age_dist_data, _ = get_stat_data( - 'age', geo_level, geo_code, session, + 'age', geo , session, table_fields=['area', 'age', 'sex'], recode=age_cat_recode) @@ -277,14 +279,14 @@ def age_recode(f, x): age_by_sex, t_lit = get_stat_data( - ['age', 'sex'], geo_level, geo_code, session, + ['age', 'sex'], geo , session, table_fields=['area', 'age', 'sex'], recode=age_recode, key_order={'sex': SEX_RECODES.values()}, percent_grouping=['sex']) age_by_area, t_lit = get_stat_data( - ['age', 'area'], geo_level, geo_code, session, + ['age', 'area'], geo , session, table_fields=['area', 'age', 'sex'], recode=age_recode, key_order={'area': AREA_RECODES.values()}, @@ -305,7 +307,7 @@ def age_recode(f, x): return final_data -def get_education_profile(geo_code, geo_level, session): +def get_education_profile(geo , session): def get_education_category(key): if key in ('Below Primary', 'Primary', 'Middle', 'Secondary Matric','Intermediate Puc', 'Graduate Above'): @@ -352,7 +354,7 @@ def sort_edu_stats_result(ip, key=None): return rv education_dist_data, _ = get_stat_data( - 'education', geo_level, geo_code, session, + 'education', geo , session, recode=education_category_recode, # key_order=education_RECODES.values(), table_fields=['area', 'education', 'sex']) @@ -360,7 +362,7 @@ def sort_edu_stats_result(ip, key=None): education_dist_data = sort_stats_result(education_dist_data) education_by_sex, t_lit = get_stat_data( - ['education', 'sex'], geo_level, geo_code, session, + ['education', 'sex'], geo , session, table_fields=['area', 'education', 'sex'], recode=education_recode, # key_order={'education': education_RECODES.values()}, @@ -370,7 +372,7 @@ def sort_edu_stats_result(ip, key=None): education_by_sex = sort_edu_stats_result(education_by_sex, 'Female') education_by_area, t_lit = get_stat_data( - ['education', 'area'], geo_level, geo_code, session, + ['education', 'area'], geo , session, table_fields=['area', 'education', 'sex'], recode=education_recode, key_order={'area': AREA_RECODES.values()}, @@ -391,7 +393,7 @@ def sort_edu_stats_result(ip, key=None): return final_data -def get_maritalstatus_profile(geo_code, geo_level, session): +def get_maritalstatus_profile(geo , session): def get_maritalstatu(x): if x in ('never married', 'currently married', 'widowed', 'separated', 'divorced'): @@ -410,7 +412,7 @@ def maritalstatus_recode(f, x): return get_maritalstatu(x) maritalstatus_dist_data, _ = get_stat_data( - 'maritalstatus', geo_level, geo_code, session, + 'maritalstatus', geo , session, recode=maritalstatus_category_recode, # key_order=education_RECODES.values(), table_fields=['area', 'maritalstatus', 'sex']) @@ -418,7 +420,7 @@ def maritalstatus_recode(f, x): maritalstatus_dist_data = sort_stats_result(maritalstatus_dist_data) maritalstatus_by_sex, t_lit = get_stat_data( - ['maritalstatus', 'sex'], geo_level, geo_code, session, + ['maritalstatus', 'sex'], geo , session, table_fields=['area', 'maritalstatus', 'sex'], recode=maritalstatus_recode, # key_order={'sex': SEX_RECODES.values()}, @@ -427,7 +429,7 @@ def maritalstatus_recode(f, x): maritalstatus_by_sex = sort_stats_result(maritalstatus_by_sex, 'Female') maritalstatus_by_area, t_lit = get_stat_data( - ['maritalstatus', 'area'], geo_level, geo_code, session, + ['maritalstatus', 'area'], geo , session, table_fields=['area', 'maritalstatus', 'sex'], recode=maritalstatus_recode, key_order={'area': AREA_RECODES.values()}, @@ -449,7 +451,7 @@ def maritalstatus_recode(f, x): return final_data -def get_workers_profile(geo_code, geo_level, session): +def get_workers_profile(geo , session): # sum of different category of workers exceeds total population because of # the way they are classified. Some of the classes get accounted twice causing @@ -477,14 +479,14 @@ def worker_recode(f, x): return get_worker_status(x) workers_dist_data, _ = get_stat_data( - 'workers', geo_level, geo_code, session, + 'workers', geo , session, recode=worker_category_recode, table_fields=['area', 'workers', 'workerssex']) workers_dist_data = sort_stats_result(workers_dist_data) workers_by_sex, t_lit = get_stat_data( - ['workers', 'workerssex'], geo_level, geo_code, session, + ['workers', 'workerssex'], geo , session, table_fields=['area', 'workers', 'workerssex'], recode=worker_recode, key_order={'workerssex': SEX_RECODES.values()}, @@ -493,7 +495,7 @@ def worker_recode(f, x): workers_by_sex = sort_stats_result(workers_by_sex, 'Female') workers_by_area, t_lit = get_stat_data( - ['workers', 'area'], geo_level, geo_code, session, + ['workers', 'area'], geo , session, table_fields=['area', 'workers', 'workerssex'], recode=worker_recode, key_order={'area': AREA_RECODES.values()}, diff --git a/janaganana/settings.py b/janaganana/settings.py index 322df60..a06f8e4 100644 --- a/janaganana/settings.py +++ b/janaganana/settings.py @@ -1,20 +1,24 @@ # pull in the default wazimap settings from wazimap.settings import * # noqa +import os from decouple import config +# Build paths inside the project like this: os.path.join(BASE_DIR, ...) +BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) + DEBUG = config('DJANGO_DEBUG', default=True, cast=bool) TEMPLATE_DEBUG = DEBUG +SECRET_KEY = config('SECRET_KEY') + # DJANGO_SETTINGS_MODULE = config('DJANGO_SETTINGS_MODULE') # install this app before Wazimap -INSTALLED_APPS = ['janaganana', 'django.contrib.sitemaps'] + INSTALLED_APPS -# INSTALLED_APPS = ['janaganana', 'pipeline'] + INSTALLED_APPS +INSTALLED_APPS = ['janaganana', 'django.contrib.sitemaps','django.contrib.auth'] + INSTALLED_APPS ROOT_URLCONF = 'janaganana.urls' -DATABASE_URL = config( - 'DATABASE_URL', default='postgresql://factlyin:factlyin@ci-db/factlyin') +DATABASE_URL = config('DATABASE_URL', default='postgresql://factlyin:factlyin@/factlyin') DATABASES['default'] = dj_database_url.parse(DATABASE_URL) DATABASES['default']['ATOMIC_REQUESTS'] = True @@ -42,12 +46,14 @@ } } +WAZIMAP['default_geo_version'] = '2011' WAZIMAP['comparative_levels'] = ['country', 'state', 'district'] -WAZIMAP['geometry_data'] = { - 'country': 'geo/country.topojson', - 'state': 'geo/state.topojson', - 'district': 'geo/district.topojson', -} + +WAZIMAP['geometry_data'] = {'2011': { + 'country': 'geo/country.topojson', + 'state': 'geo/state.topojson', + 'district': 'geo/district.topojson', +}} WAZIMAP['ga_tracking_id'] = 'UA-91398887-1' WAZIMAP['twitter'] = '@factlydotin' @@ -63,7 +69,17 @@ WAZIMAP['github'] = 'https://github.com/factly/janaganana' WAZIMAP['tagline'] = 'Make sense of Indian census data' -SECRET_KEY = config('DJANGO_SECRET_KEY') +WSGI_APPLICATION = 'janaganana.wsgi.application' + +#SECRET_KEY = config('DJANGO_SECRET_KEY') + +# STATICFILES_STORAGE = 'pipeline.storage.PipelineCachedStorage' + +STATIC_URL = '/static/' +STATIC_ROOT = os.path.join(BASE_DIR, 'static-root') +STATICFILES_DIRS = [ + os.path.join(BASE_DIR, 'static') +] STATICFILES_FINDERS = ( 'django.contrib.staticfiles.finders.FileSystemFinder', @@ -71,12 +87,6 @@ # 'pipeline.finders.PipelineFinder', ) -# STATICFILES_STORAGE = 'pipeline.storage.PipelineCachedStorage' - -STATICFILES_DIRS = ( - os.path.join(os.path.dirname(os.path.abspath(__file__)), 'static'), -) - MIDDLEWARE_CLASSES = [ 'django.middleware.cache.UpdateCacheMiddleware', 'django.middleware.common.CommonMiddleware', diff --git a/janaganana/static/css/app.css b/janaganana/static/css/app.css new file mode 100755 index 0000000..8475785 --- /dev/null +++ b/janaganana/static/css/app.css @@ -0,0 +1,2848 @@ +@import 'charts.css'; +@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css); +@import url(//fonts.googleapis.com/css?family=Lato:400,700); +@import url(//fonts.googleapis.com/css?family=Merriweather); + +/* +teals: #02aeab; #027b7a; #014948; +tans: #f7f8f3; #eff1e9; #e0e4d4; #cad0b5; +orange: #f55b2c +*/ + +*, *:before, *:after { + -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; +} +html, +body { + margin: 0; + padding: 0; + background-color: #f7f8f3; + line-height: 1.4; + font-size: 14px; + font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; +} +html { + background-color: #e0e4d4; +} +html, +button, +input, +select, +textarea { + color: #222; +} +menu, +ol, +ul { + padding: 0 0 0 2em; +} +input:focus { + border: 1px solid #02aeab; + -webkit-box-shadow: 0px 0px 2px rgba(1, 73, 72, 0.5); + -moz-box-shadow: 0px 0px 2px rgba(1, 73, 72, 0.5); + box-shadow: 0px 0px 2px rgba(1, 73, 72, 0.5); +} +::-moz-selection { + background: #02aeab; + text-shadow: none; +} +::selection { + background: #02aeab; + text-shadow: none; +} + +hr { + display: block; + height: 1px; + border: 0; + border-top: 1px solid #fff; + margin: 1em 0; + padding: 0; +} + +img { + vertical-align: middle; +} + +fieldset { + border: 0; + margin: 0; + padding: 0; +} + +textarea { + resize: vertical; +} + +.chromeframe { + margin: 0.2em 0; + background: #ccc; + color: #000; + padding: 0.2em 0; +} + +/* BASIC ELEMENTS */ +a { + color: #014948; +} +a.permalink { + text-decoration: none; + color: inherit; +} +a:hover { + color: #02aeab; +} +a.permalink span, +a.permalink i { + color: #777; + display: none; +} +a.permalink:hover { + color: inherit; +} +a.permalink:hover span, +a.permalink:hover i { + display: inherit; +} +p, .serif { + font-family: "Merriweather", Georgia, serif; + margin: 0 0 1em; +} +.caption { + margin-top: .25em; + padding-top: .25em; + font-size: .83em; + font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; +} +.caption-group { + margin-right: 1em; +} + +.display-type, +.leader { + font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; +} +.leader { + font-weight: bold; + text-transform: uppercase; +} + +h1, h2, h3, h4, h5, h6 { + margin: 0; + line-height: 1.2; + font-weight: 700; +} +h1, h2, h3, .topic h2, .topic h4 { + margin-bottom: .25em; +} +h1.title { + font-size: 2.5em; +} +h2.subhead { + font-size: 1.5em; + line-height: 1.3; + margin-bottom: .5em; +} +#table-display h4 { + font-size: .9em; +} +.list-header { + margin-bottom: .5em; +} +.ul-icon-list { + list-style: none; + padding: 0; +} +.ul-icon-list i { + margin-right: .33em; +} +.ul-icon-list .fa { + width: 16px; + display: inline-block; + text-align: center; +} +.ul-icon-list a, +footer ul a { + text-decoration: none; +} +.ul-icon-list a:hover, +footer ul a:hover { + text-decoration: underline; +} +.option-group { + font-size: .9em; + margin-bottom: 1.5em; +} +.option-list { + list-style: none; + margin: .33em 0 0 1em; + padding: 0; +} +.option-list li { + margin-bottom: .33em; +} +.option-header { + margin-bottom: .25em; +} +img.screenshot { + border: 1px solid #cad0b5; + width: 100%; +} + +/* LAYOUT */ +#page-header, +.box-header { + background-color: #014948; +} +#page-header .wrapper { + padding: .5em 0; +} +#page-header-title a, +.box-header a { + color: #f7f8f3; + text-decoration: none; +} +#page-header-title a.title { + font-size: 21px; +} +#page-header-title img, +.box-header img { + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + margin: 0 3px 0 0; + vertical-align: baseline; + height: 21px; +} +.box-header { + padding: .25em .5em; + margin-bottom: .67em; +} +.box-header img { + height: 16px; +} +.box-header a { + font-size: 16px; +} +.box-content { + padding: 0 1em; + margin-bottom: .67em; +} +.box-content section { + margin-bottom: 0; +} + +#menu { + float: right; + margin: .2em 0 0; + padding: 0; +} +#menu .tool-group { + margin-right: 0; +} +#menu .separator { + float:left; + color: #fff; + font-size: .83em; + width: 3em; + text-align: center; + height: 2em; + padding-top: .2em; +} +#menu input { + border: 0; + margin-left: 0; + padding: 2px 6px 0; + height: 2em; + line-height: 2em; +} +#menu a.button, +a.action-button, +.big-action .with-submit input[type="submit"] { + color: #fff; + display: block; + margin-top: 0; + padding: 0 9px; + height: 2em; + line-height: 1.9em; + background-color: #1a9d95; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + border: none; +} +#menu a.button i { + position: absolute; + right: .5em; + top: .5em; + opacity: .5; + display: none; +} +#menu a.button:hover { + background-color: #f55b2c; +} +#menu-toggle { + float: right; + font-size: 18px; + margin-top: 2px; + color: #67b3a3; + line-height: 1; + padding: .25em .33em .2em; + background-color: #001716; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + cursor: pointer; + display: none; +} +#menu-toggle.fa:before { + cursor: pointer; +} + +#page-footer { + background-color: #e0e4d4; + border-top: 1px solid #cad0b5; + padding: 1.5em 0 4.5em; +} +#page-footer ul { + margin: 0; + padding-left: 1em; +} +#page-footer ul.ul-icon-list { + padding-left: 0; + line-height: 2; +} +.content-container { + padding: 2em 0; + clear: both; +} +.data-view .content-container { + padding: 1em 0; +} +.header-container { + padding: 2em 0 0; + clear: both; +} +.content-container .header-container { + padding-top: 1em; +} +#header-container h1 { + padding-right: 370px; +} + +article, +article.column-full { + margin-bottom: 4em; +} +header.section-contents { + float: left; + width: 13em; +} +header.section-contents h1 { + font-size: 1em; + margin: 0; + padding: .6em 0 .55em .8em; + background-color: #eff1e9; + -webkit-border-top-left-radius: 4px; + -moz-border-radius-topleft: 4px; + border-top-left-radius: 4px; + -webkit-border-bottom-left-radius: 4px; + -moz-border-radius-bottomleft: 4px; + border-bottom-left-radius: 4px; +} +article .section-container { + background-color: #fff; + margin-left: 13em; + padding: .6em 1.2em 1.2em; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + -webkit-border-top-left-radius: 0; + -moz-border-radius-topleft: 0; + border-top-left-radius: 0; +} +header.section-contents h1, +article .section-container, +.card { + border-top: 1px solid #e8eadf; + border-bottom: 1px solid #cad0b5; +} +.card { + display: block; + font-size: 1.2em; + margin: 0; + padding: 0; + text-decoration: none; + background-color: #e0e4d4; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} +.card:hover { + color: #111; +} +.card .caption { + font-size: 1em; + font-weight: bold; + display: block; + padding: .83em 1em; + margin: 0; +} +.card .more { + font-size: .83em; + margin-left: .25em; + color: #cc4c3f; + white-space: nowrap; +} +.card:hover .more { + color: #f55b2c; +} +.card-container .card { + margin-bottom: 1.5em; +} +.card img { + width: 100%; + margin: 0; +} +.explain { + font-size: .83em; + padding: 0 1em; +} +.sidebar-block .explain { + padding: .5em 0; +} +.typeahead-container .explain { + clear: both; + margin-top: .5em; +} +.sidebar-block { + margin-bottom: 2em; +} +.sidebar-block ul { + font-size: .83em; + font-weight: bold; +} +.expanded-table ul { + list-style: none; + padding: 0; + margin-top: .75em; + font-size: .9em; +} +.preview-table ul { + font-weight: normal; + list-style: none; + padding: 0; + margin-bottom: 0; + font-size: .8em; +} +.preview-table ul.open { + margin-bottom: .5em; +} +.expanded-table ul li, +.preview-table ul li { + margin-bottom: .2em; +} +.expand-preview { + display: block; + text-align: center; + text-decoration: none; + font-size: .83em; + font-weight: bold; + padding: .33em 0; + border-top: 1px solid #E8EADF; +} + +section { + margin-bottom: 2em; +} +.wide-content { + overflow-x: auto; +} +.section-container section { + margin-bottom: 3em; +} +#profile .section-container section { + margin-bottom: 2em; +} +.section-container section:last-child { + margin-bottom: .5em; +} +header.section-contents h1, +section h2 { + font-size: 1em; + line-height: 1.3; + margin-bottom: 1em; +} +header.section-contents h1 a { + font-size: .83em; + line-height: 1.6em; + font-weight: normal; + float: right; + padding-right: 1em; +} + +aside { + float: left; + margin-left: -14.4em; + width: 13em; + padding: .25em .67em .67em 1.1em; +} +aside h3 { + font-size: .9em; +} +aside p, +aside ul { + font-size: .83em; +} +aside ul { + margin: .33em .67em .67em 1em; + padding: 0; +} +aside ul.sumlev-list, +aside ul.search-filter-list { + list-style: none; + margin: 0.33em 0 .67em .67em; + padding: 0; +} +aside ul.search-filter-list{ + margin-top: .67em; +} +aside ul.sumlev-list .remove, +aside ul.search-filter-list .remove { + margin-left: .5em; +} +aside li { + margin-bottom: .25em; +} +aside ul.sumlev-list li, +aside ul.search-filter-list li { + line-height: 1.2; + margin-bottom: .5em; +} +aside sup { + font-size: 1.25em; + top: -.125em; +} +aside .aside-block { + margin: 1em 0 1.5em; + clear: both; +} +.search-results aside .aside-block { + margin: 0 0 2em; +} +aside .search input { + font-size: .83em; + margin: .33em 0 0; + padding: .15em .5em 0; + width: 100%; +} +aside #geography-add-parent { + margin-bottom: .2em; +} +aside .action-button { + font-size: .83em; + display: block; + margin-bottom: 1em; +} +.search-results aside { + padding-top: 0; +} +.search-results aside .remove-filters { + text-align: left; + margin-top: -.33em; +} +aside#facets { + margin-left: 0; +} +.with-facets { + padding-left: 14.4em; +} +.wrapper { + width: auto; + margin: 0 1.5em; +} +.full-width { + clear: both; + width: 100%; + margin: 0; +} + +#cover-map { + position: relative; + height: 35em; + margin-bottom: 2em; +} +#slippy-map { + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; +} + +#use-location { + display: inline-block; + font-size: .9em; + padding: 0 9px; + margin-right: .33em; +} + +#address-search-message { display: none; margin-top: 1em;} + +#address-search { + font-size: 1em; + width: 100%; +} + +.zoom-to-layer { + background-color: #a1d0c6; + text-decoration: none; + color: #888; + margin-left: .67em; + padding: .33em .4em; + font-size: .9em; + float: right; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + cursor: pointer; +} +.zoom-to-layer.active, +.zoom-to-layer:hover { + background-color: #1a9d95; + color: #fff; +} + +#address-search-content.no-map .zoom-to-layer, #address-search-content.no-map .no-map-hide { + display: none; +} + +#cover-profile { + position: relative; +} +#cover-profile article { + margin-top: 3em; + background-color: #fff; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + border: 1px solid #02aeab; + padding: .67em 1.25em .33em; +} +#cover-profile ul { + list-style: none; + font-size: .83em; +} +#cover-profile strong { + float: left; + margin-right: .5em; +} +#cover-profile .header-extra-links ul { + float: left; + padding: 0; + margin: .5em 0 1.5em; +} +.column-row { + clear: both; +} +.column-full, +.column-half, +.column-third, +.column-two-thirds, +.column-quarter, +.column-three-quarters, +.column-golden-wide, +.column-golden-narrow { + float: left; + margin: 0 2% 0 0; +} +.header-for-columns { + margin: 0 2% 1em 0; +} +.column-full { + width: 98%; +} +.column-half { + width: 48%; +} +.column-third { + width: 31%; +} +.column-two-thirds { + width: 65%; +} +.column-quarter { + width: 23%; +} +.column-three-quarters { + width: 73%; +} +.column-golden-wide { + width: 58%; +} +.column-golden-narrow { + width: 38%; +} + +/* HOMEPAGE */ +#homepage #blurb { + margin-top: 3em; +} +#homepage .content-container, +#comparison-builder .content-container { + padding: 2.5em 0; +} +.white-stripe { + background-color: #fff; +} +.tan-stripe { + background-color: #eff1e9; +} +h1.article-header { + font-size: 3em; + margin-bottom: .25em; +} +.data-builder h1.article-header, +.data-view h1.article-header, +#query-topic-picker h1, +#compare-place-picker h1 { + font-size: 2.5em; +} +h1.article-header-right { + text-align: right; + padding-right: .1em; +} +#homepage .big-action h1 { + float: left; + width: 200px; +} +.data-builder h1 { + float: none; + text-align: left; + padding-right: 0; + width: auto; +} +.data-builder #explore-topic-picker h1:after { + content: ' ACS data'; +} + +#explore-topic-metadata p { + float: left; + width: 260px; + text-align: right; + padding-top: .5em; +} +.big-action input, +#query-topic-picker input, +#compare-place-picker input { + font-size: 1.6em; + padding: .25em .5em 0; + width: 100%; +} +.big-action .with-submit input[type="text"] { + width: 88%; +} +.big-action .with-submit input[type="submit"] { + width: 10%; + margin-left: 1%; + display: inline-block; + height: 2.6em; + font-size: 1.3em; + font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; +} + +#profile #query-topic-picker input, +#profile #compare-place-picker input, +#map-controls #query-topic-picker input { + font-size: 1em; +} +#homepage .input-wrapper, +#homepage .input-wrapper { + padding-top: .25em; + padding-left: 230px; +} +#geography-select-wrapper .geolocate-only { + width: 100%; + margin: 1em auto; +} +#geography-select-wrapper .action-button { + display: block; + margin-left: 3em; +} + +.trigger-highlight { + float: left; + padding-top: 1.2em; + padding-right: 1em; +} +.map-marker-label{ + position: absolute; + color: black; + font-size: 11px; + font-weight: bold; + width: 150px; +} + +.action-button i { + margin-right: .33em; +} +#homepage #profile p.explain { + margin-top: .83em; + font-style: italic; +} +#homepage #topics header { + margin-bottom: 1em; +} +#homepage #topics h2 { + font-size: 1.5em; +} +#homepage #explore-topic-picker .primary-explainer { + display: none; +} +#homepage #query-builder-bar { + margin: 1.5em 0; +} +.big-action { + clear: both; + margin: 0 0 1em; +} +.big-action .help-text { + margin: .67em 1em; + font-size: 1em; +} +.big-action p.help-text { + font-style: italic; +} +.or { + font-family: "Merriweather", Georgia, serif; + font-size: 1.1em; + line-height: 1; + padding: .7em 0; + font-style: italic; + width: 3em; + float: left; + text-align: center; +} +.callout { + margin-top: 1.5em; + margin-bottom: 1.5em; + padding: 0; +} +.callout.with-icon { + padding-left: 36px; +} +.callout h3 { + font-size: 24px; +} +.callout i.fa { + display: block; + float: left; + text-align: center; + width: 28px; + height: 28px; + font-size: 14px; + line-height: 28px; + color: #fff; + background-color: #014948; + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + border-radius: 50%; + margin-left: -36px; +} +.callout p:last-child { + margin-bottom: 0; +} +.tag { + text-transform: uppercase; + font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-style: normal; + color: #fff; + font-size: .8em; + padding: .15em .33em; + background-color: #555c3b; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; +} + +.search-result-item { + margin: 0 0 2.5em; +} +.search-result-item p { + margin: 0 0 .5em 0; + font-size: 1.1em; +} +.pagination .action-button { + width: 10em; + margin-right: 1em; + display: inline-block; +} +.pagination .action-button i { + margin: 0 .33em; +} + +/* STATS */ +.stat { + width: 100%; + color: #111; + margin: 0; + padding: 0; +} +.stat:hover { + color: #111; +} +.context, +.context-phrases { + font-size: .9em; + font-weight: 500; + color: #777; +} +.data-drawer.grid { + font-size: .83em; + padding-top: 0; +} +.grid .name, +.grid .value, +.grid .context { + display: inline-block; +} +.grid .name { + font-weight: bold; +} +.grid .value { + min-width: 7em; + text-align: right; + padding-right: 1em; +} +.grid .context { + font-size: .9em; + margin-bottom: -.1em; + min-width: 4em; +} +.stat .context { + margin-left: .33em; + display: none; +} +.stat:hover .context { + display: inline-block; +} +.stat:hover .secondary .context { + display: block; +} +.context-phrases { + display: block; + list-style: none; + padding: 0; + margin: 0; +} +.context-phrases li { + line-height: 1.4; + margin-bottom: .5em; +} +.context-phrases strong { + color: #666; +} +.stat .primary { + display: block; + margin-bottom: 1em; +} +.stat .primary .name { + display: block; + font-size: 1.2em; + font-weight: 400; + line-height: 1.3; +} +.stat .primary .context { + font-size: .5em; +} +.stat .primary .value { + display: block; + font-size: 2.2em; + line-height: 1; + margin: 0 0 .1825em; + font-weight: 700; +} +.stat .primary .value sup { + font-size: .5em; + vertical-align: middle; + top: -.83em; +} +.stat .secondary { + display: block; +} +#cover-profile .stat .secondary { + margin-bottom: .67em; +} +.stat .secondary .value { + font-size: 1.2em; + font-weight: 700; + margin-right: .1em; +} +.stat .secondary .context { + margin: 0 0 .67em; +} +.secondary.stacked .name { + display: block; +} +.stat-suffix { + font-size: .5em; +} +.stat-row select { + max-width: 100px; + font-size: .8em; +} +.stat-row { + border-top: 1px solid #eff1e9; + padding-top: 2em; +} +.stat-row.grouped-row { + border: none; + padding-top: 0; +} +.stat-row:first-child { + border-top: none; + padding-top: 0; +} + +/* SVG MAPS */ +.svg-map { + position: relative; +} +.svg-map .outline { + fill: #f7f8f3; + stroke: #cad0b5; + stroke-width: 1.5px; +} +.svg-map .feature, +.svg-map .point { + stroke: #001b1b; + fill: #014948; +} +.svg-map .mesh { + fill: none; + stroke: #fff; + stroke-width: .5px; + stroke-linejoin: round; +} +.svg-map .geographies { + fill: #e5e5e5; + stroke: #fff; + stroke-linejoin: round; +} +.push-right { + margin-left: 1em; +} +.nudge-right { + margin-left: .33em; +} +.context-block { + display: block; + margin: .25em 0; +} + +.q0 { background-color: #d9ece8; fill: #d9ece8; } /* Swans Down*/ +.q1 { background-color: #a1cfc6; fill: #a1cfc6; } /* Sinbad */ +.q2 { background-color: #68b3a3; fill: #68b3a3; } /* Tradewind */ +.q3 { background-color: #428476; fill: #428476; } /* Viridian */ +.q4 { background-color: #264b44; fill: #264b44; } /* Plantation */ + +#map-controls { + position: absolute; + z-index: 49; + top: 10px; + left: 10px; + background-color: #fff; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + border: 1px solid #014948; + width: 450px; + overflow-y: auto; +} +#locate #map-controls { + overflow-y: visible; +} +#map-controls h1, +#map-controls .header-container { + margin: .5em 0; + clear: both; + padding: 0; +} +#map-controls h2 span { + margin-right: 1.5em; +} +#map-controls ul.metadata { + line-height: 1.3; + list-style: none; + margin: 0 0 .8em; + padding: 0; +} +#map-controls ul.metadata li { + display: inline; + font-size: .83em; + margin-right: 1.5em; +} +#map-controls ul.metadata li.tool-group { + margin-right: 0; +} +#map-controls ul.metadata li.bigger { + font-weight: 700; + font-size: .9em; + margin-right: 1.2em; +} +#map-controls #map-legend, +#map-controls #column-select, +#map-controls #sumlev-select, +#map-controls .header-tool-set, +#map-controls aside { + width: 100%; + display: block; + float: none; +} +#map-controls aside { + padding: .67em 0 .33em; + margin: 0; +} +#map-controls aside .action-button { + float: right; +} +#map-controls #comparison-add-header, +#map-controls #query-topic-picker h1, +#map-controls #address-search-wrapper h1 { + font-size: 1.3em; +} +#map-controls #map-legend, +#map-controls #column-select, +#map-controls #sumlev-select { + clear: both; + margin-top: 1em; + display: none; +} +#map-controls #map-legend { + margin: 2em 0; + text-align: center; +} +#map-controls .header-tool-set, +#map-controls .caption { + margin: .25em 0 0; +} +#map-legend, +#map-select { + width: 50%; + margin-right: 0; + margin-bottom: 2em; +} +#map-legend { + padding-right: 1.5em; + font-size: 11px; + height: 4em; + float: right; +} +.leaflet-label.hovercard { + white-space: normal; + width: 250px; +} +.leaflet-label.hovercard .value { + font-weight: normal; +} +.leaflet-label.hovercard { + font-size: 13px; + font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif; + padding: .83em 1em; +} + + +ul.quantile-legend { + list-style: none; + margin: 0; + position: relative; +} +.tool-group ul.quantile-legend { + padding-bottom: 2em; +} +ul.quantile-legend li { + height: 2.5em; + width: 16.5%; + position: relative; + margin: 0; +} +#map-controls ul.quantile-legend { + margin-left: -16.5%; +} +ul.quantile-legend span.quantile-label { + position: absolute; + bottom: -1.75em; + width: 100%; + left: 50%; + text-align: center; +} + +.map-layer path { + fill: #000; + fill-opacity: .2; + stroke: #fff; + stroke-width: 1.5px; +} + +/* TABLES */ +table { + margin: 0 0 2em 0; + font-size: .8em; +} +thead { + border-bottom: 1px solid #d9ddca; +} +th { + background-color: #eff1e9; + min-width: 7em; + vertical-align: bottom; +} +thead.left-align th { + text-align: left; +} +th:first-child { + -webkit-border-top-left-radius: 4px; + -moz-border-radius-topleft: 4px; + border-top-left-radius: 4px; +} +th:last-child { + -webkit-border-top-right-radius: 4px; + -moz-border-radius-topright: 4px; + border-top-right-radius: 4px; +} +th, td { + padding: .25em .75em; +} +td { + vertical-align: top; +} +table .name { + text-align: left; + font-weight: 700; + white-space: nowrap; +} +table .value { + text-align: right; +} +tr:hover td, +tr.highlight td, +.grid .highlight, +.grid .hover { + background-color: #e0e4d4; +} +table .percentage, table .raw-number { + display: block +} +table .alt-number { + display: none; +} +.indent-0 { + padding-left: 0; +} +.indent-1 { + padding-left: 1em; +} +.indent-2 { + padding-left: 2em; +} +.indent-3 { + padding-left: 3em; +} +.indent-4 { + padding-left: 4em; +} +.indent-5 { + padding-left: 5em; +} +.indent-6 { + padding-left: 6em; +} +.indent-7 { + padding-left: 7em; +} +td.indent-1 { + padding-left: 1.75em; +} +td.indent-2 { + padding-left: 2.75em; +} +td.indent-3 { + padding-left: 3.75em; +} +td.indent-4 { + padding-left: 4.75em; +} +td.indent-5 { + padding-left: 5.75em; +} +td.indent-6 { + padding-left: 6.75em; +} +td.indent-7 { + padding-left: 7.75em; +} + + +form { + margin: 0 0 2em; +} +form label { + font-weight: bold; +} +input[type="text"], +select, +.select-wrapper, +.filter-group, +.item-chosen { + background-color: #fff; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + border: 1px solid #cad0b5; + height: 2.2em; + line-height: 1em; + padding: .5em; +} +form input[type="text"], +form select { +} +form select { + padding: .5em .33em; +} + +.select-wrapper select { + width: 100%; + background-color: transparent; + background-color: rgba(0,0,0,0); + border: 0; + border-radius: 0; + -webkit-appearance: none; + cursor: pointer; +} +.select-wrapper select:focus { + outline: 0; +} +.select-wrapper { + position: relative; + width: 100%; + overflow: hidden; + padding: 0; +} +.select-wrapper i.fa, +.filter-group i.fa, +.item-chosen i.fa { + position: absolute; + top: 0; + right: 0; + padding: .5em .5em .25em; + background-color: #fff; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} +.select-wrapper i.fa:before, +.filter-group i.fa:before, +.item-chosen i.fa:before { + cursor: pointer; +} + +form.inline-form input, +form.inline-form select, +form.inline-form .select2-container { + margin: 0 .5em; +} +.help-text { + font-size: .83em; + display: block; + margin: .25em .75em; +} + +tr.help-text { + display: table-row; +} + +.filter-group { + font-size: 1em; + cursor: pointer; + position: relative; + margin-bottom: .5em; +} +.filter-group.open { + height: auto; +} +h3.filter-group-title, +h3.item-chosen-title { + line-height: 1; + font-size: 1em; + margin-bottom: 0; + padding-right: 1.5em; +} +.filter-group .filter-list { + display: none; + margin: .33em 0 0; +} +.filter-group.open .filter-list { + display: block; +} +.filter-list a { + cursor: pointer; + text-decoration: none; + font-weight: normal; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} +.filter-list a.option-selected { + color: #fff; + background-color: #014948; +} +.filter-list { + list-style: none; + padding: 0; + margin: 0 0 .75em; +} +.filter-list .label { + font-size: .83em; + font-weight: bold; +} +.filter-list a, +.filter-list .label { + padding: .1em .33em; + margin-left: -.33em; +} +p.filter-list a { + margin: 0 0 0 .33em; + padding: .1em .4em; + font-size: .8em; +} + +.filter-list ul { + list-style: none; + padding-left: .5em; + margin: 0 0 .75em; + line-height: 1.1; +} +.filter-list li { + margin: .33em 0; +} +.filter-list label { + font-weight: normal; + padding-left: .25em; +} +.filter-list .group-label { + font-weight: bold; +} +.topic-result { + margin: .5em 0; +} +.topic-type { + display: block; + text-transform: uppercase; + font-size: .75em; + font-weight: bold; + color: #aaa; +} +.select2-result:hover .topic-type { + color: #eee; +} + +textarea#results { + width: 100%; + height: 450px; + padding: .5em; +} + +.tool-set { + float: right; + padding-top: .1em; + margin: -.1em 0 .5em 1.5em; +} +.tool-set.caption-tool-set { + margin-top: .1em; +} +.tool-set .tool-group { + float: left; +} +.tool-group { + position: relative; + margin-right: 1.5em; + font-size: .83em; +} +.tool-group:last-child { + margin-right: 0; +} +.header-tool-set .tool-group:last-child { + margin-right: 1.5em; +} +.tool-group ul { + list-style: none; + margin: 0; + padding: 0; + display: inline; +} +.tool-group li { + display: inline-block; + margin: 0 0 0 .33em; +} +.tool-group .filter-list li { + display: block; + margin: .33em 0; +} +.tool-group a { + cursor: pointer; + text-decoration: underline; +} +.tool-group a:hover { + color: #f55b2c; +} +.tool-group .filter-list a { + text-decoration: none; +} +.tool-group input, +.tool-group select { + display: inline; + height: 2em; + padding: .4em .33em; + margin-left: .25em; +} +.tool-group.data-selector select { + margin-left: 0; + min-width: 150px; + max-width: 450px; +} +.tool-group.data-selector .item-chosen { + margin-left: 0; + width: 100%; + height: auto; + position: absolute; +} +.tool-group .label { + font-size: 1em; + color: #aaa; + font-weight: bold; +} + +.item-chosen { + cursor: pointer; +} +.item-chosen, +.item-choices { + position: relative; + background-color: #fff; +} +.item-choices { + max-height: 200px; + overflow-y: auto; + margin-top: 1em; + display: none; + cursor: default; +} +.item-chosen.open { + height: auto; + z-index: 1001; +} +.item-chosen.open .item-choices { + display: block; +} +/* handle hidden scrollbars in OS 10.7+ */ +.item-choices::-webkit-scrollbar { + -webkit-appearance: none; +} + +.item-choices::-webkit-scrollbar:vertical { + width: 11px; +} + +.item-choices::-webkit-scrollbar:horizontal { + height: 11px; +} + +.item-choices::-webkit-scrollbar-thumb { + border-radius: 8px; + border: 2px solid white; /* should match background, can't be transparent */ + background-color: rgba(0, 0, 0, .5); +} + +.header-tool-set { + margin-top: .5em; +} +ul.toggle-set { + display: block; + font-size: 12px; +} +ul.toggle-set li { + margin: 0; + float: left; + width: 90px; + text-align: center; + position: relative; +} +.toggle-set a { + background-color: #a1d0c6; + border-bottom: 1px solid #67b3a3; + text-decoration: none; + color: #888; + margin-right: 1px; +} +.toggle-set a, +.toggle-sub-group a { + padding: .25em 0 .33em; + display: block; +} +.toggle-sub-group a { + margin-top: .15em; +} +.toggle-set li:first-child a { + -webkit-border-top-left-radius: 4px; + -webkit-border-bottom-left-radius: 4px; + -moz-border-radius-topleft: 4px; + -moz-border-radius-bottomleft: 4px; + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; +} +.toggle-set li:last-child a { + -webkit-border-top-right-radius: 4px; + -webkit-border-bottom-right-radius: 4px; + -moz-border-radius-topright: 4px; + -moz-border-radius-bottomright: 4px; + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + border-right: 0; +} +.toggle-set a.active, +.toggle-set a:hover, +.toggle-set a.hovered { + background-color: #1a9d95; + color: #fff; +} +.toggle-set a.unhovered { + background-color: #a1d0c6; + color: #888; +} +ul.toggle-set .toggle-sub-group a:hover { + -webkit-border-bottom-right-radius: 0; + -moz-border-radius-bottomright: 0; + border-bottom-right-radius: 0; +} +.toggle-sub-group a:hover { + color: #1a9d95; +} +ul.sub-group { + display: none; + position: absolute; + top: 100%; + left: 0; + background-color: #fff; + width: 100%; + z-index: 99; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + border: 1px solid #e8eadf; +} +ul.sub-group li, +ul.sub-group a { + margin: 0; + display: block; +} +ul.sub-group li:first-child a { + -webkit-border-top-right-radius: 4px; + -webkit-border-top-left-radius: 4px; + -moz-border-radius-topright: 4px; + -moz-border-radius-topleft: 4px; + border-top-right-radius: 4px; + border-top-left-radius: 4px; +} +ul.sub-group li:last-child a { + -webkit-border-bottom-right-radius: 4px; + -webkit-border-bottom-left-radius: 4px; + -moz-border-radius-bottomright: 4px; + -moz-border-radius-bottomleft: 4px; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; + border-bottom: none; +} +ul.sub-group a { + text-decoration: none; + padding: .33em .5em; + border-bottom: 1px solid #e8eadf; +} +ul.sub-group a:hover { + text-decoration: none; + padding: .33em .5em; + color: #fff; + background-color: #1a9d95; + border-color: #1a9d95; +} + +/* CHARTS */ + +section.coal-chart-container { + padding: 2em 0 4em; + margin-bottom: 0; +} +section.chart-divider { + margin: 1em 0 0; + padding: 0.6em 0.75em; + background-color: #f7f8f3; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + border-top: 1px solid #e8eadf; + border-bottom: 1px solid #cad0b5; +} +section.chart-divider h2 { + margin: 0; + line-height: 1; +} +.coal-chart-container h2 {} +.coal-chart { + list-style: none; + position: relative; + height: 10px; + border-bottom: 1px solid #e5e5e5; + margin: 0 1.5em; +} +.coal-chart li { + display: inline; + position: absolute; + bottom: -6px; + margin-left: -5px; +} +.coal-chart li .point { + display: block; + cursor: pointer; + position: relative; + height: 11px; + width: 11px; + color: #222; + background-color: #eff1e9; + border: 1px solid #acb58c; + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + border-radius: 50%; +} +.coal-chart li .point:hover, +.coal-chart li .point.hovered { + background-color: #42472e; + border-color: #42472e; + z-index: 3; +} +.coal-chart li .point.selected { + background-color: #027b7a; + border-color: #027b7a; + z-index: 2; +} +.coal-chart li .point.selected.hovered { + z-index: 4; +} +.coal-chart li .point .hovercard { + position: absolute; + width: 15em; + bottom: 1.5em; + right: -7.5em; + font-size: .83em; + line-height: 1.3; + text-align: center; + display: none; + padding: .5em; + border: 1px solid #e0e0e0; + pointer-events: auto; +} +.coal-chart li .point:hover .hovercard, +.coal-chart li .point.hovered .hovercard, +.coal-chart li .point.selected .hovercard { + display: block; + background-color: #fff; +} +.coal-chart li.tick-mark { + height: 26px; + bottom: -13px; + margin-left: 0; + border-left: 1px solid #d5d5d5; +} +.coal-chart li.tick-mark.tick-mark-min { + left: 0; +} +.coal-chart li.tick-mark.tick-mark-max { + left: 100%; +} +.coal-chart li.tick-mark span { + position: relative; + font-size: .75em; + display: block; + color: #606060; + padding: 0; + margin-top: 26px; + margin-left: -50%; + white-space: nowrap; +} +.coal-chart li.tick-mark-min span { + margin-left: -1px; +} +.coal-chart li.tick-mark-max span { + margin-left: -99%; +} + +.placeholder { + background-color: #f5f5f5; + color: #777; + text-align: center; + height: 200px; + padding-top: 75px; + border: 1px solid #777; +} + +.comparison-builder { + margin-bottom: 2em; +} +#query-builder #topic-picker, +#query-builder #geography-picker { + display: none; + clear: both; + padding-top: 1em; +} + +.change-button, +.go-button, +.action-button { + font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; + line-height: 1; + cursor: pointer; + text-align: center; + padding: .7em 0; + background-color: #1a9d95; + color: #fff; + text-decoration: none; + font-size: 1.2em; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} +.change-button { + font-size: 1em; + position: absolute; + top: .5em; + right: .5em; + margin: 0; + width: 10em; +} +.change-button:hover, +.action-button:hover { + background-color: #f55b2c; + color: #fff; +} + +#topic-picker [class^="column-"], +#geography-picker [class^="column-"] { + margin-bottom: 1em; +} + +#query-builder-bar { + position: relative; + width: 100%; + margin-bottom: 2em; +} +#query-builder-bar .leader { + float: left; + padding: .5em 0; +} +.float-query #query-builder-bar .leader { + display: none; +} +#query-builder-bar h2 { + font-size: 1em; + line-height: 1.3; + margin-bottom: 1em; +} +#query-builder-bar h4 { + color: #aaa; + margin-bottom: .5em; +} + +#query-topic, +#query-geographies, +#query-release, +#query-go { + float: left; + width: 18%; + margin-right: 3%; + font-size: .83em; +} +#query-geographies { + width: 42%; +} +#query-go { + width: 13%; + margin-right: 0; + float: right; +} + +#query-release { + margin-right: 0; +} +#query-builder-bar .query-chosen { + margin-left: 5em; + text-align: center; + height: 31px; + padding: .5em 0 0; + background-color: #fff; + border: 1px solid #cad0b5; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + cursor: pointer; +} + +#query-topic .query-chosen { + margin-left: 4.5em; +} +#query-geographies .query-chosen { + margin-left: 5.5em; +} +#query-release .query-chosen { + margin-left: 6em; +} +#query-go .query-chosen { + margin-left: 1em; +} + +#query-builder-bar .query-chosen.tabbed.open, +#query-builder-bar .query-chosen.hovered, +#query-builder-bar .query-chosen.go, +.go-button { + border-color: #014948; + background-color: #014948; + color: #fff; + font-weight: 400; +} +#query-builder-bar .query-chosen.go, +.go-button { + border-color: #f55b2c; + background-color: #f55b2c; +} +#query-builder-bar .query-chosen.go:hover, +.go-button:hover { + border-color: #f54814; + background-color: #f54814; +} +#query-builder-bar .query-chosen.tabbed { + -webkit-border-bottom-right-radius: 0; + -webkit-border-bottom-left-radius: 0; + -moz-border-radius-bottomright: 0; + -moz-border-radius-bottomleft: 0; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} +#query-builder-bar .highlight, +#query-builder-bar .hover-only { + text-transform: uppercase; + font-weight: bold; +} +#query-go .highlight { + font-weight: normal; + text-transform: none; +} +#query-builder-bar .hover-only { + display: none; +} +#query-builder-bar .query-chosen.hovered .hover-only { + display: block; +} +#query-builder-bar .query-chosen.hovered .hover-hide { + display: none; +} +#query-builder-bar .disabled, +#query-builder-bar .disabled:hover, +#query-builder-bar .disabled.hovered, +.comparison-builder .disabled, +.comparison-builder .disabled:hover, +.comparison-builder .disabled.hovered { + cursor: default; + border-color: #baccc9; + background-color: #baccc9; + color: #fff; +} + +#query-builder-bar section[id$="-picker"] { + position: absolute; + top: 30px; + left: 0; + width: 100%; + background-color: #fff; + display: none; + z-index: 99; + padding: 2% 0 2% 2%; + border: 1px solid #001716; + -webkit-border-bottom-right-radius: 4px; + -webkit-border-bottom-left-radius: 4px; + -moz-border-radius-bottomright: 4px; + -moz-border-radius-bottomleft: 4px; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; +} +.release-option { + text-align: center; + font-size: .83em; + margin-bottom: 3em; +} +.release-option p { + margin: 0 0 1em; +} +.release-option a { + text-decoration: none; + padding: .33em 1em; + background-color: #eff1e9; + border-top: 1px solid #e8eadf; + border-bottom: 1px solid #cad0b5; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} +.release-option a:hover, +.release-option a.active { + background-color: #d9ddca; + color: #111; +} +.release-option a.disabled { + cursor: default; + background-color: #f0f0f0; + border-top: 1px solid #eee; + border-bottom: 1px solid #e0e0e0; + color: #999; +} + + +#profile-topic-picker { + width: 100%; + margin-bottom: 0; +} +#chosen-table h2 { + padding-left: 8px; +} +#chosen-table .data-drawer, +#data-tabular .data-drawer { + padding-top: 0; +} + +#glossary-card { + width: 300px; + text-align: left; + padding: 1em 1.2em; + pointer-events: auto; +} +#glossary-card small { + float: right; + cursor: pointer; +} +#glossary-card dt { + font-weight: bold; + font-size: 1.2em; + margin-bottom: .5em; +} +#glossary-card dd { + margin: 0; +} +#glossary-card p:last-child { + margin-bottom: 0; +} +.glossary-term { + border-bottom: 1px dashed #777; + cursor: help; +} +#glossary header, +.topic header { + margin: 1em 0 2em; +} +.example header { + margin: 1em 0; +} +#glossary aside, +.topic aside { + float: right; + margin: 0 0 2em 2em; + padding: 1em; + background-color: #fff; + -webkit-border-bottom-right-radius: 4px; + -webkit-border-bottom-left-radius: 4px; + -moz-border-radius-bottomright: 4px; + -moz-border-radius-bottomleft: 4px; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; + border-top: 1px solid #e8eadf; + border-bottom: 1px solid #cad0b5; +} +#glossary aside h3, +.topic aside h3 { + font-size: 1.1em; +} +#glossary aside ul { + margin: 0; + padding: 0 0 0 1.5em; +} +dl { + clear: both; + margin-top: 2em; +} +dl.glossary { + clear: none; +} +dt { + font-weight: bold; + margin-bottom: .67em; +} +.topics dt { + font-size: 1.5em; +} +dd { + margin: 0 0 2em 1em; +} +.topic h2, +.example h2 { + font-size: 1.4em; +} +.example h2 { + margin-top: 1em; +} +.topic table { + font-size: 1em; + background-color: #fff; + margin: 2em 0; +} +.topic table td { + padding: .5em 1em; +} +.topic ul { + line-height: 1.3; +} +.topic li { + margin-bottom: .5em; +} +.topic aside { + width: auto; +} +.topic aside img { + width: 400px; + margin-bottom: 1em; +} +#lightbox { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, .7); + text-align: center; + z-index: 999; +} +#lightbox .hovercard-wrapper { + position: absolute; + left: 50%; +} +#lightbox .hovercard { + position: relative; + left: -50%; + margin-top: 100px; + padding: 1.5em 2em; + font-size: 1em; + width: auto; + pointer-events: auto; +} +#lightbox .close { + display: block; + float: right; + margin-bottom: .75em; + cursor: pointer; +} +#profile #lightbox .hovercard-wrapper { + width: 600px; +} +#profile #lightbox .hovercard { + text-align: left; +} +#profile #lightbox textarea { + width: 100%; + margin: 0 0 1em; + padding: .5em; + height: 7em; +} + +code, pre { + font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal; + font-size: 14px; +} +code { + background-color: #f7f7f7; + border: solid 1px #ddd; + padding: 0 .25em; +} +pre { + -moz-border-radius: .25em; + -webkit-border-radius: .25em; + border-radius: .25em; + text-shadow: none; + overflow: auto; + padding: 1.25em; + margin-bottom: 2em; + background-color: #002B36; + color: #839496; +} +pre code { + border: none; + padding: 0; + background-color: #002B36; + color: #839496; +} +pre .hljs { + padding: 0; +} + +ul.compact * { + margin: 0 inherit; +} + +tfoot tr.help-text { + padding: 1em 0 0 1em; + line-height: 1.8; +} + +dl#racial-iteration { + padding-left: 1.5em; + +} +dl#racial-iteration dt { + font-weight: bold; +} + +/* dl-horizontal borrowed with modifications from Twitter Bootstrap */ +.dl-horizontal { + *zoom: 1; +} +.dl-horizontal:before, +.dl-horizontal:after { + display: table; + content: ""; + line-height: 0; +} +.dl-horizontal:after { + clear: both; +} +.dl-horizontal dt { + float: left; + clear: left; + text-align: right; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.dl-horizontal dd { + float: left; + margin-left: .83em; + margin-bottom: 1em; +} + +@media (max-width: 767px) { + .dl-horizontal dt { + float: none; + clear: both; + width: auto; + text-align: left; + margin-bottom: .33em; + } + .dl-horizontal dd { + margin-left: 0; + margin-bottom: 1.5em; + } +} +/* END dl-horizontal borrowed from Twitter Bootstrap */ + + +/* AUTOCOMPLETE */ +.tt-hint { + visibility: hidden; +} + +.tt-dropdown-menu { + min-width: 160px; + width: 100%; + margin-top: 2px; + padding: 0; + background-color: #fff; + border: 1px solid #ccc; + *border-right-width: 2px; + *border-bottom-width: 2px; + -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; + height: 320px; + overflow-y: auto; +} +.tt-dropdown-menu h2 { + font-size: 1.2em; + padding: .83em; + margin-bottom: 0; + background-color: #014948; + color: #fff; +} +.tt-suggestion { + display: block; + padding: 1.25em .83em .83em; + margin: 0; + border-bottom: 1px solid #e0e0e0; +} + +.tt-suggestion.tt-cursor { + color: #fff; + background-color: #027b7a; + cursor: pointer; +} + +.tt-suggestion h5, +.tt-suggestion p { + line-height: 1.5; + margin: 0 0 .5em; + font-size: 1em; +} + +.twitter-typeahead, +.twitter-typeahead .tt-query, +.twitter-typeahead .tt-hint { + width: 100%; +} + +.tt-dataset-always .result-name { + font-size: .83em; +} + +#menu input, +#menu .tt-dropdown-menu { + width: 240px; +} +#profile .content-container { + padding-top: .5em; +} +#profile #query-topic-picker, +#profile #compare-place-picker { + margin-bottom: 2em; +} +#profile #query-topic-picker h2, +#profile #compare-place-picker h2 { + position: absolute; + line-height: 1.8em; + padding-left: .8em; +} +#profile #query-topic-picker .typeahead-container { + width: 100%; + padding-left: 12em; +} +#profile #compare-place-picker .typeahead-container { + width: 100%; + padding-left: 16em; +} +#query-topic-picker #topic-select, +#topic-picker #topic-select, +#compare-place-picker #compare-place-select { + width: 100%; +} +aside .search .tt-dropdown-menu { + font-size: .75em; + top: 3em !important; +} +aside .search .result-type { + float: none; + display: block; + margin: .25em 0 0; + font-size: .9em; +} +.result-name .result-type { + float: right; + margin: .17em .33em 0 1em; + font-size: .83em; + font-style: italic; +} + +/* !importants make me a little sad, but they're better than monkey-patching third-party code */ +.twitter-typeahead .tt-query, +.twitter-typeahead .tt-hint { + background-color: #fff !important; + margin-bottom: 0; +} +.autocomplete-widget .tt-dropdown-menu { + position: relative !important; + display: block !important; +} +#page-header-title .tt-dropdown-menu { + z-index: 1001 !important; +} +.autocomplete-widget input[disabled] { + background-color: #eee !important; +} + +.location-list { + list-style: none; + margin: 0; + padding: 0; + font-size: .9em; +} + +.location-list a { + text-decoration: none; + background-color: #fff; + display: block; + font-weight: bold; + padding: .67em .2em; +} +.location-list a:hover { + color: #f55b2c; +} +.location-list .identifier { + float: right; + font-size: .83em; + line-height: 1.9; + font-weight: normal; + font-style: italic; + margin-left: .67em; +} +.location-list a:hover .identifier { + color: #111; +} + +#body-spinner { + position: fixed; + top: 0; + left: 0; + margin: 65px 20px; + height: 20px; + width: 20px; + z-index: 100; +} + +.message { + margin: 0 0 2em; + padding: .67em 0; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} +.example, +.topic, +.message { + max-width: 960px; + margin-left: auto; + margin-right: auto; +} + +.message-error { + padding: .67em 1em; + background-color: #F5835D; +} +.message-help { + padding: .67em 1em; + background-color: #fff; + border: 1px solid #e0e4d4; +} +blockquote { + margin: 1em 0 2em; + padding: 1em; + background-color: #fff; + border: 1px solid #CAD0B5; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} + + +/* HELPERS */ +.centered { + text-align: center; +} +.smaller { + font-size: .9em; +} +.small { + font-size: .75em; +} +.strong { + font-weight: bold; +} +.normal { + font-weight: normal; +} +.bottom { + margin-bottom: 0; +} +.hidden, +.geolocate-only, +.narrow-only { + display: none; +} +.invisible { + display: none !important; + visibility: hidden; +} +.inactive, +.inactive a { + color: #aaa; +} +.clear { + clear: both; +} +.clearfix:before, +.clearfix:after { + content: " "; + display: table; +} +.clearfix:after { + clear: both; +} +.clearfix { + *zoom: 1; +} + +/* MEDIA QUERIES */ +@media only screen and (min-width: 1140px) { + .wrapper { + width: 1120px; + margin: 0 auto; + } +} /* END: @media only screen and (min-width: 1140px) */ +@media only screen and (max-width: 1139px) { + .chosen { + margin: 0 0 1em; + } + +} /* END: @media only screen and (max-width: 1139px) */ +@media only screen and (max-width: 768px) { + article, + article.column-full { + margin-bottom: 2em; + } + header.section-contents { + float: none; + width: auto; + margin: 0; + } + header.section-contents h1 { + padding-left: 1.2em; + margin-bottom: 0; + border-bottom: none; + -webkit-border-top-left-radius: 4px; + -moz-border-radius-topleft: 4px; + border-top-left-radius: 4px; + -webkit-border-top-right-radius: 4px; + -moz-border-radius-topright: 4px; + border-top-right-radius: 4px; + -webkit-border-bottom-left-radius: 0; + -moz-border-radius-bottomleft: 0; + border-bottom-left-radius: 0; + } + article .section-container { + margin-top: 0; + margin-left: 0; + border-top: none; + -webkit-border-top-right-radius: 0; + -moz-border-radius-topright: 0; + border-top-right-radius: 0; + } + section aside { + float: none; + margin-left: 0; + width: auto; + padding: 0; + } + aside .action-button { + display: inline-block; + } + #glossary aside { + float: right; + margin: 0 0 2em 2em; + padding: 1em; + width: 200px; + } + aside ul.sumlev-list { + margin: .33em 0; + } + aside ul.sumlev-list li { + float: left; + margin: 0 0 .67em .67em; + } + aside ul.sumlev-list li:last-child { + margin-right: 1em; + } + #chosen-table h2 { + padding-left: 0; + } + .column-full, + .column-golden-wide, + .column-golden-narrow { + float: none; + clear: both; + width: auto; + margin-right: 0; + } + .column-half .column-half { + float: left; + clear: none; + width: 47%; + margin-right: 3%; + } + .centered { + text-align: left; + } + #cover-map { + height: auto; + margin: 1em; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + } + #cover-map #slippy-map { + height: 200px; + } + #cover-profile { + margin: 200px 1em 0; + } + #cover-profile article { + background-color: inherit; + border: none; + width: 100%; + padding: 1em .25em; + margin-top: 0; + } + #homepage #profile h1, + #homepage #explore h1 { + float: none; + width: auto; + } + #homepage #geography-select { + font-size: 1.6em; + padding: .25em .5em 0; + width: 100%; + } + #homepage .input-wrapper { + padding-top: 0; + padding-left: 0; + margin-bottom: 1em; + } + #explore-topic-metadata p { + width: auto; + float: none; + text-align: left; + padding: 0 0 .25em 1em; + } + #homepage #geography-select-wrapper .action-button { + font-size: 1.1em; + } + .card { + font-size: 1em; + } + .topic aside img { + width: 300px; + } + #header-container h1 { + padding: 1em 0 0; + clear: both; + } +} /* END: @media only screen and (max-width: 768px) */ +@media only screen and (max-width: 640px) { + .tool-set { + float: none; + margin: .5em 0 1em; + } + #menu-toggle { + display: block; + } + #menu { + float: none; + display: block; + padding: 1em 0 .67em; + display: none; + } + #menu input { + margin-left: 0; + } + #menu input, + #menu .tt-dropdown-menu { + width: 100%; + } + #menu .tool-group { + width: 47%; + } + #menu .separator { + width: 6%; + } + #menu a.button i { + display: inherit; + } + #menu .tt-dropdown-menu { + height: 200px; + } + .section-container section, + .stat-row [class^="column-"] { + margin-bottom: 2em; + } + .stat-row [class^="column-"]:last-child { + margin-bottom: 0; + } + .column-half, + .column-two-thirds, + .column-third, + .column-three-quarters { + float: none; + clear: both; + width: auto; + margin-right: 0; + } + .column-quarter, + .column-third.card { + float: left; + clear: none; + width: 47%; + margin-right: 3%; + } + #page-footer ul.ul-icon-list { + text-align: left; + } + #page-footer li { + margin-bottom: .5em; + } + #geography-picker .column-quarter, + #query-geography-picker .column-quarter { + width: 100%; + font-size: 1.2em; + } + #geography-picker #sumlevs-standard, + #query-geography-picker #sumlevs-standard { + float: left; + padding-right: 3em; + margin-top: 0; + } + #geography-picker #sumlevs-schools, + #query-geography-picker #sumlevs-schools { + margin-top: 1.4em; + } + #profile #query-topic-picker .typeahead-container, + #profile #compare-place-picker .typeahead-container + { + display: block; + padding: 0 .75em; + } + #profile #query-topic-picker h2, + #profile #compare-place h2 + { + position: relative; + margin-bottom: .33em; + } + #geography-picker li, + #query-geography-picker li { + margin-bottom: .67em; + } + #query-topic .query-chosen, + #query-geographies .query-chosen, + #query-release .query-chosen, + #query-go .query-chosen { + margin-left: 6em; + } + #query-builder-bar [id^="query-"] { + margin-top: .5em; + } + #query-builder-bar section[id$="-picker"] { + padding: 2%; + } + #query-builder-bar .leader { + text-indent: .5em; + } + .topic aside img { + width: 250px; + } + .header-container { + padding-top: 1em; + } + #profile #compare-place-picker { + display: none; + } +} /* END: @media only screen and (max-width: 640px) */ +@media only screen and (max-width: 480px) { + .column-third, + .column-half .column-half, + .column-quarter, + .column-third.card { + float: none; + clear: both; + width: auto; + margin-right: 0; + } + h1.title { + font-size: 2em; + } + .stat .primary .value { + font-size: 1.8em; + } + .stat .primary .name { + font-size: 1.1em; + } + #menu { + padding-top: 0; + } + #menu .tool-group { + float: none; + width: 100%; + margin-right: 0; + margin-top: 1em; + } + #menu .separator { + display: none; + } + #cover-map #slippy-map { + height: 150px; + } + #cover-profile { + margin-top: 150px; + } + h1.article-header { + font-size: 2.2em; + } + #homepage #geography-select, + #homepage #topic-select { + font-size: 1.2em; + } + .callout h3 { + font-size: 21px; + } + #homepage .content-container { + padding: 2em 0 1em; + } + #homepage .content-container:first-child { + padding-top: 1em; + } + #geography-picker #sumlevs-standard { + float: none; + padding-right: .33em; + } + #geography-picker #sumlevs-schools { + margin-top: .33em; + } + #glossary aside { + float: none; + margin: 0; + padding: 1em; + width: auto; + } + .wide-only { + display: none; + } + .narrow-only { + display: inline; + } + .topic aside { + float: none; + display: block; + margin: 1em 0; + } + .topic aside img { + width: 100%; + } +} +@media only screen and (max-width: 360px) { + h1.article-header { + font-size: 2.2em; + } +} diff --git a/janaganana/static/css/charts.css b/janaganana/static/css/charts.css new file mode 100644 index 0000000..6ae0160 --- /dev/null +++ b/janaganana/static/css/charts.css @@ -0,0 +1,636 @@ +/* +uncomment for separate inclusion into embed iframes */ +@import url(https://fonts.googleapis.com/css?family=Lato:400,700); + +*, *:before, *:after { + -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; +} +.chart-title { + font-size: 13px; + font-weight: bold; + line-height: 1; + margin-bottom: 7px; +} +.chart-header { + line-height: 1; + margin: 0 0 .5em; +} +.chart-qualifier { + float: left; + display: block; + margin: 0 .5em; +} +.census-chart-embed { + position: relative; + display: block; + padding: 1em 0 0; + margin: 0; + overflow: hidden; + background-color: #fff; + line-height: 1.4; + font-size: 14px; + font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; +} +.census-chart-embed #census-chart { + padding: 0 1em; + position: relative; +} +.census-chart-embed .chart-title { + font-weight: normal; + font-size: 14px; + margin: 0 0 1em; +} +.census-chart-embed .action-links { + display: none; +} + +.column-chart, +.bar-chart, +.pie-chart { + font-size: 0.75em; + position: relative; + font-weight: 500; +} +.column-set, +.bar-set { + position: relative; +} +.grouped-column-chart .column-set { + margin-bottom: 2.5em; +} +.column { + position: absolute; + cursor: pointer; + bottom: 0; + -webkit-border-top-left-radius: 2px; + -moz-border-radius-topleft: 2px; + border-top-left-radius: 2px; + -webkit-border-top-right-radius: 2px; + -moz-border-radius-topright: 2px; + border-top-right-radius: 2px; +} +.column .area { + background-color: #014948; + -webkit-border-top-left-radius: 2px; + -moz-border-radius-topleft: 2px; + border-top-left-radius: 2px; + -webkit-border-top-right-radius: 2px; + -moz-border-radius-topright: 2px; + border-top-right-radius: 2px; + display: block; +} +.column:hover { + opacity: 1; +} + +.bar-set { + clear: both; + width: 100%; + margin-bottom: .33em; +} +.bar { + display: block; + cursor: pointer; + height: 2.5em; + padding: .5em; + margin-top: .75em; +} +.bar .area { + position: absolute; + left: 0; + top: 0; + height: 100%; + -webkit-border-top-right-radius: 2px; + -moz-border-radius-topright: 2px; + border-top-right-radius: 2px; + -webkit-border-bottom-right-radius: 2px; + -moz-border-radius-bottomright: 2px; + border-bottom-right-radius: 2px; +} +.bar .label { + position: absolute; + padding-left: .5em; +} +.bar-set h4.label { + margin: .25em 0; +} +.bar-group { + margin-bottom: 2em; +} +.bar-group .bar { + margin: .5em 0 0; +} + +/* force column and area graphs to print correctly + * see http://stackoverflow.com/questions/6553439/div-background-color-in-print-page-dont-work */ +@media print { + .bar .area, + .column .area { + box-shadow: inset 0 0 0 1000px grey; + } +} + +.column .label, +.column-group .label { + position: absolute; + width: 100%; + text-align: center; +} +.column .label, +.column:hover .label, +.bar .label, +.bar:hover .label { + color: #111; +} +.column .axis.label, +.column-group .axis.label { + font-weight: bold; + line-height: 1.1; +} +.column .axis.label.secondary, +.column-group .axis.label.secondary, +.bar-group .label.secondary { + font-weight: normal; +} +.pie-chart .legend { + list-style: none; + margin: 0; + padding: 0; +} +.pie-chart .legend-full-width { + margin: 1em 0 .5em; + width: 100%; +} +.legend-item { + cursor: pointer; + color: #888; + fill: #888; + line-height: 1.1; + margin-bottom: .33em; + clear: both; + padding-left: 15px; +} +.legend-full-width .legend-item { + width: 45%; + margin-right: 5%; + float: left; + clear: none; +} +.legend-item .swatch { + opacity: .8; + float: left; + margin-left: -15px; + height: 10px; + width: 10px; +} +.legend-item .label { +} +.legend-item:hover, +.legend-item.hovered { + opacity: 1; + color: #111; + fill: #111; +} + +.hovercard { + position: absolute; + text-align: center; + font-size: 13px; + background: #fff; + pointer-events: none; + z-index: 999; + font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif; + padding: .67em .83em; + border: solid 1px #777; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} +.chart .hovercard { + pointer-events: auto; +} +.census-chart-embed .hovercard { + padding: .5em .83em .83em; +} +.hovercard .label-title, +.hovercard .name, +.hovercard .value { + display: block; +} +.hovercard .label-title, +.hovercard .name { + font-weight: bold; +} +.hovercard .label-title { + margin-bottom: .5em; +} +.hovercard h3, +.hovercard h4, +.hovercard ul, +.hovercard .note { + text-align: left; + margin: 0 0 6px; +} +.hovercard .note { + line-height: 1.3; + font-size: .83em; + margin: .67em 0 0; +} +.hovercard ul, +.hovercard ol, +.flippant-back ul { + padding: 0; + line-height: 1.3; + font-size: .9em; + list-style: none; + margin-bottom: 1em; +} +.hovercard ol { + list-style: decimal; + padding-left: 1.5em; + line-height: 1.4; +} +.hovercard ul:last-child, +.hovercard li:last-child { + margin-bottom: 0; +} +.hovercard li, +.flippant-back li { + margin-bottom: .67em; +} +.hovercard .context { + margin-left: .5em; +} +.hovercard .inline-stat { + margin: 0 .5em; +} +.hovercard p { + font-size: .9em; +} + +.chart.highlighted { + margin: -.5em; + padding: .5em; +} + +.data-drawer { + padding: 1.5em 0 0; + overflow-x: auto; +} +.data-drawer th { + border-left: 5px solid #fff; +} +.data-drawer th:first-child { + border-left: none; +} +.data-drawer td.context { + vertical-align: bottom; +} +.data-drawer h3.chart-title { + padding-left: 8px; + margin-bottom: 6px; +} +.data-drawer .chart-get-data { + font-size: .75em; + float: left; + margin: 8px; + cursor: pointer; +} + +.embed-footer { + clear: both; + line-height: 15px; + margin: 0 1em; + padding-top: 1em; +} +.embed-footer a { + color: #68b3a3; + text-decoration: none; +} +.embed-footer a.title { + display: block; + font-size: 13px; + font-weight: bold; +} +.embed-footer a:hover { + color: #014948; + border-color: #68b3a3; +} +.embed-footer img { + height: 12px; + margin-right: 3px; + border: none; + vertical-align: baseline; +} +.embed-footer ul { + margin: 0; + padding: 0; + list-style: none; + float: right; +} +.embed-footer li { + list-style: none; + float: left; +} +.embed-footer li a { + display: block; + font-size: 10px; + padding: 0 5px; + border: 1px solid #a1cfc6; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} +.action-links { + float: right; + color: #68b3a3; +} +.action-links a { + cursor: pointer; + color: #68b3a3; +} +.action-links a:hover { + color: #014948; +} +.action-links span { + margin: 0 .33em; +} + +.box-header img { + height: 16px; +} +.box-header a { + font-size: 16px; +} + +.arc, +.arc-group path { + stroke: #fff; + cursor: pointer; +} +.arc, +.legend-item .swatch { + opacity: .8; +} +.arc.hovered, +.legend-item.hovered .swatch { + opacity: 1; +} + +.center-group .label-name, +.center-group .label-value { + display: block; + line-height: 1.1; + position: absolute; + text-align: center; +} +.center-group .label-name { + font-size: 1.1em; +} +.center-group .label-value { + font-weight: bold; + font-size: 2em; +} + +.flippant { + transform: perspective(500px) rotateY(0deg); + -webkit-transform: perspective(500px) rotateY(0deg); + -moz-transform: perspective(500px) rotateY(0deg); + /*z-index: 200;*/ +} + +.flippant-back { + -moz-transform: perspective(500px) rotateY(-180deg); + -webkit-transform: perspective(500px) rotateY(-180deg); + transform: perspective(500px) rotateY(-180deg); + height: 0; + /*z-index: 200;*/ +} + +.flippant, .flippant-back { + -moz-transform-style: preserve-3d; + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; + + -moz-backface-visibility: hidden; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; +} + +.flippant, .flipper { + -o-transition: all .2s ease-in-out; + -ms-transition: all .2s ease-in-out; + -moz-transition: all .2s ease-in-out; + -webkit-transition: all .2s ease-in-out; + transition: all .2s ease-in-out; +} + +.flippant.flipped { + -moz-transform: perspective(500px) rotateY(180deg); + -webkit-transform: perspective(500px) rotateY(180deg); + transform: perspective(500px) rotateY(180deg); +} + +.flippant-back.flipped { + padding-right: 1.5em; + -moz-transform: perspective(500px) rotateY(0deg); + -webkit-transform: perspective(500px) rotateY(0deg); + transform: perspective(500px) rotateY(0deg); +} + +.flippant-modal-light { + position: fixed; + margin: 0; + top: 0 !important; + left: 0; + width: 100%; + height: 100%; + padding: 1em; + background-color: #fff; +} +.flippant-back h3 { + line-height: 1; + margin: 0 0 .5em; +} +.flippant-back a { + color: #014948; +} + +section.coal-chart-container { + padding: 2em 0 4em; + margin-bottom: 0; +} +section.chart-divider { + margin: 1em 0 0; + padding: 0.6em 0.75em; + background-color: #f7f8f3; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + border-top: 1px solid #e8eadf; + border-bottom: 1px solid #cad0b5; +} +section.chart-divider h2 { + margin: 0; + line-height: 1; +} +.coal-chart-container h2 {} +.coal-chart { + list-style: none; + position: relative; + height: 10px; + border-bottom: 1px solid #e5e5e5; + margin: 0 1.5em; +} +.coal-chart li { + display: inline; + position: absolute; + bottom: -6px; + margin-left: -5px; +} +.coal-chart li .point { + display: block; + cursor: pointer; + position: relative; + height: 11px; + width: 11px; + color: #222; + background-color: #eff1e9; + border: 1px solid #acb58c; + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + border-radius: 50%; +} +.coal-chart li .point:hover, +.coal-chart li .point.hovered { + background-color: #42472e; + border-color: #42472e; + z-index: 3; +} +.coal-chart li .point.selected { + background-color: #027b7a; + border-color: #027b7a; + z-index: 2; +} +.coal-chart li .pointz.selected.hovered { + z-index: 4; +} +.coal-chart li a .hovercard { + position: absolute; + width: 15em; + bottom: 1.5em; + right: -7.5em; + font-size: .83em; + line-height: 1.3; + text-align: center; + display: none; + padding: .5em; + border: 1px solid #e0e0e0; +} +.coal-chart li .point:hover .hovercard, +.coal-chart li .point.hovered .hovercard, +.coal-chart li .point.selected .hovercard { + display: block; + background-color: #fff; +} +.coal-chart li.tick-mark { + height: 26px; + bottom: -13px; + margin-left: 0; + border-left: 1px solid #d5d5d5; +} +.coal-chart li.tick-mark.tick-mark-min { + left: 0; +} +.coal-chart li.tick-mark.tick-mark-max { + left: 100%; +} +.coal-chart li.tick-mark span { + position: relative; + font-size: .75em; + display: block; + color: #606060; + padding: 0; + margin-top: 26px; + margin-left: -50%; + white-space: nowrap; +} +.coal-chart li.tick-mark-min span { + margin-left: -1px; +} +.coal-chart li.tick-mark-max span { + margin-left: -99%; +} + +@media only screen and (max-width: 640px) { + .chart-qualifier, + .action-links { + float: left; + margin: 1em 0 0; + display: block; + position: relative; + clear: both; + } + .chart-get-data, + .action-links a { + display: inline-block; + } + .column-chart, + .bar-chart, + .pie-chart { + padding-bottom: 3em; + } +} +@media only screen and (max-width: 480px) { + .chart .hovercard { + /* an !important is better than recalculating + every time the hover listener fires */ + left: -1% !important; + width: 100% !important; + } +} +@media only screen and (max-width: 291px) { + .census-chart-embed .pie-chart { + margin-bottom: 3em !important; + } +} +@media only screen and (max-width: 260px) { + .embed-footer ul { + display: none; + } +} + +.clearfix:before, +.clearfix:after { + content: " "; + display: table; +} + +.clearfix:after { + clear: both; +} + +.clearfix { + *zoom: 1; +} + +svg text { + font-size: 1em; +} +.x.axis text, .axis { + shape-rendering: crispEdges; +} +.x.axis line, +.x.axis path, +.y.axis path { + display: none; +} +.y.axis text { + font-weight: bold; +} +.y.axis text { + fill: #c5c5c5; +} +.y.axis line { + stroke: #f5f5f5; +} diff --git a/janaganana/static/css/wazimap.css b/janaganana/static/css/wazimap.css new file mode 100644 index 0000000..d40e37f --- /dev/null +++ b/janaganana/static/css/wazimap.css @@ -0,0 +1,183 @@ +#homepage #slippy-map { + display: none; +} + +@media only screen and (min-width: 768px) { + #homepage #slippy-map { + display: block; + width: 100%; + height: 35em; + position: relative; + } +} + +#homepage #explore-topic-place-picker, +#homepage #explore-topic-place-picker-parent { + display: none; +} + +#examples span.zoom-in, #examples span.zoom-out { + background-color: #fff; + border-bottom: 1px solid #ccc; + width: 23px; + height: 23px; + display: inline-block; + text-align: center; + text-decoration: none; + color: black; + box-shadow: 0 1px 7px rgba(0,0,0,0.65); + -webkit-border-radius: 4px; + border-radius: 4px; +} +#page-header-title .title img { + margin: 0 3px 0 0; + vertical-align: bottom; + height: 25px; +} +#page-header-title .header-buttons { + float: right; +} +#page-header-title .fa-twitter { + margin-right: 5px; +} +.mma-logo { + height: 21px; + padding: 2px; + background-color: white; + vertical-align: baseline; +} +#page-header-title .mma-logo { + margin: 5px 3px 0px 0px; +} +#page-header-title .tool-group { + margin-left: 5px; +} +.box-header img { + vertical-align: middle; +} +#page-footer ul.ul-icon-list { + margin-bottom: 30px; +} + +#how-to .content-container { + padding: 2.5em 0; +} + +#how-to h1.article-header { + font-size: 3em; + margin-bottom: .25em; +} + +.chart .action-links a { + text-decoration: none; +} + +.data-drawer .tool-group { + float: right; + margin-right: 0px; +} + +.data-drawer h3.chart-title { + margin-top: 6px; +} + +.tool-group a i { + margin-left: 4px; +} + +header.section-contents h1 a { + float: none; + display: block; +} + +.hovercard .context, +.grid .context { + display: none; +} +.grid .value { + padding-right: 0em; +} + +#about img { + margin: 0px 0px 20px 20px; +} + +@media only screen and (max-width: 768px) { + #share-this-page { + display: none; + } + + #how-to h1.article-header { + font-size: 2.5em; + } + + #how-to .content-container { + padding: 2em 0 1em; + } + + #how-to .content-container:first-child { + padding-top: 1em; + } + + #landing-slippy-map { + display: none; + visibility: hidden; + } + + #cover-map { + margin: 0px; + } + + #profile .content-container { + margin: 0px; + } + + #profile .explain { + padding: 0 1.5em; + } +} + +@media only screen and (max-width: 360px) { + #how-to h1.article-header { + font-size: 2.2em; + } +} + +.profile-head2head-view #page-header-title { + width: 100%; + padding-left: 1.2em; + padding-right: 1.2em; +} + +.head2head-wrapper { + background-color: #e0e4d4; +} + +.profile-head2head-view #uvTab { + display: none; +} + +.profile-head2head-view iframe { + float: left; + width: 50%; + height: 10000px; + + padding: 0px; + margin: 0px; + border: 0px; + + overflow-y: hidden; +} + +.profile-head2head-view .frame-right { + left: 50%; + + border-left: 5px solid #f7f8f3; +} + +.profile-head2head-frame #page-header, +.profile-head2head-frame #page-footer, +.profile-head2head-frame #compare-place-picker, +.profile-head2head-frame #uvTab { + display: none; +} diff --git a/janaganana/static/js/comparisons.js b/janaganana/static/js/comparisons.js index a1b1476..2cd1684 100644 --- a/janaganana/static/js/comparisons.js +++ b/janaganana/static/js/comparisons.js @@ -18,7 +18,7 @@ This expects to have Underscore, D3 and jQuery. function Comparison(options) { - var API_URL = typeof(CR_API_URL) != 'undefined' ? CR_API_URL : API_URL + 'http://api.censusreporter.org'; + var API_URL = typeof(CR_API_URL) != 'undefined' ? CR_API_URL : API_URL + 'http://api.censusreporter.org'; var comparison = { tableSearchAPI: '/api/1.0/table', @@ -34,6 +34,7 @@ function Comparison(options) { comparison.geoIDs = options.geoIDs; comparison.primaryGeoID = options.primaryGeoID || ((comparison.geoIDs.length == 1) ? comparison.geoIDs[0] : null); comparison.chosenSumlevAncestorList = ''; + comparison.geoVersion = options.geoVersion || GEOMETRY_DEFAULT_GEO_VERSION; // jQuery things comparison.$topicSelect = $(options.topicSelect); comparison.$topicSelectContainer = $(options.topicSelectContainer); @@ -44,7 +45,7 @@ function Comparison(options) { comparison.headerContainer = d3.select(options.displayHeader); comparison.dataContainer = d3.select(options.dataContainer); comparison.aside = d3.select('aside'); - + // add the "change table" widget and listener comparison.makeTopicSelectWidget(); @@ -128,7 +129,7 @@ function Comparison(options) { // BEGIN THE MAP-SPECIFIC THINGS comparison.makeMapDisplay = function() { - var API_URL = typeof(CR_API_URL) != 'undefined' ? CR_API_URL : API_URL + 'http://api.censusreporter.org'; + var API_URL = typeof(CR_API_URL) != 'undefined' ? CR_API_URL : API_URL + 'http://api.censusreporter.org'; // some extra setup for map view // for triggering overflow-y: visible on table search @@ -150,7 +151,7 @@ function Comparison(options) { } else { comparison.chosenColumn = comparison.columnKeys[0]; } - + var allowMapDrag = (browserWidth > 480) ? true : false; var mapDataLoaded = function(features) { comparison.geoFeatures = features; @@ -174,12 +175,12 @@ function Comparison(options) { } // add imagery - L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { + L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA', subdomains: 'abc', maxZoom: 17 }).addTo(comparison.map); - + comparison.showChoropleth(); comparison.sumlevSelector.fadeIn(); @@ -188,7 +189,7 @@ function Comparison(options) { }; comparison.loadMapData(mapDataLoaded); - + comparison.changeMapControls(); comparison.addGeographyCompareTools(); if (!!comparison.denominatorColumn) { @@ -437,7 +438,9 @@ function Comparison(options) { pctLabel += '±' + valFmt(thisPctMOE, 'percentage') + ''; pctLabel += closeParen + ''; } - if (!!thisValue) { + if (thisValue === null) { + valLabel = 'N/A'; + } else if (!!thisValue) { var openParen = (thisIsPct) ? '(' : '', closeParen = (thisIsPct) ? ')' : ''; valLabel = '' + openParen + valFmt(thisValue, comparison.statType); @@ -468,11 +471,11 @@ function Comparison(options) { var viewGeoData = _.filter(comparison.geoFeatures, function(g) { var thisSumlev = g.properties.geoid.split('-')[0]; return thisSumlev == comparison.chosenSumlev; - }) + }); var values = d3.values(viewGeoData).map(function(d) { return d.properties.data[comparison.valueType][comparison.chosenColumn]; - }); + }).filter(function(d) { return d !== null; }); // create the legend @@ -492,11 +495,11 @@ function Comparison(options) { comparison.legendContainer.selectAll('li') .data(colors) .enter().append('li') - .style('background-color', function(d) { if (d) { return d }}) - .classed('empty', function(d) { return (d == null) }) + .style('background-color', function(d) { if (d) { return d; }}) + .classed('empty', function(d) { return (d === null); }) .append('span') .classed('quantile-label', true); - } + }; buildLegend(quintileColors); // add the actual label values @@ -509,16 +512,16 @@ function Comparison(options) { if (comparison.valueType != 'percentage') { precision = (max <= 1) ? 2 : (max <= 10) ? 1 : 0; } - + labelData.unshift(min); labelData.push(max); - + var legendLabels = d3.select("#map-legend") .selectAll("span") .data(labelData) .text(function(d){ - if (typeof(d) != 'undefined') { - if (comparison.valueType == 'percentage') { + if (typeof(d) != 'undefined' && d != null) { + if (comparison.valueType == 'percentage' || comparison.statType == 'percentage') { return roundNumber(d, precision) + '%'; } else { var prefix = (comparison.statType == 'dollar') ? '$' : ''; @@ -528,10 +531,9 @@ function Comparison(options) { }); var styleFeature = function(feature) { + var val = feature.properties.data[comparison.valueType][comparison.chosenColumn]; return { - fillColor: comparison.colors[ - comparison.quantize(feature.properties.data[comparison.valueType][comparison.chosenColumn]) - ], + fillColor: val === null ? 'white' : comparison.colors[comparison.quantize(val)], weight: 1.0, opacity: 1.0, color: '#fff', @@ -636,7 +638,10 @@ function Comparison(options) { gridRowCol = ''; // add raw numbers - if (thisValue >= 0) { + if (thisValue === null) { + gridRowCol += 'N/A'; + gridRowCol += 'N/A'; + } else if (thisValue >= 0) { gridRowCol += '' + valFmt(thisValue, thisFmt) + ''; gridRowCol += '±' + valFmt(thisValueMOE, thisFmt) + ''; } @@ -817,6 +822,7 @@ function Comparison(options) { var chartPoints = chart.selectAll('.chart-point') .data(d3.values(v.geographies)) .enter().append('li') + .filter(function(d) { return d[comparison.valueType] !== null; }) .classed('chart-point', true) .style('left', function(d) { return roundNumber(v.xScale(d[comparison.valueType]), 1)+'%'; @@ -858,7 +864,7 @@ function Comparison(options) { comparison.makeDistributionLabels = function(points) { var chartPointLabels = points.append('span') .classed('hovercard', true); - + chartPointLabels.append('a') .classed('label-title', true) .attr('href', function(d) { return '/profiles/' + d.geoID + '/'; }) @@ -1086,7 +1092,7 @@ function Comparison(options) { d3.select('#comparison-add').remove(); comparison.geoSelectContainer = comparison.aside.append('div') - .attr('class', 'aside-block search hidden-ci') + .attr('class', 'aside-block search hidden') .attr('id', 'comparison-add'); comparison.geoSelectContainer.append('a') @@ -1132,7 +1138,7 @@ function Comparison(options) { displayKey: 'full_name', source: comparison.geoSelectEngine.ttAdapter(), templates: { - header: '

Geographies

', + header: '

Geographies

', suggestion: Handlebars.compile( '

{{full_name}}{{geo_level}}

' ) @@ -1199,7 +1205,7 @@ function Comparison(options) { displayKey: 'full_name', source: comparison.geoSelectEngine.ttAdapter(), templates: { - header: '

Geographies

', + header: '

Geographies

', suggestion: Handlebars.compile( '

{{full_name}}{{sumlev_name}}

' ) @@ -1230,7 +1236,7 @@ function Comparison(options) { if (!!comparison.primaryGeoID && !_.isEmpty(sumlevMap[comparison.thisSumlev].ancestors)) { var parentGeoAPI = comparison.rootGeoAPI + comparison.primaryGeoID + '/parents', parentOptionsContainer = comparison.aside.append('div') - .attr('class', 'aside-block hidden-ci') + .attr('class', 'aside-block hidden') .attr('id', 'comparison-parents'); $.getJSON(parentGeoAPI) @@ -1575,6 +1581,10 @@ function Comparison(options) { } comparison.getStatType = function() { + if (comparison.table.stat_type == 'percentage') { + return 'percentage'; + } + var title = comparison.table.title.toLowerCase(); if (title.indexOf('dollars') !== -1 && title.indexOf('percent') == -1) { @@ -1702,7 +1712,7 @@ function Comparison(options) { ga('send', 'event', category, action, label); } } - + comparison.addNumbertoggles = function(redrawFunction) { d3.select('#number-toggles').remove(); var toggleText = (comparison.valueType == 'estimate') ? 'Switch to percentages' : 'Switch to totals', @@ -1723,9 +1733,8 @@ function Comparison(options) { comparison.loadMapData = function(cb) { GeometryLoader.loadGeometryForComparison(comparison, cb); } - + // ready, set, go comparison.init(options); return comparison; } - diff --git a/janaganana/static/js/embed.chart.frame.js b/janaganana/static/js/embed.chart.frame.js index 020e35b..a17ae57 100644 --- a/janaganana/static/js/embed.chart.frame.js +++ b/janaganana/static/js/embed.chart.frame.js @@ -23,11 +23,13 @@ function makeEmbedFrame() { embedFrame.params.chartDataID = embedFrame.params.chartDataID.split('-'); embedFrame.params.chartDataYearDir = (!!embedFrame.params.dataYear) ? embedFrame.params.dataYear+'/' : ''; embedFrame.dataSource = '/profiles/'+embedFrame.params.geoID+'.json'; + if (embedFrame.params.geoVersion) embedFrame.dataSource += '?geo_version=' + embedFrame.params.geoVersion; + // avoid css media-query caching issues with multiple embeds on same page - $('#chart-styles').attr('href','css/charts.css?'+embedFrame.parentContainerID) + $('#chart-styles').attr('href','css/charts.css?'+embedFrame.parentContainerID); // allow embedders to inject their own stylesheet - if (embedFrame.params['stylesheet']) { + if (embedFrame.params.stylesheet) { $('').attr('href', embedFrame.params.stylesheet).appendTo($('head')); } @@ -109,7 +111,7 @@ function makeEmbedFrame() { .classed('title', true) .attr('href', SITE_URL + '/profiles/' + embedFrame.params.geoID + '/') .attr('target', '_blank') - .html(' ' + SITE_NAME); + .html(' ' + SITE_NAME); } embedFrame.addChartListeners = function() { diff --git a/janaganana/static/js/maps_static.js b/janaganana/static/js/maps_static.js index 59a103f..93c05ab 100644 --- a/janaganana/static/js/maps_static.js +++ b/janaganana/static/js/maps_static.js @@ -20,7 +20,7 @@ function StaticGeometryLoader(geometry_urls) { * callback with an object mapping each geo-id to a GeoJSON object. */ this.loadGeometryForComparison = function(comparison, success) { - this.loadGeometryForGeoIds(comparison.dataGeoIDs, success); + this.loadGeometryForGeoIds(comparison.dataGeoIDs, comparison.geoVersion, success); }; /** @@ -28,7 +28,7 @@ function StaticGeometryLoader(geometry_urls) { * and calls the +success+ callback with an object mapping * each geo-id to a GeoJSON object. */ - this.loadGeometryForGeoIds = function(geo_ids, success) { + this.loadGeometryForGeoIds = function(geo_ids, geo_version, success) { var by_level = {}; _.each(geo_ids, function(geo_id) { @@ -42,12 +42,12 @@ function StaticGeometryLoader(geometry_urls) { }); // load the levels we need - self.loadLevels(_.keys(by_level), function() { + self.loadLevels(_.keys(by_level), geo_version, function() { var features = {}; _.each(by_level, function(geo_ids, level) { _.each(geo_ids, function(geo_id) { - features[geo_id] = self.geometry[level][geo_id]; + features[geo_id] = self.geometry[geo_version][level][geo_id]; }); }); @@ -55,16 +55,16 @@ function StaticGeometryLoader(geometry_urls) { }); }; - this.loadGeometryForLevel = function(level, success) { - self.loadLevels([level], function() { - success({features: _.values(self.geometry[level])}); + this.loadGeometryForLevel = function(level, geo_version, success) { + self.loadLevels([level], geo_version, function() { + success({features: _.values(self.geometry[geo_version][level])}); }); }; /** * Load the geometry data for +levels+ and then call +success+. */ - this.loadLevels = function(levels, success) { + this.loadLevels = function(levels, geo_version, success) { var counter = levels.length; function loaded(level) { @@ -75,17 +75,18 @@ function StaticGeometryLoader(geometry_urls) { } _.each(levels, function(level) { - if (self.geometry[level]) { + if (self.geometry[geo_version] && self.geometry[geo_version][level]) { // already have it loaded(level); } else { // load it remotely - d3.json(self.geometry_urls[level], function(error, json) { + d3.json(self.geometry_urls[geo_version][level], function(error, json) { var features; if (error) return console.warn(error); if (json) { - self.geometry[level] = {}; + if (!self.geometry[geo_version]) self.geometry[geo_version] = {}; + self.geometry[geo_version][level] = {}; if (json.type == 'Topology') { // topojson -> geojson @@ -100,7 +101,7 @@ function StaticGeometryLoader(geometry_urls) { // stash them _.each(features, function(feature) { - self.geometry[level][feature.properties.geoid] = feature; + self.geometry[geo_version][level][feature.properties.geoid] = feature; }); } diff --git a/janaganana/static/js/profile_map.js b/janaganana/static/js/profile_map.js index bbb2c3a..3ad6e34 100644 --- a/janaganana/static/js/profile_map.js +++ b/janaganana/static/js/profile_map.js @@ -31,7 +31,7 @@ var ProfileMaps = function() { this.drawAllFeatures(); }; - this.drawMapForHomepage = function(geo_level, centre, zoom) { + this.drawMapForHomepage = function(geo_level, geo_version, centre, zoom) { // draw a homepage map, but only for big displays if (browserWidth < 768 || $('#slippy-map').length === 0) return; @@ -42,7 +42,7 @@ var ProfileMaps = function() { self.map.setView(centre, zoom); } - GeometryLoader.loadGeometryForLevel(geo_level, function(features) { + GeometryLoader.loadGeometryForLevel(geo_level, geo_version, function(features) { var layer = self.drawFeatures(features); if (!centre) { self.map.fitBounds(layer.getBounds()); @@ -82,14 +82,12 @@ var ProfileMaps = function() { this.drawAllFeatures = function() { var geo_level = this.geo.this.geo_level; var geo_code = this.geo.this.geo_code; + var geo_version = this.geo.this.version; var osm_area_id = this.geo.this.osm_area_id; var child_level = this.geo.this.child_level; - if (geo_code == 550 || geo_code == 552) - console.log("level: ", geo_level, "code: ", geo_code); - // load all map shapes for this level - GeometryLoader.loadGeometryForLevel(geo_level, function(features) { + GeometryLoader.loadGeometryForLevel(geo_level, geo_version, function(features) { // split into this geo, and everything else var groups = _.partition(features.features, function(f) { return f.properties.code == geo_code; @@ -108,7 +106,7 @@ var ProfileMaps = function() { // load shapes at the child level, if any if (child_level) { - GeometryLoader.loadGeometryForLevel(child_level, function(features) { + GeometryLoader.loadGeometryForLevel(child_level, geo_version, function(features) { self.drawFeatures(features); }); } @@ -123,9 +121,6 @@ var ProfileMaps = function() { if (browserWidth > 768) { var z; - - /* disable zoom calculation till we identify the root cause */ - /* for(z = 16; z > 2; z--) { var swPix = this.map.project(objBounds.getSouthWest(), z), nePix = this.map.project(objBounds.getNorthEast(), z), @@ -135,17 +130,7 @@ var ProfileMaps = function() { break; } } - */ - - if (feature.properties.level === "country") - z = 4; - else if (feature.properties.level === "state") - z = 6; - else if (feature.properties.level === "district") - z = 9; - else - z = 4; - + this.map.setView(layer.getBounds().getCenter(), z); this.map.panBy([-270, 0], {animate: false}); } else { @@ -154,14 +139,11 @@ var ProfileMaps = function() { }; this.drawFeatures = function(features) { - function capitalize(str) { - return str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();}); - } // draw all others return L.geoJson(features, { style: this.layerStyle, onEachFeature: function(feature, layer) { - layer.bindLabel(capitalize(feature.properties.name), {direction: 'auto'}); + layer.bindLabel(feature.properties.name, {direction: 'auto'}); layer.on('mouseover', function() { layer.setStyle(self.hoverStyle); diff --git a/janaganana/static/js/table.detail.js b/janaganana/static/js/table.detail.js index 0859609..cf92cec 100644 --- a/janaganana/static/js/table.detail.js +++ b/janaganana/static/js/table.detail.js @@ -203,7 +203,7 @@ function Table(options) { displayKey: 'full_name', source: table.placeSelectEngine.ttAdapter(), templates: { - header: '

Geographies

', + header: '

Geographies

', suggestion: Handlebars.compile( '

{{full_name}}{{sumlev_name}}

' ) @@ -247,7 +247,7 @@ function Table(options) { displayKey: 'full_name', source: table.placeSelectEngine.ttAdapter(), templates: { - header: '

Geographies

', + header: '

Geographies

', suggestion: Handlebars.compile( '

{{full_name}}{{sumlev_name}}

' ) @@ -295,4 +295,3 @@ function Table(options) { table.init(options); return table; } - diff --git a/janaganana/tables.py b/janaganana/tables.py index 063daa1..8baa8a0 100644 --- a/janaganana/tables.py +++ b/janaganana/tables.py @@ -3,18 +3,18 @@ # Define our tables so the data API can discover them. # Household tables -FieldTable(['rural population'], universe='Population', table_per_level=False) +FieldTable(['rural population'], universe='Population') -FieldTable(['area', 'sex'], universe='Population', table_per_level=False) +FieldTable(['area', 'sex'], universe='Population') -FieldTable(['area', 'sex', 'literacy'], universe='Population', table_per_level=False) +FieldTable(['area', 'sex', 'literacy'], universe='Population') -FieldTable(['religion', 'area', 'sex'], universe='Religion', table_per_level=False) +FieldTable(['religion', 'area', 'sex'], universe='Religion') -FieldTable(['age', 'area', 'sex'], universe='Age', table_per_level=False) +FieldTable(['age', 'area', 'sex'], universe='Age') -FieldTable(['education', 'area', 'sex'], universe='Education', table_per_level=False) +FieldTable(['education', 'area', 'sex'], universe='Education') -FieldTable(['maritalstatus', 'area', 'sex'], universe='Relation', table_per_level=False) +FieldTable(['maritalstatus', 'area', 'sex'], universe='Relation') -FieldTable(['workers', 'area', 'workerssex'], universe='Workers', table_per_level=False) +FieldTable(['workers', 'area', 'workerssex'], universe='Workers') diff --git a/janaganana/templates/homepage.html b/janaganana/templates/homepage.html index 227ec3a..5fcbab0 100644 --- a/janaganana/templates/homepage.html +++ b/janaganana/templates/homepage.html @@ -1,4 +1,4 @@ -{% extends '_base.html' %}{% load humanize partition staticfiles %} +{% extends '_base.html' %}{% load humanize partition staticfiles jsonify %} {% block head_title %}{{ block.super }}: Making Census Data Easy to Use{% endblock %} {% block head_meta_description %}{{ WAZIMAP.name }} provides useful facts about places in {{ root_geo.name }}. Compare places using tables and maps, download data, and embed charts on your site!{% endblock %} @@ -158,7 +158,7 @@

var maps = new ProfileMaps(); var centre = {% if WAZIMAP.map_centre %}{{ WAZIMAP.map_centre }}{% else %}null{% endif %}; var zoom = {% if WAZIMAP.map_zoom %}{{ WAZIMAP.map_zoom }}{% else %}null{% endif %}; -maps.drawMapForHomepage('{{ geo_data.first_child_level }}', centre, zoom); +maps.drawMapForHomepage({{ geo_data.first_child_level|jsonify|safe }}, {{ WAZIMAP.default_geo_version|jsonify|safe }}, centre, zoom); {% endblock %} diff --git a/janaganana/wsgi.py b/janaganana/wsgi.py new file mode 100644 index 0000000..87e3430 --- /dev/null +++ b/janaganana/wsgi.py @@ -0,0 +1,7 @@ +import os + +from django.core.wsgi import get_wsgi_application + +os.environ.setdefault("DJANGO_SETTINGS_MODULE", "janaganana.settings") + +application = get_wsgi_application() diff --git a/requirements.txt b/requirements.txt index 0001d92..31ea61c 100644 --- a/requirements.txt +++ b/requirements.txt @@ -1,54 +1,11 @@ -awsebcli==3.8.3 -blessed==1.9.5 -boto==2.43.0 -botocore==1.4.71 -cement==2.8.2 -colorama==0.3.7 -Cython==0.24.1 -dj-database-url==0.4.1 Django==1.9.10 -django-cors-headers==1.2.2 -django-pipeline==1.6.9 -docker-py==1.7.2 -dockerpty==0.4.1 -docopt==0.6.2 -docutils==0.12 -ecdsa==0.13 -Fabric==1.13.1 -futures==3.0.5 -GDAL==1.11.2 -geojson==1.3.3 -geojsonio==0.0.2 -gevent==1.1.2 -github3.py==0.9.3 -greenlet==0.4.10 -gunicorn==18.0 -jmespath==0.9.0 -meld3==1.0.2 -newrelic==2.40.0.34 -numpy==1.11.2 -pandas==0.19.0 -paramiko==1.17.2 -pathspec==0.3.4 -psycopg2==2.6.2 -pycrypto==2.6.1 -python-dateutil==2.5.3 -python-decouple==3.0 -python-memcached==1.58 -pytz==2016.7 -PyYAML==3.12 -requests==2.9.1 -semantic-version==2.5.0 -Shapely==1.5.17 -six==1.8.0 -SQLAlchemy==1.1.2 -supervisor==3.3.1 -texttable==0.8.6 -unicodecsv==0.14.1 -uritemplate==3.0.0 -uritemplate.py==3.0.2 -wazimap==0.5.2 -wcwidth==0.1.7 -websocket-client==0.37.0 -whitenoise==3.2.2 -xlrd==1.0.0 +numpy==1.14.4 +Shapely==1.6.4.post1 +wazimap==1.1.1 +gevent==1.3.3 +django-leaflet==0.24.0 +django-jsonify==0.3.0 +futures==3.2.0 +psycopg2==2.7.4 +python-decouple==3.1 + diff --git a/sql/age_area_sex.sql b/sql/age_area_sex.sql index 23e7090..e53e83a 100644 --- a/sql/age_area_sex.sql +++ b/sql/age_area_sex.sql @@ -25,6 +25,7 @@ SET default_with_oids = false; CREATE TABLE age_area_sex ( geo_level character varying(15) NOT NULL, geo_code character varying(10) NOT NULL, + geo_version character varying(100) DEFAULT '2011'::character varying NOT NULL, age character varying(40) NOT NULL, area character varying(10) NOT NULL, sex character varying(10) NOT NULL, @@ -47803,7 +47804,7 @@ IN,country,Age not stated,Urban,Male,839461 -- ALTER TABLE ONLY age_area_sex - ADD CONSTRAINT age_area_sex_pkey PRIMARY KEY (geo_level, geo_code, area, age, sex); + ADD CONSTRAINT age_area_sex_pkey PRIMARY KEY (geo_level, geo_code, geo_version, area, age, sex); -- diff --git a/sql/education_area_sex.sql b/sql/education_area_sex.sql index e1aacd7..3493421 100644 --- a/sql/education_area_sex.sql +++ b/sql/education_area_sex.sql @@ -25,6 +25,7 @@ SET default_with_oids = false; CREATE TABLE area_education_sex ( geo_level character varying(15) NOT NULL, geo_code character varying(10) NOT NULL, + geo_version character varying(100) DEFAULT '2011'::character varying NOT NULL, area character varying(10) NOT NULL, sex character varying(10) NOT NULL, education character varying(50) NOT NULL, @@ -27087,7 +27088,7 @@ IN,country,Urban,Female,Unclassified,462682 -- ALTER TABLE ONLY area_education_sex - ADD CONSTRAINT area_education_sex_pkey PRIMARY KEY (geo_level, geo_code, area, education, sex); + ADD CONSTRAINT area_education_sex_pkey PRIMARY KEY (geo_level, geo_code, geo_version, area, education, sex); -- diff --git a/sql/geography.sql b/sql/geography.sql index c34fa37..a3c0cca 100644 --- a/sql/geography.sql +++ b/sql/geography.sql @@ -11,6 +11,7 @@ SET client_min_messages = warning; SET search_path = public, pg_catalog; +DROP INDEX IF EXISTS public.wazimap_geography_version_01953818_like; DROP INDEX IF EXISTS public.wazimap_geography_name_36b79089_like; DROP INDEX IF EXISTS public.wazimap_geography_2fc6351a; DROP INDEX IF EXISTS public.wazimap_geography_84cdc76c; @@ -40,7 +41,8 @@ CREATE TABLE wazimap_geography ( square_kms double precision, parent_level character varying(15), parent_code character varying(10), - long_name character varying(100) + long_name character varying(100), + version character varying(100) DEFAULT '2011'::character varying NOT NULL ); @@ -759,7 +761,7 @@ SELECT pg_catalog.setval('wazimap_geography_id_seq', 1, false); -- ALTER TABLE ONLY wazimap_geography - ADD CONSTRAINT wazimap_geography_geo_level_9a5128d2_uniq UNIQUE (geo_level, geo_code); + ADD CONSTRAINT wazimap_geography_geo_level_9a5128d2_uniq UNIQUE (geo_level, geo_code , version); -- @@ -770,7 +772,13 @@ ALTER TABLE ONLY wazimap_geography ADD CONSTRAINT wazimap_geography_pkey PRIMARY KEY (id); -- --- Name: wazimap_geography_2fc6351a; Type: INDEX; Schema: public; Owner: factlyin; Tablespace: +-- Name: wazimap_geography_2af72f10; Type: INDEX; Schema: public; Owner: - +-- + +CREATE INDEX wazimap_geography_2af72f10 ON wazimap_geography USING btree (version); + +-- +-- Name: wazimap_geography_2fc6351a; Type: INDEX; Schema: public; Owner: wazimap; Tablespace: -- CREATE INDEX wazimap_geography_2fc6351a ON wazimap_geography USING btree (long_name); @@ -799,4 +807,3 @@ CREATE INDEX wazimap_geography_name_36b79089_like ON wazimap_geography USING btr -- -- PostgreSQL database dump complete -- - diff --git a/sql/maritalstatus_area_sex.sql b/sql/maritalstatus_area_sex.sql index 9cb18ac..d15b0b1 100644 --- a/sql/maritalstatus_area_sex.sql +++ b/sql/maritalstatus_area_sex.sql @@ -25,6 +25,7 @@ SET default_with_oids = false; CREATE TABLE area_maritalstatus_sex ( geo_level character varying(15) NOT NULL, geo_code character varying(10) NOT NULL, + geo_version character varying(100) DEFAULT '2011'::character varying NOT NULL, area character varying(10) NOT NULL, sex character varying(10) NOT NULL, maritalstatus character varying(50) NOT NULL, @@ -16271,7 +16272,7 @@ IN,country,Urban,Female,unspecified,0 -- ALTER TABLE ONLY area_maritalstatus_sex - ADD CONSTRAINT area_maritalstatus_sex_pkey PRIMARY KEY (geo_level, geo_code, area, maritalstatus, sex); + ADD CONSTRAINT area_maritalstatus_sex_pkey PRIMARY KEY (geo_level, geo_code, geo_version, area, maritalstatus, sex); -- diff --git a/sql/pca_area_sex_literecy_type.sql b/sql/pca_area_sex_literecy_type.sql index 9da66b9..35df280 100644 --- a/sql/pca_area_sex_literecy_type.sql +++ b/sql/pca_area_sex_literecy_type.sql @@ -25,6 +25,7 @@ SET default_with_oids = false; CREATE TABLE area_literacy_sex ( geo_level character varying(15) NOT NULL, geo_code character varying(10) NOT NULL, + geo_version character varying(100) DEFAULT '2011'::character varying NOT NULL, area character varying(10) NOT NULL, literacy character varying(20) NOT NULL, sex character varying(10) NOT NULL, @@ -5455,7 +5456,7 @@ IN,country,Rural,Female,Illiterate,204535333 -- ALTER TABLE ONLY area_literacy_sex - ADD CONSTRAINT area_literacy_sex_pkey PRIMARY KEY (geo_level, geo_code, area, literacy, sex); + ADD CONSTRAINT area_literacy_sex_pkey PRIMARY KEY (geo_level, geo_code, geo_version, area, literacy, sex); -- diff --git a/sql/population_area.sql b/sql/population_area.sql index 91da797..350bfe3 100644 --- a/sql/population_area.sql +++ b/sql/population_area.sql @@ -25,6 +25,7 @@ SET default_with_oids = false; CREATE TABLE area_sex ( geo_level character varying(15) NOT NULL, geo_code character varying(10) NOT NULL, + geo_version character varying(100) DEFAULT '2011'::character varying NOT NULL, area character varying(10) NOT NULL, sex character varying(10) NOT NULL, total integer NOT NULL @@ -2750,7 +2751,7 @@ IN,country,Rural,Female,405967794 -- ALTER TABLE ONLY area_sex - ADD CONSTRAINT area_sex_pkey PRIMARY KEY (geo_level, geo_code, area, sex); + ADD CONSTRAINT area_sex_pkey PRIMARY KEY (geo_level, geo_code, geo_version, area, sex); -- diff --git a/sql/religion_pca_area_sex.sql b/sql/religion_pca_area_sex.sql index 29f2dc6..1a4364b 100644 --- a/sql/religion_pca_area_sex.sql +++ b/sql/religion_pca_area_sex.sql @@ -25,6 +25,7 @@ SET default_with_oids = false; CREATE TABLE area_religion_sex ( geo_level character varying(15) NOT NULL, geo_code character varying(10) NOT NULL, + geo_version character varying(100) DEFAULT '2011'::character varying NOT NULL, religion character varying(40) NOT NULL, area character varying(10) NOT NULL, sex character varying(10) NOT NULL, @@ -21679,7 +21680,7 @@ IN,country,Religion not stated,Urban,Female,604075 -- ALTER TABLE ONLY area_religion_sex - ADD CONSTRAINT area_religion_sex_pkey PRIMARY KEY (geo_level, geo_code, area, religion, sex); + ADD CONSTRAINT area_religion_sex_pkey PRIMARY KEY (geo_level, geo_code, geo_version, area, religion, sex); -- diff --git a/sql/rural_population.sql b/sql/rural_population.sql index c8b0448..e67a559 100644 --- a/sql/rural_population.sql +++ b/sql/rural_population.sql @@ -25,6 +25,7 @@ SET default_with_oids = false; CREATE TABLE ruralpopulation ( geo_level character varying(15) NOT NULL, geo_code character varying(10) NOT NULL, + geo_version character varying(100) DEFAULT '2011'::character varying NOT NULL, villages integer NOT NULL, "rural population" character varying(10) NOT NULL, total integer NOT NULL @@ -1398,7 +1399,7 @@ IN,country,597608,Female,405967794 -- ALTER TABLE ONLY ruralpopulation - ADD CONSTRAINT ruralpopulation_pkey PRIMARY KEY (geo_level, geo_code, villages, "rural population"); + ADD CONSTRAINT ruralpopulation_pkey PRIMARY KEY (geo_level, geo_code, geo_version, villages, "rural population"); -- diff --git a/sql/workers_area_sex.sql b/sql/workers_area_sex.sql index 166256c..dd0201d 100644 --- a/sql/workers_area_sex.sql +++ b/sql/workers_area_sex.sql @@ -25,6 +25,7 @@ SET default_with_oids = false; CREATE TABLE area_workers_workerssex ( geo_level character varying(15) NOT NULL, geo_code character varying(10) NOT NULL, + geo_version character varying(100) DEFAULT '2011'::character varying NOT NULL, area character varying(10) NOT NULL, workerssex character varying(10) NOT NULL, workers character varying(50) NOT NULL, @@ -16271,7 +16272,7 @@ IN,country,Urban,Female,Non-workers available for work,13155932 -- ALTER TABLE ONLY area_workers_workerssex - ADD CONSTRAINT area_workers_workerssex_pkey PRIMARY KEY (geo_level, geo_code, area, workers, workerssex); + ADD CONSTRAINT area_workers_workerssex_pkey PRIMARY KEY (geo_level, geo_code, geo_version, area, workers, workerssex); --