The Absurdly Illustrated Guide To Making Your Own Immersive, Tablet Friendly News Story Presentations

This tutorial will show you how to take your material and transform it into a tablet-friendly, rich experience for readers.   We will use open-source software called sStory, created by EJ Fox.

This tutorial was inspired by my Australian journalist friends, who came to a workshop I taught hosted by The Walkley Foundation.  (The Walkleys are also Australia’s most prestigious journalism awards, akin to what the Pulitzer Prizes are to American journalism).  The participants in the workshop were unfailingly bright and willing, and so we skipped through several data visualization lessons early and spent the last half of the last day of the workshop trying to pull together our work into a data-driven, immersive story. We didn’t quite get done, so these step-by-step instructions are what you need to know if you want to try it out.   

Tutorial

0. Ask yourself: is this the right story for this format?    

As part of our process, we had a story meeting where everyone pitched story ideas.  We quickly came to the conclusion that not every story really “fit” this format.  In particular, we were looking for stories that had:

  • A data element — charts, graphs, maps (not all immersive stories would require this, but it was a data-visualization workshop)
  • An audio-visual element (video, audio)
  • A narrative approach
  • Compelling photos that would look good at larger sizes

Not all of the stories had all these elements.  A story on taxation, for example, might simply not be visual enough for this kind of treatment.

Here’s another great example of a story done in an immersive, tablet-friendly, scrolly way, done by WBUR, a public radio affiliate in Boston:

bulger

The story covers the trial of a colorful criminal who ran much of Boston’s organized crime and then went underground and managed to elude capture for decades.  Embedded animated GIFs, audio, and a strong narrative make this an excellent example of this form.

Once you’ve got a story you think works,  move on to Step #1.  If you don’t have a story of your own handy, go on over to The Gutenberg Project to browse through the many copyright-free classic tales available for your use.  Use the text there, and then choose photos and audio to “illustrate” and enrich your story.

1. Download sStory

The “framework” we will be using to make a scrolling, immersive story presentation is EJ Fox’s sStory, which is available for download from Github.   On the sStory repository page, scroll down.  On the right you will see a button that says “Download ZIP.”  Press this button.

(Remember: many photos in this tutorial are annotated!  Click the photo for a larger version if you cannot read the annotations).

download-zip

 

2.  Unzip the folder, and view the contents.

It should look like this:

contents-of-folder

 

A note to aspiring data-journalists and programmer-journalists:  many people believe that you have to learn to program from scratch in order to do all the fun stuff you see happening with maps, news applications, and the like.  While learning how to program is a wonderful skill, you should know that A) you can get very, very far indeed without learning a programming language — but simply by learning how to browse the Global Junkyard Of Code to find “parts” to bolt onto your ideas, which is what you just did when you downloaded that ZIP file and B) that even the Real Professionals do not start from scratch.  Most of the impressive projects you see are not written soup-to-nuts by a single programming genius but are instead assembled, curated, and made up of original code and code written by others joined together with great craftsmanship.  But, onward.

Let’s browse what we’ve just downloaded.  In the folder, you will see a file called index.html.  That is what we will spend most of the time working with.  But for now, click on the folder called “lib.”  It will look like this:

lib-folder

 

The “index.html” page is the main web page that readers of your story will see.  All the files in the folders you see here are, in essence, “helper files” that enrich that one web page.  One contains images.  The “js” folder contains small programs, called scripts, that enable your web page to do fancy things like sliding scrollers, fading elements in and out, and the like.  Styles contains .CSS files.  .CSS files determine the look and feel of a web page by telling your browser what the background color of a page is, what fonts are used, and things like that.

3. Click on index.html.

