Category Archives: Visual

Sharing to Learn – Learning to Share

Reposted from a June 24, 2014 3M-DS106 Salon Blog Post.  All proprietary information has been deleted from this public version.


Internal 3M Spark Post to R&D Community:

Rochelle Aug_07_Hand

Sharing to Learn – Learning to Share
Posted by 3M-DS106 Salon Patroness Rochelle Lockridge

The @3mds106salon continued our June topic discussion on data visualization.  Having a bit of fun I showed up and shared a chart I’d made for the children’s story “Goldilocks and The Three Bears”. The chart was harder to make than I expected.  Receiving feedback and hearing what others would have done provided a tremendous amount of learning directly relevant to my job.  Check out the original & revised version as well as an animated GIF heat map by @Justin.  Play is good!


Today’s 3M-DS106 Salon was visited by 4 of us:  Rochelle, Justin, Tony  & Sharon

We continued our discussion on data visualization which was our topic of focus for June.  (See list of links below.) As the patroness/host of the 3M-DS106 Salon I had been pondering how I could more effectively bring the digital storytelling aspect into our group. (After all, that’s what the DS stands for. :)) I knew from my experiences with the external DS106 that I had learned a tremendous amount of very relevant digital literacy skills by playing and having fun with the DS106 community  But it’s a tough sell these days to get people to play here at 3M.  We feel play is a waste of time.  That we should be doing something more productive with our time.

  “Anthropologist Gregory Bateson believed that the fixation on making everything productive and rational cuts us off from the world of the spontaneous that is home to real knowledge..Play isn’t a character defect; it’s the builder of character, developing persistence, competence, mastery and social skills that take us beyond perceived limitations.” [Source] 

I am here to report that my supposedly non-productive activity (even I was questioning it.) of creating a data visualization for Goldilocks and The Three Bears was not a waste of time -for me or today’s Salon attendees.  Sure I learned more about struggling with Excel and formatting a slide that was informative and attractive. (See my process below.) When I shared it with my colleagues I learned even more as they easily shared their suggestions on how to improve my slide by limiting the amount of text, making things more visually simple so that at a glance a viewer can get most of the information and changing from a solid fill to an image fill on my bars.  However, it wasn’t until the rest of the group started to share how they would visualize the data and story that a deeper layer of learning emerged.  I got it that DS106 and the 3M-DS106 version we’ve been building isn’t just about creating digital artifacts and sharing them with others, it is also about the learning that occurs when others share with us.

When I heard how Sharon might adjust the bar chart, how Tony would display the data as a color coded cross table, and Justin’s idea for a heat map and an animated GIF, Well I was blown away.  Wow.  This is where the power is.  I was “playing” to learn more about a subject I was interested in – In this case data visualization and effective Power Point slides. I bravely shared what I had made with the group. Because of the relationships we have been building there was a comfort to continue sharing thoughts and suggestions with one another. I learned how they would do things differently than me, and knew  that I would use that knowledge the next time I had a 3M project that required data visualization.  I also walked away today with a deeper understanding of why I created the 3M-DS106 Salon; why I continue to do the assignment preparation work; why I hold meetings every Tuesday;  and why I attempt to write a summary post following our gatherings.  I am promoting a safe place for others to learn to share and their sharing is helping us learn more  together.  It’s all good for 3M.

Amenity/Hospitality Ratings for The Three Bears Cottage

What I assumed to be a slam dunk creating a chart in no time at all, turned out, when I actually set down to make it,  to be quite a bit more difficult than I had imagined.  I had several variables and labels:

  • The three bears- Poppa Bear, Mama Bear, Baby Bear;
  • Porridge- Initially too hot for all three bears then: Too hot, too cold, just right;
  • The chairs and beds:- too hard, too soft, just right.

I tried creating bubble charts, x-y scatter plots, different styles of bar charts.  I finally settled on a basic horizontal bar chart.  Defining which data would represent the series and which simply data was tricky.  I kept ending up with the data points on top of one another.  It was frustrating that I couldn’t get it.  I don’t know if I was just tired or what.  Once I had the basic chart I wanted to make the slide readable and appealing. I added an informative title,  I increased the font size on the axis labels to 18pt. I found some graphics on the web to illustrate the amenities being rated. With the addition of a text box on the side, “Baby Bear was Just Right”, I wanted to communicate the final result of the “data analysis”.   My final touch was the addition of evaluation comments for each bar, such as Too Hard, Too Soft, Just Right.. I agree with the group that adding the individual evaluation comments was too much for this slide.

