Chris Newton is a web developer currently living and working in Brighton. Chris was one of our Summer 2012 interns and during his time with us he built the social web tool, Elsewhere.

URL: elsewherejs.com

Elsewhere is a social graphing tool built to replace the Google Social Graph after its unfortunate demise in April 2012. Elsewhere can help you locate peoples’ social media profiles as well as web sites they contribute to, simply by providing it with a URL to one of those profiles.

You can have a play with the Elsewhere explorer at example.elsewherejs.com

For example, for the start URL http://lanyrd.com/profile/chrisnewtn, Elsewhere finds this network of profiles that belong to the same person:

• Chris Newton’s conference talks and presentations | Lanyrd
• Chris Newton (@chrisnewtn) op Twitter
• Chris Newton
• Chris Newton – Google+
• chrisnewtn (Chris Newton) · GitHub
• newt42’s Music Profile – Users at Last.fm
• Flickr: chrisnewtn’s Photostream
• Flickr: chrisnewtn

At its heart, Elsewhere is a simple web crawler that scans a page at a URL for links that have been marked up with the a simple piece of HTML called a microformat – in this case, the rel="me" microformat, from which Elsewhere can tell that the page at that link is owned by the same individual or organisation that owns the page the link is on. Once Elsewhere finds such a link on the page, it scans the page at that link for more rel="me" links and so on and so forth.

At the end of this process, a list of URLs has been collected with the connections between them recorded. Next comes the clever bit, validation. As you might guess, there’s a problem with assuming that a page that’s been linked to is owned by the same person as the page the link is on. You could put a link on your site to barackobama.com claiming you owned it and with no validation, Elsewhere would just take your word for it.

With validation however, every page that is scanned for links is checked to ensure it links directly or indirectly back to the original page. Here’s a diagram of what that looks like:

The entry point here is the Twitter profile. This profile links to its owner’s homepage, which in turn, links back to his or her Twitter profile, thus completing a loop and creating a valid graph. You can run Elsewhere without validation too, as some legitimate connections may be otherwise lost, but it is possible that you can get some junk in your graph without validation.

Elsewhere isn’t specifically a social media grapher, there’s no code in the program for special cases where a social media site links to a profile and does not use rel="me" codes. Elsewhere also does not consider any site’s API. If you’ve linked your profiles together by, let’s say, signing into Lanyrd with Twitter, Elsewhere won’t have a clue. If there isn’t a link on a page marked up with rel="me", Elsewhere is completely blind.

This strict, single focus of Elsewhere does has a privacy side benefit. Since the only way to determine ownership is by following links and since the placement of those links is at the discretion of the person who owns their web presence. If that person doesn’t place the links on their profiles and websites, then there’ll be nothing for Elsewhere to see. Elsewhere’s ability to map a person’s web presence is made possible entirely by this consent.

Elsewhere doesn’t attempt to be a full suite of tools to map peoples’ web presence. It’s just a simple app that will give you a trustworthy graph if the links are there to find. It can be used as part of a wider toolset. A good example of this is Ident Engine, a tool by Glenn Jones that provides a high-level overview of a person’s web presence. Ident Engine makes use of Elsewhere in addition to the extensions elsewhere-mapper and elsewhere-profiles. I’d highly recommend checking it out.

I’ve had a lot of fun building and maintaining Elsewhere over the past couple of years and I hope you’ll find it fun to use and a useful addition to your tool chest.

Creative With Money

Thurs 5th September
L4RP.com/money/

Money is a mirror that takes whatever we project on it. We all have our own stories about what money is like, and these usually reflect our self-beliefs. In this half-day workshop, we’ll explore how to change our relationship with money and work with it more creatively. Taught by Charles Davies.

Crucial for founders, freelancers and money-users everywhere.

Learn to Code

Weds 11th September
L4RP.com/codingforhumans/learntocode/

Learn to code and build websites and web apps. From scratch. In a day. Even if you’ve never written or seen a line of code before. By the end of the day, everyone will have built a fun little web app, with plenty of scope for experimentation and customisation. Taught by Tom Parslow, Pete Goodman and Premasagar Rose.

Ideal for designers, producers, team managers and anyone who wants to get a glimpse of the developer’s world.

Async’s “Nodeventure” Hack Nights

Thurs 12th and 26th September
asyncjs.com/nodeventure/