Go back to your folder and click on index.html.  It should open in a browser.  (If it doesn’t, right-click (Windows) or command-click (Mac) and choose “Open With” and select a browser.  I don’t need to tell you not to use Internet Explorer, right?  Right.

You’ll see a page that looks like this:

sStory-example-page

 

Go ahead and scroll around to see what’s there.

sStory supports a growing number of content types:

  • Text
  • Photos
  • Audio (in the form of Soundcloud embeds)
  • Video (in the form of Vimeo embeds)
  • Timelines (in the form of Verite timelines)
  • Maps (there’s a cool trick that will generate a map for you just by adding an address to the code!)

It also supports a number of content subtypes, like “Photo with Big Text,” “Caption,” and “Pullquote.”

4.  Download a programmer’s editor.  

If you have one, skip to Step 5.

Our next step is going to be editing that index.html file to fill it with our own story.   You can’t do that with Microsoft Word!  I recommend using a programmer’s editor, generally called a text editor.  Text editors have lots of useful tools for editing code, like built in line numbering, and my favorite, syntax highlighting.  You know how your spellchecker underlines words that it thinks aren’t spelled correctly?  Syntax highlighting is a little like that — it helps you reduce errors in your code by color-coding different parts of your code.  After using one for awhile you will be able to sense errors just by seeing that some things aren’t the right color.

There are many good free text editors.  For Windows, you may want to try Notepad++.  For the Mac, there’s TextWrangler.

5. Open index.html in your text editor.  

Go back to your folder, and right-click or Command-click on index.html and choose Open With.  Ask your computer to open index.html with your newly-installed text-editor.  

open-with

 

When I open it in my editor, it looks like this:

open-index-html

 

6. Breathe deeply.  Meditate!  Do not panic!

If you’re totally over it, skip to Step 7.

OMG THIS LOOKS SCARY WHY ARE YOU EXPOSING ME TO THE SCARY SCARY CODE YOU EVIL EVIL PERSON!  WHERE ARE THE TRIGGER WARNINGS?!!?!

Breathe!  Breathe.

relax

Now then. It’s not as scary as it looks.  Most code, when you come right down to it, is just a very, very nerdy dialect of English.  Take a look again.  See how many English words there are in there?  If you slow down and take it line by line, you’d be surprised how much of what is here that you understand.

For example, look at lines 33-39.  Does the text look familiar to you?

Line 33 - 39

 

Line 38,  which reads:

,title: ‘Making beautiful stories easy’

is the same text that appears over the large first image when you look at index.html in a browser.

In essence, the index.html file is a set of instructions that your browser reads to then assemble and display a web page to a reader.  And we can change those instructions!

Step 7: Make your first edit

Now we are going to change the instructions that the browser reads to create the web page.

Go back to Lines 33-39 in your text editor.

Line 33 - 39

 

We’re going to edit Line 38 to make the web page say something different.   It’s tempting to just delete line 38 and write whatever we want, but now is a good time to get into the habit of “commenting out” code when you’re changing something, rather than deleting it straight off.

What’s “commenting out”?

When you write code, you can mark particular lines of what you’ve written as “comments.”  The browser (or compiler, depending on what you’re writing) does not read these lines — it just skips to the next un-commented line.  Different languages have different ways of noting which lines should not be read by your computer.

In this case, we’re going to start by “commenting out” line 38, by putting two forward slashes in front of it (//), like this:

comment-out

Now that you’ve done that, copy line 38, without the //, and add a new line right above it.  But change the part in between the quotes to say something new, like this:

 

index-html-first-edit

Now, AND THIS IS IMPORTANT, hit “Save” in your text editor.

Step 8: View Your Changes

Open index.html again in your browser and reload the page (you can have the file open in your text editor and the browser at the same time).  Now it looks like this:

index-html-after-first-edit

Magical, no?  Magnifique!  I love it!

9. Start to add your own elements to the story.

Now that you have the basic idea of how sStory works, you can start adding elements of your own story to the basic framework, just by commenting out the example code and pasting in your own elements.  I’m going to start with a map created by the participants of the Walkley’s data visualization workshop.  Participants in the workshop pulled together a report about how Twitter handles requests by governments to turn over users’ records.  Once we were ready, we split up into teams, and one team created a map in TileMill of the requests.  Let’s paste that in instead of the header image of police.

First, copy lines 33 through 40, and paste a copy right above line 33.

Then, comment out the old code.

Then, add the URL of a photo you want to use in your story, right after where it says “photoUrl.”  I’m going to use the map image we created in the workshop.

When you’re done, it will look like this:

add-first-new-element

 

Notice that your commented code has changed color.  It’s “greyed out,” to indicate that it’s not going to be read by the computer. (Different editors have different coloring schemes, but yours will probably make comments a different color.

Now hit Save, and look at index.html in the browser again.   Now it looks like this:

oops

 

Oops. That’s not right!

10. SLAY ALL ERRORS

If you are using the Google Chrome browser (and I recommend you do), there are built in tools for coders that help you detect & fix errors.  In Chrome, you can find this by clicking on View > Developer > Javascript Console.

When you do that, the bottom half of the browser window will now have the console, which will show you the error message.  The most critical piece of information: what line of code is causing the error?

Errors!

 

Aha!  Line 37 is causing the error.  One thing to know about error messages:  Sometimes the error is on Line 37, but a lot of time I notice that the error is actually either on Line 37, or the line directly before it. Let’s look at it again:

add-first-new-element

 

Notice that line 36 doesn’t begin with a comma?  Fix that and save, and now you’ll see:

after-first-element

 11.  Fix those titles

But we probably want to change those titles.  Change the titles and subtitles on lines 19 and 20.

change-title

 

And why not add a caption to this map, and get rid of the title that doesn’t fit?

add-caption

Change the type to ‘photoCaption’ and add a caption.  You can use HTML in captions — just be sure the whole caption is enclosed in single quotes.  (Note that this picture still has the missing comma before photoUrl on line 36.  Be sure to fix that).

Save it, and reload it in your browser.  Now it looks like this:

caption-added

The map, originally created in TileMill, was spruced up by workshop participant Mitchell Ward of Rocklily Design.

12.  Add some text to your story

I’ll admit, I find working with text in this context a little tedious.  I’m sure there’s a better way, but until I find it I’ll show you what I do.

Here’s the hitch: each text segment has to be on one line.  You could have 1,000 words and 10 paragraphs, but in your index.html file it’s going to be one enormously long line.

So I’m starting out here:

handling-text

 

As I add the text of the story, it turns pink as I pull it into one line.  You ‘mark up’ your text with HTML.  So, if you have a paragraph, it’s enclosed in “<p></p>” tags.  For a basic HTML cheat sheet, look here.

The Single Quote Problem

sStory puts the elements of your story — text, photos, whatever — inside single quotes.  So what happens when you use a single quote, like an apostrophe, in the text you want to include?  Well, sStory thinks that’s the end of the text you want to use.  See how it changes color?  Gotta love that syntax highlighting:

single-quotes

 

You can fix that by “escaping” the character.  You do this by putting a backslash right in front of the apostrophe, with no spaces, like this:

escape-character

 

That backslash won’t show up in the final product.

13. Comment out the stuff you’re not using.  

There’s still quite a bit of example code in your index.html page, putting in stuff that’s not part of your story.  Comment out the parts you’re not using.

Putting // in front of each line is a little tedious, though.  Your text editor will have a way to let you highlight text and then comment or un-comment it.  Poke around until you find it.

Can’t get it quite right?  Here’s the raw code I’ve been modifying as I create this tutorial.  I’m still working on it a bit — I notice when I comment out photoMulti, I get an error, for example.  So I’ve either got to figure out the error…or add a slideshow :-)  Scroll to the bottom and click “View raw” to get code to copy-paste.

14. Now add other stuff.

You can add many different kinds of elements to your story — text, photos, video, audio, in exactly the same way that we added a photo — you just add the URL in the right place.

  Okay, but how do I get this onto the web?  

Right now, your immersive story is sitting on your desktop where only you can see it.  If you want to get it onto the web, you’re going to need access to a web server.  There are many web hosts out there.  I’ve heard people say good things about BlueHost and DreamHost, each of whom have plans that cost less than $10 USD a month.  I use MediaTemple, which is a little more pricey but has a few features I need & I’ve been happy with the support I get when something goes wrong.   Now that you’re doing these kind of experiments, it’s time for you to get your own little pied a pixel on the web for your stuff to live so others can see it & share it.

Once you have some hosting space, you can upload your files to your hosting account.  Some web hosts feature in-browser upload tools and others require you to use SFTP (Secure File Transfer Protocol), an old-school but devastatingly efficient way of getting a whole mess of bits from hither to yon.

Once it’s up there, what do you type into your web browser to show it to people?  What’s the link?

Well, that depends on whether or not you bought a domain name.  Your web hosting account will have something called an IP address, a long string of numbers.  Every device that connects to the internet has an IP address, a unique locator.  For example, the IP address of the web server hosting the web page you are looking at is: 72.47.228.87.

Even if you don’t have a domain name (yet, but you should! You’re fabulous and you should hand it out on cards and things), you can usually get instructions from your web host on how to type in something like: 72.47.228.87/myaccount/mynewproject

Once you get a domain name, it’ll be more like mydomainname.com/myproject.   /myproject is a folder, and if there’s a file in there called Index.html, your browser will load that one.

This isn’t working but I’m not sure what I’m doing wrong.

OK, first, take a deep breath.  Everybody gets stuck, even the pros, all the time. [See also: Making Friends With The Stuck.]

If you want help from others on fixing your code, you have to have a way of showing it to them.  The most efficient way for you to do that for small files like the index.html file you’re working with is to use Gists.  Gists are like scrap paper, only for code.  You just copy and paste your code that’s not working into the web browser, and then you can share the link so people can see what’s up.  Go and get a free account at Github, and you’ll notice the word “Gist” in the top menu.  Click on that and you’ll be able to make as many Gists as you like.

 

Scraping for Journalists

scraping-for-journalistsWhat basic coding/tech skills meet the following criteria?

  • They are relatively easily required with no need for a 4 year CS degree;
  • They provide journalistically relevant and useful results
  • They are reusable in a journalistic context

In my opinion, there are three skills that meet these criteria:

  • Mapping.  Most news happens in a place.  Maps are ancient precisely because they are such an expressive and powerful form of data visualization.
  • Grabbing.  Thousands of websites have data gateways called APIs (Application Programming Interfaces) that allow you free access to some or all of that site’s data — as long as you can write a relatively simple program that can grab it and return it to you in a format you can use.
  • Scraping.  This is to get the data out of all those sites that don’t require API’s — read “crappy government websites.”

(For a brief and entertaining video on these three, see, “Do I Really Have To Learn How To Program?“)

I’ve done quite a bit of mapping, and some grabbing, but my experiences with scraping have been less successful, primarily because they proved to be less generalizable.  I’d be able to pick my way (often slowly and with much frustration) through a scraping tutorial and get results.  But at the end I did not feel that I could write a script on my own to scrape other things.

After taking a class on scraping at Journalism Interactive with Michelle Minkoff,  I decided to buy Paul Bradshaw’s book “Scraping for Journalists,” and take another run at it.  If you would like to read along, my notes as I pick through the book are after the jump.   I would also like to thank Michelle and Paul for giving me the inspiration to restart this blog.  I have been very busy with my new duties at INN, a network of 90+ investigative and community newsrooms, so I have not been devoting much time to adding to my own store of code-knowledge or developing tutorials to pass on what I’ve learned to others.  But it’s something that I enjoy and believe gives back something of value to my peers in the field, so I welcome the chance to begin anew.

Continue reading

Going Beyond Static Charts & Graphs

oicweave-lowell

Not too long ago I was able to attend a demo of the data visualization toolkit Weave.  The person giving the demo was Georges Grinstein, one of the tool’s creators.  Georges hails from the University of Massachusetts at Lowell.

He showed a really amazing demo of foreclosure data from Lowell, MA.  For those of you who aren’t from Massachusetts, Lowell was one of America’s first industrial cities; massive textile mills once dominated the town.  The mill buildings are there — but the kind of jobs they once provided are long gone.  I have a lot of affection for Lowell because my grandmother lived there and my mother was raised there; my dad graduated from the University of Massachusetts at Lowell at the age of 40 with a degree in computer science.

But enough about me!  Let’s get back to dataviz:

So first off, check out this link:

Lowell Foreclosure Demo

Give it awhile to load.  I also recommend loading it in either Firefox or Chrome.

Run your mouse over anything.  Anything at all.  Everything here is highly interactive; you can drill down on almost anything.  That’s pretty exciting all by itself, but now take a look at the menus in the upper right.

It’s not just interactive; it’s generative.  You can remix this, create your own visualizations, change what the dashboard looks like and what it displays, add your own data!

When I think about teaching beginners data visualization, one of the primary questions I ask myself is:  What am I teaching students that they can’t do easier and faster in Excel or Powerpoint?  What new vista am I helping them to see?

To me, one of the primary ways to depart from the “Excel box” is interactivity, but also generativity.  That’s why this is exciting.   :)

Notes from a newsroom

 

Newsroom sketch

Photo Credit: scriptingnews via Compfight cc

Last week I was lucky enough to meet with three folks who work in the newsroom of a daily newspaper.  That’s a big deal to me, because if my work isn’t useful to people who work in a newsroom, a mission-driven nonprofit, or doesn’t work for folks who want to change the world (or even just their little piece of it), I’m wasting my time.

I asked them: “What should my next step-by-step tutorial be?  What would be really useful for a beat reporter who doesn’t think of themselves as a techie to pick up?”  Remember, it wasn’t all that long ago that shooting video was considered a specialty task that print reporters didn’t do — and now everyone just points their iPhone at it and calls it a day.  (Okay, some do a great deal more than that!  But you get my point).

The folks who were kind enough to spend some time with me gave me the following hints:

  1. The Absurdly Illustrated Guide To Your First Tableau Public ChartsnGraphsTableau Public is a downloadable app that lets users transform datasets into classic data visualizations — bar charts, pie charts, scatterplot, time series, and more.  The end results are embeddable in a web page the way that a YouTube video is, and a few are interactive.   
  2. The Absurdly Illustrated Guide To Your First Survey with Crosstabs — There are lots of survey tools out there, but only a few of them do “crosstabs” — that’s the ability to compare one survey answer against another one.  For instance, a survey that asked folks what their favorite flavor ice cream was but also asked their gender and had crosstabs could tell you that 47% of women liked black raspberry ice cream, but only 12% of men.  My job would be to pick the best and most web/mobile friendly tool out there and produce a tutorial on how to use it and serve it up on the web and mobile devices.
  3. The Absurdly Illustrated Guide To Your First ArcGIS Online Map.  ArcGIS is a “geographical information system” or GIS.  GIS predates web-based mapping systems like Google Maps by a couple of decades.  They used to be very, very expensive software used by specialists, and to some extent they still are.  But to get with the times, ArcGIS now has an online service too.  I’ve never used it, but hey, before I wrote my TileMill tutorial I never used that either!  Writing tutorials is a spectacularly effective form of learning — if I understand it well enough to explain it to a total beginner, I probably understand it pretty well.

One thing I’ve been thinking about lately that really made an impression on me is how important it will be for me to focus on “zero install” tools.  Many folks have computers and servers that their corporate IT department doesn’t allow them to install anything on for security reasons.  So my TileMill tutorial, which requires you to download an app, won’t work for folks in that situation.  But a tutorial on the data visualization platform ManyEyes would — you don’t have to download or install anything, you just work with the application from your web browser.

That’s super-useful information for me as I go forward and write more data visualization tutorials.

So, two things:

  1. If you’re reading this and you guys are the folks who were kind enough to meet with me, you know who you are :)  I didn’t use your names here because I forgot to ask if I could, and not asking would be really rude! But if you’d like the credit for giving me so many smart ideas please let me know :)  
  2. What about more tutorials?  If you’re reading this, wherever and whoever you are, and you have a burning desire to learn a specific data visualization or mapping tool or technique, please let me know.  I’m a noob like you (if you’re a noob), so I can’t guarantee I’ll do every one, but I do want to know!