Tony suggested uncluttering with the replacement of the solid fill on the bars to images- for example 6 beds for Baby Bear’s ratings and 1 bed for Mama Bears.

Select data point bar => right click => Format Data Options => Fill => Picture or Texture Fill =>Insert picture from computer  file => Choose file from computer => Stack and scale with 1 unit per picture.

This would allow for removal of redundant text.  I’ve revised the slide with their comments in mind and created a new version below with more graphics and less text. Also using color coding more effectively by matching the clothes of the bears to the amenities.

Then Justin showed us quickly how he would make a GIF that could illustrate more of the unfolding story as well.  Take a look at it below.  And he’s posted the how and why of making the GIF on his blog too. How might you create an effective data visualization for Goldilocks and The Three Bears.  If you actually make something, you might learn a bit yourself. If you do, I’d really appreciate it if you’d share it with us so we can learn from you too.

VERSION 1:

Goldilocs-ThreeBears-Small

REVISED

Less text, more graphics, color coding, removal of axis. I’m still not sure if this works yet or not.  Is it clear that I am using a 1-6 rating system, with 6 being the best?

goldilocksratings_revised

Justin’s Animated Heatmap Example:

3m-ds106_goldilocks_quick_gif_concept_


Comments: 

I had another commitment and was not able to attend. I hope the following is useful. Looking at either of the two slides above, I found myself struggling with confusion interpreting the length of the bar chart, or the number of objects (representing hardness or temperature). I started out with the idea that the charts showed the hardness or temperature of the objects, rather than the goodness of fit.

To me, it would have been much easier to interpret a chart that put the ‘value to the customer’, or ‘match to Goldilock’s preference’ as a dependent variable on the Y axis and the independent variables (hardness, temperature) on the X axis, and you could even estmate a bell-shaped value curve to show the ‘sweet spot’ where she preferred to be. If I get time later today, I may try to give an example, but perhaps the text is sufficient.

Hoping this input is as welcome as you usually are to my thoughts. . .

BD

Here are the charts referred to in my comment on Rocky’s earlier post re Goldilocks.

GoldilocksCharts_BDower


JUNE DATA VISUALIZATION TOPICS AND LINKS

Data Visualization:

A Whole New World for Slide Guy

A Whole New World for the DS106 Slide Guy

With this manipulated photo image I am able to complete two DS106 visual assignments for the price of one. Giving me a final count of 12 stars when all is said and done for week 5 of the DS106 headless 13 open-online session.

  • Slide Guy for Visual Assignment 595 (2 stars) where we insert a png image of the “Slide Guy” into a photo.
  • A Whole New World for Visual Assignment 419 (2 stars) in which we are to take a picture of a subject (grandparents, pet, yourself) and put it into a totally different background in which they appear abnormally too small or too large.
BVQi7L9CQAANZEt

DS106 is so open even the insect world is joining in.

Just fun during visual storytelling week I decided to illustrate how open DS106 could be.  As shown here, even the insect world is joining in. The photo was easy to make.  There are a total of three layers: The original background image, a transparent PNG image of the DS106 logo, and a magic lassoed image of the grasshoppers leg that is placed over the the DS106.

 

SlideGuy

DS106 Slide Guy

To add the slide guy enjoying his ride, I simply made another layer, sized him appropriately so that his posterior would look like a more “natural” fit as he slid down the blade of grass, and placed him at the top of the stack.

Haunted Swing Set

This weekend I took a backyard photo safari.  As I assembled the images a story of my past life as a wife and mother of two young daughters revealed itself.  For DS106 Visual Assignment 426, Is that a ….GHOST! I decided to use one of the photos of an abandoned swing set to produce a new image of my daughters haunting their old playground equipment.

AmberJenny_Ghosts

Little Halloween Ghosts

This was easy to make now that I have more experience with my photo editing software, Adobe Photoshop Elements 12.  Using an old family photo I had taken proudly showing off their Halloween costumes, I used the magic lasso tool to select what I didn’t want and deleted it from the scene. I copied the ghosts only picture as a new layer into the swing set photo.  I sized the girls appropriately for their ages in relationship to the size of the swing set.  Then reduced the opacity of the little ghosts down to 60%. New picture and assignment complete. 3 Stars for me.

 

 

