Project Description
In the DGMD E-15 course, we were given a lot of freedom to explore and learn whatever we wanted; essentially to be able to pick a UI/UX/web/AR/VR project, and build it with the help of the professor and the peer critiques of our classmates. I knew from the very beginning that I wanted, more than anything, to play around with and start learning D3. Specifically, mapping. I had been asked at my first job to create an interactive map in Drupal, but we ended up having to contract that project out because I was a very fresh and very green dev, and knew I wouldn't be able to do the idea justice within the allotted timeframe. So this project was basically a reprisal of that problem, and allowed me to learn about and explore a bunch of tools I wasn't yet familiar with.
How I contributed:
For my final project for Creative Explorations in Physical and Screen Based Computing, I created an interactive data visualization in D3 and Framer, along with a quick draft of a NextJS app using the components I built in Framer. The primary goal of my project was to learn more about how mapping worked in D3, so I set out to find a reasonably small data set with some interesting features that I could build out and expand upon throughout the course. I ended up deciding to map some data on the genetic data privacy protections various pieces of US state-level legislation afforded to consumers in various contexts.
What challenged me:
Getting the data into a format that was reasonable to work with was quite the challenge! This was my first time working on a D3 project or a map related project, so I really tossed myself into the deep end here, considering the course was definitely not a D3-focused course (although Prof. Mikhak was a source of ever-lasting patience and support, as usual). So, I want to detail a little bit about the process of cleaning and preparing this data; I think it was pretty interesting and I learned a lot.
Once I decided on what to do for my final project, I copied the table html with the data from Wesleyan's website and used an HTML to CSV conversion tool to create a first draft CSV version of it. Then, I cleaned up some of the artifacts manually in Excel (nested columns didn’t convert well, for instance, so I made new columns for those). I also semi-manually created a separate column for state and statute via Excel functions and some manual editing. Once I had the Uploaded this CSV to Notion and created a database out of it, where I then further tested and updated it. I was originally planning on just parsing the CSV file, but decided it would probably be easier to convert it to JSON and use that. So, I did so using the CSV to JSON converter above. Then I re-worked the JSON to group the data by state for easier querying in the map.
What I learned:
Actually so much. As I mentioned above, I learned a lot about data formats and processing data. I learned a lot about D3, and the various packages that it is composed of. Of course, as much as I was able to teach myself in that short amount of time, I became more aware of just how much more there was to learn about other map projection types, working with SVG graphics, and the details of data analysis and preparation. I ended up enrolling in a data visualization course in the Fall of 2022, so that I could continue this learning.