Carl Malamud’s Ten Rules for Radicals

Illustration showing the face of public domain advocate Carl Malamud, with the word DATA under his face. Recently I searched for the name of my current project, “Data for Radicals,” and through that magic we know as Serendipity on the Internet, up popped:

Ten Rules for Radicals

by none other than Carl Malamud.  To be honest, before I read “Ten Rules for Radicals,” all I knew about Carl was that my friends who were investigative journalists — particularly those who did the deep data and document dives through FOIA and other means — talked about him in hushed tones of awe.

Reading the title, I could not help but think that the essay, originally an address to the WWW2010 conference, represented one of those strange messages that happen between people of ideas, even if those people are separated by centuries, or thousands of miles, or other barriers, and even if they have never met.  Haven’t you ever had that feeling of picking up a book and feeling that the author is, in an uncanny and spooky way speaking to you — directly to you?  I felt that way about this essay.  You can find it in full here, but interspersed within it are his “Ten Rules for Radicals,” which in the essay he illustrates with stories from his career.  You should do yourself the favor of reading the whole thing, but for my own edification, I am reprinting the ten rules below.

Just as I do when I am learning new code, I did not copy and paste these.  As I sit here, I am typing them word by word with my own ten fingers on my Macbook Air, sitting at my dining room table at 2:21 AM on Saturday, May 18 (What can I say?  A dream woke me up and I couldn’t get back to sleep).