Bygone Backyard Photo Safari

Rochelle Graduation, May 1990

June 1990: Ready to move into a new home.

I went out this morning to capture images in my backyard during a time of day I knew would avail interesting shadows and lighting for a DS106 Photo Safari.  What I didn’t expect was that through the process of my editing and choosing the photos, a story of my life as the mother of two now grown daughters, and the ex-wife of a gardener would reveal itself.  The images tell of a time well past: A child’s swing set neglected and overgrown with weeds and trees, a prolific garden abandoned and no longer tended to, a bleached antler reminding me of the 9 foot electrified fence my ex-husband erected to provide a barrier to free meals for the herd of deer traveling through our backyard, discarded odds and ends left behind when a family dissolved. While this phase of family life has past, a new chapter has begun as an over-joyed “Nana” of a vivacious two-year old grandson. And who knows what stories my backyard will tell 10 years from now.

 

THE MAKING OF….

All photos were taken with my iPhone using the Camera+ app.  It is a powerful app that can do a lot if you know what you’re doing, which I don’t yet.  I experimented with setting the white balance and selecting a focus zone.  Neither of which proved to be successful.  I think it’s time to read and watch some tutorials.  Next, I uploaded the photos to my desktop with the Photo Transfer app.  I love this little app.  I can very easily upload and download photos and videos over WiFi or bluetooth to any of my Apple devices or even my PC.

Fallen Fence

Fallen Fence – Photo too cluttered.

I had taken almost 90 photos, and challenged myself to get it down to 5. With a quick look at the images I could see most of them weren’t all that great.  The lighting was bad.  The images were cluttered and/or blurry. Some just weren’t interesting at all. I then opened them up in Photoshop Elements 12 for a closer look and to do a little photo editing if needed.

 

Mossy Log Shadows- interesting to look at, but no story

 

As I worked I noticed a set of photos emerging with single objects dominating the image.  I also had some very interesting natural environment shots with neat shadows and lighting, but they didn’t tell a story.  They were just nice to look at like this one of a mossy log that had been used to frame the sand box under the swing set.  I’m pleased with the results of reducing my photo safari down to the best seven photos with the single object focus, and leaving out the nature only shots.

Writing the intro paragraph was an additional unexpected challenge.  In my head it sounded simple to put my thoughts down on paper, but that wasn’t the case. I struggled for quite awhile as to what and how I would share the memories and stories embedded in the photos.

Finally, I used the WordPress Slideshow plugin to add them to my blog post.  Then by editing the HTML code in the text view the borders and shadow effect of the final two images were created.  Learn how here.

Communicating With My Abstract Brain (3M-DS106 Repost)

Five Card Story: Communicating with My Scattered Abstract Brain

This is a repost from “MA” an internal 3M-DS106 Salon member 

a Five Card Flickr story created by MA

Not too long ago, I learned about Insights communication color energies:

– cool BLUE: energy for observing & thinking,

– fiery RED: for taking action & directing,

– sunshine YELLOW: for motivating & inspiring, 

– earth GREEN: for helping & sharing.

I wanted to interpret the concept of communication and these color energies in this Five Card Story challenge. 

sunshine YELLOW


flickr photo by bionicteaching

earth GREEN


flickr photo by Danny Nicholson

fiery RED


flickr photo by Serenae

cool BLUE


flickr photo by bionicteaching

COMMUNICATION


flickr photo by bionicteaching

It’s Showtime!

BeetleJuiceGIF_2

“It’s Showtime!”

One of my favorite movies of all time and characters is Michael Keaton as Beetlejuice.  The ghostest with the mostest.  This 1988 comedy horror film directed by Tim Burton is a scream and I’ve always thought quite romantic too.  [Wikipedia Post]

And look at that… the official movie poster? Yes.  There are indeed headless ghosts running around from time to time.  But none of those scenes seemed as appropriate to sum up the movie and capture the essence of a key scene as when Beetlejuice, a self-proclaimed “bio-exorcist”, is being released from his exile in a small model town in the young couples attic. Indeed… It’s Showtime!

