Inside the antique camera is a Raspberry Pi with a camera module behind the lens. The flow of passages is controlled by a single, handwritten JSON file. When there is overlap between the tags detected in an image by Clarifai and the tags assigned to a passage, and the candidate passage occurs next in a storyline that has already begun, that passage is printed out. If no passage can be found, the camera prints poetry enabled by a recursive context-free grammar and constructed from words detected in the image.

This week, I am planning to add a back end component that will allow photos taken to be preserved as albums, and passages printed to be read later online. For now, here is the JSON file that controls the order of output:

{
    "zero": {
        "tags": ["moon", "swamp", "marble", "north america", "insect", "street"],
        "order": 0,
        "next": ["story"]
    },
    "guam_zero": {
    	"tags": ["computer", "technology", "future", "keyboard", "politics"],
    	"order": 0,
    	"next": ["guam_one"]
    },
    "guam_one": {
    	"tags": ["computer", "technology", "future", "keyboard", "politics"],
    	"order": 1,
    	"next": []
    },
    "dream_zero": {
    	"tags": ["dream", "dark", "night", "sleep", "bed", "bedroom", "indoors"],
    	"order": 0,
    	"next": ["chess_board"]
    },
    "chess_board": {
    	"tags": ["dream", "dark", "night", "sleep", "bed", "bedroom", "indoors"],
    	"order": 2,
    	"next": ["black_queen", "black_pawn", "black_king", "black_rook", "white_king", "white_knight"]
    },
    "black_queen": {
    	"tags": ["dream", "dark", "black", "night", "sleep", "bed", "bedroom", "indoors", "chess", "game", "queen"],
    	"order": 3,
    	"next": ["wake_up"]
    },
    "black_pawn": {
    	"tags": ["dream", "dark", "black", "night", "sleep", "bed", "bedroom", "indoors", "chess", "game", "pawn"],
    	"order": 3,
    	"next": ["wake_up"]
    },
    "black_king": {
    	"tags": ["dream", "dark", "black", "night", "sleep", "bed", "bedroom", "indoors", "chess", "game", "king"],
    	"order": 3,
    	"next": ["wake_up"]
    },
    "black_rook": {
    	"tags": ["dream", "dark", "black", "night", "sleep", "bed", "bedroom", "indoors", "chess", "game", "rook", "castle"],
    	"order": 3,
    	"next": ["wake_up"]
    },
    "white_king": {
    	"tags": ["dream", "dark", "white", "night", "sleep", "bed", "bedroom", "indoors", "chess", "game", "king"],
    	"order": 3,
    	"next": ["wake_up"]
    },
    "white_knight": {
    	"tags": ["dream", "dark", "white", "night", "sleep", "bed", "bedroom", "indoors", "chess", "game", "knight"],
    	"order": 3,
    	"next": ["wake_up"]
    },
    "wake_up": {
    	"tags": ["dream", "dark", "night", "sleep", "bed", "bedroom", "indoors"],
    	"order": 4,
    	"next": []
    },
    "forget": {
    	"tags": ["man", "men", "boy"],
    	"order": 0,
    	"next": []
    },    
    "story": {
    	"tags": ["moon", "swamp", "marble", "north america", "insect", "night", "street", "woman", "women", "girl"],
    	"order": 1,
    	"next": ["miss_vest", "forget"]
    },
    "miss_vest": {
    	"tags": ["moon", "swamp", "marble", "north america", "insect", "night", "street", "woman", "women", "girl"],
    	"order": 2,
    	"next": ["envelope", "forget"]
    },
    "envelope": {
    	"tags": ["moon", "swamp", "marble", "north america", "insect", "night", "street", "woman", "women", "girl", "paper", "envelope", "mail"],
    	"order": 3,
    	"next": ["apartment", "forget"]
    },
    "apartment": {
    	"tags": ["moon", "swamp", "marble", "north america", "insect", "night", "street", "woman", "women", "girl", "paper", "envelope", "mail"],
    	"order": 4,
    	"next": ["email"]
    },
    "email": {
    	"tags": ["moon", "swamp", "marble", "north america", "insect", "night", "woman", "women", "girl", "paper", "envelope", "mail", "computer", "technology"],
    	"order": 5,
    	"next": ["match"]
    },
    "match": {
    	"tags": ["moon", "swamp", "marble", "north america", "insect", "night", "man", "men", "boy", "paper", "envelope", "mail", "computer", "technology"],
    	"order": 5,
    	"next": ["smithpoint", "morning"]
    },
    "morning": {
    	"tags": ["day", "sun", "bedroom", "bed", "breakfast", "morning", "dream", "dark", "night"],
    	"order": 6,
    	"next": ["call"]
    },
    "call": {
    	"tags": ["phone", "telephone", "technology", "computer"],
    	"order": 7,
    	"next": ["smithpoint"]
    },
    "smithpoint": {
    	"tags": ["moon", "swamp", "marble", "north america", "insect", "night", "man", "men", "boy", "bar", "drink", "alcohol", "wine", "beer"],
    	"order": 8,
    	"next": ["drive", "forget"]
    },
    "drive": {
    	"tags": ["moon", "swamp", "marble", "north america", "insect", "night", "man", "men", "boy", "bar", "drink", "alcohol", "wine", "beer"],
    	"order": 9,
    	"next": ["take_pill", "toss_pill"]
    },
    "take_pill": {
    	"tags": ["drug", "pill", "man", "men", "boy", "bar", "night", "drink", "alcohol", "wine", "beer"],
    	"order": 10,
    	"next": ["meet_stranger_drugs", "john_home"]
    },
    "toss_pill": {
    	"tags": ["moon", "swamp", "marble", "north america", "insect", "girl", "street", "woman", "women"],
    	"order": 10,
    	"next": ["meet_stranger_no_drugs"]
    },
    "meet_stranger_drugs": {
    	"tags": ["moon", "swamp", "marble", "north america", "insect", "night", "man", "men", "boy", "bar", "drink", "alcohol", "wine", "beer"],
    	"order": 11,
    	"next": ["john_home"]
    },
    "meet_stranger_no_drugs": {
    	"tags": ["moon", "swamp", "marble", "north america", "insect", "night", "man", "men", "boy", "bar", "drink", "alcohol", "wine", "beer"],
    	"order": 11,
    	"next": ["painting"]
    },
    "painting": {
    	"tags": ["painting", "art", "moon", "swamp", "marble", "north america", "insect", "night", "man", "men", "boy", "bar", "drink", "alcohol", "wine", "beer"],
    	"order": 12,
    	"next": []
    },
    "john_home": {
    	"tags": ["drug", "pill", "man", "men", "boy", "bar", "night", "drink", "alcohol", "wine", "beer"],
    	"order": 13,
    	"next": []
    }

}