Rule 1:  Call everything an experiment.
Rule 2: When the starting gun goes off, run really fast.  As a small player, the elephant can step on you, but you can outrun the elephant.
Rule 3: Eyeballs rule.  If a million people use your service, and on the Internet you can do that, you’ve got a lot more credibility than if you’re just issuing position papers and flaming The Man.
Rule 4: When the time comes, be nice.
Rule 5: Keep asking until they say yes.  Gordon Bell, the inventor of the VAX, once said that you should keep your vision, but modify your plan.
Rule 6: When you get the microphone, get to the point. Be clear about what you want.
Rule 7: Get standing.  Have some skin in the game, some reason you’re at the table.
Rule 8: Get them to threaten you.
Rule 9:  Look for overreaching, things that are just blatantly, obviously wrong or silly.
Rule 10: Don’t be afraid to fail.  It took Thomas Edison 10,000 times before he got the lightbulb right, and when he was asked about those failures, he said, “I have not failed, I’ve just found 10,000 ways that won’t work.” Fail. Fail often. And don’t forget, you can question authority.

If I could put these on stone tablets, or better yet for our era, put them on plastic tablets extruded by a 3D printer, I’d do it.  They’re a little long for a tattoo, though :)

The Absurdly Illustrated Guide To Sortable, Searchable Online Data Tables

