Jumping into the deep end with Javascript

I should preface this post by saying that my grasp of coding languages is tenuous at best. Most of my background is html and css stems from coding Myspace profile themes for my friends in the mid-2000’s, and I went to a high school that thought Visual Basic was still a relevant coding language in 2008. I college I took a course on backend web development, but even that was mostly creating sign-up sheets without any styling and praying that the data read to a server database.

That being said, my long term goals for this course may seem a bit lofty. As I read more about interactive visualizations or data visualizations for web publication, it seems like javascript is going to be a necessary component to making my information easily updated and visually appealing for users. I spent the better half of the week reading some basic javascript documentation and getting my IDE and local server running to troubleshoot some code, and then the second half of the week with my head in my hands wondering what I was doing wrong (I hear from my brother, a web-developer, that this is pretty much par for the course).

For our first timeline assignment, I tried to make a pseudo-Gantt chart style timeline of major events in the Animal Rights Movement. My intention was to split major events into three categories; advances for animals used in experimentation, advances in factory farming, and major milestones for the movement itself.

One quality that I wanted to retain with this visualization is that the data could be easily updated without having to recreate the whole visualization. To achieve this, I used the D3 javascript library to parse information from a csv file to use as datapoints.  D3 is a widely used and extensive visualization library for javascript that can create some truly stunning visuals. Basically, I tried to write a function that would iterate over the rows of the csv and return the data as arrays to be used by the chart.

Using start years and end years, I wanted to make something in the vein of this visualization:

Phillipson, G. 2013. Global Volcanic Unrest in the 21st Century: An analysis of the first decade. Journal of Volcanology.

Through this process I made two major discoveries: 1, Javascript does not like it when you try to parse a single year as a date; 2, javascript¬†really doesn’t like it when you try to create a timeline with intermittent or overlapping start and end dates.

I am still toying with the code and I am hoping to have it operational soon, however I think this is a lesson in taking it slow. I will probably go back to the drawing board and declare all my information as constants and see how that goes before I try messing with data parsing any further, and then slowly pluck away at these more long term design goals throughout the semester. Similarly, there are some other beautiful visualization packages like Highchart that I would like to play around with before deciding to rally behind D3 completely.

Privacy Statement