And here is the code that’s currently running on the Raspberry Pi:

import RPi.GPIO as GPIO
from Adafruit_Thermal import *
import time
import os
import sys
import json
import picamera
from clarifai.client import ClarifaiApi
from pattern.en import referenced

import gen

# Init Clarifai
os.environ["CLARIFAI_APP_ID"] = "nAT8dW6B0Oc5qA6JQfFcdIEr-CajukVSOZ6u_IsN"
os.environ["CLARIFAI_APP_SECRET"] = "BnETdY6wtp8DmXIWCBZf8nE4XNPtlHMdtK0ISNJQ"
clarifai_api = ClarifaiApi() # Assumes Env Vars Set

# Init System Paths
APP_PATH = os.path.dirname(os.path.realpath(__file__))
IMG_PATH = os.path.join(APP_PATH, 'img')
TALE_PATH = os.path.join(APP_PATH, 'tales')

# Init tale_dict
with open(os.path.join(APP_PATH, 'tales_dict.json'), 'r') as infile:
    tale_dict = json.load(infile)

# Seen tales
seen_tales = list()

# Init Camera
camera = picamera.PiCamera()

# Init Printer
printer = Adafruit_Thermal("/dev/ttyAMA0", 9600, timeout=5)
printer.boldOn()

# Init GPIO
# With camera pointed forward...
# LEFT:  11 (button), 15 (led)
# RIGHT: 13 (button), 16 (led)
GPIO.setmode(GPIO.BOARD)
ledPins = (15,16)
butPins = (11,13)

for pinNo in ledPins:
    GPIO.setup(pinNo, GPIO.OUT)

for pinNo in butPins:
    GPIO.setup(pinNo, GPIO.IN, pull_up_down=GPIO.PUD_UP)

# Open Grammar Dict
with open(os.path.join(APP_PATH, 'weird_grammar.json'), 'r') as infile:
    grammar_dict = json.load(infile)

def blink_left_right(count):
    ledLeft, ledRight = ledPins
    for _ in range(count):
        GPIO.output(ledRight, False)
        GPIO.output(ledLeft, True)
        time.sleep(0.2)
        GPIO.output(ledRight, True)
        GPIO.output(ledLeft, False)
        time.sleep(0.2)
    GPIO.output(ledRight, False)

def to_lines(sentences):
    def sentence_to_lines(text):
        LL = 32
        tokens = text.split(' ')
        lines = list()
        curLine = list()
        charCount = 0
        for t in tokens:
            charCount += (len(t)+1)
            if charCount > LL:
                lines.append(' '.join(curLine))
                curLine = [t]
                charCount = len(t)+1
            else:
                curLine.append(t)
        lines.append(' '.join(curLine))
        return '\n'.join(lines)
    sentence_lines = map(sentence_to_lines, sentences)
    return '\n\n'.join(sentence_lines)

def open_tale(tale_name):
    with open(os.path.join(TALE_PATH, tale_name), 'r') as infile:
        tale_text = to_lines(
            filter(lambda x: x.strip(), infile.read().strip().split('\n'))
        )
    return tale_text

def pick_tale(tags, next_tales):
    choice = str()
    record = 0
    for tale in tale_dict:
        if tale in next_tales or tale_dict[tale]['order'] == 0:
            score = len(set(tale_dict[tale]['tags']) & set(tags))
            if tale in next_tales and score > 0 and not tale in seen_tales:
                score += 100
            if score > record:
                choice = tale
                record = score
    return choice


blink_left_right(5)
imgCount = 1
cur_tale = str()


