From bc4344e0cb1944761a94f477ce8f0aea4a5e8cca Mon Sep 17 00:00:00 2001 From: petulla Date: Tue, 23 Oct 2018 17:27:41 -0400 Subject: [PATCH 1/3] Started updating with accessibility features --- .../ai2html_graphic/child_template.html | 26 +++++++------- .../bar_chart/child_template.html | 35 ++++++++++--------- graphic_templates/bar_chart/js/graphic.js | 11 ++++-- package-lock.json | 17 +++------ 4 files changed, 46 insertions(+), 43 deletions(-) diff --git a/graphic_templates/ai2html_graphic/child_template.html b/graphic_templates/ai2html_graphic/child_template.html index 6a095ff1..873b4e3d 100644 --- a/graphic_templates/ai2html_graphic/child_template.html +++ b/graphic_templates/ai2html_graphic/child_template.html @@ -2,28 +2,30 @@ {% block content %} - {% if COPY.labels.headline %}

{{ COPY.labels.headline|smarty }}

{% endif %} - {% if COPY.labels.subhed %}

{{ render(COPY.labels.subhed)|smarty }}

{% endif %} +
+ {% if COPY.labels.headline %}

{{ COPY.labels.headline|smarty }}

{% endif %} + {% if COPY.labels.subhed %}

{{ render(COPY.labels.subhed)|smarty }}

{% endif %} +
-
- {% include 'ai2html-graphic.html' %} -
+ - {% if COPY.labels.footnote %} -
+ {% if COPY.labels.footnote %} +

Notes

{{ COPY.labels.footnote|smarty }}

- {% endif %} + {% endif %} -
+
{% if COPY.labels.source %}

Source: {{ COPY.labels.source|smarty }}

{% endif %} {% if COPY.labels.credit %}

Credit: {{ COPY.labels.credit|smarty }}

{% endif %} -
+ {% endblock content %} {% block js %} - {{ JS.push('js/graphic.js') }} - {{ JS.render('js/graphic-footer.js') }} + {{ JS.push('js/graphic.js') }} + {{ JS.render('js/graphic-footer.js') }} {% endblock js %} diff --git a/graphic_templates/bar_chart/child_template.html b/graphic_templates/bar_chart/child_template.html index 931c2973..a2dc3dfd 100644 --- a/graphic_templates/bar_chart/child_template.html +++ b/graphic_templates/bar_chart/child_template.html @@ -2,27 +2,28 @@ {% block content %} - {% if COPY.labels.headline %}

{{ COPY.labels.headline|smarty }}

{% endif %} - {% if COPY.labels.subhed %}

{{ render(COPY.labels.subhed)|smarty }}

{% endif %} +
+ {% if COPY.labels.headline %}

{{ COPY.labels.headline|smarty }}

{% endif %} + {% if COPY.labels.subhed %}

{{ render(COPY.labels.subhed)|smarty }}

{% endif %} +
-
- [Chart] -
+
[Chart]
- {% if COPY.labels.footnote %} -
-

Notes

-

{{ COPY.labels.footnote|smarty }}

-
- {% endif %} + {% if COPY.labels.footnote %} +
+

Notes

+

{{ COPY.labels.footnote }}

+
+ {% endif %} -
- {% if COPY.labels.source %}

Source: {{ COPY.labels.source|smarty }}

{% endif %} +
+ {% if COPY.labels.source %}

Source: {{ COPY.labels.source|smarty }}

{% endif %} {% if COPY.labels.credit %}

Credit: {{ COPY.labels.credit|smarty }}