Visual approaches to data are great — they can allow us to grasp complex issues at a glance, just the way this map from Clear Health Costs shows us the dramatic differences between what different hospitals charge for the same procedure.

But sometimes a simple, sortable and searchable table of data is all that’s really needed.  Using  code written by Chris L. Keller, I was able to create this sortable, searchable table of law enforcement agencies in Middlesex County, Massachusetts, along with the populations they serve, and how many full-time officers per capita there are.

As always, click on any image in this blog to see it full size.  I leave helpful annotations in the illustrations to these tutorials — so if ya can’t see em, click ‘em!

middlesex-county-law-enforcement

 

One of the nice things about this way of presenting data is that even though it’s simple, it can be quite revealing.  Click here to go to the live data table and use the up/down arrows to sort by the center column, which displays how many full-time officers per 1,000 people served there are.

7 out of the top ten are colleges and universities.  Tiny Lasell College has 7.8 officers per 1,000 students — though with only 1,800 students, their high ratio may have more to do with a minimum number of officers needed to staff three shifts to make sure there are officers on duty 24 hours.  But scroll down to the bottom — two of the departments with the lowest ratio are also colleges.

Public colleges.  

Surprising?  Maybe not, but even so, it was a fact I did not immediately pick out when I downloaded the origincal data from  UCRStats.com.  And the differences are dramatic; state colleges have among the lowest number of full time officers per 1,000 people served of all of the departments listed.  So one of the things that higher tuition cost buys?  Bigger campus police forces.

