I’ve long wanted to build more interactive digital content after being inspired by Brett Victor’s explorable explanations. I’m now finally coming to the place where my ability to build things is starting to match my desire to create them. This particular piece of interactive content was inspired by the NYT’s You Draw It Obama article. We did a direct imitation with carbon sequestration a while ago but I liked the broader concept of guessing at something and then being presented with data. In this case we’re trying to get people to think a little harder about the good things they got out of life just by being born. Form Tweaking First I wanted to tweak the gravity form layout. Given our first question was a placement on a scale of -10 to 10, that content needed to be arranged horizontally. This is Gravity Forms and the radio button input type. So I copied the HTML into a codepen to play with it. This is the result. See the Pen gform layout by Tom (@twwoodward) on CodePen. Results Display Another pattern I find myself repeating is roughing out the data display portion in Codepen. I can then figure out how I need Gravity Forms/WordPress to pass the data live but it’s easier to build out the experience a bit without worrying […]
First off, I believe that websites that help you think are tools. Websites that help you author media are also tools. So when I say “tools” that’s what I mean. I will also likely call them sites. That’s also what I mean. I like to start off posts like these establishing the fact that I’m not going to try very hard to make sense to you but at least I’m explicit about it. I’ve had a couple of conversations recently that have me close to building these with or without a faculty/course attached. #metoo Movies This started when I was watching one of the original Star Wars movies with my kids. I’d never really watched them closely as an adult. It really seemed like Han Solo was a textbook example of a person acting out some pretty specific examples of sexual harassment. Repeatedly Leia tells him to stop touching her and he ignores her etc. I ended up talking to some friends at a school function about it and the conversation expanded into the idea of a database of clips like this that both act as a lens on that time/space/movie and as examples of particular patterns that might be of interest more broadly. For example here’s Han being creepy . . . In order to write this post, I’ve […]
We’re trying out a new site idea for the online digital sociology program. Once again, Matt came up with an idea that really got me excited and I started wandering around trying to figure out how to make it work. At some point I found CensusReporter.org. This is a pretty amazing site that is a Knight1 News Challenge-funded project. What we want to do is figure out roughly where the viewer/visitor is geographically and give them a glimpse of that area through some data. Nothing too deep, just a taste of the interesting ways technology, data, and visualization can blend together to do interesting things. We don’t want the exact address for a few reasons. One, we don’t want to be too creepy. Two, getting a rough location through the IP address doesn’t trigger the browser approval request that more exact location data requires. My goal is not to subvert the approving/denying of location data but I worry too many people will miss that approval prompt and we’re not keeping this data. Get Location To get local data I have to figure out where the person is. To do that, I’m just grabbing the IP address and getting a location bounced back. There are a few ways to do this. I went with freegeoip.net and the following function would give […]
I am still kicking around ideas for a timeline of my work history. You can see some of the other stuff in this post. This version is a Bootstrap version that I think can end up working pretty well even in a mobile view with a bit more work. You can see it full size here. It’s set up so that there are two col-sm-6 containers that hold ten columns each making for a total of 20 covered years. I didn’t realize Bootstrap would let you just do col-1 and make it more than 12 columns. So I have two rows of 10 columns within the 6 column ‘halves’ of the page. That lets them break nicely on mobile views into two rows that stack. I set up some JSON to represent the jobs. I only did three so far but there are enough to see it’s functional. If you click on one of the first three job titles, you’ll see the data below the timeline changes. I haven’t really worked through the colors. I’m letting it marinate to see if I want to take it to fruition. See the Pen bootstrap timeline test by Tom (@twwoodward) on CodePen.
One of the things I ended up being dissatisfied with on my own portfolio was the timeline of my work history.1 At the time making an interactive multimedia timeline seemed like a good idea. Just the phrase “interactive multimedia timeline” sounds fancy, right? I made it using the KnightLab Timeline JS tool (which is a great tool) but it just doesn’t do what I want. Define the Purpose I hadn’t really thought deeply enough about my audience. If it’s people trying to hire me, and I can’t imagine anyone else caring, then I have to think what I want them to understand at a glance. Paging through the timeline can tell a decent story (if it happens) but the timeline does not allow the viewer to see the big picture at a glance. I also tried to show that while I’ve had a large number of jobs there’s a pattern of, and consistency between, organizations and between higher ed and k12. I tried to make that connection in the Timeline JS version by using the same logo and color pattern in the segments but it requires people to notice that and hold it in their heads. It’s not doing what a good visualization should do which is to offload that cognitive load to the eyes of the viewer. Hand Sketch […]
This is meant to be a general survey of a fairly large swathe of concepts and examples with lots of links for additional specificity. I encourage you to follow links.1 I’ve tried to also mix it with quotes from a variety of designers.2 Those people are also worth exploring and most links will lead you to something that will lead you down an associative trail3 of links/searches.. Portfolio design considerations are grounded in many of the same design decisions that are foundational to good data visualizations. Many portfolios also include, maybe should include, elements that meet the typical definition of data visualizations although usually of small data sets.4 Both portfolios and data visualizations can be thought of as heuristics. You’re helping people think. You’re helping them understand you, a concept, a relationship, etc. Rich content brings meaning to a graphic. Inviting visualization interprets the content and highlights the essence of the information for the reader. Sophisticated execution brings the content and the graphics to life. Dona Wong Have an Audience in Mind5 The audience sets the initial frame for your consideration. Who are you trying to talk to? What are their likely experiences with websites and what do they care about? It’s also worth thinking about what might keep you from being attractive to people that you wouldn’t like. Assuming […]
3:40 – “I believe that behavior and responsiveness is the essence of the computer as an art medium and what that means is that any time we create art that doesn’t have behavior we’re not living up to the potential of the medium. It’s not native art.” 4:34 – “… what sort of art is possible when both the art and the artist are alive? When the art and the artist are responding to each other and working together to create something beautiful.” 15:00 – “So what you’re seeing here is kind of the interplay between two living and behaving beings. There’s the fish behaving through simulation. There’s me behaving through performance and there’s this wonderful kind of symbiosis with the two of us working together to put on a show. The simulation and the performance are really complementary. So when I was making that little scene with the fish there was always this back and forth between the simulation and the performance. So if there was something I wanted the fish to do but I couldn’t perform it with my hand because it was too complicated, I had to move my hand too fast, there’s too many other things going on with the scene, I take that and put it in the simulation.” 16:02 – “There’s this back and […]
I was looking around to see how many pictures I’ve been posting to Flickr since taking the new job at VCU. I had a feeling there was a dramatic increase but I was curious about actual numbers. After stumbling around the Internet for a bit attempting to do things the hard way, I stumbled on a URL from 2004 — https://www.flickr.com/photos/heather/archives/date-posted/2004/06/calendar/ It didn’t seem to be working but since the URL itself made sense, I just replaced heather with my flickr username and put in the current year/month to get https://www.flickr.com/photos/bionicteaching/archives/date-posted/2013/04/calendar/. Dingo!1 So not only do I get the numbers I want, but I also get a calendar view of all the days I took pictures. I’m still far away from the D’Arcy/Alan shot a day stuff but that’s not really my style. I can now look and see that in three months at VCU, I’ve taken more shots than I have in entire years in the past. That doesn’t necessarily mean anything but I’m having fun and I have the mental energy and desire to do things like this in ways I hadn’t previously. Quantity isn’t the goal but lots of practice and lots of reflection ought to create some improvement. 1 It feels right. Surely you aren’t going to argue that bingo really makes better sense somehow?