Melanie Mazanec mmazanec22

## README.md

      
              3 files
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                mmazanec22
                / README.md
            
            
              Last active
              January 26, 2018 16:05
            
              
                Accessible Bar Chart
              
          
    Accessible Bar Chart Prototype

This is a quick and imperfect prototype to illustrate two ideas that might allow a blind or visually impaired user to experience a bar chart.  One concept is using pitch to indicate the relative height of the different bars (building upon this gist: http://bl.ocks.org/aholachek/6e18a82c0f0ada144b854f788c07d7a4).  To try this, any user may use the mouse or the arrow keys to navigate the bars.
The other idea is to apply aria labels and roles to make the different svg elements available to screen readers.  To try this, turn on the screen reader (on a Mac, cmd + F5), tab your way into the chart, then use the arrow keys to navigate the bars.  The screen reader will announce x and y values (the pitch will still sound as well-- in a real implementation, this should probably be turned off by default so as not to conflict with the screen reader).
Feedback and improvements are welcome!

  
## WorldMap.js
class WorldMap {

    constructor(parentElement, colorScheme = {land: '#787882', water: '#1a1c2a'}) {
        this.parentElement = d3.select(parentElement);
        this.width = this.parentElement.style('width').replace('px', '');
        this.height = this.parentElement.style('height').replace('px', '');
        this.remSize = parseFloat(getComputedStyle(d3.select('html').node()).fontSize);
        this.landColor = colorScheme.land;
        this.waterColor = colorScheme.water;
        this.currMapTranslate = [0, 0];

## hackedBin.js
document.addEventListener('DOMContentLoaded', () => {
    const parentDiv = d3.select('.parent-div');
    const width = 960;
    const height = 500;

    const svg = parentDiv.append('svg')
        .attr('width', width)
        .attr('height', height);

    const options = {

## index.html
<!DOCTYPE html>
<html>
<head>

    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript" src='./updateHistogram.js'></script>
    <link rel="stylesheet" type="text/css" href="./styles.css">

</head>
<body>

## index.html
<!DOCTYPE html>
<html>
<head>

    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript" src='./tooltip.js'></script>
    <link rel="stylesheet" type="text/css" href="./styles.css">

</head>
<body>
	class WorldMap {

	constructor(parentElement, colorScheme = {land: '#787882', water: '#1a1c2a'}) {
	this.parentElement = d3.select(parentElement);
	this.width = this.parentElement.style('width').replace('px', '');
	this.height = this.parentElement.style('height').replace('px', '');
	this.remSize = parseFloat(getComputedStyle(d3.select('html').node()).fontSize);
	this.landColor = colorScheme.land;
	this.waterColor = colorScheme.water;
	this.currMapTranslate = [0, 0];
	document.addEventListener('DOMContentLoaded', () => {
	const parentDiv = d3.select('.parent-div');
	const width = 960;
	const height = 500;

	const svg = parentDiv.append('svg')
	.attr('width', width)
	.attr('height', height);

	const options = {
	<!DOCTYPE html>
	<html>
	<head>

	<script src="https://d3js.org/d3.v3.min.js"></script>
	<script type="text/javascript" src='./updateHistogram.js'></script>
	<link rel="stylesheet" type="text/css" href="./styles.css">

	</head>
	<body>