Talk about perfect source material for completing the DS106 Headless 13 week two assignment, Visual Assignment 2 “Say It Like The Peanut Butter”  Make an animated gif from your favorite/least favorite movie capturing the essence of a key scene. 

This is not my first movie GIF, [See Ewww… Brain] so I’m pretty familiar with my GIF making tools now.  I’m also getting better and better at choosing the right kind of source material to work with to make things go smoother and faster in the production process.

For the video clip I knew this was a key scene and someone on YouTube would have posted this small segment and I wouldn’t have to search through my own DVD to find it.  Yep… there it was, and even better… It was an HD version to boot.  I downloaded the clip to my Mac with the DownloadHelper extension in Firefox.  I then imported it to Adobe Premiere Elements 11, located the 3 second clip and then exported it as a JPEG sequence at 10 Frames per second.

Publish+Share => Computer => Image (use for exporting still image) => open the advanced menu and choose “export as sequence” under the video heading, then save.

I opened the 36 images in Adobe Photoshop Elements 11 and placed them all into one file as separate layers.  The original images were quite large, so I reduced the image size to 500px which is the upper limit to post to Tumblr.

File => Save For Web => Click on Animate => Animation Frame Delay set at 0.1 => Save

That’s it.  Simple once you know how to do it.  Not so the first few times as I was learning how. [See Hula Hotseat]  For those of you just starting out…. hang in there.  It gets easier the more you practice.  [See Batman & Robin Behind The Scenes for a good photoshop elements GIF tutorial]

And a whole lot more fun is coming your way!  Soon YOU’LL be saying, “It’s Showtime!”

Video Source: MOVIECLIPS.com

Monster In The Kitchen

IMG_1342

DS106 tdc595 “Monster In The Kitchen”

DS106 Daily Create tdc595 was to “Build a monster out of items in your kitchen.”  I tried a few things on my countertop with a teapot, an over-ripe banana, a recipe book holder, a cup tree, some tongs, knives, beaters, a cork screw, and a tea tin, among other various items. But my attempted kitchen Frankenstiens were too complicated and seemed forced.

I was also thinking about turning the photo into a stop-motion build of the monster or a GIF with moving parts.  So I needed it to be simpler to get photos in a sequence that had a minimum of camera movement. In the end the GIF idea faded away in exchange for taking the time instead to write this blog post.

The_Scream

The Scream by Edvard Munch

Since nothing was working I decided to start over from scratch.  What else could I use? Where else could I build it? By moving to the range top I noticed my spoon holder looked like The Scream by Edvard Munch. Now that was something I could work with.

The simplicity of my new monster was appealing. The corkscrew placed underneath was at first supposed to be ears or arms. It eventually became horns. Then I wanted to add a splash of color and found a red plastic fork that doubled as a nose and sharp teeth.  Ta Da! My monster was born.  Now to capture it on “film”.

IMG_1334

Monster looking down

The photos were taken with my iPhone in the Camera+ app and then I applied a filter called Mammoth. As I was taking the shots I noticed the monster’s eyes changed from angle to angle. And tried to capture several angles to work with. Here it is looking down.

 

The final image with a large straight-on stare looked the most monster like. The application of the mammoth filter made the eyes bigger, provided the vignette shading around the outside, and a tinge more dark silver tone. It reminded me of something you’d see in a horror movie.

FilterComparison

Final kitchen monster image with the addition of the Camera+ Mammoth filter

DS106: Hot Off The Tabloid Press

After writing my own and reading the other fun submissions for the 7/15/13 DS106 Daily Create:  “Write a tabloid headline for ds106 and the opening sensational paragraph” I was inspired to take the assignment a step further and layout the sensational front page of The DS106 Daily Create Tabloid. Which then led to submitting today’s daily create tdc575.

DS106_Tabloid_071513_GIF

First Things First:
Not wanting to fall into the same attribution trap that I found myself in with my last project (TalkyTina – Sweet As Tupelo Honey) I immediately documented my tracks as I gathered my media and placed the important information and links into a draft blog post.  Boy did that save time and reduce the tedium of going back and trying to figure out exactly where I found things – much better plan of action this time around.