while True:
    inputLeft, inputRight = map(GPIO.input, butPins)
    if inputLeft != inputRight:
        try:
            img_fn = str(int(time.time()*100))+'.jpg'
            img_fp = os.path.join(IMG_PATH, img_fn)

            camera.capture(img_fp)

            blink_left_right(3)

            result = clarifai_api.tag_images(open(img_fp))
            tags = result['results'][0]['result']['tag']['classes']

            if cur_tale:
                next_tales = tale_dict[cur_tale]['next']
            else:
                next_tales = list()

            tale_name = pick_tale(tags, next_tales)
            cur_tale = tale_name

            if tale_name:
                lines_to_print = open_tale(tale_name)
                seen_tales.append(tale_name)

            else:
                grammar_dict["N"].extend(tags)

                if not inputLeft:
                    sentences = [gen.make_polar(grammar_dict, 10, sent=0) for _ in range(10)]
                elif not inputRight:
                    sentences = [gen.make_polar(grammar_dict, 10) for _ in range(10)]
                else:
                    sentences = gen.main(grammar_dict, 10)

                lines_to_print = to_lines(sentences)

            prefix = '\n\n\nNo. %i\n\n'%imgCount

            printer.println(prefix+lines_to_print+'\n\n\n')

            grammar_dict["N"] = list()
            imgCount += 1
        except:
            blink_left_right(15)
            print sys.exc_info()

    elif (not inputLeft) and (not inputRight):
        offCounter = 0
        for _ in range(100):
            inputLeft, inputRight = map(GPIO.input, butPins)
            if (not inputLeft) and (not inputRight):
                time.sleep(0.1)
                offCounter += 1
                if offCounter > 50:
                    os.system('sudo shutdown -h now')
            else:
                break

Click here for a Google Drive folder with all the passages from the novel.

This was the primary inspiration for my latest project, which features Kurt Vonnegut’s complete works, analyzed for sentiment, and visualized as interactive word clouds. I developed it entirely in front-end JavaScript, and it’s currently hosted on GitHub pages: rossgoodwin.com/vonnegut

Users can scrub through the sentiment graph of each book from start to finish and see a word cloud displayed for each position on the slider. Each word cloud represents 10 paragraphs of the book. Along with the rises and dips in the graph, sentiment values are indicated by the color of the word cloud text, which ranges from dark green (highly positive) to bright red (highly negative).

Rather than simply using word count or frequency for the size of the words, I used TF-IDF scores. (Each 10 paragraph block was treated as one document, and each book was treated as an independent set of documents.) As a result, the largest words in each word cloud are those that make their respective section unique in the context of the entire book.

The first steps in creating this project were to parse Vonnegut’s books, perform TF-IDF calculations for each word and sentiment analysis for each 10-paragraph segment, then store the resulting data in a set of JSON files. Here are the iPython Notebooks where I completed these steps:

• TF-IDF Calculations
• Sentiment Analysis – Performed with the Pattern library
• Data Cleaning / Output to JSON Files – Splitting the data into over 400 JSON files was required to ensure the browser would not have to load too much information all at once.

Once I had the JSON files, I used D3 to create the word clouds and Chart.js to create the line graphs. The sliders are HTML range inputs, modified with custom CSS. I wanted to create the appearance of long, semi-transparent planchettes sliding over the graphs. Getting the sliders to line up with the graphs precisely was particularly challenging, as was providing the option to click on the graphs in any location and automatically move the sliders to that location.

Here is my JavaScript code, in its current state:

