/
about.html
58 lines (50 loc) · 11.8 KB
/
about.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="header">
<h1 id="title">NYC School District Quality</h1>
</div>
<div id="navbar">
<h2 class="navtitle">Navigation</h2>
<button id="home" class="nice-button" onclick="location.href='index.html';">Home</button>
<button id="about-vis" class="nice-button" onclick="location.href='about.html';">About Visualization</button>
</div>
<div id="main">
<div id="main-scroll">
<h1>About</h1>
<p>This site is composed of five visualizations: one heatmap and four normalized stacked bar charts. Each chart makes use of animated transitions, mouseover tooltips, and annotations. This was written in HTML/CSS and Javascript, and uses the D3.js (v4) and jQuery libraries. Python 3 was used for processing the data prior to visualizing it. This project has been tested for compatibility with Chrome, Firefox, Edge, and Internet Explorer 11. I make no promises about Safari or any other browser.</p>
<h2>Narrative Structure</h2>
<p>The narrative structure that I use to display these visualizations is the martini glass structure. The martini glass begins with author-driven content and leads into reader-driven content. My project is organized by these rules because it begins with a guided tour of the data and then reaches a point where the viewer can explore the data by themselves as desired.</p>
<p>The guided tour consists of five scenes that each consist of one chart, a brief text summary of what it shows, and some analysis of what insights may be drawn from it. This is the author-driven portion because I control the sequence in which viewers examine the data and I provide my own observations with each chart. This guided tour ends in a "jumping off point" as the martini glass structure demands. In this case, it is when the viewer clicks the <b>Finish</b> button at the end of the last scene. This begins the reader-driven portion. After clicking <b>Finish</b>, all of the scenes are unlocked and displayed on the same page for the viewer to easily scroll between charts. The viewer may now navigate the scenes freely and make their own observations about the data. If they wish, the viewer may also click the <b>Reset All</b> button to start the tour over.</p>
<p>It may be argued that my narrative structure is instead an interactive slideshow, because the viewer navigates the scenes similar to slides and each scene allows for a drilldown in the form of tooltips. However, I disagree with this because I do not think that tooltips are sufficient to provide a true drilldown in this case, and because the end of the guided tour results in a view that allows users to navigate without being constrained to a single scene at a time. For these reasons, I maintain that this is a martini glass structure, and not an interactive slideshow.</p>
<h2>Scenes</h2>
<p>As mentioned above, this narrative consists of five scenes (plus a starting page with no chart on it). In the larger scope of the entire site, scenes always appear in the big main div outlined in green. To the left of this is the navigation and settings pane, which holds buttons that allow the user to navigate the site. At the top of the page is the title div that contains the name of the dataset. This layout never changes as the user navigates the site, and this consistency helps ensure that the viewer does not get disoriented.</p>
<p>Each of the five scenes displays a single chart and some summary/analysis text. All scenes follow the same structure in order to not overwhelm the viewer. At the top of the scene is a heading that identifies which component of the dataset that scene is about. This is followed by a brief summary of what that component means and what data is being shown. This is followed by the chart itself, with its tooltips and annotations. Underneath the chart there may be another brief paragraph of analysis. Finally, the scene concludes with the navigation buttons to either go on to the next scene, go back to the previous one, or reload the chart if necessary.</p>
<p>Along with these structural similarities, there is also a consistent color scheme. All of the colors are muted rather than vibrant, and were chosen because they work well together even for viewers with different forms of colorblindness. In addition to the color scheme, the scenes also make use of D3 transitions to load the charts and annotations. This helps the viewer follow along as the chart loads, rather than be bombarded with an unfamiliar visualization as soon as they load a new scene.</p>
<p>The order of the scenes is organized so that the viewer is taken through a tour of the dataset from a broad view to a detailed view. The tour beings with a heatmap of how many schools of each level there are per school district. This does not say anything about school quality, but serves to familiarize the viewer with the dataset and ease them into the next several visualizations. The second chart that is displayed is Overall Grades, because this gives a broad look at school quality per district. Once the user has been exposed to that, the next three scenes offer a more detailed look at what composes the Overall Grade by examining its three components: Environment, Performance, and Progress.</p>
<p>I chose to make the first chart a heatmap because the goal of this chart is to show the difference in the concentration of each school level across districts. A heatmap with a colorscale where larger numbers of schools are mapped to darker colors provides a clear way to visualize this information. The other four charts are all normalized stacked bar charts with one bar per district. I chose this chart type to display data on school grades because the goal is to compare districts as a whole, rather than individual schools. Using a stacked bar chart provides a clear way to display all score levels as parts of the whole district. Using a normalized y-axis scale facilitates comparison between districts, since different districts have different numbers of schools. The size of the marks on each chart (bars on the bar charts and squares on the heatmap) were chosen so that there was enough whitespace in between them in order to not make the charts look too cluttered.</p>
<h2>Annotations</h2>
<p>Each of the five charts contains at least one annotation. For visual consistency, all annotations follow the same template: the text of the annotations is the same size and color and is fitted to the available space, while a dashed black line leads from the annotation to the point of interest on the chart. Annotations are used to highlight interesting features about the chart and to emphasize ideas that were explained in the analysis text above and below the charts. For example, the annotation in the Progress Grades scene calls out the idea that NYC charter schools appear to have issues with graduation rates, which is explained in the analysis below the chart. All annotations are cleared upon loading a new scene, reloading a chart, or upon clicking the <b>Turn Off Annotations</b> button in the settings pane on the left of the page. No annotations are designed to be carried over between charts.</p>
<h2>Parameters</h2>
<p>There are several parameters that control the state of the visualization and determine which data is displayed. The most clearly visible of these is the <b>annotations</b> parameter, which determines whether or not annotations are to be displayed on the charts. By default, this is set to <b>true</b> when the site is first loaded, and viewers can subsequently toggle this parameter with the <b>Turn Off Annotations</b> button. (When pressed, this button changes into a <b>Turn On Annotations</b> button.)</p>
<p>The other important parameters in this project are used to determine which scenes the viewer has unlocked on the tour. The <b>nav_visible</b> javascript variable contains a true/false setting for each of the five scenes. If the viewer has unlocked access to a scene (by clicking <b>Next</b> on the previous scene), that is denoted by changing that scene's parameter to <b>true</b>. This collection of parameters is used to save the state of the visualization and determine which scenes' navigation buttons should show in the navigation pane. The viewer cannot unlock scenes out of order.</p>
<p>The final parameter, contained in the javascript variable <b>show_all_divs</b>, is used to determine whether the viewer has unlocked all of the scenes. This is set to true when the viewer clicks the <b>Finish</b> button on the final scene. Once this is set to true, all scenes are displayed on the same page for the viewer's ease of use. All parameters can be reset to their default states by clicking the <b>Reset All</b> button, and are all stored in the browser's local storage in order to save the state of the visualization as the viewer navigates between pages.</p>
<h2>Triggers</h2>
<p>The event triggers by which the user can interact with the visualizations and parameters are clicks and mouse over events. The user may mouse over any of the five charts to display a tooltip with more detailed information about what they are viewing. Mouse over events do not change any of the parameters discussed above, but they trigger tooltips to display using D3's event listener functions. The user is made aware of the existence of the tooltips in the text introduction in the District Composition scene, as well as two annotations on two separate charts.</p>
<p>In addition to mouse over events, the user can trigger an interaction with the visualization by clicking on any of the buttons on the screen. From the styling and location of the buttons, it should be clear to the user that they are meant to be clicked and interacted with. If not, then the introduction on the starting page of the visualization also discusses the buttons and their effects. The buttons in the Navigation pane on the left take the user to different scenes in the visualization, as well as this About page, but they do not change any parameters. The effects of these buttons are disabled once the user finishes the guided tour and all of the scenes are displayed on the same page.</p>
<p>On the other hand, the buttons in the Settings pane on the left do interact with parameters. The button labeled <b>Turn Off Annotations</b>, as disucssed above, toggles the parameter that determines whether to display chart annotations. The <b>Reset All</b> button can be used to change all of the parameters back to their default states.</p>
<p>Each scene also has <b>Prev</b> and <b>Next</b> navigation buttons in the bottom left corner, as well as a <b>Reload Chart</b> button in the bottom right. The Reload Chart button does not modify parameters, but simply clears the canvas and recreates everything that scene should show. The <b>Prev</b> button also does not interact with the parameters discussed above, but does toggle which scene is displayed by showing and hiding the relevant divs. Finally, the <b>Next</b> button navigates the viewer to the scene that follows the one they are currently viewing, also by showing and hiding the proper divs. However, once the viewer clicks this button, it also modifies the parameter that keeps track of which scenes the viewer can access. Once the viewer has navigated to a new scene for the first time, that scene's parameter is set to <b>true</b> and that scene is unlocked until the state of the visualization is reset.</p>
<h2>Sources</h2>
<p>I used the following pages as references for developing this project.</p>
<ul>
<li><a href="https://github.com/d3/d3/blob/master/API.md">D3 API Documentation</a></li>
<li><a href="https://bl.ocks.org/mbostock/3886394">Normalized Stacked Bar Chart Example</a> by Mike Bostock</li>
</ul>
</div>
</div>
</body>
</html>