Come all writers, artists, designers and programmers. We want to create a text adventure game where all players share the world together, moving from room to room and interacting with objects and each other. We’ll need some creative writing, pictures and inspired hacking. All welcome. It’s free and no experience is necessary.

JavaScript from Scratch

Weds 18th September
L4RP.com/codingforhumans/javascriptfromscratch/

Get started with the JavaScript programming language, to add interactivity to websites and create browser-based web apps. It’s very hands-on. We’ll learn the fundamentals of the language and the process of programming. In the afternoon, we’ll build our own interactive web app, including the use of Ajax to load data, HTML5 geo-location and JavaScript libraries like jQuery and Google Maps. Taught by Tom Parslow, Pete Goodman and Premasagar Rose.

This is designed for those who use HTML and CSS, or possibly a different programming language, and who might have seen but never learned the fundamentals of JavaScript.

Pablo: the Launch

Fri 20th September
brightondigitalfestival.co.uk/events/pablo/

A free event to get a glimpse at Pablo, a new tool by Premasagar Rose for creating crisp, interactive drawings and animations for the web. It is a small JavaScript library for building user interfaces, data visualisations, responsive graphics and games. Techies and non-techies alike are welcome.

Copywriting for the Web

Mon 23rd September
L4RP.com/copywriting/

Discover the fundamental principles of copywriting for the web in this hands-on workshop. Throughout the day we will be doing practical tasks and creative exercises to help you construct healthy web copy for your business. The workshop will show how to structure your message carefully and keep your audience’s attention. Taught by Ellen de Vries.

Building Data Visualisations with D3

Weds 25th September
L4RP.com/d3/

Learn how to create interactive data visualisations for the web, using the JavaScript toolkit, D3. We’ll learn how to connect a set of data with the visual elements used to display it on-screen, and how to manipulate the display as the user interacts with it. This can be used for charts, dashboards, data journalism, analytics and storytelling. Taught by Peter Cook.

Venue

Lab for the Recently Possible
45 Gloucester Street
Brighton
BN1 4EW

Website: L4RP.com
Twitter: twitter.com/L4RP
Mailing list: groups.google.com/d/forum/l4rp

We had a beautiful Coding For Humans day at the Lab for the Recently Possible last week. Ten people came for the day to learn how to create websites and web apps, with little or no experience beforehand. Amongst them were designers, writers, an event manager, animator, PR freelancer and geographical mapping expert. And boy did they do incredibly well! By the end of the day, people had created their first web app – a kind of interactive post-it stickies app.

Tom and Pete, working with me on the training, did a great job of explaining what can seem like pretty tough concepts as simply as sticking Lego together (well, almost). And a big shout out to Nest cafe, who laid on a gorgeous Mediterranean spread for lunch.

We’re next teaching the Learn To Code workshop in July. (If you’re an earlybird, you might catch a discount).

We also have a workshop dedicated to teaching JavaScript From Scratch, as well as one on data visualisation and on getting creative with money. See you over there!

The Lab for the Recently Possible is open again, in a beautiful, light and leafy home in Brighton’s North Laine, and we have a whole set of new events starting up. Come along, or tell a friend.

In our first four workshops, you can learn to code (in a day), learn JavaScript (from scratch), learn how to build data visualisations — and learn how to be more creative with money.

This new incarnation of The Lab is still taking shape. So please get involved.

We want to host workshops that teach the most potent, useful cutting-edge technologies in a friendly, clear and simple way. And we want to bring experimental art, social movements and personal development under one roof. And get people involved and talking to each other, connecting and collaborating.

So, if you’re interested and want to stay in touch, sign up for our mailing list or follow @L4RP on Twitter. And if you want to put on a workshop – or anything else – get in touch.

Lab-warming

Thurs 16th May, 6-10pm ish. Add yourself on Lanyrd

Come and welcome the Lab for the Recently Possible to its new location at the heart of Brighton. It’s a pretty informal affair. Children welcome. Bring along something to sup, and a game if you fancy. We’ll provide cake. Rumour has it there may be a supersized canvas and paints, for your creative pleasure.

Upcoming workshops

Learn to Code – Weds 29th May

Demystify the Web! Learn to code and build websites and web apps. From scratch. In a day. Even if you’ve never written or seen a line of code before.

Future dates: 10 Jul, 7 Aug, 11 Sept