Creating the Front Page:
I started with a Google search to locate a tabloid template that I liked.  I found this one at CLEO – Cumbria & Lancashire Education.  Then came the quandary over which of the 7/15/13 DS106 Daily Create submissions should I use? The template allowed space for 2 stories and 3 images. And of course I wanted to use my own submission “Headless DS106 Mysteriously Runs Itself“. Story 1, Image 1. And the talk of the day had been all about @IamTalkyTina ending her ds106 role and being placed back into her cardboard box.  [Read the headline story here.] So that would be Story 2, Image 2. That left the 3rd image to be filled from the remaining tabloid entries.  I had a few I could choose from, but the image of ruby red lips with a snappy headline would be entertaining, eye catching, match the color scheme – and most importantly, the easiest to produce.

Story 1: “Headless DS106 Mysteriously Runs Itself

Amidst a culture of cost-cutting and outsourcing of education to corporate massive open online courses (MOOCs) a small yet determined group of passionate educators have “organized” a digital storytelling course that can run itself. There is no official leader, although there is a syllabus that can be followed. No one is in charge, but there are plenty of opportunities for any of the global on-line participants to step-up and volunteer to facilitate the focus material of the week during the 15-week course. There are no deadlines or grades, instead suggested assignments and opportunities provided to collaboratively work and learn from others, share their work, and receive feedback to help improve their digital story telling skills.

Some suspect the Illuminati to be supporting this small underground group – encouraging the DS106 group’s subversive tactics with the intent to overthrow the big MOOCs. A secret source was heard to say…“The education system is and has always been ours. The MOOCs have gotten out of control and we need to clip their wings. It’s time to unleash the headless DS106!”

My creative inclusion of a suspected involvement of the Illuminati was to help fulfill the sensationalism and tabloid aspect of the assignment and was serendipitously supported by a statement from @PuppetMaster106 in his guest post on @IamTalkyTina’s blog.

This talk of a ‘headless ds106′ this fall is all well and good, but you know that someone, somewhere, needs to be always at work behind the scenes, keeping things ticking, poking and prodding, feeding the unicorns, and all. And since I’m experienced with webs and scenes, and strings and such, there’s certainly a role for me in the coming months — whether it’s visible to the ds106 community, or not so visible, and rather behind the scenes.

My Fair Tina

@PuppetMaster106 pulling the strings

Wikipedia Reference for Illuminati:

“…refers to various organizations…alleged to conspire to control world affairs by masterminding events and planting agents in government and corporations to establish a New World Order and gain further political power and influence. Central to some of the most widely known and elaborate conspiracy theories,

the Illuminati have been depicted as lurking in the shadows and pulling the strings and levers of power in dozens of novels, movies, television shows, comics, video games, and music videos.”

Image 1: As is usually the case in ds106, I wasn’t the only one riffing on the work of others, and I was more than pleased to use a great image created by Todd Conaway to perfectly complement my story as well as tie-in to the Talky Tina saga. Todd just couldn’t get the thought of Alan Levine’s proposed “headless” DS106 course for the Fall of 2013 out of his head either.

HeadlessDS106_Tweet

 

Back_In_the_Box

@IamTalkyTina is “Back in The Box” Three Layers Deep

Story 2 & Image 2: The talk of the day had been all about @IamTalkyTina ending her ds106 role and being placed back into her cardboard box.  [Read the headline story here.] The guest blog post created by @PuppetMaster106 [Read full story here.] included a wonderful GIF of @IamTalkyTina in her cardboard box being encased in ice and finally Carbonite.

It appears now that Talky Tina has acquired a new PsychicSiri App for her iPhone and is once again interacting with DS106 with animated GIF challenges in preparation for the August 26th, 2013 start of the “Headless” DS106 course.  Although the original post was drafted back in July, my “psychic” inclusion of the GIF fits right in. This all begs for another news breaking tabloid front-page.

 

Image 3 Attributions:

 

 

Hula Hot Seat

HawaiiChairGIF00

Want to get fit without leaving your chair?  According to infomercial star Tamara Henry, the Hawaii Chair is for you. “It takes the work out of your work-out.” by hula-ing your way to fitness.

See update below for V2: “Groom Does The Hula Hot Seat Happy Dance”