{% endif %} -
+ - + {% endblock content %} diff --git a/graphic_templates/bar_chart/js/graphic.js b/graphic_templates/bar_chart/js/graphic.js index 6318c092..4627121d 100644 --- a/graphic_templates/bar_chart/js/graphic.js +++ b/graphic_templates/bar_chart/js/graphic.js @@ -101,10 +101,16 @@ var renderBarChart = function(config) { var chartWrapper = containerElement.append('div') .attr('class', 'graphic-wrapper'); - var chartElement = chartWrapper.append('svg') + var svg = chartWrapper.append('svg') + .attr('role', 'img') + .attr('aria-labelledby', 'svg-title svg-desc') .attr('width', chartWidth + margins['left'] + margins['right']) .attr('height', chartHeight + margins['top'] + margins['bottom']) - .append('g') + + svg.append('title').attr('id', 'svg-title').text(ariaData.headline); + svg.append('desc').attr('id', 'svg-desc').text(ariaData.subhed); + + var chartElement = svg.append('g') .attr('transform', 'translate(' + margins['left'] + ',' + margins['top'] + ')'); /* @@ -154,6 +160,7 @@ var renderBarChart = function(config) { chartElement.append('g') .attr('class', 'x grid') + .attr('role','presentation') .attr('transform', makeTranslate(0, chartHeight)) .call(xAxisGrid() .tickSize(-chartHeight, 0, 0) diff --git a/package-lock.json b/package-lock.json index 20c824dc..9c815bb1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -31,8 +31,7 @@ "assert-plus": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz", - "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=", - "optional": true + "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=" }, "asynckit": { "version": "0.4.0", @@ -77,7 +76,6 @@ "version": "1.0.6", "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.6.tgz", "integrity": "sha1-cj599ugBrFYTETp+RFqbactjKBg=", - "optional": true, "requires": { "delayed-stream": "~1.0.0" } @@ -100,8 +98,7 @@ "delayed-stream": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", - "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=", - "optional": true + "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=" }, "ecc-jsbn": { "version": "0.1.1", @@ -130,8 +127,7 @@ "extsprintf": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz", - "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=", - "optional": true + "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=" }, "fast-deep-equal": { "version": "1.1.0", @@ -282,14 +278,12 @@ "mime-db": { "version": "1.33.0", "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.33.0.tgz", - "integrity": "sha512-BHJ/EKruNIqJf/QahvxwQZXKygOQ256myeN/Ew+THcAa5q+PjyTTMMeNQC4DZw5AwfvelsUrA6B67NKMqXDbzQ==", - "optional": true + "integrity": "sha512-BHJ/EKruNIqJf/QahvxwQZXKygOQ256myeN/Ew+THcAa5q+PjyTTMMeNQC4DZw5AwfvelsUrA6B67NKMqXDbzQ==" }, "mime-types": { "version": "2.1.18", "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.18.tgz", "integrity": "sha512-lc/aahn+t4/SWV/qcmumYjymLsWfN3ELhpmVuUFjgsORruuZPVSwAQryq+HHGvO/SI2KVX26bx+En+zhM8g8hQ==", - "optional": true, "requires": { "mime-db": "~1.33.0" } @@ -379,8 +373,7 @@ "safe-buffer": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", - "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", - "optional": true + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" }, "safer-buffer": { "version": "2.1.2", From 2a095862201deff06e24ff50d971a4ccc83bda15 Mon Sep 17 00:00:00 2001 From: petulla Date: Fri, 30 Nov 2018 11:19:04 -0500 Subject: [PATCH 2/3] Add more upgrades --- graphic_templates/_base/base_template.html | 39 +++++---- graphic_templates/_base/css/base.less | 2 +- .../ai2html_graphic/child_template.html | 6 +- .../animated_photo/child_template.html | 6 +- .../archive_graphic/child_template.html | 13 +-- graphic_templates/bar_chart/js/graphic.js | 84 ++++++++++++------- .../block_histogram/child_template.html | 16 ++-- .../block_histogram/js/graphic.js | 36 ++++++-- .../column_chart/child_template.html | 16 ++-- graphic_templates/column_chart/js/graphic.js | 79 ++++++++++------- .../diverging_bar_chart/child_template.html | 12 +-- 11 files changed, 193 insertions(+), 116 deletions(-) diff --git a/graphic_templates/_base/base_template.html b/graphic_templates/_base/base_template.html index ab1e3743..576ea7df 100644 --- a/graphic_templates/_base/base_template.html +++ b/graphic_templates/_base/base_template.html @@ -4,6 +4,7 @@ Graphic : NPR + @@ -47,24 +48,28 @@ - {{ JS.push('js/helpers.js') }} - {{ JS.push('js/analytics.js') }} - {{ JS.render('js/graphic-header.js') }} +
+ {{ JS.push('js/helpers.js') }} + {{ JS.push('js/analytics.js') }} + {{ JS.render('js/graphic-header.js') }} +
+
+ {% block content %} - {% block content %} + The child template content goes here! - The child template content goes here! - - {% endblock content %} - - - {% block js %} - {{ JS.push('js/lib/underscore.js') }} - {{ JS.push('js/lib/d3.min.js') }} - {{ JS.push('js/lib/modernizr.svg.min.js') }} - {{ JS.push('js/base.js') }} - {{ JS.push('js/graphic.js') }} - {{ JS.render('js/graphic-footer.js') }} - {% endblock js %} + {% endblock content %} +
+
+ + {% block js %} + {{ JS.push('js/lib/underscore.js') }} + {{ JS.push('js/lib/d3.min.js') }} + {{ JS.push('js/lib/modernizr.svg.min.js') }} + {{ JS.push('js/base.js') }} + {{ JS.push('js/graphic.js') }} + {{ JS.render('js/graphic-footer.js') }} + {% endblock js %} +
diff --git a/graphic_templates/_base/css/base.less b/graphic_templates/_base/css/base.less index 1b70d2c9..e07a02b4 100644 --- a/graphic_templates/_base/css/base.less +++ b/graphic_templates/_base/css/base.less @@ -252,7 +252,7 @@ rect { shape-rendering: crispEdges; } -.bars rect { fill: @teal3; } +rect.bars { fill: @teal3; } .labels { position: absolute; diff --git a/graphic_templates/ai2html_graphic/child_template.html b/graphic_templates/ai2html_graphic/child_template.html index 873b4e3d..03cb0a1b 100644 --- a/graphic_templates/ai2html_graphic/child_template.html +++ b/graphic_templates/ai2html_graphic/child_template.html @@ -19,9 +19,9 @@

Notes

{% endif %}
- {% if COPY.labels.source %}

Source: {{ COPY.labels.source|smarty }}

{% endif %} - {% if COPY.labels.credit %}

Credit: {{ COPY.labels.credit|smarty }}

{% endif %} -
+ {% if COPY.labels.source %}

Source: {{ COPY.labels.source|smarty }}

{% endif %} + {% if COPY.labels.credit %}

Credit: {{ COPY.labels.credit|smarty }}

{% endif %} + {% endblock content %} diff --git a/graphic_templates/animated_photo/child_template.html b/graphic_templates/animated_photo/child_template.html index 4b41e8b7..82b8997d 100644 --- a/graphic_templates/animated_photo/child_template.html +++ b/graphic_templates/animated_photo/child_template.html @@ -2,13 +2,13 @@ {% block content %} -
+ {% if COPY.labels.caption or COPY.labels.credit %} -
+
{% if COPY.labels.caption %}

{{ render(COPY.labels.caption)|smarty }}

{% endif %} {% if COPY.labels.credit %}

{{ COPY.labels.credit|smarty }}

{% endif %} -
+ {% endif %} {% endblock content %} diff --git a/graphic_templates/block_histogram/js/graphic.js b/graphic_templates/block_histogram/js/graphic.js index 6542ee31..3ffc34a6 100644 --- a/graphic_templates/block_histogram/js/graphic.js +++ b/graphic_templates/block_histogram/js/graphic.js @@ -130,10 +130,18 @@ var renderBlockHistogram = function(config) { var chartWrapper = containerElement.append('div') .attr('class', 'graphic-wrapper'); - var chartElement = chartWrapper.append('svg') + var svg = chartWrapper.append('svg') + .attr('role', 'img') + .attr('aria-labelledby', 'svg-title svg-desc') .attr('width', chartWidth + margins['left'] + margins['right']) .attr('height', chartHeight + margins['top'] + margins['bottom']) - .append('g') + + + svg.append('title').attr('id', 'svg-title').text(ariaData.headline); + svg.append('desc').attr('id', 'svg-desc').text(ariaData.subhed); + + var chartElement = svg + .append('g') .attr('transform', makeTranslate(margins['left'], margins['top'])); /* @@ -172,6 +180,7 @@ var renderBlockHistogram = function(config) { */ chartElement.append('g') .attr('class', 'x axis') + .attr('role', 'presentation') .attr('transform', makeTranslate(0, chartHeight)) .call(xAxis); @@ -183,6 +192,7 @@ var renderBlockHistogram = function(config) { }; chartElement.append('g') + .attr('role', 'presentation') .attr('class', 'y grid') .call(yAxisGrid() .tickSize(-chartWidth, 0) @@ -204,6 +214,7 @@ var renderBlockHistogram = function(config) { }) var lastTick = chartElement.select('.x.axis') + .attr('role', 'presentation') .append('g') .attr('class', 'tick') .attr('transform', function() { @@ -240,17 +251,22 @@ var renderBlockHistogram = function(config) { /* * Render bins to chart. */ + var bins = chartElement.selectAll('.bin') .data(config['data']) .enter().append('g') - .attr('class', function(d,i) { + .attr('role', 'list') + .attr('class', function(d, i) { return 'bin bin-' + i; }) + .attr('data-id', function(d,i) { + return COLOR_BINS[i]; + }) .attr('transform', function(d, i) { return makeTranslate(xScale(COLOR_BINS[i]), 0); }); - bins.selectAll('rect') + var rects = bins.selectAll('g') .data(function(d, i) { // add the bin index to each row of data so we can assign the right color var formattedData = []; @@ -259,7 +275,14 @@ var renderBlockHistogram = function(config) { }) return formattedData; }) - .enter().append('rect') + .enter().append('g'); + + rects.append('title').text(function(d) { + return d.value + ' (' + d3.select(this.parentNode.parentNode).attr('data-id') + ')'; + }); + + rects.append('rect') + .attr('role', 'presentation') .attr('width', xScale.rangeBand()) .attr('x', 0) .attr('y', function(d,i) { @@ -284,6 +307,7 @@ var renderBlockHistogram = function(config) { return d3.entries(d); }) .enter().append('text') + .attr('role','presentation') .attr('x', (xScale.rangeBand() / 2)) .attr('y', function(d,i) { return chartHeight - ((blockHeight + blockGap) * (i + 1)); @@ -305,6 +329,7 @@ var renderBlockHistogram = function(config) { .attr('dx', -15) .attr('text-anchor', 'end') .attr('y', -10) + .attr('role','presentation') .html(LABELS['annotation_left']); annotations.append('text') @@ -316,6 +341,7 @@ var renderBlockHistogram = function(config) { .html(LABELS['annotation_right']); annotations.append('line') + .attr('role','presentation') .attr('class', 'axis-0') .attr('x1', xScale(0) - ((xScale.rangeBand() * .1) / 2)) .attr('y1', -margins['top']) diff --git a/graphic_templates/column_chart/child_template.html b/graphic_templates/column_chart/child_template.html index ff8c886a..16af8082 100644 --- a/graphic_templates/column_chart/child_template.html +++ b/graphic_templates/column_chart/child_template.html @@ -1,13 +1,14 @@ {% extends 'base_template.html' %} {% block content %} +
+ {% if COPY.labels.headline %}

{{ COPY.labels.headline|smarty }}

{% endif %} + {% if COPY.labels.subhed %}

{{ render(COPY.labels.subhed)|smarty }}

{% endif %} +
- {% if COPY.labels.headline %}

{{ COPY.labels.headline|smarty }}

{% endif %} - {% if COPY.labels.subhed %}

{{ render(COPY.labels.subhed)|smarty }}

{% endif %} - -
+
+ {% if COPY.labels.footnote %}
@@ -16,13 +17,14 @@

Notes

{% endif %} -
+
{% if COPY.labels.source %}

Source: {{ COPY.labels.source|smarty }}

{% endif %} {% if COPY.labels.credit %}

Credit: {{ COPY.labels.credit|smarty }}

{% endif %} -
+ {% endblock content %} diff --git a/graphic_templates/column_chart/js/graphic.js b/graphic_templates/column_chart/js/graphic.js index bdc844a0..11cdfb2e 100644 --- a/graphic_templates/column_chart/js/graphic.js +++ b/graphic_templates/column_chart/js/graphic.js @@ -99,11 +99,18 @@ var renderColumnChart = function(config) { var chartWrapper = containerElement.append('div') .attr('class', 'graphic-wrapper'); - var chartElement = chartWrapper.append('svg') + var svg = chartWrapper.append('svg') + .attr('role', 'img') + .attr('aria-labelledby', 'svg-title svg-desc') .attr('width', chartWidth + margins['left'] + margins['right']) .attr('height', chartHeight + margins['top'] + margins['bottom']) - .append('g') - .attr('transform', 'translate(' + margins['left'] + ',' + margins['top'] + ')'); + + svg.append('title').attr('id', 'svg-title').text(ariaData.headline); + svg.append('desc').attr('id', 'svg-desc').text(ariaData.subhed); + + var chartElement = svg + .append('g') + .attr('transform', 'translate(' + margins['left'] + ',' + margins['top'] + ')'); /* * Create D3 scale objects. @@ -153,6 +160,7 @@ var renderColumnChart = function(config) { */ chartElement.append('g') .attr('class', 'x axis') + .attr('role', 'presentation') .attr('transform', makeTranslate(0, chartHeight)) .call(xAxis); @@ -169,6 +177,7 @@ var renderColumnChart = function(config) { chartElement.append('g') .attr('class', 'y grid') + .attr('role', 'presentation') .call(yAxisGrid() .tickSize(-chartWidth, 0) .tickFormat('') @@ -177,33 +186,42 @@ var renderColumnChart = function(config) { /* * Render bars to chart. */ - chartElement.append('g') - .attr('class', 'bars') - .selectAll('rect') - .data(config['data']) - .enter() - .append('rect') - .attr('x', function(d) { - return xScale(d[labelColumn]); - }) - .attr('y', function(d) { - if (d[valueColumn] < 0) { - return yScale(0); - } - return yScale(d[valueColumn]); - }) - .attr('width', xScale.rangeBand()) - .attr('height', function(d) { - if (d[valueColumn] < 0) { - return yScale(d[valueColumn]) - yScale(0); - } - - return yScale(0) - yScale(d[valueColumn]); - }) - .attr('class', function(d) { - return 'bar bar-' + d[labelColumn]; - }); + var dataEls = chartElement.append('g') + .attr('class', 'bars') + .selectAll('g') + .data(config['data']) + .enter().append('g') + .attr('role', 'list'); + + dataEls.append('title') + .text(function(d) { + return parseInt(d[labelColumn]) + ' (' + d[valueColumn] + ')'; + }) + + dataEls.append('rect') + .attr('role','listitems') + .attr('x', function(d) { + return xScale(d[labelColumn]); + }) + .attr('y', function(d) { + if (d[valueColumn] < 0) { + return yScale(0); + } + + return yScale(d[valueColumn]); + }) + .attr('width', xScale.rangeBand()) + .attr('height', function(d) { + if (d[valueColumn] < 0) { + return yScale(d[valueColumn]) - yScale(0); + } + + return yScale(0) - yScale(d[valueColumn]); + }) + .attr('class', function(d) { + return 'bar bar-' + d[labelColumn]; + }); /* * Render 0 value line. @@ -211,6 +229,7 @@ var renderColumnChart = function(config) { if (min < 0) { chartElement.append('line') .attr('class', 'zero-line') + .attr('role','presentation') .attr('x1', 0) .attr('x2', chartWidth) .attr('y1', yScale(0)) @@ -222,10 +241,12 @@ var renderColumnChart = function(config) { */ chartElement.append('g') .attr('class', 'value') + .attr('role', 'list') .selectAll('text') .data(config['data']) .enter() .append('text') + .attr('role', 'listitems') .text(function(d) { return d[valueColumn].toFixed(0); }) diff --git a/graphic_templates/diverging_bar_chart/child_template.html b/graphic_templates/diverging_bar_chart/child_template.html index 31e042eb..3eba1d37 100644 --- a/graphic_templates/diverging_bar_chart/child_template.html +++ b/graphic_templates/diverging_bar_chart/child_template.html @@ -2,12 +2,12 @@ {% block content %} - {% if COPY.labels.headline %}

{{ COPY.labels.headline|smarty }}

{% endif %} - {% if COPY.labels.subhed %}

{{ render(COPY.labels.subhed)|smarty }}

{% endif %} +
{% if COPY.labels.headline %}

{{ COPY.labels.headline|smarty }}

{% endif %} + {% if COPY.labels.subhed %}

{{ render(COPY.labels.subhed)|smarty }}

{% endif %}
-
+
[Chart] -
+ {% if COPY.labels.footnote %}
@@ -16,10 +16,10 @@

Notes

{% endif %} -
+
{% if COPY.labels.source %}

Source: {{ COPY.labels.source|smarty }}

{% endif %} {% if COPY.labels.credit %}

Credit: {{ COPY.labels.credit|smarty }}

{% endif %} -
+ {% endblock content %} diff --git a/graphic_templates/diverging_bar_chart/js/graphic.js b/graphic_templates/diverging_bar_chart/js/graphic.js index 909cd548..9e73c47d 100644 --- a/graphic_templates/diverging_bar_chart/js/graphic.js +++ b/graphic_templates/diverging_bar_chart/js/graphic.js @@ -189,10 +189,14 @@ var renderDivergingBarChart = function(config) { var chartWrapper = containerElement.append('div') .attr('class', 'graphic-wrapper'); - var chartElement = chartWrapper.append('svg') + var svg = chartWrapper.append('svg') .attr('width', chartWidth + margins['left'] + margins['right']) .attr('height', chartHeight + margins['top'] + margins['bottom']) - .append('g') + + svg.append('title').attr('id', 'svg-title').text(ariaData.headline); + svg.append('desc').attr('id', 'svg-desc').text(ariaData.subhed); + + var chartElement = svg.append('g') .attr('transform', 'translate(' + margins['left'] + ',' + margins['top'] + ')'); /* @@ -201,6 +205,7 @@ var renderDivergingBarChart = function(config) { var group = chartElement.selectAll('.group') .data(config['data']) .enter().append('g') + .attr('role', 'list') .attr('class', function(d) { return 'group ' + classify(d[labelColumn]); }) @@ -213,6 +218,7 @@ var renderDivergingBarChart = function(config) { return d['values']; }) .enter().append('rect') + .attr('role', 'listitems') .attr('x', function(d) { if (d['x0'] < d['x1']) { return xScale(d['x0']); @@ -236,11 +242,13 @@ var renderDivergingBarChart = function(config) { */ group.append('g') .attr('class', 'value') + .attr('role', 'list') .selectAll('text') .data(function(d) { return d['values']; }) .enter().append('text') + .attr('role', 'listitems') .text(function(d) { if (d['val'] != 0) { return d['val'] + '%'; diff --git a/graphic_templates/dot_chart/child_template.html b/graphic_templates/dot_chart/child_template.html index bf2aa3ff..e3a6974e 100644 --- a/graphic_templates/dot_chart/child_template.html +++ b/graphic_templates/dot_chart/child_template.html @@ -2,12 +2,13 @@ {% block content %} - {% if COPY.labels.headline %}

{{ COPY.labels.headline|smarty }}

{% endif %} +
{% if COPY.labels.headline %}

{{ COPY.labels.headline|smarty }}

{% endif %} {% if COPY.labels.subhed %}

{{ render(COPY.labels.subhed)|smarty }}

{% endif %} +
-
+
[Chart] -
+ {% if COPY.labels.footnote %}
@@ -16,13 +17,14 @@

Notes

{% endif %} -
+
{% if COPY.labels.source %}

Source: {{ COPY.labels.source|smarty }}

{% endif %} {% if COPY.labels.credit %}

Credit: {{ COPY.labels.credit|smarty }}

{% endif %} -
+ {% endblock content %} diff --git a/graphic_templates/dot_chart/js/graphic.js b/graphic_templates/dot_chart/js/graphic.js index e0a10f37..651bf636 100644 --- a/graphic_templates/dot_chart/js/graphic.js +++ b/graphic_templates/dot_chart/js/graphic.js @@ -111,10 +111,16 @@ var renderDotChart = function(config) { var chartWrapper = containerElement.append('div') .attr('class', 'graphic-wrapper'); - var chartElement = chartWrapper.append('svg') + var svg = chartWrapper.append('svg') + .attr('role', 'img') + .attr('aria-labelledby', 'svg-title svg-desc') .attr('width', chartWidth + margins['left'] + margins['right']) .attr('height', chartHeight + margins['top'] + margins['bottom']) - .append('g') + + svg.append('title').attr('id', 'svg-title').text(ariaData.headline); + svg.append('desc').attr('id', 'svg-desc').text(ariaData.subhed); + + var chartElement = svg.append('g') .attr('transform', 'translate(' + margins['left'] + ',' + margins['top'] + ')'); /* @@ -145,6 +151,7 @@ var renderDotChart = function(config) { */ chartElement.append('g') .attr('class', 'x axis') + .attr('role', 'presentation') .attr('transform', makeTranslate(0, chartHeight)) .call(xAxis); @@ -157,6 +164,7 @@ var renderDotChart = function(config) { chartElement.append('g') .attr('class', 'x grid') + .attr('role', 'presentation') .attr('transform', makeTranslate(0, chartHeight)) .call(xAxisGrid() .tickSize(-chartHeight, 0, 0) @@ -188,18 +196,26 @@ var renderDotChart = function(config) { /* * Render dots to chart. */ - chartElement.append('g') + var dots = chartElement.append('g') .attr('class', 'dots') - .selectAll('circle') + .attr('role', 'presentation') + .selectAll('g.circles') .data(config['data']) - .enter().append('circle') - .attr('cx', function(d, i) { - return xScale(d[valueColumn]); - }) - .attr('cy', function(d, i) { - return i * (barHeight + barGap) + (barHeight / 2); - }) - .attr('r', dotRadius) + .enter().append('g') + .attr('class', 'circles'); + + dots.append('title').text(function(d) { + return d[labelColumn] + ' (' + d[valueColumn] + ')'; + }) + + dots.append('circle') + .attr('cx', function(d, i) { + return xScale(d[valueColumn]); + }) + .attr('cy', function(d, i) { + return i * (barHeight + barGap) + (barHeight / 2); + }) + .attr('r', dotRadius); /* * Render bar labels. @@ -207,6 +223,7 @@ var renderDotChart = function(config) { containerElement .append('ul') .attr('class', 'labels') + .attr('role', 'list') .attr('style', formatStyle({ 'width': labelWidth + 'px', 'top': margins['top'] + 'px', @@ -216,6 +233,7 @@ var renderDotChart = function(config) { .data(config['data']) .enter() .append('li') + .attr('role', 'listitems') .attr('style', function(d, i) { return formatStyle({ 'width': labelWidth + 'px', @@ -236,20 +254,26 @@ var renderDotChart = function(config) { * Render bar values. */ _.each(['shadow', 'value'], function(cls) { - chartElement.append('g') + var shadowG = chartElement.append('g') .attr('class', cls) .selectAll('text') .data(config['data']) - .enter().append('text') - .attr('x', function(d, i) { - return xScale(d[maxColumn]) + 6; - }) - .attr('y', function(d,i) { - return i * (barHeight + barGap) + (barHeight / 2) + 3; - }) - .text(function(d) { - return d[valueColumn].toFixed(1) + '%'; - }); + .enter().append('g'); + + shadowG.append('title').text(function(d) { + return d[labelColumn] + ' (' + d[valueColumn] + ')'; + }); + shadowG.append('text') + .attr('role', 'listitems') + .attr('x', function(d) { + return xScale(d[maxColumn]) + 6; + }) + .attr('y', function(d, i) { + return i * (barHeight + barGap) + (barHeight / 2) + 3; + }) + .text(function(d) { + return d[valueColumn].toFixed(1) + '%'; + }); }); } diff --git a/graphic_templates/graphic/child_template.html b/graphic_templates/graphic/child_template.html index 40dcdc0c..f58e9425 100644 --- a/graphic_templates/graphic/child_template.html +++ b/graphic_templates/graphic/child_template.html @@ -2,12 +2,13 @@ {% block content %} - {% if COPY.labels.headline %}

{{ COPY.labels.headline|smarty }}

{% endif %} +
{% if COPY.labels.headline %}

{{ COPY.labels.headline|smarty }}

{% endif %} {% if COPY.labels.subhed %}

{{ render(COPY.labels.subhed)|smarty }}

{% endif %} +
-
+
+ {% if COPY.labels.footnote %}
@@ -16,9 +17,13 @@

Notes

{% endif %} -
+
{% if COPY.labels.source %}

Source: {{ COPY.labels.source|smarty }}

{% endif %} {% if COPY.labels.credit %}

Credit: {{ COPY.labels.credit|smarty }}

{% endif %} -
+ + + {% endblock content %} diff --git a/graphic_templates/graphic/js/graphic.js b/graphic_templates/graphic/js/graphic.js index 63cbf341..7cef1e6f 100644 --- a/graphic_templates/graphic/js/graphic.js +++ b/graphic_templates/graphic/js/graphic.js @@ -73,11 +73,17 @@ var renderGraphic = function(config) { containerElement.html(''); // Create container - var chartElement = containerElement.append('svg') + var svg = containerElement.append('svg') + .attr('role', 'img') .attr('width', chartWidth + margins['left'] + margins['right']) .attr('height', chartHeight + margins['top'] + margins['bottom']) - .append('g') - .attr('transform', 'translate(' + margins['left'] + ',' + margins['top'] + ')'); + + svg.append('title').attr('id', 'svg-title').text(ariaData.headline); + svg.append('desc').attr('id', 'svg-desc').text(ariaData.subhed); + + var chartElement = svg + .append('g') + .attr('transform', 'translate(' + margins.left + ',' + margins.top + ')'); // Draw here! } diff --git a/graphic_templates/grouped_bar_chart/child_template.html b/graphic_templates/grouped_bar_chart/child_template.html index 89157c87..4454abd8 100644 --- a/graphic_templates/grouped_bar_chart/child_template.html +++ b/graphic_templates/grouped_bar_chart/child_template.html @@ -2,12 +2,13 @@ {% block content %} - {% if COPY.labels.headline %}

{{ COPY.labels.headline|smarty }}

{% endif %} +
{% if COPY.labels.headline %}

{{ COPY.labels.headline|smarty }}

{% endif %} {% if COPY.labels.subhed %}

{{ render(COPY.labels.subhed)|smarty }}

{% endif %} +
-
+
[Chart] -
+ {% if COPY.labels.footnote %}
@@ -16,13 +17,14 @@

Notes

{% endif %} -
+
{% if COPY.labels.source %}

Source: {{ COPY.labels.source|smarty }}

{% endif %} {% if COPY.labels.credit %}

Credit: {{ COPY.labels.credit|smarty }}

{% endif %} -
+ {% endblock content %} diff --git a/graphic_templates/grouped_bar_chart/js/graphic.js b/graphic_templates/grouped_bar_chart/js/graphic.js index 88f9270a..0a55cb9f 100644 --- a/graphic_templates/grouped_bar_chart/js/graphic.js +++ b/graphic_templates/grouped_bar_chart/js/graphic.js @@ -151,9 +151,11 @@ var renderGroupedBarChart = function(config) { */ var legend = containerElement.append('ul') .attr('class', 'key') + .attr('role', 'list') .selectAll('g') .data(config['data'][0]['values']) .enter().append('li') + .attr('role', 'listitem') .attr('class', function(d, i) { return 'key-item key-' + i + ' ' + classify(d[labelColumn]); }); @@ -174,10 +176,16 @@ var renderGroupedBarChart = function(config) { var chartWrapper = containerElement.append('div') .attr('class', 'graphic-wrapper'); - var chartElement = chartWrapper.append('svg') + var svg = chartWrapper.append('svg') + .attr('role', 'img') + .attr('aria-labelledby', 'svg-title svg-desc') .attr('width', chartWidth + margins['left'] + margins['right']) .attr('height', chartHeight + margins['top'] + margins['bottom']) - .append('g') + + svg.append('title').attr('id', 'svg-title').text(ariaData.headline); + svg.append('desc').attr('id', 'svg-desc').text(ariaData.subhed); + + var chartElement = svg.append('g') .attr('transform', 'translate(' + margins['left'] + ',' + margins['top'] + ')'); /* @@ -196,6 +204,7 @@ var renderGroupedBarChart = function(config) { */ chartElement.append('g') .attr('class', 'x axis') + .attr('role','presentation') .attr('transform', makeTranslate(0, chartHeight)) .call(xAxis); @@ -208,6 +217,7 @@ var renderGroupedBarChart = function(config) { chartElement.append('g') .attr('class', 'x grid') + .attr('role','presentation') .attr('transform', makeTranslate(0, chartHeight)) .call(xAxisGrid() .tickSize(-chartHeight, 0, 0) @@ -221,6 +231,9 @@ var renderGroupedBarChart = function(config) { .data(config['data']) .enter() .append('g') + .attr('data-id', function(d) { + return d.key; + }) .attr('class', 'g bars') .attr('transform', function(d, i) { if (i == 0) { @@ -230,12 +243,19 @@ var renderGroupedBarChart = function(config) { return makeTranslate(0, (groupHeight + barGap) * i); }); - barGroups.selectAll('rect') + var barGs = barGroups.selectAll('g') .data(function(d) { return d['values']; }) .enter() - .append('rect') + .append('g'); + + barGs.append('title') + .text(function(d) { + return d3.select(this.parentNode.parentNode).attr('data-id') + ' - ' + d[labelColumn] + ' (' + parseInt(d[valueColumn]) + ')'; + }); + + barGs.append('rect') .attr('x', function(d) { if (d[valueColumn] >= 0) { return xScale(0); @@ -267,6 +287,7 @@ var renderGroupedBarChart = function(config) { if (min < 0) { chartElement.append('line') .attr('class', 'zero-line') + .attr('role', 'presentation') .attr('x1', xScale(0)) .attr('x2', xScale(0)) .attr('y1', 0) @@ -278,6 +299,7 @@ var renderGroupedBarChart = function(config) { */ chartWrapper.append('ul') .attr('class', 'labels') + .attr('role', 'list') .attr('style', formatStyle({ 'width': labelWidth + 'px', 'top': margins['top'] + 'px', @@ -287,6 +309,7 @@ var renderGroupedBarChart = function(config) { .data(config['data']) .enter() .append('li') + .attr('role', 'listitems') .attr('style', function(d,i) { var top = (groupHeight + barGap) * i; diff --git a/graphic_templates/issue_matrix/child_template.html b/graphic_templates/issue_matrix/child_template.html index aaeb47ba..a8301a03 100644 --- a/graphic_templates/issue_matrix/child_template.html +++ b/graphic_templates/issue_matrix/child_template.html @@ -2,25 +2,25 @@ {% block content %} - {% if COPY.labels.headline %}

{{ COPY.labels.headline|smarty }}

{% endif %} - {% if COPY.labels.subhed %}

{{ render(COPY.labels.subhed)|smarty }}

{% endif %} +
{% if COPY.labels.headline %}

{{ COPY.labels.headline|smarty }}

{% endif %} + {% if COPY.labels.subhed %}

{{ render(COPY.labels.subhed)|smarty }}

{% endif %}
-
- +
+
- - + + {% for row in COPY.issues %} - + {% endfor %} {% for row in COPY.data %} - + - + {% for issue in COPY.issues %} {% set i = issue.name %} @@ -28,14 +28,14 @@ {% set link = row[i + '_link'] %} {% set footnote = row[i + '_footnote'] %} - + {% endfor %} {% endfor %}
{{ COPY.labels.hdr_name }}
{{ COPY.labels.hdr_name }}{{ row.header|smarty }}{{ row.header|smarty }}
{{ row.name|smarty }} ({{ row.party }}){{ row.name|smarty }} ({{ row.party }}){% if row[i + '_link'] %}{% endif %}{{ position|smarty }}{% if link %}{% endif %}{% if footnote %}{{ footnote }}{% endif %}{% if row[i + '_link'] %}{% endif %}{{ position|smarty }}{% if link %}{% endif %}{% if footnote %}{{ footnote }}{% endif %}
-
+ {% if COPY.footnotes[0] %}
@@ -48,10 +48,10 @@

Notes

{% endif %} -
+
{% if COPY.labels.source %}

Source: {{ COPY.labels.source|smarty }}

{% endif %} {% if COPY.labels.credit %}

Credit: {{ COPY.labels.credit|smarty }}

{% endif %} -
+ {% endblock content %} diff --git a/graphic_templates/line_chart/child_template.html b/graphic_templates/line_chart/child_template.html index ce854c96..f1c6b108 100644 --- a/graphic_templates/line_chart/child_template.html +++ b/graphic_templates/line_chart/child_template.html @@ -2,12 +2,12 @@ {% block content %} - {% if COPY.labels.headline %}

{{ COPY.labels.headline|smarty }}

{% endif %} - {% if COPY.labels.subhed %}

{{ render(COPY.labels.subhed)|smarty }}

{% endif %} +
{% if COPY.labels.headline %}

{{ COPY.labels.headline|smarty }}

{% endif %} + {% if COPY.labels.subhed %}

{{ render(COPY.labels.subhed)|smarty }}

{% endif %}
-
+
[Chart] -
+ {% if COPY.labels.footnote %}
@@ -16,13 +16,14 @@

Notes

{% endif %} -
+
{% if COPY.labels.source %}

Source: {{ COPY.labels.source|smarty }}

{% endif %} {% if COPY.labels.credit %}

Credit: {{ COPY.labels.credit|smarty }}

{% endif %} -
+ {% endblock content %} diff --git a/graphic_templates/line_chart/js/graphic.js b/graphic_templates/line_chart/js/graphic.js index bc7c749b..6aa2ba57 100644 --- a/graphic_templates/line_chart/js/graphic.js +++ b/graphic_templates/line_chart/js/graphic.js @@ -190,11 +190,19 @@ var renderLineChart = function(config) { var chartWrapper = containerElement.append('div') .attr('class', 'graphic-wrapper'); - var chartElement = chartWrapper.append('svg') + var svg = chartWrapper.append('svg') + .attr('role', 'img') + .attr('aria-labelledby', 'svg-title svg-desc') .attr('width', chartWidth + margins['left'] + margins['right']) .attr('height', chartHeight + margins['top'] + margins['bottom']) - .append('g') - .attr('transform', 'translate(' + margins['left'] + ',' + margins['top'] + ')'); + + svg.append('title').attr('id', 'svg-title').text(ariaData.headline); + svg.append('desc').attr('id', 'svg-desc').text(ariaData.subhed); + + + var chartElement = svg + .append('g') + .attr('transform', 'translate(' + margins.left + ',' + margins.top + ')'); /* * Create D3 axes. @@ -221,10 +229,12 @@ var renderLineChart = function(config) { */ chartElement.append('g') .attr('class', 'x axis') + .attr('role', 'presentation') .attr('transform', makeTranslate(0, chartHeight)) .call(xAxis); chartElement.append('g') + .attr('role', 'presentation') .attr('class', 'y axis') .call(yAxis); @@ -241,6 +251,7 @@ var renderLineChart = function(config) { chartElement.append('g') .attr('class', 'x grid') + .attr('role', 'presentation') .attr('transform', makeTranslate(0, chartHeight)) .call(xAxisGrid() .tickSize(-chartHeight, 0, 0) @@ -249,6 +260,7 @@ var renderLineChart = function(config) { chartElement.append('g') .attr('class', 'y grid') + .attr('role', 'presentation') .call(yAxisGrid() .tickSize(-chartWidth, 0, 0) .tickFormat('') @@ -260,6 +272,7 @@ var renderLineChart = function(config) { if (min < 0) { chartElement.append('line') .attr('class', 'zero-line') + .attr('role', 'presentation') .attr('x1', 0) .attr('x2', chartWidth) .attr('y1', yScale(0)) @@ -296,10 +309,12 @@ var renderLineChart = function(config) { chartElement.append('g') .attr('class', 'value') + .attr('role', 'list') .selectAll('text') .data(config['data']) .enter().append('text') - .attr('x', function(d, i) { + .attr('role', 'listitem') + .attr('x', function(d) { var last = d['values'][d['values'].length - 1]; return xScale(last[dateColumn]) + 5; diff --git a/graphic_templates/locator_map/child_template.html b/graphic_templates/locator_map/child_template.html index 73ed43a1..f7591579 100644 --- a/graphic_templates/locator_map/child_template.html +++ b/graphic_templates/locator_map/child_template.html @@ -2,12 +2,13 @@ {% block content %} - {% if COPY.labels.headline %}

{{ COPY.labels.headline|smarty }}

{% endif %} +
{% if COPY.labels.headline %}

{{ COPY.labels.headline|smarty }}

{% endif %} {% if COPY.labels.subhed %}

{{ render(COPY.labels.subhed)|smarty }}

{% endif %} +
-
+
+ {% if COPY.labels.footnote %}
@@ -16,14 +17,15 @@

Notes

{% endif %} -
+
{% if COPY.labels.source %}

Source: {{ COPY.labels.source|smarty }}

{% endif %} {% if COPY.labels.credit %}

Credit: {{ COPY.labels.credit|smarty }}

{% endif %} -
+ {% endblock content %} diff --git a/graphic_templates/locator_map/js/graphic.js b/graphic_templates/locator_map/js/graphic.js index a17cbcb2..38980b9b 100644 --- a/graphic_templates/locator_map/js/graphic.js +++ b/graphic_templates/locator_map/js/graphic.js @@ -151,10 +151,17 @@ var renderLocatorMap = function(config) { chartWrapper = containerElement.append('div') .attr('class', 'graphic-wrapper'); - chartElement = chartWrapper.append('svg') + var svg = chartWrapper.append('svg') + .attr('role', 'application') + .attr('aria-labelledby', 'svg-title svg-desc') .attr('width', mapWidth) - .attr('height', mapHeight) - .append('g') + .attr('height', mapHeight); + + + svg.append('title').attr('id', 'svg-title').text(ariaData.headline); + svg.append('desc').attr('id', 'svg-desc').text(ariaData.subhed); + + chartElement = svg.append('g') /* * Create SVG filters. diff --git a/graphic_templates/quiz/child_template.html b/graphic_templates/quiz/child_template.html index 05eb0ae6..2e0d785b 100644 --- a/graphic_templates/quiz/child_template.html +++ b/graphic_templates/quiz/child_template.html @@ -2,8 +2,9 @@ {% block content %} - {% if COPY.labels.headline %}

{{ COPY.labels.headline|smarty }}

{% endif %} +
{% if COPY.labels.headline %}

{{ COPY.labels.headline|smarty }}

{% endif %} {% if COPY.labels.subhed %}

{{ render(COPY.labels.subhed)|smarty }}

{% endif %} +
{% for row in COPY.quiz %} @@ -60,10 +61,10 @@

Notes

{% endif %} -
+
{% if COPY.labels.source %}

Source: {{ COPY.labels.source|smarty }}

{% endif %} {% if COPY.labels.credit %}

Credit: {{ COPY.labels.credit|smarty }}

{% endif %} -
+ {% endblock content %} diff --git a/graphic_templates/slopegraph/js/graphic.js b/graphic_templates/slopegraph/js/graphic.js index 5f629e48..21071ea2 100644 --- a/graphic_templates/slopegraph/js/graphic.js +++ b/graphic_templates/slopegraph/js/graphic.js @@ -174,20 +174,31 @@ var renderSlopegraph = function(config) { var chartWrapper = containerElement.append('div') .attr('class', 'graphic-wrapper'); - var chartElement = chartWrapper.append('svg') + var svg = chartWrapper.append('svg') + .attr('role', 'img') + .attr('aria-labelledby', 'svg-title svg-desc') .attr('width', chartWidth + margins['left'] + margins['right']) .attr('height', chartHeight + margins['top'] + margins['bottom']) - .append('g') - .attr('transform', 'translate(' + margins['left'] + ',' + margins['top'] + ')'); + + + svg.append('title').attr('id', 'svg-title').text(ariaData.headline); + svg.append('desc').attr('id', 'svg-desc').text(ariaData.subhed); + + + var chartElement = svg + .append('g') + .attr('transform', 'translate(' + margins.left + ',' + margins.top + ')'); /* * Render axes to chart. */ chartElement.append('g') + .attr('role', 'presentation') .attr('class', 'x axis') .call(xAxisTop); chartElement.append('g') + .attr('role', 'presentation') .attr('class', 'x axis') .attr('transform', makeTranslate(0, chartHeight)) .call(xAxis); diff --git a/graphic_templates/stacked_bar_chart/child_template.html b/graphic_templates/stacked_bar_chart/child_template.html index faee9fbc..a152916b 100644 --- a/graphic_templates/stacked_bar_chart/child_template.html +++ b/graphic_templates/stacked_bar_chart/child_template.html @@ -2,12 +2,12 @@ {% block content %} - {% if COPY.labels.headline %}

{{ COPY.labels.headline|smarty }}

{% endif %} - {% if COPY.labels.subhed %}

{{ render(COPY.labels.subhed)|smarty }}

{% endif %} +
{% if COPY.labels.headline %}

{{ COPY.labels.headline|smarty }}

{% endif %} + {% if COPY.labels.subhed %}

{{ render(COPY.labels.subhed)|smarty }}

{% endif %}
-
+
[Chart] -
+ {% if COPY.labels.footnote %}
@@ -16,13 +16,14 @@

Notes

{% endif %} -
+
{% if COPY.labels.source %}

Source: {{ COPY.labels.source|smarty }}

{% endif %} {% if COPY.labels.credit %}

Credit: {{ COPY.labels.credit|smarty }}

{% endif %} -
+ {% endblock content %} diff --git a/graphic_templates/stacked_bar_chart/js/graphic.js b/graphic_templates/stacked_bar_chart/js/graphic.js index 76ac5c57..f5c1f0eb 100644 --- a/graphic_templates/stacked_bar_chart/js/graphic.js +++ b/graphic_templates/stacked_bar_chart/js/graphic.js @@ -154,9 +154,11 @@ var renderStackedBarChart = function(config) { */ var legend = containerElement.append('ul') .attr('class', 'key') + .attr('role', 'list') .selectAll('g') .data(colorScale.domain()) .enter().append('li') + .attr('role', 'listitem') .attr('class', function(d, i) { return 'key-item key-' + i + ' ' + classify(d); }); @@ -177,10 +179,17 @@ var renderStackedBarChart = function(config) { var chartWrapper = containerElement.append('div') .attr('class', 'graphic-wrapper'); - var chartElement = chartWrapper.append('svg') + var svg = chartWrapper.append('svg') + .attr('role', 'img') + .attr('aria-labelledby', 'svg-title svg-desc') .attr('width', chartWidth + margins['left'] + margins['right']) .attr('height', chartHeight + margins['top'] + margins['bottom']) - .append('g') + + + svg.append('title').attr('id', 'svg-title').text(ariaData.headline); + svg.append('desc').attr('id', 'svg-desc').text(ariaData.subhed); + + var chartElement = svg.append('g') .attr('transform', 'translate(' + margins['left'] + ',' + margins['top'] + ')'); /* @@ -199,6 +208,7 @@ var renderStackedBarChart = function(config) { */ chartElement.append('g') .attr('class', 'x axis') + .attr('role', 'presentation') .attr('transform', makeTranslate(0, chartHeight)) .call(xAxis); @@ -211,6 +221,7 @@ var renderStackedBarChart = function(config) { chartElement.append('g') .attr('class', 'x grid') + .attr('role', 'presentation') .attr('transform', makeTranslate(0, chartHeight)) .call(xAxisGrid() .tickSize(-chartHeight, 0, 0) diff --git a/graphic_templates/stacked_column_chart/child_template.html b/graphic_templates/stacked_column_chart/child_template.html index 68c44342..1408ba81 100644 --- a/graphic_templates/stacked_column_chart/child_template.html +++ b/graphic_templates/stacked_column_chart/child_template.html @@ -2,12 +2,12 @@ {% block content %} - {% if COPY.labels.headline %}

{{ COPY.labels.headline|smarty }}

{% endif %} - {% if COPY.labels.subhed %}

{{ render(COPY.labels.subhed)|smarty }}

{% endif %} +
{% if COPY.labels.headline %}

{{ COPY.labels.headline|smarty }}

{% endif %} + {% if COPY.labels.subhed %}

{{ render(COPY.labels.subhed)|smarty }}

{% endif %}
-
+
[Chart] -
+ {% if COPY.labels.footnote %}
@@ -16,13 +16,14 @@

Notes

{% endif %} -
+
{% if COPY.labels.source %}

Source: {{ COPY.labels.source|smarty }}

{% endif %} {% if COPY.labels.credit %}

Credit: {{ COPY.labels.credit|smarty }}

{% endif %} -
+ {% endblock content %} diff --git a/graphic_templates/stacked_column_chart/js/graphic.js b/graphic_templates/stacked_column_chart/js/graphic.js index 4338e883..a288852b 100644 --- a/graphic_templates/stacked_column_chart/js/graphic.js +++ b/graphic_templates/stacked_column_chart/js/graphic.js @@ -157,9 +157,11 @@ var renderStackedColumnChart = function(config) { */ var legend = containerElement.append('ul') .attr('class', 'key') + .attr('role', 'list') .selectAll('g') .data(colorScale.domain()) .enter().append('li') + .attr('role', 'listitem') .attr('class', function(d, i) { return 'key-item key-' + i + ' ' + classify(d); }); @@ -180,10 +182,16 @@ var renderStackedColumnChart = function(config) { var chartWrapper = containerElement.append('div') .attr('class', 'graphic-wrapper'); - var chartElement = chartWrapper.append('svg') + var svg = chartWrapper.append('svg') + .attr('role', 'img') + .attr('aria-labelledby', 'svg-title svg-desc') .attr('width', chartWidth + margins['left'] + margins['right']) .attr('height', chartHeight + margins['top'] + margins['bottom']) - .append('g') + + svg.append('title').attr('id', 'svg-title').text(ariaData.headline); + svg.append('desc').attr('id', 'svg-desc').text(ariaData.subhed); + + var chartElement = svg.append('g') .attr('transform', makeTranslate(margins['left'], margins['top'])); /* @@ -209,11 +217,13 @@ var renderStackedColumnChart = function(config) { */ chartElement.append('g') .attr('class', 'x axis') + .attr('role','presentation') .attr('transform', makeTranslate(0, chartHeight)) .call(xAxis); chartElement.append('g') .attr('class', 'y axis') + .attr('role','presentation') .call(yAxis); /* @@ -225,6 +235,7 @@ var renderStackedColumnChart = function(config) { chartElement.append('g') .attr('class', 'y grid') + .attr('role','presentation') .call(yAxisGrid() .tickSize(-chartWidth, 0) .tickFormat('') @@ -234,18 +245,29 @@ var renderStackedColumnChart = function(config) { * Render bars to chart. */ var bars = chartElement.selectAll('.bars') + .attr('aria-label', 'stacked bar graph') .data(config['data']) .enter().append('g') .attr('class', 'bar') + .attr('data-id', function(d) { + return d[labelColumn]; + }) .attr('transform', function(d) { return makeTranslate(xScale(d[labelColumn]), 0); }); - bars.selectAll('rect') + var barG = bars.selectAll('g') .data(function(d) { - return d['values']; + return d.values; }) - .enter().append('rect') + .enter().append('g'); + + barG.append('title') + .text(function(d) { + return d3.select(this.parentNode.parentNode).attr("data-id") + ' - ' + d.name + ' (' + d.val + ')'; + }) + + barG.append('rect') .attr('y', function(d) { if (d['y1'] < d['y0']) { return yScale(d['y0']); @@ -270,6 +292,7 @@ var renderStackedColumnChart = function(config) { if (min < 0) { chartElement.append('line') .attr('class', 'zero-line') + .attr('role', 'presentation') .attr('x1', 0) .attr('x2', chartWidth) .attr('y1', yScale(0)) @@ -281,7 +304,7 @@ var renderStackedColumnChart = function(config) { */ bars.selectAll('text') .data(function(d) { - return d['values']; + return d.values; }) .enter().append('text') .text(function(d) { diff --git a/graphic_templates/stacked_grouped_column_chart/child_template.html b/graphic_templates/stacked_grouped_column_chart/child_template.html index 7042e758..47a57925 100644 --- a/graphic_templates/stacked_grouped_column_chart/child_template.html +++ b/graphic_templates/stacked_grouped_column_chart/child_template.html @@ -2,12 +2,12 @@ {% block content %} - {% if COPY.labels.headline %}

{{ COPY.labels.headline|smarty }}

{% endif %} - {% if COPY.labels.subhed %}

{{ render(COPY.labels.subhed)|smarty }}

{% endif %} +
{% if COPY.labels.headline %}

{{ COPY.labels.headline|smarty }}

{% endif %} + {% if COPY.labels.subhed %}

{{ render(COPY.labels.subhed)|smarty }}

{% endif %}
-
+
[Chart] -
+ {% if COPY.labels.footnote %}
@@ -16,13 +16,14 @@

Notes

{% endif %} -
+
{% if COPY.labels.source %}

Source: {{ COPY.labels.source|smarty }}

{% endif %} {% if COPY.labels.credit %}

Credit: {{ COPY.labels.credit|smarty }}

{% endif %} -
+ {% endblock content %} diff --git a/graphic_templates/stacked_grouped_column_chart/js/graphic.js b/graphic_templates/stacked_grouped_column_chart/js/graphic.js index 1937e2ae..72dc7de6 100644 --- a/graphic_templates/stacked_grouped_column_chart/js/graphic.js +++ b/graphic_templates/stacked_grouped_column_chart/js/graphic.js @@ -163,9 +163,11 @@ var renderGroupedStackedColumnChart = function(config) { */ var legend = containerElement.append('ul') .attr('class', 'key') + .attr('role', 'list') .selectAll('g') .data(colorScale.domain()) .enter().append('li') + .attr('role', 'listitem') .attr('class', function(d, i) { return 'key-item key-' + i + ' ' + classify(d); }); @@ -186,12 +188,20 @@ var renderGroupedStackedColumnChart = function(config) { var chartWrapper = containerElement.append('div') .attr('class', 'graphic-wrapper'); - var chartElement = chartWrapper.append('svg') + var svg = chartWrapper.append('svg') + .attr('role', 'img') + .attr('aria-labelledby', 'svg-title svg-desc') .attr('width', chartWidth + margins['left'] + margins['right']) .attr('height', chartHeight + margins['top'] + margins['bottom']) .append('g') .attr('transform', makeTranslate(margins['left'], margins['top'])); + svg.append('title').attr('id', 'svg-title').text(ariaData.headline); + svg.append('desc').attr('id', 'svg-desc').text(ariaData.subhed); + + var chartElement = svg.append('g') + .attr('transform', makeTranslate(margins['left'], margins['top'])); + /* * Create D3 axes. */ @@ -215,16 +225,19 @@ var renderGroupedStackedColumnChart = function(config) { */ chartElement.append('g') .attr('class', 'x axis category') + .attr('role', 'presentation') .attr('transform', makeTranslate(0, chartHeight)) .call(xAxis); chartElement.selectAll('.x.axis.category .tick line').remove(); chartElement.selectAll('.x.axis.category text') + .attr('role', 'presentation') .attr('y', 35) .attr('dy', 0) .call(wrapText, xScale.rangeBand(), 13); chartElement.append('g') + .attr('role', 'presentation') .attr('class', 'y axis') .call(yAxis); @@ -237,6 +250,7 @@ var renderGroupedStackedColumnChart = function(config) { chartElement.append('g') .attr('class', 'y grid') + .attr('role', 'presentation') .call(yAxisGrid() .tickSize(-chartWidth, 0) .tickFormat('') @@ -247,6 +261,7 @@ var renderGroupedStackedColumnChart = function(config) { */ xScale.domain().forEach(function(c, k) { var categoryElement = chartElement.append('g') + .attr('role', 'presentation') .attr('class', classify(c)); var columns = categoryElement.selectAll('.columns') @@ -268,6 +283,7 @@ var renderGroupedStackedColumnChart = function(config) { }); columns.append('g') .attr('class', 'x axis bars') + .attr('role', 'presentation') .attr('transform', makeTranslate(0, chartHeight)) .call(xAxisBars); @@ -283,6 +299,7 @@ var renderGroupedStackedColumnChart = function(config) { return d['values']; }) .enter().append('rect') + .attr('role', 'presentation') .attr('y', function(d) { if (d['y1'] < d['y0']) { return yScale(d['y0']); @@ -312,6 +329,7 @@ var renderGroupedStackedColumnChart = function(config) { .text(function(d) { return d['val']; }) + .attr('role', 'listitem') .attr('class', function(d) { return classify(d['name']); }) diff --git a/graphic_templates/state_grid_map/child_template.html b/graphic_templates/state_grid_map/child_template.html index 9fd36aec..2f0aab5e 100644 --- a/graphic_templates/state_grid_map/child_template.html +++ b/graphic_templates/state_grid_map/child_template.html @@ -2,12 +2,12 @@ {% block content %} - {% if COPY.labels.headline %}

{{ COPY.labels.headline|smarty }}

{% endif %} - {% if COPY.labels.subhed %}

{{ render(COPY.labels.subhed)|smarty }}

{% endif %} +
{% if COPY.labels.headline %}

{{ COPY.labels.headline|smarty }}

{% endif %} + {% if COPY.labels.subhed %}

{{ render(COPY.labels.subhed)|smarty }}

{% endif %}
-
+
[Chart] -
+ {% if COPY.labels.footnote %}
@@ -16,12 +16,12 @@

Notes

{% endif %} -
+
{% if COPY.labels.source %}

Source: {{ COPY.labels.source|smarty }}

{% endif %} {% if COPY.labels.credit %}

Credit: {{ COPY.labels.credit|smarty }}

{% endif %} -
+ -