(function() {

Number.prototype.map = function (in_min, in_max, out_min, out_max) {
  return (this - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}

function titleCase(str) {
    return str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
}

// Charts.js global config
Chart.defaults.global.animation = false;
Chart.defaults.global.tooltipEvents = [];
Chart.defaults.global.scaleFontFamily = "'Cousine', monospace";
Chart.defaults.global.showScale = false;

// var spectrum = ['#F22613', '#E74C3C', '#D35400', '#F2784B', '#95A5A6', '#68C3A3', '#4DAF7C', '#3FC380', '#2ECC71'];
var spectrum = ["#f22613", "#f25749", "#f28379", "#f2b0aa", "#95a5a6", "#add9c2", "#74b391", "#45996c", "#1e824c"];


$("#key-block").append(
  '<div id=\"key-text-box\"><p class=\"text-center lead small\" style=\"margin-left: 7px;\">&lt;&lt;&lt; negative | positive &gt;&gt;&gt;</p></div>'
);

spectrum.map(function(hex){
  $("#key-block").append(
    '<div class=\"key-color\" style=\"background-color:'+hex+';\"></div>'
  );
});

function updateCloud(bookslug, section) {

  $.getJSON("data/vonnegut-"+section+".json", function(data){

    // var factor = Math.pow(data[bookslug]['tfidf'].length, 2);

    var layout = d3.layout.cloud()
        .size([800, 500])
        .words(data[bookslug]['tfidf'].map(function(d) {
          return {text: d[0], size: d[1] * 500};
        }))
        .padding(3)
        .rotate(function() { return 0; }) // return ~~(Math.random() * 2) * 90
        .font("Cousine")
        .fontSize(function(d) { return d.size; })
        .on("end", draw);
    layout.start();

    function draw(words) {

      var overallContainer = d3.select("#"+bookslug);

      overallContainer.select("svg").remove();
      overallContainer.select("a").remove();

      var svgContainer = overallContainer.append("svg")
          .attr("width", layout.size()[0])
          .attr("height", layout.size()[1])
          .attr("class", "svg-cont");

      var wordCloud = svgContainer.append("g")
          .attr("transform", "translate(" + layout.size()[0] / 2 + "," + layout.size()[1] / 2 + ")")
        .selectAll("text")
          .data(words)
        .enter().append("text")
          .transition().duration(500)
          .style("font-size", function(d) { return d.size + "px"; })
          .style("font-family", "Cousine")
          .style("fill", function(d, i) {
              var sentiment = data[bookslug]['sentiment'];
              var ix = Math.floor(((sentiment + 1)/2)*spectrum.length);
              return spectrum[ix];
          })
          .attr("text-anchor", "middle")
          .attr("transform", function(d) {
            return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
          })
          .text(function(d) { return d.text; });

      var title = titleCase(data[bookslug]['title']);

      var labelText = overallContainer
                      .append("a")
                      .attr("href", "http://www.amazon.com/exec/obidos/external-search/?field-keywords=%s"+title+"&mode=blended")
                      .attr("class", "twitter-link")
                      .attr("target", "_blank")
                      .text(title);

      overallContainer.transition()
          .style("opacity", 1.0)
          .delay(1000)
          .duration(3000);
    }

  });

}

$.getJSON("data/sentiment.json", function(sent){
$.getJSON("data/vonnegut-0.json", function(data){
  $("#loadinggif").fadeOut("slow");
  Object.keys(data).sort().map(function(slug){
    $("#vis").append(
      '<div id=\"'+slug+'\" class=\"col-md-12 transparent text-center\"></div>'
    );

    $("#"+slug).append(
      '<canvas class="chart-canvas" id=\"'+slug+'-chart\" width=\"800\" height=\"150\"></canvas>'
    );

    var ctx = document.getElementById(slug+"-chart").getContext("2d");

    var xLabels = [];

    for (var i=0;i<data[slug]['length'];i++) {
      xLabels.push('');
    }

    var chartData = {
        labels: xLabels,
        datasets: [
            {
                label: titleCase(data[slug]['title']),
                fillColor: "rgba(210, 215, 211, 0.7)",
                strokeColor: "rgba(189, 195, 199, 1)",
                pointColor: "rgba(210, 215, 211, 1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: sent[slug]
            }
        ]
    };

    var chartOptions = {
      pointDot : false,
      pointHitDetectionRadius : 5,
      scaleShowVerticalLines: false,
      bezierCurve: false
    };

    var myNewChart = new Chart(ctx).Line(chartData, chartOptions);

    var stepCount = data[slug]['length'] - 1;

    $("#"+slug).append(
      '<div class=\"scrubber\"><input id=\"'+slug+'-scrub\" type=\"range\" min=\"0\" max=\"'+stepCount+'\" value=\"0\" step=\"1\"></div>'
    );

    $("#"+slug+"-chart").on("click", function(evt){
      var activePoints = myNewChart.getPointsAtEvent(evt);
      var xPos = activePoints[Math.floor(activePoints.length/2)].x;
      var ix = Math.floor(xPos.map(0, 800, 0, data[slug]['length']));
      console.log(xPos);
      console.log(ix);
      $('#'+slug+'-scrub').val(ix);
      updateCloud(slug, ix);
    });

    // Play Button
    $('#'+slug).append(
      '<button type=\"button\" id=\"'+slug+'-btn\" class=\"btn btn-default btn-xs play-btn\" aria-label=\"Play\"><span class=\"glyphicon glyphicon-play\" aria-hidden=\"true\"></span></button>'
    );

    $('#'+slug).append(
      '<button type=\"button\" id=\"'+slug+'-btn-pause\" class=\"btn btn-default btn-xs play-btn\" aria-label=\"Pause\"><span class=\"glyphicon glyphicon-pause\" aria-hidden=\"true\"></span></button>'
    );

    // Load First Clouds
    updateCloud(slug, 0);

    var play;

    $('#'+slug+'-btn').click(function(){

      console.log('clicked ' + slug);
      autoAdvance();
      play = setInterval(function(){
        autoAdvance();
      }, 5000);

      function autoAdvance(){
          var scrubVal = $('#'+slug+'-scrub').val();
          console.log(data[slug]['length']);
          if (scrubVal >= data[slug]['length']-1) {
            console.log("EOR");
            clearInterval(play);
          }
          console.log(scrubVal);
          var newVal = parseInt(scrubVal, 10) + 1;
          $('#'+slug+'-scrub').val(newVal);
          updateCloud(slug, newVal);
      }

    });



    $('#'+slug+'-btn-pause').click(function(){
      clearInterval(play);
    });


    $("#"+slug+"-scrub").on("input", function(){
      var sectNo = $(this).val();
      console.log(sectNo);
      updateCloud(slug, sectNo);
    });
  });
});
});



})();

The rest of my front-end code can be found on GitHub.

With all the images hosted on Amazon s3, and the tag data hosted on parse.com, I created a simple page where users can explore the candidates’ images by topic and by candidate. The default is all topics and all candidates, but users can narrow the selection of images displayed by making multiple selections from each field. Additionally, more images will load as you scroll down the page.

Unfortunately, the AI-enabled image tagging doesn’t always work as well as one might hope.

Here’s the page’s JavaScript code:

var name2slug = {};
var slug2name = {};

Array.prototype.remove = function() {
    var what, a = arguments, L = a.length, ax;
    while (L && this.length) {
        what = a[--L];
        while ((ax = this.indexOf(what)) !== -1) {
            this.splice(ax, 1);
        }
    }
    return this;
}

Array.prototype.chunk = function(chunkSize) {
    var array=this;
    return [].concat.apply([],
        array.map(function(elem,i) {
            return i%chunkSize ? [] : [array.slice(i,i+chunkSize)];
        })
    );
}

function dateFromString(str) {
	var m = str.match(/(\d+)-(\d+)-(\d+)T(\d+):(\d+):(\d+)Z/);
	var date = new Date(Date.UTC(+m[1], +m[2], +m[3], +m[4], +m[5], +m[6]));
	var options = {
	    weekday: "long", year: "numeric", month: "short",
	    day: "numeric", hour: "2-digit", minute: "2-digit"
	};
	return date.toLocaleTimeString("en-us", options);
}

function updatePhotos(query) {
	$.ajax({
		url: 'https://api.parse.com/1/classes/all_photos?limit=1000&where='+JSON.stringify(query),
		type: 'GET',
		dataType: 'json',
		success: function(response) {
			// console.log(response);
			$('#img-container').empty();

			var curChunk = 0;
			var resultChunks = response['results'].chunk(30);

			function appendPhotos(chunkNo) {

				resultChunks[chunkNo].map(function(obj){
					var date = dateFromString(obj['datetime'])
					var imgUrl = "https://s3-us-west-2.amazonaws.com/electionscrape/" + obj['source'] + "/400px_" + obj['filename'];
					var fullImgUrl = "https://s3-us-west-2.amazonaws.com/electionscrape/" + obj['source'] + "/" + obj['filename'];
					$('#img-container').append(
						$('<div class=\"grid-item\"></div>').append(
							'<a href=\"'+fullImgUrl+'\"><img src=\"'+imgUrl+'\" width=\"280px\"></a><p>'+slug2name[obj['candidate']]+'</p><p>'+date+'</p><p>'+obj['source']+'</p>'
						) // not a missing semicolon
					);
					// console.log(obj['candidate']);
					// console.log(obj['datetime']);
					// console.log(obj['source']);
					// console.log(obj['filename']);
				});

			}

			appendPhotos(curChunk);

			window.onscroll = function(ev) {
			    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
			        curChunk++;
			        appendPhotos(curChunk);
			    }
			};


		},
		error: function(response) { "error" },
		beforeSend: setHeader
	});
}

