The process began with the investigation of the city crime report for 2009 provided by the Office of the Mayor (OTM), and by reading various types of reports made available by other data sources.
It was followed by a comparative study of the report gathered from distinct sources to get a better insight and perspective of the different types of crimes reported in urban cities and identify the important highlights that would be useful for the visualization. It was also imperative to discern the key attributes in the report to help distinguish which information is most important and should be prioritized over the rest. These other key attributes identified in the report such as population based, also helped understand the highs and lows of the crimes at granular level.
Based on the analysis done as part of data inquiry, the redundant data such as id attributes and numbers were edited out and some additional data points relevant for the visualization such as city population were added to the final project data. Here the data was also sorted according to the required order for final visualization.
As per the technology stack selected. It was important to have a fair knowledge of SVG and D3 library to get started with the development process. The D3 documentation was very useful in understanding the key concepts and APIs that will be necessary for the implementation. I went through the online course training on D3 fundamentals and Scott Murray’s book on data visualization for the web. The book was pretty helpful in getting the SVG fundamentals right.
Before the development kickoff, rapid prototyping with static data helped come up with the first prototype. It helped get a clear understanding of basic visualization using D3, SVG and CSS3 and the role each of these technology play and their integration as whole.
The prototyping phase also helped setup the development workflow and fix early issues like dealing with CORS (cross domain server origin) issues. The basic prototype done served as the starting point for the final development.
The line graph with connected points was chosen as visualization form. The D3’s path and linear scale features were used extensively for the line graph. Constructing the scale, and row and column axis feature were the complex part of the development, given that D3 has some amount of learning curve for this. It also required use math to compute the ranking values and figure out the exact location for the coordinates representing each city in the graph
Presentation and Styling
Besides utilizing style properties in D3 and SVG, CSS3 was used extensively to style the major components of the visualization including the path and shape colors.
Interaction and Behavior
The main interaction component added was the tooltip overlay that provides tidbit of information for the corresponding city. The stack of buttons added at the bottom were used to interact with the visualization such as toggle between rates and line nodes.
No any major performance issues were detected. Although the code was code was optimized to reduce the file size of the script that helped reduce the overall payload and speed up the rendering of the visualization in the smaller devices.
The text content were added below the visualization explaining the key factors of the visualization and other information pertaining to the dataset used.