The project is following the Martini Glass narrative visualization structure. This is the final scene of this visualization story. The user is ready to explore reader driven contents and draw conclusions independently. User is presented with color code maps to represent poverty and heart disease data. In the bottom half, a state specific data is show as a bar chart. By default, bar charts show the information about the state of California.
All charts and maps are built using D3.js Version 4 library. Unlikely previous scenes, the html5 elements are added and manipulated using javascript.
The buttons in the navigation bar and the Prev, Next button at the bottom of this page enable the User Interface events. User interacts by clicking on the button or menu items to navigate to various part of this story. Mouse hover events in the bar charts show additonal data details. Mouse click allows user to select a specific state in either of the two maps.
User is presented with helpful hints as the part of page load event. The alert can be closed by clicking on X or it will disappear after six seconds, allowing enough time for user to read the information.
The mouse hover event on the either map shows the tooltip containing additional informaton about that specific page.
The mouse click event on the either map causes the bar chart in the bottom half to automatically refresh and show data for the state selected in the map.
Tool tips are used as annotation in both map and bar charts. By default, the bar charts for California are drawn on page load. When user picks a different state, the name of selected state is annotated in the map to reflect the current selection. The labels along the X and Y axis in the charts provides additional annotations for the chart.
When user selects a state, its name is highlighted on the map allowing user to focus on data and not worry about remembering click details. The bar charts and maps leverages tooltip for annotation.The poverty rate and mortality rate are show on top of bar chart in the bottom half of the screen. The numbers and the bar height transition dynamically as user moves from one state to another.
The mouse click and mouse hover events are the triggers for this page. The mouse click trigger causes map to show label of the selected state. The label of previously selected state is removed and label of newly selected state is displayed. Position of mouse along x and y axis is used to evaluate user position on the map/bar charts and it is used to properly position the tooltip. The mouse click on navigation buttons at top or bottom of the page faciliate back and forth navigation. The mouse hover event triggers rendering of the tooltip. The x and y position is also used as a trigger to change opacity of the selected state in the map.
The geopath data is read from CSV and loaded as a json object and used by d3 to render US maps. The data is quantified into three bins to show states with low, medium or high poverty/mortality rate. The poverty and heart disease related data is also read from csv directly into a JSON object and passed to d3 library functions.
The backend d3 javascript for the map passes the state information and the div information to the javascript function rendering the bar charts. On page load, the bar chart show the data of California. If a user clicks on a state in map, javascript function receives divID, and state id as input paramter and refreshes bar chart with the data for the requested state.
The state name and state code are passed to the javascript function to correctly label the selected state in the map as well as header of the bar charts. The state code is also passed as in input parameter to the javascript function to pick appropriate text colors. In order to show data for the selected state, the divId and state specific data is passed to the bar charts. The data binding between DOM and javaobjects faciliates seamless exchange of actual data items between map and corresponding bar chart. For example, black text is displayed on yellow background and white text is displayed on the red background.
This section is hyper linked to the previous and home section. The name of the target section is passed as an input paramter to the buttons and navgiation bar items.