JavaScript from Scratch – Weds 24th July

Get started with the JavaScript programming language, to add interactivity to websites and create browser-based web apps.

Future dates: 18 Sept

Building Data Visualisations with D3 – Weds 3rd July

Learn how to create interactive data visualisations for the web, using the JavaScript toolkit, D3.

Future dates: 25 Sept

Creative With Money – Thurs 4th July

Learn to split a restaurant bill amicably. And at least seven other valuable lessons about working creatively with money.

Future dates: 1 Aug, 5 Sept

Community events

Async is now at the Lab, with talks and meetups twice a month on JavaScript and related tech. On Thurs 23rd May, it’ll be Async’s third birthday, and we’re hosting a Show n’ Tell of 5-minute lightning talks.

Watch this space.

Peter Cook is a software developer from Lewes, East Sussex. Here, he writes about visualising the topics that interest people when they mark themselves as attending our developer meetup, Async. Peter will be speaking at Async in January on using the data visualisation toolkit, D3.js

During the summer months of 2012, the Lab for the Recently Possible held three Data Visualisation Lab Days in which a group of artists, programmers and other interested parties met up to create and experiment with data visualisation.

Amongst the topics explored were:

• managing call-centre data from Age UK
• domestic energy consumption
• attacks on migrants in Athens, Greece

Prem was keen to explore different ways of visualising and presenting attendance data from the series of regular talks on JavaScript called Async. To help us with this, he supplied data from the Lanyrd website containing vast quantities of information of who’s attended which sessions and what topics were covered in those sessions.

I took on this challenge and looked at a couple of ways of visualising this data. Both of the resulting visualisations show how many people attended sessions of a given topic (e.g. front-end, architecture, games).

Heat Matrix

My first visualisation is a ‘heat matrix’, which is a grid of squares coloured or shaded according to a given value. In this case, each row represents a topic and each column an attendee. The darker the value, the more times that attendee has been to a talk of that topic.

See the interactive demo

The rows and columns can be sorted by clicking on their titles. For example, if you want to ascertain someone’s favourite topics, click on their name and their topics, ranked by attendance, will be shown.

Implementation

I chose to use the D3.js JavaScript library for this as it is geared towards this sort of visualisation. Loosely speaking, the attendance values are represented as a 2×2 array and this data is bound to DOM elements, specifically SVG rectangle elements. D3 facilitates the creation of the rectangle elements from the data array and also makes the shading of them based on frequency of attendance very straightforward.

Avatars ranked by attendance

The second visualisation has a friendlier look as it uses the avatars of the attendees and lists them in order of attendance, according to a chosen topic.

See the interactive demo

The user can click on a topic and all the attendees of that topic’s sessions are displayed with the most frequent attendee listed first.

We also thought it’d be interesting to show whether any attendees have a stronger interest in a particular topic. For example, has anyone visited only graphics sessions? This probably indicates that they have a strong interest in graphics. We did this by computing each attendee’s favourite topic, attaching this to the attendee’s data and surrounding their avatar with a yellow border.

Implementation

As with the first visualisation, I used the D3 library as this is another application where data is bound to DOM elements. In this case, a one-dimensional array of attendee objects (containing avatar URL, name, favourite topic etc.) is bound to a selection of image elements. Many examples of D3 visualisations employ SVG but this is an example that operates on common HTML elements.

Wrap up

It was interesting to work on two different visualisations of essentially the same dataset. The first was a more obvious idea but it’s not particularly visually appealing and arguably displays more than is necessary. Having said that, it is useful for looking up a particular user to see what their favourite topics are. The second I think simpler, more friendly and easier to understand.

(This post first appeared on Peter’s blog)

Jaya Brekke is a photographer, filmmaker, designer and researcher, currently exploring the social impact of the economic crisis in Greece. She took part in one of our recent Data Visualisation Lab Days, where we brought together a melting pot of designers, programmers and people working in social projects. We wanted to build visual, interactive tools that make use of real world data to help elucidate problems and facilitate change. For a different take on the Lab Days, see Peter Cook’s energy visualisation.

It is too rare of a privilege to be able to spend an entire day with programers, geeks, charity workers and artists where everyone could share ideas and problems with each contributing solutions on how best to communicate and handle large amounts of data. The Data Viz Lab Day at the Lab for the Recently Possible was one such rare occasion, and I was immediately excited about the prospect of participating as I was about to embark on a research project in Athens in which I wanted to use data visualisation for gathering and analysing data about the financial crisis.

