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.


Austin Round


5 thoughts on “Jumping into the deep end with Javascript

  1. You’re brother’s experience matches mine. It sounds like you’re making good progress though.

    It’s probably worth delineating between javascript (the language) and D3 (a particular library written in javascript). I think most of the things you’re talking about are specific to D3 (unless you’re seeing similar things in other libraries).

    I took the code you had and made a few adjustments so it’d write something to the timeline that was visible. I put it here. You may have to zoom out to see the data but you can also view source to see what’s being written. I think your initial issue with empy elements was a result of not quite applying the D3 join pieces correctly. That’s in the line 51-ish area. I also put in a few console.log pieces that might help.

    There are some additional issues with the scale of the X axis and what to do if the width of the applied rectangle ends up with 0 as width but I think this might get you started so you can see results when you mess with things. Once again, I’d do use view source to see what’s showing up element-wise and you can shift things there to see what you need the code to do.

    If you have a GitHub account it’d probably be an easier way to work collaboratively on things like this. If you go that route, just share the link and I’ll use that as the way to have some of these conversations.

  2. I agree, I should definitely distinguish between D3 specific issues and javascript issues more broadly; perhaps jumping into javascript with a library already in mind has me conflating the two. The date issue seems D3 specific; it reads the dates in the csv as strings initially, which means they need to be converted to dates. It looks like the issue is that I tried returning the date fields as integers and then tried parsing them as dates, which javascript more broadly does not appreciate.

    I appreciate the corrections! I especially appreciate the post about join functions, although the “bust out a for loop and brute-force it” line hit a little close to home. I will definitely play around with this and see if I can find a more elegant solution to drawing the rectangles.

    I am on github as roundat and I have a few gists uploaded there that need updating. I have also been playing around with JSFiddle for testing/sharing snippets of code on the fly, if you’d prefer!

  3. If you just want to get moving with a timeline, the Simile timeline stuff is pretty functional and can be made not to look so ugly. I’ve run it off Google Sheets for the data previously.

    I tend to use CodePen for my demo stuff but the free version isn’t very good for collaboration. I think the same thing is true for JSFiddle.

    1. Simile is much more in line with the presentation I was hoping for with this assignment, I will definitely keep it in mind for future iterations! I will probably switch over to CodePen if that’s preferable.

      I managed to get something operational using Highcharts’ scatterplot functions; it’s a bit Frankensteinian but Highcharts has a lot of the aesthetic flexibility that I was looking for in a coding library so I rode it out. I have a live sample up on JSFiddle here, although I agree that the collaboration features leave a lot to be desired. I’ll have a write up about the code and my process later this afternoon!

      1. This theme doesn’t make seeing links easy does it? I think you should have the ability to tweak it, if you’d like, through the custom CSS options Appearance>customize>additional CSS. I could also tweak it if that’s helpful.

        Highcharts is a pretty good library. The good and bad about right now is that there are so many options. Sorting through them can be a pain but you can usually find something pretty decent if you’re willing to look around.

        I’ll be interested in seeing how the process went for you.

Leave a Reply to Tom Cancel reply

Your email address will not be published.

Privacy Statement