D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
vgchamar
Full window
Github gist
Project Documentation
<!DOCTYPE html> <html language = "en"> <head> <meta charset="utf - 8"> <title>H517 Visualization Project 1 Documentation</title> <script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script> </head> <body> <p> During the design process, I divided my project into 3 main task. </p> <ol> <li>Create the map using street data set. </li> <p>First, I created a map of London using the x and y coordinates given in the streets data set. When I imported the data form CSV and generated the Path, the visualization of the Map was jumbled up. So, I created a Path so that every time we reach and end of the line. The cursor would move to the next starting location rather than draw a line from the end point to next starting point. Then I added the location of the pumps by loading the data from the pumps dataset. Then I added the location of the deaths onto the map using deathspot dataset. For this I also included the mouse over to show the number of deaths and the sex when pointer is pointed at a location. </p> <li>Created line graph of Number of deaths VS Date.</li> <p>For the line graph, I created a separate SVG, and created x and y axis and plotted the data from deathdays dataset. I also included the mouse over for this graph to show the date and the number of deaths. However, the mouse over just shows the same single value of date and death for all points. I could not trouble shoot the cause of this issue.</p> <li>Created a Bar chart to visualize Number of deaths in each age group for both female and male.</li> <p>To show the number of deaths as a function of age group and sex, I decided to use the Bar chart. I created a separate svg to show this visualization. I used, excel to do compile the data. I then imported this to D3 and plotted it on to the bar graph.</p> <p>In the map, I used teal blue to draw, I did this so that the map is visually pleasing and for color blind it shows as a different color compared to other objects. I used black square along with text to show the location of the pumps. To ensure the symbols can be differentiated without relying on color, I used red circle to show the location of deaths. For the line graph, since it is the only curve, I used blue. For the bar chart, I used blue color to show male data set, and red to show female dataset. The two colors can be clearly differentiated by color blind. I have also included text ‘F’ to indicate female dataset and text ‘M’ to indicate male dataset.</p> <p>I tested the webpage for color blindness friendliness using ‘colororacle’ software. I was able to make out all the details.</p> <p>Most of the deaths occurred around three pumps located closer to the center of London. From the line graph, we can see that the number of deaths per day peaked around September 2nd. From the bar graph, we can make out the number of deaths were higher in the age group of ‘0-10 years’ and ‘>80 years’. There is no major differentiation between males and female in terms of number of deaths</p> </ol> <script type="text/javascript"> </script> </body> </html
https://d3js.org/d3.v3.min.js