function setHeader(xhr) {
	xhr.setRequestHeader("X-Parse-Application-Id", "ID-GOES-HERE");
	xhr.setRequestHeader("X-Parse-REST-API-Key", "KEY-GOES-HERE");
}

function makeQuery(candArr, tagArr) {

	orArr = tagArr.map(function(tag){
		return { "tags": tag };
	})

	if (tagArr.length === 0 && candArr.length > 0) {
		var query = {
			'candidate': {"$in": candArr}
		};
	}
	else if (tagArr.length > 0 && candArr.length === 0) {
		var query = {
			'$or': orArr
		};
	}
	else if (tagArr.length === 0 && candArr.length === 0) {
		var query = {};
	}
	else {
		var query = {
			'candidate': {"$in": candArr},
			'$or': orArr
		};
	}

	updatePhotos(query);

}

(function(){

$('.grid').masonry({
  // options
  itemSelector: '.grid-item',
  columnWidth: 300
});

var selectedCandidates = [];
var selectedTags = [];

$.getJSON("data/candidates.json", function(data){
	var candNames = Object.keys(data).map(function(slug){
		var name = data[slug]['name'];
		name2slug[name] = slug;
		slug2name[slug] = name;
		return name;
	}).sort();

	candNames.map(function(name){
		$('#candidate-dropdown').append(
			'<li class=\"candidate-item\"><a href=\"#\">'+name+'</a></li>'
		);
	});

	$('.candidate-item').click(function(){
		var name = $(this).text();
		var slug = name2slug[name];
		if ($.inArray(slug, selectedCandidates) === -1) {
			selectedCandidates.push(slug);
			makeQuery(selectedCandidates, selectedTags);
			console.log(selectedCandidates);
			$('#selected-candidates').append(
				$('<button class=\"btn btn-danger btn-xs cand-select-btn\"><span class=\"glyphicon glyphicon-remove\" aria-hidden=\"true\"></span>'+name+'</button>')
					.click(function(){
						$(this).fadeOut("fast", function(){
							selectedCandidates.remove(name2slug[$(this).text()]);
							makeQuery(selectedCandidates, selectedTags);
							console.log(selectedCandidates);
						});
					}) // THIS IS NOT A MISSING SEMI-COLON
			);
		}
	});
});


$.getJSON("data/tags.json", function(data){
	var tags = data["tags"].sort();
	tags.map(function(tag){
		$('#tag-dropdown').append(
			'<li class=\"tag-item\"><a href=\"#\">'+tag+'</a></li>'
		);
	});

	$('.tag-item').click(function(){
		var tag = $(this).text();
		if ($.inArray(tag, selectedTags) === -1) {
			selectedTags.push(tag);
			makeQuery(selectedCandidates, selectedTags);
			console.log(selectedTags);
			$('#selected-tags').append(
				$('<button class=\"btn btn-primary btn-xs tag-select-btn\"><span class=\"glyphicon glyphicon-remove\" aria-hidden=\"true\"></span>'+tag+'</button>')
					.click(function(){
						$(this).fadeOut("fast", function(){
							selectedTags.remove($(this).text());
							makeQuery(selectedCandidates, selectedTags);
							console.log(selectedTags);
						});
					})
			);
		}
	});
});

makeQuery(selectedCandidates, selectedTags);

})();

