Bar Charts with D3

First off, last week, Sweta and I partnered together to devise a data-related activity for young visitors to the New York Hall of Science in Queens. The entire class was tasked with coming up with an activity that would be engaging for the youth and hands on, with materials that could be readily available.

We began by brainstorming what kids are interested in and we settled on something animal or nature related. We might have slightly misunderstood the assignment because we tried to focus on using a web based dataset. We stumbled upon an interesting dataset through NYC Open Data that detailed every single tree in every borough. Both of us, as people who grew up in the suburbs, figured that city children would have a very different relationship with trees and nature than we did. We wanted to explore that in some way. 

We didn't quite get around to devising the full activity since we had far too many ideas floating around to condense in such a short time period. in essence, we thought building a garden with recyclable materials, or "planting" their tree on a map of New York would be something fun to do. We also thought maybe there was a way to incorporate elements of the project Manahatta, where children could see the city now and how many trees used to be where they are right now/where they live/where they go to school pre-settlement. 

Who knows? Perhaps, once the semester is over and if we have no job prospects, Sweta and I can revisit this activity and see if there's some way to turn it into a lucrative museum activity. 

In the meantime, I struggled a lot with the bar chart activity. I don't have a very strong coding foundation. HTML and CSS I am quite familiar with. I took one intro to Java class, but am not very strong in that field. I know maybe .1% of Javascript. 

I originally wanted to measure the number of incidents by police precinct on each day. Because of all the difficulties, I simplified it to just the number of incidents on any particular day.  It took me a while to realize that my CSV file needed to contain only the column that I wanted to look at. Because nothing was working with the local file, I tried it with SoQL. This is the SoQL query:$where=created_date<'2015-01-01T00:00:00' AND created_date>'2014-11-30T00:00:00' &$select=created_date

Still, nothing happened. I changed the array to be a month instead of a week. So it held 31 items instead of 7, and I modified the forEach loop as well. I replaced all instances of "week" with "month." Still nothing. 

I can't tell if the problem is due to formatting or something along those lines. Again, I'm not well versed in JavaScript so I can't quite tell. My code is almost verbatim what was mentioned in the tutorial. While I did reference numerous other tutorials (including Mike Bostock's and some other D3 bar chart ones), I stuck as closely to the professor's as possible. 

Here is a link to my code in Github. It still does not work. I hope to continue to revise it throughout this week to see what I am doing wrong. 

UPDATE: I got it to work! Sadly, the only way I got it to work was by essentially copying the entirety of the professor's code for the 311 example bar chart. I was initially trying to organize information by date, now it is by day of the week. But whereas before, I didn't have anything working. At least now I am able to see a rudimentary visualization. Here is the result:

Sriya Sarkar