I came to the day with one specific idea in my mind: to have an interactive map of the increasing violent attacks against migrants in Athens. I wanted the map to be open for the people to contribute anonymously, as most attacks are currently not reported because of fear of the Greek police, which have a reputation of being racist and very violent. Making visible these hidden consequences of the crisis is a very important activist intervention into a debate that is still dominated by a financial discourse in which human and environmental costs are invisible.

I am a designer and researcher with very limited coding experience and not particularly experienced in handling data sets. So I had absolutely no idea where to even start with developing such a map, what the best way is to structure your data, and what the various elements and tools are for (online) data visualisation. With me on the day I had brought data gathered from a Human Rights Watch report on attacks in Athens, as well as information from blog.occupiedlondon.org.

We started the day with a simple go-around of who we were and why we had come, which gave me the chance to explain my idea. From there I got suggestions and help to structure my data very simply using Google Spreadsheets, learning about the various file formats that are computer-readable, and breaking down my idea into the various elements that needed to be worked on: the data structuring, data-gathering through text messages, email or phone calls, and the actual mapping and visualising, using the Google Maps API and tile overlays. The group then split into various sub-groups working, some working on other projects, and some working on various elements of my map project.

The day was hugely useful for me to get an overview of data visualisation and mapping. At the end of the day we had a look at Ushahidi who, it turned out, have created tools that were perfectly suited to my needs, and they are also more inline with the values of my research project than the google tools I had been using, as they are a non-profit, free and open source company. While my Athens research project, The City at a Time of Crisis, is still in its start up phase I am looking forward to using the knowledge and tools that I got a taster of during the data viz workshop to visualise the hidden everyday experience of the financial crisis, as well as the complete restructuring of European welfare states.

Bring Your Own Beamer was an event we helped create at this year’s month-long Brighton Digital Festival.

BYOB is a global artists’ movement where the idea is simple: find a place, invite artists and ask them to bring projectors for the night. There are no limits to the projections: DIY videos, generative art, anything.

Brighton’s BYOB was held inside the warren of underground tunnels and chorus rooms beneath the Brighton Dome, as well as the Concert Hall. It was organised by somewhereto_ and Pop-up Brighton, with Dharmafly holding sessions at the Lab for the artists and makers to edit video montages, create computer art and collaborate with each other. The event attracted around 250 people and was extremely well received.

Some photos from Bring Your Own Beamer are up on Flickr.

Peter Cook is a software developer from Lewes, East Sussex. He took part in our recent Data Visualisation Lab Days, where we brought together a melting pot of designers, programmers and others, working together to produce visual, interactive tools that make use of real world data to help elucidate problems and facilitate change. For a different take on the Lab Days, see Jaya Brekke’s post on visualising the social impact of the economic crisis in Greece.

I’ve been attending the Data Visualisation Lab Days at L4RP and it’s sparked off a revisit to an old project. I logged energy data from an energy monitor for a few months and used the flot library to draw daily graphs of my electricity consumption.

It was very revealing and helped me reduce my consumption significantly. However, I was aware that the graphs require a fair degree of analysis and interpretation and require an experienced eye to read them. So probably not that revealing to most people.

I spent a lot of time trying to develop an algorithm to identify patterns in the data so that information such as: ‘your kettle is costing you x pence a week’ but to no avail.

However, after attending a lab session at L4RP and finding out about the D3.js library there, I had another think about how the energy data can be presented. The result is a circular (or doughnut?) graph showing a week’s usage.

Each of the seven circles represents a day and each day is subdivided into 24 hours. Each segment represents an hour and its colour intensity is proportional to the amount of electricity used in that hour.

The user can instantly see when a significant amount of energy has been used. In the view above, for example, you can see where a storage heater has been turning on at midnight. Such ‘invisible’ use of energy whilst most people are asleep would usually be hard to track down.

Try out the demo.

(This post first appeared on Peter’s blog)

An internship diary by Adam Yeats. Adam took part in Dharmafly’s first summer internship, when three students joined us at the Lab for the Recently Possible to gain skills in developing experimental web applications. Some of their observations and reflections are posted in this blog.

September, 2012 – week 13