Needless to say, those two projects have kept me busy, but I also built a few random things for fun in my spare time. And at this point, the total number of things I’ve built has become too cumbersome for an image-oriented portfolio, so I switched to a Google Spreadsheet-powered method, trusted by Darius Kazemi and (as I’ve learned from my Fusion co-conspirator Daniel McLaughlin) countless data hackers at news and media organizations across the country, whose routine CMS systems may require knowledge of COBOL, or worse, Microsoft Sharepoint.

The personal projects I completed over the summer were:

• MeterMap | Maps clauses from a text corpus onto the metrical structure of a poem.
• itpbot | IRC bot for the #itp channel on irc.freenode.com
• PaletteKnife | Tool that extracts color palettes from photographs, created entirely in front-end JavaScript using p5.js
• Dick Fractal | Personal website of Richard “Dick” Fractal, Ph.D.
• Four Oh Four | A URLae
• @BizarroMOMA | Twitter bot tweeting fictional artworks generated from the Museum of Modern Art’s collections data

Certain folks (namely, my parents) have complained to me for a long time that my website does not contain very much information about what I actually make. For their sake, and my own sanity, I added a list of projects below the introductory letter. I did this by writing a Python script that parses a Google Spreadsheets-generated CSV into a JSON file — I plan to implement the script in JavaScript soon, so that my website updates automatically.

We were also supposed to dig into some JSON for Designing for Data Personalization with Sam Slover, so this task fulfilled multiple roles for me.

Here’s the Python script:

import csv
import json
import datetime
import requests

CSV_URL = ""

response = requests.get(CSV_URL)

with open('projects.csv', 'w') as outfile:
	outfile.write(response.text)

fileObj = open('projects.csv', 'r')

reader = csv.DictReader(fileObj)

projList = []

for row in reader:
	projList.append(row)

fileObj.close()

def get_date(projObj):
	m, d, y = map(int, projObj['Date of Completion'].split('/'))
	dateObj = datetime.datetime(y, m, d, 0, 0)
	return -(dateObj - datetime.datetime(1970,1,1)).total_seconds()

projList = sorted(projList, key=get_date)


with open('projects.json', 'w') as outfile:
	json.dump(projList, outfile)

And here’s the raw JSON:

[
   {
      "Code URL":"https://github.com/rossgoodwin/itpbot",
      "XS S M L XL":"M",
      "Name":"itpbot",
      "Timestamp":"8/16/2015 12:45:21",
      "Documentation URL":"",
      "Date of Completion":"8/14/2015",
      "Main URL":"http://rossgoodwin.com/itpbot",
      "Output URL":"",
      "Description":"IRC bot for the #itp channel on irc.freenode.com"
   },
   {
      "Code URL":"https://github.com/rossgoodwin/paletteknife",
      "XS S M L XL":"S",
      "Name":"Palette Knife",
      "Timestamp":"8/16/2015 1:00:47",
      "Documentation URL":"",
      "Date of Completion":"7/30/2015",
      "Main URL":"http://rossgoodwin.com/paletteknife/",
      "Output URL":"",
      "Description":"Tool that extracts color palettes from photographs, created entirely in front-end JavaScript using p5.js"
   },
   {
      "Code URL":"https://github.com/rossgoodwin/bizarromoma",
      "XS S M L XL":"XS",
      "Name":"@BizarroMoMA",
      "Timestamp":"8/16/2015 12:05:27",
      "Documentation URL":"",
      "Date of Completion":"7/23/2015",
      "Main URL":"https://twitter.com/bizarromoma",
      "Output URL":"",
      "Description":"Twitter bot tweeting fictional artworks generated from the Museum of Modern Art's collections data"
   },
   {
      "Code URL":"https://github.com/rossgoodwin/metermap",
      "XS S M L XL":"M",
      "Name":"MeterMap",
      "Timestamp":"8/17/2015 18:28:55",
      "Documentation URL":"",
      "Date of Completion":"7/21/2015",
      "Main URL":"http://rossgoodwin.com/metermap/",
      "Output URL":"http://rossgoodwin.com/faulkner_wasteland.txt",
      "Description":"Maps clauses from a text corpus onto the metrical structure of a poem."
   },
   {
      "Code URL":"https://github.com/rossgoodwin/tweetingpoints/tree/gh-pages",
      "XS S M L XL":"S",
      "Name":"Tweeting Points",
      "Timestamp":"8/17/2015 18:40:42",
      "Documentation URL":"",
      "Date of Completion":"7/21/2015",
      "Main URL":"http://rossgoodwin.com/tweetingpoints/",
      "Output URL":"",
      "Description":"Real-time word clouds of the most recent tweets from candidates in the 2016 U.S. Presidential Election"
   },
   {
      "Code URL":"https://github.com/rossgoodwin/dickfractal",
      "XS S M L XL":"S",
      "Name":"Dick Fractal",
      "Timestamp":"8/16/2015 12:18:28",
      "Documentation URL":"",
      "Date of Completion":"7/5/2015",
      "Main URL":"http://dickfractal.com",
      "Output URL":"",
      "Description":"Dick Fractal, Ph.D."
   },
   {
      "Code URL":"https://github.com/rossgoodwin/fourohfour",
      "XS S M L XL":"S",
      "Name":"Four Oh Four",
      "Timestamp":"8/16/2015 12:22:14",
      "Documentation URL":"",
      "Date of Completion":"6/18/2015",
      "Main URL":"http://rossgoodwin.com/fourohfour.pdf",
      "Output URL":"",
      "Description":"A URLae is a poetic form consisting of a list of URLs. Four Oh Four is a URLae composed entirely of generated links."
   },
   {
      "Code URL":"",
      "XS S M L XL":"XL",
      "Name":"The Traveler's Lamp",
      "Timestamp":"8/17/2015 18:35:21",
      "Documentation URL":"http://www.thehypertext.com/tag/travelers-lamp/",
      "Date of Completion":"5/8/2015",
      "Main URL":"http://www.thehypertext.com/2015/05/08/travelers-lamp-part-ii/",
      "Output URL":"",
      "Description":"3D-printed cities inspired by those from Invisible Cities by Italo Calvino, which light up in sequence as a computer solves the Traveling Salesman Problem for the distances between them"
   },
   {
      "Code URL":"https://github.com/rossgoodwin/photosynthesis",
      "XS S M L XL":"XL",
      "Name":"word.camera",
      "Timestamp":"8/16/2015 12:10:53",
      "Documentation URL":"http://www.thehypertext.com/tag/word-camera/",
      "Date of Completion":"4/11/2015",
      "Main URL":"https://word.camera",
      "Output URL":"https://word.camera/i/nxDYEXM9R",
      "Description":"As artificial intelligence technology changes our world, it grants us creative possibilities not previously thought possible. word.camera explores one particular AI technology, convolutional neural networks that can generate descriptive words from images, and realizes possibilities for a new type of camera and a new type of photography."
   },
   {
      "Code URL":"https://github.com/rossgoodwin/wraithhimself",
      "XS S M L XL":"XS",
      "Name":"@WraithHimself",
      "Timestamp":"8/16/2015 21:45:54",
      "Documentation URL":"",
      "Date of Completion":"3/9/2015",
      "Main URL":"https://twitter.com/WraithHimself",
      "Output URL":"",
      "Description":"Twitter bot tweeting the entirely of Infinite Jest by David Foster Wallace, one word at a time, as the first word of retweets"
   },
   {
      "Code URL":"https://github.com/rossgoodwin/gutenflag",
      "XS S M L XL":"M",
      "Name":"@GutenFlag",
      "Timestamp":"8/16/2015 21:44:05",
      "Documentation URL":"http://www.thehypertext.com/2015/03/10/gutenflag/",
      "Date of Completion":"3/7/2015",
      "Main URL":"https://twitter.com/GutenFlag",
      "Output URL":"",
      "Description":"Twitter bot that recommends Project Gutenberg ebooks based on topics extracted from users' most recent tweets"
   },
   {
      "Code URL":"https://github.com/rossgoodwin/drgonzo",
      "XS S M L XL":"M",
      "Name":"Dr. Gonzo",
      "Timestamp":"8/17/2015 19:00:17",
      "Documentation URL":"",
      "Date of Completion":"2/17/2015",
      "Main URL":"http://www.thehypertext.com/2015/02/19/dr-gonzo/",
      "Output URL":"",
      "Description":"Hunter S. Thompson therapist chat bot"
   },
   {
      "Code URL":"https://github.com/rossgoodwin/clock/tree/gh-pages",
      "XS S M L XL":"S",
      "Name":"Text Clock",
      "Timestamp":"8/16/2015 12:29:06",
      "Documentation URL":"http://www.thehypertext.com/2015/04/11/text-clock/",
      "Date of Completion":"12/25/2014",
      "Main URL":"http://rossgoodwin.com/clock/",
      "Output URL":"",
      "Description":"The complete Project Gutenberg corpus as a clock"
   },
   {
      "Code URL":"",
      "XS S M L XL":"XS",
      "Name":"Cut-Up",
      "Timestamp":"8/16/2015 21:48:55",
      "Documentation URL":"",
      "Date of Completion":"12/15/2014",
      "Main URL":"https://github.com/rossgoodwin/cutup",
      "Output URL":"",
      "Description":"The Cut-Up Method of Brion Gysin, as described by William S. Burroughs, implemented in Python"
   },
   {
      "Code URL":"https://github.com/rossgoodwin/mtg",
      "XS S M L XL":"XL",
      "Name":"The Mechanical Turk's Ghost",
      "Timestamp":"8/16/2015 22:06:09",
      "Documentation URL":"http://www.thehypertext.com/tag/chess/",
      "Date of Completion":"12/8/2014",
      "Main URL":"http://www.thehypertext.com/2015/01/05/the-mechanical-turks-ghost-part-v/",
      "Output URL":"",
      "Description":"Chessboard that generates music based on computational analysis of a game in real time, and shakes pieces off the board when it determines either player is within range of checkmate"
   },
   {
      "Code URL":"https://github.com/rossgoodwin/ficgen",
      "XS S M L XL":"L",
      "Name":"Fiction Generator",
      "Timestamp":"8/16/2015 12:34:49",
      "Documentation URL":"http://www.thehypertext.com/tag/fiction-generator/",
      "Date of Completion":"12/3/2014",
      "Main URL":"http://fictiongenerator.com",
      "Output URL":"http://rossgoodwin.com/tricks_of_the_trade.pdf",
      "Description":"Generates novels according to user-defined parameters using content scraped from gutenberg.org, tvtropes.org, scp-wiki.net, and erowid.org."
   },
   {
      "Code URL":"https://github.com/rossgoodwin/typingtutor",
      "XS S M L XL":"L",
      "Name":"Stenogloves",
      "Timestamp":"8/17/2015 18:45:32",
      "Documentation URL":"http://www.thehypertext.com/tag/keyboard/",
      "Date of Completion":"11/25/2014",
      "Main URL":"http://www.thehypertext.com/2014/12/09/stenogloves-part-iii/",
      "Output URL":"",
      "Description":"10-key chorded keyboard with alternative typing scheme"
   },
   {
      "Code URL":"",
      "XS S M L XL":"L",
      "Name":"che55",
      "Timestamp":"8/17/2015 18:04:52",
      "Documentation URL":"http://www.thehypertext.com/2014/09/29/general-update/",
      "Date of Completion":"11/2/2014",
      "Main URL":"https://github.com/rossgoodwin/che55",
      "Output URL":"",
      "Description":"Chess GUI and visualizer, written in Processing"
   },
   {
      "Code URL":"https://github.com/dothething/maze",
      "XS S M L XL":"M",
      "Name":"Scary Maze Game",
      "Timestamp":"8/17/2015 18:50:33",
      "Documentation URL":"",
      "Date of Completion":"10/13/2014",
      "Main URL":"http://www.thehypertext.com/2014/10/25/scary-maze-game/",
      "Output URL":"",
      "Description":"A biofeedback game that gets harder when you get scared (with Jerllin Chang and Changyeon Lee)"
   },
   {
      "Code URL":"https://github.com/rossgoodwin/poetizer",
      "XS S M L XL":"L",
      "Name":"Poetizer",
      "Timestamp":"8/17/2015 18:57:00",
      "Documentation URL":"",
      "Date of Completion":"8/20/2014",
      "Main URL":"http://www.thehypertext.com/2014/08/31/poetizer/",
      "Output URL":"http://www.thehypertext.com/2014/09/02/more-poetizer-output/",
      "Description":"Generates free or fixed verse poetry from any text corpus"
   },
   {
      "Code URL":"https://github.com/rossgoodwin/hmap",
      "XS S M L XL":"S",
      "Name":"hmap",
      "Timestamp":"8/17/2015 18:15:16",
      "Documentation URL":"",
      "Date of Completion":"6/12/2014",
      "Main URL":"http://rossgoodwin.com/hmap/",
      "Output URL":"",
      "Description":"Image histogram remapping tool; maps the colors from one image onto another image (created with Anthony Kesich)"
   }
]

And here’s the JavaScript that parses the JSON to my website:

(function(){

$.getJSON("projects.json", function(data){

    $.each(data, function(ix, obj) {

        if (obj['Documentation URL'] != '') {
            var docChunk = ' <a target=\"_blank\" class="btn btn-xs btn-default" href=\"' + obj['Documentation URL'] + '\">documentation</a>';
        } else {
            var docChunk = '';
        }

        if (obj['Output URL'] != '') {
            var outChunk = ' <a target=\"_blank\" class="btn btn-xs btn-default" href=\"' + obj['Output URL'] + '\">output</a>';
        } else {
            var outChunk = '';
        }

        if (obj['Code URL'] != '') {
            var codeChunk = ' <a target=\"_blank\" class="btn btn-xs btn-default" href=\"' + obj['Code URL'] + '\">code</a>';
        } else {
            var codeChunk = '';
        }

        $('#'+obj['XS S M L XL']).append(
            '<p class="project-desc"><a target=\"_blank\" class="btn btn-xs btn-danger" href=\"'+obj['Main URL']+'\">'+obj['Name']+'</a>'+ docChunk + outChunk + codeChunk + '<br>' + obj['Description']+'</p>'
        );

    });

});

})();