Weekly Bookmark Highlights (weekly)

Posted from Diigo. The rest of my favorite links are here.

WP video tutorials

Over the past week I have spoken to some faculty folks concerned about their students not being able to cope with the technical demands of setting up their first blog. I tend to point out that they might have students who have already used a rampages blog for other classes and even if they do not,  rampages(wordpress) has a couple of useful videos that can be accessed through the dashboard. I noticed that this link can be easily overlooked. I thought a short post with an annotated image might be helpful to point to folks in the future. Hopefully students will find this a useful tip when setting up their sites initially.
To access the tutorial videos , make sure you are logged into your site go to dashboard>video tutorials. Clicking on any topic will launch a short informative video.






Weekly Bookmark Highlights (weekly)

Posted from Diigo. The rest of my favorite links are here.

OLE intro video


I am part of the ALT lab team helping to facilitate the ongoing Online Learning Experience (OLE). As part of the OLE we are creating intro videos to demonstrate how you might create a sense of social presence for your students.
I made a couple of decisions in thinking through this process. First I decided to create it using just my iPad (and iOs’ iMovie) to demonstrate that if you have a smartphone or a tablet chances are you can access apps that will allow you to create a quick video just like this. I also decided to create a “picture in picture” effect for several reasons. One because I did not want my face to occupy the entire screen and also because recent research indicates that there are added benefits in making both the course content and the instructor visible.
So as you start to think about creating your own videos what choices are you going to make?


How I use Twitter

At LifeHacker they have a series of posts called “How I work” where they ask various people to share their work, productivity habits, favorite tools etc. In our OLE planning meetings we’ve been discussing how we would incorporate twitter use into the various course elements. As part of that thought process we decided to reflect on how we all use twitter. So this is a little bit in the same vein of what Lifehacker does but on a smaller and more focused scale.

My initial reaction to twitter was that the 140 character limitation would effectively limit the utility of the tool. I wondered what can you say or do in 140 characters?  For now I use twitter to basically search for content I’m interested in and then I usually follow the person behind that content. For example over the past few weeks I have been interested in learning about data visualization and have found people on twitter more than willing to share their ideas like @adilyalcin who is the creator of the Keshif visualization library.

@adamrpearce  a data visualization developer at NYtimes and Bloomberg who has developed some really impressive visualizations such as this one

and @pberden a developer from the Netherlands

One way I try to streamline my use of twitter is through Hootsuite which allows me to manage twitter through a customizable dashboard. I also use curated lists to easily find the conversations I am interested in.










So for me twitter now is a really great way for me to find content and then connect with the people behind that content. I also try to tweet out things that interest me that might be useful to folks in my network. If we were to think of twitter usage as a continuum spanning various aspects of use. I will probably be at the nascent stage of still discovering and figuring out ways in which to take advantage of twitter as a platform. However, I have learnt that 140 characters does go a long way to finding content and connecting people in various ways

To my fellow ALT labbers what are your thoughts on twitter or as Lifehacker would put it: “How do you work with twitter?”




Batch Geo is an online tool for batch geocoding addresses. It is also great tool for an icebreaker activity in an online class. It can be used to display location as well as other pertinent information on a map. The process is really simple, students information can be entered in a simple Google form or spreadsheet. After collecting the information, copy and paste it in BatchGeo. A map will be generated that shows the geographical location of participants.

View IceBreaker in a full screen map


Padlet is a tool that can be used for group brainstorming. In this example, we invited students to draw from their own perceptions and share what their greatest hopes and fears about online teaching are.


Initial steps: mapping with D3.JS

I have been fascinated by some of the interactive maps on the web created with the d3.js javascript library. The New York Times especially has a bunch of stories augmented with the addition of interactive maps. Some of these maps can be found on chartsnthings.

While the data determines what type of visualization can be created I think that when used well interactive maps can add rich layers to a story.  Perhaps a different type of digital storytelling if you will. The two maps below are examples of this. The first student created project below from UW Madison is  an interactive map that charts the changes in abortion rights since Roe vs Wade in America. If you were to take away the map and leave just the text, you would be left with a compelling story but the story would probably not be as engaging as before.  Likewise with the second example where a timeline integrated with the map depicts flu trends in  various US states over a period of time. Once again the addition of the map makes the story come to life.Unnamed image


After perusing these and other examples from Mike Bostock the creator of D3. I wanted to learn how to build my own interactive maps. Starting from scratch the code  seemed quite daunting but thanks to the many examples I found on the web

I managed to cobble together some code to draw a simple map with a basic tooltip interaction.

Here’s the simple map I created with D3 and how I created it


Finding Data:
The first step was to find geographical data. Initially I found some github repositories with geojson and topojson files but none seemed to have the required details needed so I tried to find shapefiles with the necessary information. These sites (below) were helpful in finding shapefiles:

I went to mapstarter.com   and downloaded the file as topojson. I then had to edit the country names in the topojson file using Brackets.io. After editing the json file all that was left was coding the map with d3.js.

The Code:
I must admit part of the code didn’t make much sense to me initially but after several tests and the help of Chrome’s Inspect Element feature I got it to work and I’m at the point where I have a basic understanding of what everything does. So here goes:

The CSS below styles the tooltip for the map







The next step is the projection algorithm that creates the map in a flat plane



The tooltip code (below) is setup to display information when the user hovers over a particular country.  The objects property “name” refers to the different countries in the topojson file. The information shown in the tooltip is pulled from there.




The next part of the code below references the specific topojson file

this part of the code sets up the scale for the map


The rest of the code below draws the map from the data in the topojson file







Once again a simple map but it took several trial and error attempts. Next steps will be to experiment with additional data and creating interaction on the map….using a combination of timeline sliders etc…..

learning JS

Over the past two weeks I have been working on a project that has required a bit of Javascript. I still have lots to learn but I’ve found that it’s relatively easy to take someone else’s shared code on Github or Requirebin and then modify it.

So far I have learned how to build simple charts with Chart.js and DimpleJs both of which are javascript libraries that allow for the creation of simple charts. Dimplejs is a charting library based on d3 which aims to make the coding process simpler than d3.
D3 developed by Mike Bostock stands for Data Driven Documents is a javascript library which allows for the creation of really interesting visualizations. A glance through the examples on their site shows

Speaking of d3 Victor Powell and Lewis Lehe’s setosa.io website has an interesting mix of data visualizations created with d3.js. Many of the projects shared on this site embody the same ideas Bret Victor develops through his concept of explorable explanations. The idea of using visualizations to make complex topics come to life has real potential. Being able to play with/manipulate different pieces of data reinforces understanding in a way that static content does not.