I first got a start in web development when I must have been 10 years old or so. I committed all the usual web design atrocities people joke about about these days, and I had several awful little websites littered across GeoCities. I went off and did other teenager-y sort of things and then a couple of years ago, I had a little epiphany and decided I wanted to come back to university and finish what I started.

I’m extremely glad that I did.

Coming back to university, learning web development and engaging with the Brighton web community has opened countless doors for me, and one such door opened for me when Prem kindly offered to take me on as an intern for the summer. This must have been quite a risk for him; I had a limited grasp of JavaScript that I had gained from my first year at university, so it was difficult to say where I was going to fit in the Dharmafly ‘ecosystem’. However, before too long, work for me and the other interns started to pile up.

Looking back 4 months, the difference between the programmer I was then and the programmer I am now is equivalent to night and day. Prem, as well as the other two interns Aaron and Chris, have been extremely patient with me when it comes to answering my very basic questions and before long, I started feeling more and more confident. Before the internship, I was feeling fairly sure that I wanted to work in UX or design. But I’ve changed my mind now.

Writing JavaScript with everyone intensively for 8 hours a day for 4 months has made me feel as if, given enough time, I had gained enough knowledge that I could conquer just about any project. Towards the end of the internship, I even felt confident to take on another language (Ruby), and I’ve already written one of the projects I’ve done for Dharmafly in it.

The overwhelming majority of the work I’ve done with Dharmafly has been with Node.js. I’ve been involved in some very cool stuff written using Node that I’m sure you’ll see for yourselves in the not-too-distant future. Those of you who have spoken to me will know that the time I’ve spent with Node.js this summer has made me extremely passionate about it. It’s a fantastic gateway for people that know JavaScript on the front-end to get started in back-end development, and although Node.js isn’t right for every project you might need to work on, I think its relevance will only increase in the future as the web moves further towards things that need to be done in real-time.

My advice to anyone who’s at university studying web development, or anyone who’s self-taught and is looking to get a start in the industry, is to get out and engage with your web community. Go to local meetups, hack days and conferences. Start getting involved with conversations with people on Twitter, you’ll find the overwhelming majority of people to be friendly, ego-free, and very willing to help out.

Finally, I’d recommend to do what I’ve done and see if there’s someone who’ll take you on over the summer holiday. I know this axiom tends to get tossed around a lot, but the experience you’ll gain really is invaluable. I’ve absolutely no doubt in my mind that I’ll end up owing my future career to Prem and my experience this summer.

So again, thanks to Prem and everyone at Dharmafly for having/putting up with me, and also my fellow interns Aaron and Chris who I’m sure, with their skills, will go on to do amazing things.

An internship diary by Chris Newton. Chris took part in Dharmafly’s first summer internship, when three students joined us at the Lab for the Recently Possible to gain skills in developing experimental web applications. Some of their observations and reflections are posted in this blog.

August, 2012 – week 8

So what have I been up to? Well for one thing I’ve been working through a lot of issues. GitHub issues that is. Apparently building things that people use means that when they go wrong or could be doing things better, you’re the one that has to fix them or something.

Oh and documentation too. What’s that? I’ve completely changed the way something works and haven’t documented it? Can’t you just magically figure it out or something? Ok fine, I’ll write some stuff explaining it.

But what new code stuff have I learnt? Well, I’ve been learning a lot of Ruby. The complexity of one of our projects necessitated the use of a hefty Rakefile, as a build tool for a group of websites that use the Jekyll static site generator. I’ve had a lot of fun working with Ruby again, I love it. Although sometimes I find the sheer number of ways of approaching the same problem a bit dizzying (is that the sign of a good language?).

I really do enjoy approaching an environment for the first time and having to Google literally everything I want to do. How do I output coloured text to the terminal? How do I execute a shell command and capture the result? How will this Rakefile solve world hunger? So anyway, the Rakefile’s pretty solid now and using it definitely won’t wreck your filesystem.

Still, I’ve barely scratched the surface of Ruby, as well as so many other technologies I’ve dived into since I started working here. I really do relish the challenge though and the feeling that I’m pushing the limits of what I know and at the same time refining my existing knowledge to an ever finer point.

It’s also actually kind of nice to be coding things for a reason and for real world application instead of just because I feel like it or because of some academic hoop that needs jumping through.

My internship ends very soon. I’m interested as to what my future self has to say about the experience once it’s concluded.