Essay

<!DOCTYPE html>
<html>
<head>
<style>
h3{
	font: 18px Helvetica Neue;
	color: indianred;
	font-weight: bold;
}

p {
	font: 13px Arial
}
</style>
</head>
<body>
<p>
This visualization is designed to answer the following questions:
<pre>
1.	What are the most common types of complaints New Yorkers express in their 311 calls?
2.	How many complaints are filed in a 10-day period?
3.	Which organizations are responsible for resolving these complaints?
</pre>
</p>

<h3>Visualization Components:</h3>

<p>
This visualization contains 2 charts and a table as follows:
<pre>
1.	A Bar chart of the top 20 complaint types
2.	A Bar chart of the top 10 responsible agencies
3.	A glossary table that can help the user understand the agency acronyms and also to re-direct him/her to their website. 
</pre>
</p>

<h3>Dataset Description:</h3>

<p>
This streamgraph is created using the popular New York City’s 311 call center data. 
311 Service Requests encompass all non-emergency requests from the city, including but not limited to noise complaints, 
air quality issues and reports of unsanitary conditions. This data is publicly accessible 
on <a href="https://public.enigma.com/datasets/nyc-311-service-requests/0d4eec62-5d77-4a1e-8300-485020eac5d0" target = "_blank_">enigma's website</a>.
</p>

<h3>Study Period:</h3>

<p>
For this visualization, I investigated only 10 days’ worth of data, from August 1st to August 10th, 2016. I applied this 
time filter to the data, downloaded a CSV file from Enigma, did some data processing and saved the results as 
Json files to be read by the HTML code. 
</p>

<h3>Chart Type Justification:</h3>
<p>
A bar chart is an appropriate chart to use for the two graphs because our intent is to show a continues measure (number of complaints) for different categories 
(either complaint type or the responsible agency).
<br>
Glossary table is also a natural choice for showing two categorical variables.
</p>

<h3>Axes and Legend:</h3>
<p>
In the bar charts, the complaint categories and their corresponding responsible agencies are alllisted along
g the Y-axis and x-axis is showing the number of calls in each complaint category.
<br>
The glossary table does not have any legend/axis.
</p>

<h3>Triggers, Parameters and Annotations:</h3>
<p>A number of different tools are designed to give the viewer a better understanding of the charts:
<pre>
1.	Sorting trigger options are available on the top of the charts. The viewer can choose to sort the categories/agencies in an ascending or a descending order. 
	Clicking on these buttons, triggers a smooth transition from the current state to the selected state.
2.	Tooltips are available when hovering over boxes to give out on-demand and, in this case, more accurate information about each complaint 
	type/responsible agency.
3.	A rounded count of complaints in each category/agency is available on the right-side of the chart to help the viewer with some 
	ballpark estimations of the number of calls.
4.	The top ranking categories/agencies are highlighted in the text below each graph to draw user's attention.
5.	A glossary table is made available to highlight different agencies involved in the process and has provided the user with links to their websites.
</pre>
 </p>

<h3>Narrative Structure and Scenes:</h3>
<p>
Story Starts witthe h presentation of a graph of different agencies involved in the process of resolving 311 complaints. Due to space constraints on the graph, 
agency acronyms are used to label chart elements. However, down in the bottom of the graphthe , viewer is provided with a list of responsible agencies alongside with their websites. 
This can be a starting point for a more thorough investigation.
After analyzing this graph, the next natural question is about the nature of these complaints. Herethe , user is re-directed to another visualization that ranks different categories of complaints based on their frequency.
Again the viewer is given the option to rank these categories in a selected order. Just like the previous graph, the top ranking categories (noise and parking issues) are highlighted in the text. 
</p>
</body>