Audio Annotation POC Using WaveSurfer.JS

See the Pen wave surfer – waveform by Tom (@twwoodward) on CodePen. I needed to make a quick proof of concept for the annotation of audio on the web. In this case, it’s meant to provide a visual and auditory way to play through interview segments that represent different categories of responses. I found WaveSurfer.js this morning and just a bit later I had a functional example. I find the ability to highlight track elements visually and access specific segments to be a pretty powerful combination. If we stacked several tracks vertically the visuals would quickly point out content variation in terms of timing and total composition. You could get more and more complex from there. Playing with it gave me all sorts of ideas (including possibly using it as part of of the upcoming Reclaim Your Dance Party // API + Audio = (beats, visuals, internet, participate) session at Domains 17 with Grant and Brian). It’s also looking like I’ll be able to work more with our music department to think through online course on music so possibilities like this will be very useful. This kind of thing would be pretty easy to turn into a plugin . . .

Simple Text Analysis POC

See the Pen text analysis color viz – step 1 by Tom (@twwoodward) on CodePen. Assuming you have sentences, phrases, or words you’d like to categorize . . . you could do something like this to create a visualization. This one is using CSS but it could be done in any basic word processing software. Setting levels of opacity would allow for multiple-overlapping categorizations. See the Pen text analysis color viz – step 2 by Tom (@twwoodward) on CodePen. Playing with font size and the rotation of the paragraph also opens up some doors . . . as does doing different rotations at the sentence level depending on the categorization of the sentence. You could get even more granular with stuff like that using data attributes and CSS. See the Pen text analysis color viz – step 4 by Tom (@twwoodward) on CodePen. A Bit Odder See the Pen text analysis color viz – step 5 by Tom (@twwoodward) on CodePen.

Using Chart JS in FileMaker Pro 15’s Web Viewer

I’m doing a project in FileMaker. FileMaker 15. I think the last time I used FMP seriously was 2010-ish- version 11 had just come out. It’s still the same program but there have been some interesting changes. It’s also weird now because I have an entirely different set of experiences with technology that I didn’t have back then. FMP’s charting/graphing still leaves much to be desired. I was trying to create a particular chart and thought I’d be slick. I tried many things. Many, many things. I even tried creating stacked bar charts with the initial bar color begin set to transparent (that would have worked) but FMP does not let you set custom color schemes for charts (which is insane). In any case, I started wandering the Internet and found a video on integrating Google Charts with FMP 14 and the web viewer. The easiest path seems to be — get your HTML working without FMP variables – make sure all your css/js etc. are full URL paths Once it’s working, escape all your double quotes by doing a find/replace all with \” Paste this into a web view component (make sure you wrap the whole thing in double quotes) you’ll then have something like this in your editing view switch to browse to make sure it works If […]

Thinking About Digital Literacy

I was asked to speak at the VCU School of Education’s Teaching Literacy in a Digital World Conference this past Saturday. I’ve haven’t spent much time thinking about “digital literacy” in the past few years. It’s been somewhat mashed together with other terms that overlap like- digital fluency, computational thinking, etc. – and like those terms there’s not much agreement on what it is. I glanced at a few definitions prior to making this but didn’t really stick with one. When Dr. Leila Christenbury started the conference she referenced the “find, evaluate, utilize, share, and create content using information technologies and the Internet” definition of digital literacy so I added that while I waited and it makes as good a framework as anything else. A chunk of the presentation is on GitHub hereĀ or you can fork it here. I opted to do the presentation with reveal.js and on GitHub mainly because I need to be expanding my own competencies (digital and otherwise). I struck the “differently” portion because I wanted to orient things more towards the idea of doing things and didn’t want people getting caught up in the nuances of whether it was really “different.” This was an attempt to connect with the audience. I believed they were mainly k12 teachers or faculty in the School of Ed (who […]

Insta Snoop

A while back I was messing with getting Instagram data without bothering with their API because I think their most recent API changes are really annoying. I’m also a bit fascinated with the scale of numbers in social media right now. I opted to look at Snoop Dogg’s Instagram followers and plot their change very 10 minutes. Click here or on the image to see the live chart. Get the Instagram Data w/o the API & Put it in the Database It turns out that each Instagram page has an embedded JSON file with the data I wanted. You can see it if you view the source of any page. This Stackoverflow post was kind enough to point it out and you see regex rearing it’s head again. I started out with my standard process of using Google Sheets as the database but decided I’d try MySQL because I wanted to try getting the JSON ought more cleanly. The chunk below grabs the data and puts it in the database. So that gets us the stuff we want in a nice little box on the Internet. I did try to do some fancy mysql stuff to avoid entering the change in followers as an additional field but I failed in enough ways that I just opted to proceed with the […]

Geo Tagging WordPress

First, go try it out if you want. Submit something. It’ll help it make more sense. I thought this would be a lot easier than I made it. I tried lots of paths and considered spending various amounts of money to make this easier. Please benefit (probably) from my wandering. I try to link in where I learned different things and, more importantly, I tried to emphasize vocabulary that might be useful to you. My goal1 was to- have a Google2 Map interface that auto-located the device allow the user to drag the marker to adjust the location plot the resulting WordPress posts on a map To make this work you do need a Google Maps API3 key and on the WordPress side you’ll need the Gravity Forms (Costs money but worth it) and Geo Mashup (free) plugins. Gravity Forms will let you create posts via a form and provision form elements via URL parameters. Geo Mashup is the friendliest way I found to display posts on a Google Map based on lat/long parameters associated with the post. Auto Locate I went to a few different places for this but ended up finding/using the handy example posted in the Google Maps API documentation. It took me a while to get there- “geolocation” is the key term. Add it to your […]


Inequality Mapping

A while ago (maybe a week) I had a conversation with David about inequality and mapping the data to help make it more understandable. He shared the video above with with me on Sept. 29. That got me moving. Initially, I played with the data in Google Earth. It’s pretty easy to generate circles1 with various radii2 I used this website to make the circles in only a few minutes. I played with it in Google Earth but ended up being unsatisfied with the options available in the new Google My Maps online interface. So that led me down the path of messing more directly with the Google Maps API.3 As I wandered around looking for examples I found a javascript library on Github (JQuery Location Picker) that seemed to do most of what I wanted. It let you pick a location and drop a marker with a specific circle size. My next goal was to figure out how to make a drop down list set the variable for the circle radius. Now that’s not difficult for anyone with a clue regarding javascript programming or probably anyone with a general clue about programming. I usually have a pretty good idea how this ought to work conceptually but not much of a clue what to actually write. It took me a […]

3D Passenger Pigeon Bones

I’ve been working with Bernard Means who runs VCU’s Virtual Curation Laboratory1. We spoke briefly a while back about building a site to allow for interactive views and downloads of 3D STL files his team has made of passenger pigeon bones. One of the goals was to allow mobile devices to interact with the site in an “app-like” fashion. This is more than a desire for the PR boost that seems to come with creating an “app”2 What we’re working toward is the ability to cache this stuff and enable archaeologists in the field to interact with the virtual shapes on mobile devices or download the shapefiles, print them out, and carry the replicas into the field (next up is a consideration of points). We wanted to get the passenger pigeon bones out in time for the anniversary of the extinction of the species which was 100 years ago today. Due to the excitement and drama that is the new school year, I didn’t end up getting the bones or focusing on this until Thursday. This was the first website I’ve made by hand (non-cms) in a while. I figured it’d be good for me and I thought it’d help remove complications. I don’t know if that ended up being true but it was a decent idea. It was a […]

Voyant (Green) – it’s a peephole!

h/t the wily Alan Levine Seeing Cindy’s post which put “As We May Think” in a tag cloud, I started wondering about other text visualization options and understandings they might drive. ManyEyes was long my default for this type of thing but the hassles with Java security have driven me away. So I decided to give Voyant a try. Will Berry1 had used it so well with students, it seemed worth a more in depth exploration. You can play with the text of “As We May Think” in Voyant here. As you can see you get the typical tag cloud. You do have the additional ability to hide words using pre-constructed common word lists or custom lists you build yourself. That can be awfully useful. You also have the ability to select certain words from the corpus2 and they will be charted in relative or raw distribution rates across the corpus. Incidents of “as”, “we”, and “may” are depicted below. You can also view occurrences of selected words contextually. Below are “record” and “thought” as I was curious how closely they would parallel one another. I think the contextual piece is nice, not quite as nice as the branch stuff ManyEyes does but nice and space appropriate. It’s interesting to see that in combination with when the words appeared. Bush […]

Two Different Time Lapse Experiments

Time Lapse Trip from Richmond VA to Tampa FL from Tom Woodward on Vimeo. This is my first attempt with the GoPro. I think it’s set to one shot every 30 seconds. You can see me fiddling with the settings a few different times if you’re masochistic enough to watch it through. The battery ran out early in the trip and resulted in me using it without the stand. That helps explain the repeated drifting as the USB cord1 pulls it slowly towards the driver’s side. It is interesting to see a 12.5 hr trip condensed down to 4 minutes or so. I may do it on the way back but pointed mostly towards the sky or maybe at the kids. Knowing where the stops were makes me wonder if something similar would make for a interesting take on Dan Meyer’s original graphing stories. On the other end of the time lapse spectrum is this attempt to condense one my attempts to fix a photo from the reddit pic request group. This one is kind of amusing to me in that you can see me googling some stuff for a sick child in the middle and finishing up with some posts to reddit and flickr. There is no sound but it’d be pretty easy to narrate if you wanted to […]