HawaiiChairGIF00_ThumbDS106 GIF challenge #4 was to create a GIF of a hilarious infomercial moment that illustrates how ridiculous some infomercials can be. I started the project with a YouTube search for Infomercials.  Up came Top 10 Ridiculous Infomercial Products.  About the 3rd product in I saw the Hawaii Chair.  It piqued my interest and seemed like I could have some fun with it. The rest of the commercial snippets didn’t get much of a rise out of me.

I continued my search to find a better resolution or original copy of the video.  Unfortunately, the original Hawaii Chair Infomercial  was made in 2007, so I didn’t have much choice but to go with a very low 240p resolution version.  I like to use a Firefox video downloader add-on that sits right on my tool bar to download videos to my computer.  I get to choose the downloaded file type from a list of available formats and sizes.  That can often avoid a video converter hassle by not accidentally downloading an .flv or .3gp formatted video.

It’s been a couple of months since I created a GIF from a video clip and that was only once.  “Go Daddy… Wheeeee!!”  So I went back to my own blog post to read how I did it using my video editing software Adobe Premiere Elements 11 for the Mac. The key was to select a small 2-3 second clip of the original video then:

Publish+Share => Computer => Image (use for exporting still image) => open the advanced menu and choose “export as sequence” under the video heading, then save.

I also vaguely remembered there was something about reducing the output frame rate to 10 instead of the original video frame rate of 29, so that fewer still images in the sequence would be created.  Now I moved over to Adobe Photoshop Elements to create the GIF.  After importing the 36 JPEG image sequence created from the video file, I culled it down to the first 16 where the Hawaii Chair text flies in. Each of the photos became a layer for the final GIF.

I’ve heard others in the GIF challenge refer to being able to change the length of frame delay for each individual layer.  That’s not the case with the elements version of Photoshop.  I get a single frame delay option, the default being 0.2 seconds.  If I want to increase the time an image stays on the screen, I have to create duplicate layers for that specific image.  That was the case here with the beginning and end of the GIF to make for a smoother transition when it looped back again.

Did the Hawaii Chair live up to its claims?  I don’t know.  I didn’t own one or know someone personally who did. But from the looks of the suggested Youtube videos during my search, it certainly gave a number of comedians fodder for their shows and skits, and one reviewer talked about all they got was a hot butt.

UPDATE: Groom Does the Hula Hot Seat Happy Dance

Mucho thanks to Talky Tina for suggesting…

” …it would be funny with their heads NOT moving and no HAWAII CHAIR words and just the chair parts going and going and going. And they would have silly grins stuck on their heads.”

Now version 2 of my plain infomercial GIF has been DS106ized.  I figured while I was merging the stationary heads snippet (simply cut and pasted the top portion of the first image) into new layers in the Photoshop file, why not add Jim Groom dancing his little happy dance with the ladies.  Voilà! A funnier GIF and Animated GIF assignment 1001 has another submission from Rockylou.

HawaiiChairGIF_3_Groom

Jim Groom does the Hula Hot Seat Happy Dance

Warholing a Rock ‘n’ Roll Stereo GIF

Warhol_It_GIF

Warholing an animated stereo GIF of a rock band

Last night I was writing up my post for “Have a Rockin’ Birthday” with the usual addition of a nice tutorial to share with others since no one had posted one yet.  It slowly dawned on me how much work I actually put into completing one of my DS106 assignments.  I’m definitely puttin’ on my “A” game that ScottLo and “Prof.” Groom referred to in LoDown episode 15 today.  I want more stars!  [Imagine little Rockylou hands on hips, threatening to throw a tantrum.] I think the creative star accounting I’ve used for this particular assignment should help toward remedying the situation.  Especially since I spent practically no time creating this one.

1. I downloaded an App called GIFBoom to my iPhone (for free) that lets me take my own photos and turn them into a GIF.

2. I found two quick shots on my iPhone from a band gig I’d documented a few months back.

Rock ‘N’ Roll ‘N GIF AnimatedGIFAssignments851 (3 stars)

3. They worked great to show the stereo GIF effect.

Stereo GIF AnimatedGIFAssignments991 (1 star)

4. The App gave me several options to add an additional effect.  I chose the Warhol filter.

Warhol Something VisualAssignments560 (2 stars)

5. Ta Da! Assignment complete.  Blog post written.

Animated GIF

Animated, Rock ‘n’ Roll GIF Completed!

By my count that’s 6 stars!  What say you Prof. Groom?