Now I will teach you how to make your own sortable, searchable web data tables!

Continue reading

Creating Interactive, Web-based Data Tables With Tabletop.js

middlesex-county-law-enforcement

 

Sortable, searchable table of law enforcement agencies, Middlesex County, MA

Tabletop.js is a Javascript library that lets you use Google spreadsheets as the data source for web apps.  It’s pretty neat — especially since we know there are so many simple but useful web and mobile apps we can create where setting up a full-on database is overkill.  What if you want to make a sortable, searchable list of craft breweries?  Or a schedule for a music festival?  Do you really have to bust out MySQL for that?

Well, with Tabletop.js, you don’t.  The other great thing about using Tabletop.js is that a lot more people know how to use a Google spreadsheet than know how to enter records into a database.  You can share responsibility for updating your web app with anyone who knows how to use Google Docs, or use Google Forms to let members of the public add new records to a list.

Chris Keller wired up Tabletop.js to a nifty sortable, searchable, and nicely styled web-based data table, which I use here to create a sortable, searchable table of law enforcement agencies in Middlesex County, Massachusetts, where I live. I decided to do that because I live in Watertown, Massachusetts.  Until recently, very few people outside of eastern Massachusetts knew about Watertown — where it was, what it looked like, what happened there.  That was before the Tsarnaev brothers led police on a car chase through my town, culminating in a gunfight and explosions.

So I thought I’d do my latest plunge into civic data by creating a data table showing all the law enforcement agencies in my county, how many full time police officers per 1,000 residents each police department has, and the population of each city or town.  (College police departments are also represented in this table.  I thought about taking them out, until I remembered that Sean Collier, the 26 year old police officer who died, was a campus police officer at the Massachusetts Institute of Technology (MIT)).  You can see the table here: Sortable, searchable table of law enforcement agencies, Middlesex County, MA.

I’m a noob, and I had a tough time getting my mind around Tabletop.js, but it was worth it.  Also, once I finally got it to work…I happened to be wearing my “Watertown Strong” t-shirt.  Coincidence?  Nah.

Watertown Tshirt-thumb-520x345-101018

 

 

Now that I’ve got it working,  I’ll be creating another Absurdly Illustrated Tutorial for those of you who want to try out Tabletop.js.  If you’d like to see my other tutorials, see:

The Absurdly Illustrated Guide To Your First Dynamic, Data-Driven Timeline
The Absurdly Illustrated Guide To Your First Data-Driven TileMill Map

The Absurdly Illustrated Guide To Your First Dynamic, Data Driven Timeline

timeline-js

 

Gay marriage became legal today in Rhode Island, making marriage equality the law of the land in all of New England.

The Providence Journal published a detailed timeline of GLBT history in the state – but it’s text-only.  On this happy day, what could we do to spiff things up a little?  I decided to give the Projo’s timeline a little celebratory finery by creating a vertical, interactive timeline using Timeline.js.  Check it out.

Now I will show you how to do it!

Continue reading

The Pressthink of FvckTheMedia

I first heard the word “Pressthink” from NYU journalism professor Jay Rosen, who began a blog of the same name.

I’m not sure I ever heard Jay define the term “pressthink,” but I’ll try:

Pressthink:  A set of shared, embedded and often unspoken notions that guide the actions of a group of people creating news media for public consumption.

In otherwords, the “pressthink” of a publication and the people who work at it help those people decide what is good work, or bad work; what’s worth doing and not doing, whether coverage is fair or not.  (Writing that makes me think that pressthink is inherently moral; perhaps it is the moral philosophy of a news organization).

When I saw FvckTheMedia, an online publication formed in the wake of the sudden closure of Boston alt-weekly The Phoenix by former employees of the paper,  I thought: what can you say about the pressthink of this little green shoot? Continue reading

How Much Progress Have I Made?

Word count stats for my blog

 

[As always, click any image on this blog to make it bigger.]

Since I want to write a book on data visualization for beginners, I wanted to know how many words I’d already written here at #D4R.  The book and the blog will be different, of course, but things like The Insanely Illustrated Guide To Your First Data-Driven Tile Mill Map, as well as others, are very likely to appear there.  So it’s good for me to know what I’ve got in terms of source material.

These charts are created by a WordPress plugin called Word Stats.

The count is good news.  If my book is 40-60,000 words long, I probably need 80K in source material.  But I’m well on my way.