Skip navigation


warning: Creating default object from empty value in /var/www/vhosts/ on line 33.
Original author: 


Get the Flash Player to see the wordTube Media Player.

ISO50 Playlist 16 – Compiled By Heathered Pearls & Tycho
Track Listing
Bibio – A Tout a l’heure
Bonobo – Cirrus
Machinedrum – Whatnot
Atoms for Peace – Default
Sepalcure – He Said No
XXYYXX – Alexis
Airbird & Napolian – In The Zone
Toro Y Moi – Say That (DaM-FunK Re-Freak)
Dauwd – Ikopol
Lord RAJA – Panthera Bengal
Chrome Sparks – Marijuana
Ulrich Schnauss – I Take Comfort in Your Ignorance (Tycho Remix)
Yuna – Lullabies (Jim-E Stack Remix)
Maribou State – Scarlett Groove (Feat. Saint Saviour)
Clarian & Guy Gerber – Claire
Nosaj Thing – Eclipse/Blue feat. Kazu Makino (Blonde Redhead)
Beacon – Bring You Back
White Denim – Street Joy
Youth Lagoon – Mute
Frank Wiedemann & Ry Cuming – Howling
Smashing Pumpkins – Cupid De Locke
Avey Tare – Bobby’s Loop
Meanderthals – Collective Fetish
Superstructure – Escape
Levek – Girl In The Fog
John Talabot & Pional – Braves
Grizzly Bear – gun-shy (Lindstrøm Remix)
Poolside – Next To You
Hot Chip – How Do You Do? (Todd Terje Remix)
Lindstrøm & Todd Terje – Lanzarote
Lescop – La Foret (Joakim’s Balenciaga Remix)
Black Sabbath – Planet Caravan [DJ Steef Edit]
Ptaki – Krystyna
Todd Terje – Snooze 4 Love (Version)
Darkstar – Timeaway
Knxwledge. – wishuwerehere.
Throwing Snow – Aspera
Andy Stott – Numb
The Holydrug Couple – Out of sight

Past playlists are available in the Playlist Archive

Permalink |
Comment On This Post (60) |
Tweet This Post | Add to | Stumbleupon

Post tags:

Your rating: None
Original author: 


As part of Saturday’s Record Store Day festivities, Warp released a solitary 12″ credited to the pair through NY record shop Other Music. The disc features a short clip of a woozy none-more-BoC piece, plus a vocodered voice reading out the numbers “9-3-6-5-5-7″. It appears the record may be one in a series of jigsaw pieces: the record is credited as “—— / —— / —— / XXXXXX / —— / ——” , and features dead space on either side of the clip, implying a fill-in-the-gaps approach.

We obviously approached the story with the requisite skepticism, but Pitchfork now claim they have had direct confirmation that the record is legit. An Other Music employee, Mikey IQ Jones, has also got in touch directly with FACT. According to Jones: “It’s real. We were given a copy to secretly place in the racks at Other Music; we’re really psyched that it was found by a big fan!”


So the vinyl is legit, now its time to figure out what the numbers mean. I have to hand it to Warp Records and BoC, this brought back the young fan in a lot of people that might have written them off. Its funny how hardcore music fans that treat music really seriously can trash talk and the less serious more carefree listener is just geeked and ready to spend their weekend trying to decode the exciting mystery that is there.

I personally think the 6 spaces each stand for a letter and then will be converted to ASCII to text and its not going to spell out SUMMER but the album title. Any thoughts from you guys?

Quality sources with info:



Permalink |
Comment On This Post (29) |
Tweet This Post | Add to | Stumbleupon

Post tags:

Your rating: None
Original author: 
Nathan Yau


Disclaimer: Everyone's graduate school experience is different. Mine wasn't a typical one, mainly because I spent so much time away from campus (in a different state), but hey, most of your PhD experience is independent learning anyways. That's the best part.

Before you begin (or apply)

You should really like the field you're thinking about pursuing a PhD in. You don't have to have this, but you kind of do. A doctorate is a commitment of several years (for me it was 7), and if you're not fascinated by your work, it feels like an impossible chore. There are a lot of things that are actual chores — administration, research results that go against your expectations, challenging collaborations, etc — and the interest in your work pulls you through.

I don't know anyone who finished their PhD who wasn't excited about the field in some way.

On that note, do your research before you apply to programs, and try to find faculty whose interests align with yours. Of course this is easier said than done. I entered graduate school with statistics education in mind and came out the other end with a focus in visualization. The size of my department probably allowed for some of that flexibility. Luck was also involved.

So what I actually did was apply to more than one program and then wait to hear if I got in or not. If I only got into one place (or none), then the decision was easy. In the end, I compared department interests and then went with the one I thought sounded better.

Consider it a red flag if it's hard to find faculty information because there's little to nothing online. There's really no excuse these days not to have updated faculty pages.

Absorb information


Okay, you're in graduate school now. The undergrads suddenly look really young and all of them expect that you know everything there is to know about statistics (or whatever field you're in). This becomes especially obvious if you're a teaching assistant, which can feel weird at first because you're not that far out of undergrad yourself. Use the opportunity to brush up on your core statistics knowledge.

I had coursework for the first two years, but it varies by department I'm sure.You also take classes yourself. Don't freak out if the lectures are confusing and everyone seems to ask smart questions that you don't understand. In reality, it's probably only a handful of people who dominate the discussion, and well, there's just always some people who are ahead of the curve. Maybe you're one of them.

Tough early goings has a lot to do with learning the language of statistics. There's jargon that makes it easier to describe concepts (once you know them already), and there's a flow of logic that you pick up over time.

There's usually a qualifying exam after the first two years to make sure you learned in class.Don't hesitate to ask questions and make use of office hours (but don't be the person who waits until the week before an exam or project to get advice, because that's just so undergrad). Once you finish your coursework, it's going to be a lot of independent learning, so take advantage of the strong guidance while you can.

The key here is to absorb as much information as you can and try to find the area of statistics that excites you the most. Pursue and dig deeper when you do find that thing.

I remember the day I discovered visualization. My future adviser gave a guest lecture on visualization from a mostly media arts perspective. He talked about it, I grew really interested, and then I went home and googled away.

Oh, and read a lot of papers. I didn't do nearly enough of this early on, and you need proper literature review for your dissertation. Background information also informs your own work.

Find an adviser


Actually, I don't think I ever officially asked my adviser to be my adviser. It was just assumed when I became a student researcher in his group.I kind of had an adviser from the start of graduate school, because I was lucky to get a research assistant position that had to do with statistics education. However, as my interests changed, I switched my adviser around the two-year mark.

This is important and goes back to the application process. After a couple years, you should have a sense of what the faculty in your department work on and their teaching styles, and you should go for the best match.

I think a lot of people expect an adviser to have all the answers and give you specific directions during each meeting. That's kind of what it's like early on, but it eventually develops into a partnership. It's not your adviser's job to teach you everything. A good adviser points you in the right direction when you're lost.

Jump at opportunities


Statistics is a collaborative field, and there are a lot of opportunities to work with others within the department and outside of it. A lot of companies are often in search of interns, so they might send fliers and listings that end up posting to the grad email list. Jump at these opportunities if you can.

Graduate school doesn't have to be expensive.Opportunities within the department or university should be of extra interest, because it usually means that your tuition could be reduced a lot, if not completely.

If something sounded interesting, I'd respond to it right away, and it usually resulted in something good. A lot of people pass up opportunities, because they see the requirements of an ideal candidate and feel like they're not qualified. Instead, apply and let someone else decide if you're qualified. There's usually a lot of learning on the job, and it's usually more important that you'll be able to pick up the necessary skills.

At the very least, you'll pick up interview experience, which comes in handy later on if you want one of those job things after you graduate.

Learn to say no


As you progress in your academic career, you'll look more and more like a PhD (hopefully). You have more skills, more knowledge, and more experience, which means you become more of an asset to potential collaborators, researchers, and departments. A lot of my best experiences come from working with others, but eventually, you have to focus on your own work so that you can write your dissertation. Hopefully, you'll have a lot of writing routes to take after you've jumped at all the opportunities that crossed your desk.

So it's a whole lot of yes in the beginning, but you have to be more stingy with your time as you progress.

There are probably going to be potential employers knocking at your door at some point, too. If you really want to finish your PhD, you must make them wait. I know this is much easier said than done, but when you start a full-time job, it's hard to muster the energy at the end of a day to work on a dissertation. I mean, it's already hard to work on a dissertation with normal levels of energy.

All the times I wanted to quit, I justified it by telling myself that I would probably have the same job with or without a doctorate. I also know a lot of people who quit and are plenty successful, so finding a job didn't work for me as a motivator. But it might be different for you, depending on what work you're interested in.



This might've been the toughest part for me. During my first two years in school, I hung out with my classmates a lot and we'd discuss our work or just grab some drinks, but I had to study from a distance from my third year on. I've always been an independent learner, so I thought I'd be okay, but my first year away, it was hard to focus, and it was lonely in the apartment by myself. I didn't want to do much of anything.

I eventually made friends, and pets provided nice company during the day. It's important to have a life outside of dissertation work. Give your brain a rest.

Separation from the academic bubble wasn't all bad though. FlowingData came out of my moving away, and my dissertation topic came out of a personal project. So there are definitely pros and cons, but it's mostly what you make out of what you have in front of you.

I found Twitter useful to connect with other work-at-homers and PhD Comics proved to be a great resource for feeling less isolated.Anyways, my situation is kind of specific, but it's good to have a support system rather than go at it alone. I mean, you still have to do all the work, but there will be times of frustration when you need to vent or talk your way through a problem.

Write the dissertation and defend


Despite what you might've heard, a dissertation does not write itself. Believe me. I've tried. Many times. And it never ever writes itself.

I even (shamefully) bought a book that's lying around somewhere on how to write your dissertation efficiently. That's gotta be up there on my list of worst Amazon impulse buys. The book arrived, I started reading, and then realized that it'd be a lot more efficient to be writing instead of reading about how to write.

Procrastination comes in many forms.

The hardest part for me was getting started. Just deal with the fact that the writing is going to be bad at first. You come back and revise anyways. I've heard this advice a lot, but you really do just have to sit down and write (assuming you've worked on enough things by now that you can write about).

If you already have articles on hand, it doesn't hurt to take notes so that it's easier to clean up citing towards the end.Don't worry about proper citing, what pronouns to use, and the tone of your writing. This stuff is easy to fix later. (It can be helpful to browse past dissertations in your department to learn what's expected.) Focus on the framework and outline first.

Just google "successful PhD defense."By the time you're done writing, you know about your specific topic better than most people, which makes your defense less painful. There's a lot of online advice on a successful defense already, but the two main points are (1) your committee wants you to succeed; and (2) think of it as an opportunity to talk about your work. In my experience and from what I've heard, these are totally true. That didn't stop me from being really nervous though and probably won't help your nerves either, but there you go.

I like this video by Ze Frank on public speaking.The best thing to do is prepare. Rehearse your talk until you can deliver it in your sleep. Your preparation depends on your style. Some like to write their talks out. I like to keep it more natural so it's not like I'm reading a script. Go with what you're comfortable with.

It'll all be fine and not nearly as horrible as you imagine it will be.

Wrapping up

So there you go. A PhD at a glance. Work hard, try to relax, and embrace the uniqueness of graduate school. There are many challenges along the way, but try to learn from them rather than beat yourself up over them. A PhD can be fun if you let it.

Any graduate students — past or present — have more advice? Leave it in the comments.

Your rating: None

How to Animate Transitions Between Multiple Charts

Sometimes one chart just isn’t good enough. Sometimes you need more.

Perhaps the story you are telling with your visualization needs to be told from different perspectives and different charts cull out these different angles nicely. Maybe, you need to support different types of users and different plots appeal to these separate sets. Or maybe you just want to add a bit of flare to your visualization with a chart toggle.

In any case, done right, transitioning between multiple chart types in the same visualization can add more insights and depth to the experience. Smooth, animated transitions make it easier for the user to follow what is changing and how the data presented in different formats relates to one another.

This tutorial will use D3.js and its built in transitioning capabilities to nicely contort our data into a variety of graph types.

If you're a FlowingData member, you might be familiar with creating these chart types in R.We will focus on visualizing time series data and will allow for transitioning between 3 types of charts: Area Chart, Stacked Area Chart, and Streamgraph. The data being visualized will be New York City 311 request calls around the time hurricane Sandy hit the area.

Check out the demo to see what we will be creating, then download the source code and follow along!

The Setup

Before we dive in, let’s take a look at the ingredients that will go into making this visualization.

D3 v3

Recently, the third major version of D3.js was released: d3.v3.js. Updates include tweaks and improvements to how transitions work, making them easier overall to use.

If you have used D3.js previously, one significant change you will want to know about is that the signature of the callback function for loading data has changed. Specifically, when you load data, you now get passed any errors that have occurred during the data request first, and then the actual data array. So this:

d3.json('data', (data) -> console.log(data.length))

Becomes this:

d3.json('data', (error, data) -> console.log(data.length))

Not a huge deal, as the old API is still supported (though deprecated), but one that gives you enough advantages that you should start using it.

For More on D3.v3, check out the 3.0 upgrading guide on the D3.js wiki.

A Big Cup of CoffeeScript

And again, please feel free to compile to javascript if that will make you happy. But before you do, give CoffeeScript 5 minutes of your time – who knows, you just might fall in love.As in my previous tutorial on interactive networks , I’ll be writing the code in CoffeeScript . I recommend going back to that tutorial if you aren’t familiar with CoffeeScript to get some notes on its syntax. But just in case you don’t want to click that link, here’s the 3 second version:

functions look like this:

functionName = (input1, input2) ->
  console.log('hey! I'm a function')

We see that white space matters – the indentation indicates the lines of code inside a function, loop, or conditional statement. Also, semicolons are left off, and parentheses are sometimes optional, though I usually leave them in.

A Little Python Web Server

The README in the source code also has instructions for using Ruby.Because of how D3.js loads data, we need to run it from a web server, even when developing on our own local machine. There are lots of web servers out there, but probably the easiest to use for our development purposes is Python’s built in Simple Server.

From the Terminal, first navigate to the source code directory for this tutorial. Then check which version of Python you have installed using:

python --version

If it is Python 3.x then use this line to start the server:

python -m http.server

If it is Python 2.x then use

python -m SimpleHTTPServer

In either case, you should have a basic web server that can serve up any file from the directory you are in to your web browser, just by navigating to

The simple python web server running on my machinepython server running

But What About Windows

On Linux or Mac systems, you will already have python installed. However, it takes some moxie to get it working on a Windows machine. I would suggest looking over this blog post, to make sure you don't overlook something.

If you aren't in the mood for some python wrangling, you might take the advice of this getting started with D3 guide and try out EasyPHP. With this installed and running, you can host your D3 projects out of the www/ directory in the root of the installation location.

A Dash of Bootstrap

While we will use D3.js for the actual visualization implementation, we will take advantage of Twitter’s Bootstrap framework to make our vis just a bit more attractive.

Mostly, it will be used to make a nice toggle button that will used to transition between charts. This might not be the most efficient method for getting a decent looking toggle on a site, but it is very easy to implement and will give you a chance to check out Bootstrap, if you haven’t already. It is quite lovely.


Before we start using them, lets talk a bit about what D3 transitions are and how they work.

Think of a transition as an animation. The staring point of this animation is the current state of whatever you are transitioning. Its position, color, etc. When creating a new transition, we tell it what the elements should end up looking like. D3 fills in the gap from the current state to the final one.

D3 is built around working with selections. Selections are arrays of elements that you work with as a group. For example, this code selects all the circle elements in the SVG and colors them red:

  .attr("fill", "red")

It might then come as little surprise that transitions in D3 are a special kind of selection, meaning you can effect a group of multiple elements on a page concisely within a single transition. This is great because if you are already familiar with selections, then you already know how to create and work with transitions.

There are a few more differences between selections and transitions – mainly due to the fact that some element attributes cannot be animated.The main difference between regular selections and transitions is that selections modify the appearance of the elements they contain immediately. As soon as the .attr("fill", "red") code is executed, those circles become red. Transitions, on the other hand, smoothly modify the appearance over time.

Here is an example of a transition that changes the position and color of the circles in a SVG:

# First we set an initial position and color for these circles.
# This is NOT a transition
  .attr("fill", "red")
  .attr("cx", 40)
  .attr("cy", height / 2) 

# Here is the transition that changes the circles
# position and color.
  .attr("fill", "green")
  .attr("cx", 500)
  .attr("cy", (d, i) -> 100 * (i + 1))

I’ve coded up a live version of this demo (in JavaScript), to get a better feel for what is going on.

The functions called on the transition can be separated into 2 groups: those modifying the transition itself, and those indicating what the appearance of the selected elements should be when the transition completes.

The delay() and duration() functions are in the former category. They indicate how long to wait to start the transition, and how long the transition will take.

The attr() calls on the transition are in the later category. They indicate that once the animation is done, the circles should be green, and they should be in new positions. As you can see from the live example, D3 does the hard work of interpolating between starting and ending appearance in the duration you’ve provided.

There are lots of interesting details you can learn about transitions. For a more through introduction, I’d recommend Jerome Cukier’s introduction on

Custom interpolation, start and end triggers, transition life cycles, and more await you in this great guide!To really rip off the covers, check out Mike Bostock’s Transitions Guide , which exposes more of the nitty gritty details of transitions and is required reading once you start needing their more advanced capabilities.

For now, let’s stop with the prep work and get going on more of the specifics of how this visualization works.

A Peak at the Data

When I discovered the NYC OpenData site provided access to raw 311 service request data, I had visions of recreating the classic 311 streamgraph from Wired Magazine originally created by Pitch Interactive.

Alas, my dreams were dashed upon the realization that the times reported for all the requests was set to midnight! I assume some sort of bug in the export process is currently preventing the time from being encoded correctly.

Not wanting to give up on this interesting dataset, I decided to switch gears and instead look at daily aggregation of requests during an interesting period of recent New York history: hurricane Sandy. This tells, I think, an interesting, if not surprising, story. Priorities change when a natural disaster strikes.

Here is what the data looks like:

    "key": "Heating",
    "values": [
        "date": "10/14/12",
        "count": 428
        "date": "10/15/12",
        "count": 298
      // ...
    "key": "Damaged tree",
    "values": [
      // ...
  // ...

In words, our array of data is organized by 311 request type. Each request object has a key string and then an array called values. Values has an entry for each day in the visualization. Each day object has a string representation of the date as well as the number of this type of request for that day, stored in count.

You could use d3.nest to convert a simple table into a similar array of objects, but that is a tutorial for another day.This format was chosen to match up with how the visualization will be built. As we will see, the root-level request objects will be represented as SVG groups. Inside each group, the values array will be converted into line and area paths.

A Static Starting Point

To create movement, one must begin with stillness. How’s that for sage advice? Not great? Well, it will work well enough for us in this tutorial.

Transitions don’t deal with the creation of new elements. An element needs to exist already in order to be animated. So to begin our visualization, we will create a starting point from which the visualization can transition from.

Layouts and Generators

First let’s setup the generators and layout we will use to create the visualization. We will be using an area generator to create the areas of each chart, a line generator for the detail on the regular area chart, and the stack layout for the streamgraph and stacked area chart, as well as some scales for x, y, and color.

Here is what the initialization code looks like:

x = d3.time.scale()
  .range([0, width])

y = d3.scale.linear()
  .range([height, 0])

color = d3.scale.category10()

# area generator to create the
# polygons that make up the
# charts
area = d3.svg.area()
    .x((d) -> x(

# line generator to be used
# for the Area Chart edges
line = d3.svg.line()
    .x((d) -> x(

# stack layout for streamgraph
# and stacked area chart
stack = d3.layout.stack()
  .values((d) -> d.values)
  .x((d) ->
  .y((d) -> d.count)
  .out((d,y0,y) -> d.count0 = y0)

The stack layout could use a bit more explanation.

Unlike what its name might imply, this layout doesn’t actually move any elements itself – that would be very un-D3 like. Instead, its main purpose in this visualization is to calculate the location of the baseline – which is to say the bottom – of the area paths. It computes the baseline for all the elements in the values array based on the stack’s offset() algorithm.

The out() function allows us to see this calculated baseline value and capture it in an attribute of our value objects. In the code above, we assign count0 to this baseline value. After the stack is executed on a set of data, we will be able to use count0 along with the area generator to create areas in the right location.

Loading the Data

Ok, we need to load the JSON file that contains all our data.

This is done in D3 by using d3.json:

$ ->
  d3.json("data/requests.json", display)

Load the requests.json file, then call the display function with the results.

Here is display:

display = (error, rawData) ->
  # a quick way to manually select which calls to display. 
  # feel free to pick other keys and explore the less frequent call types.
  filterer = {"Heating": 1, "Damaged tree": 1, "Noise": 1, "Traffic signal condition": 1, "General construction":1, "Street light condition":1}

  data = rawData.filter((d) -> filterer[d.key] == 1)

  # a parser to convert our date string into a JS time object.
  parseTime = d3.time.format.utc("%x").parse

  # go through each data entry and set its
  # date and count property
  data.forEach (s) ->
    s.values.forEach (d) -> = parseTime(
      d.count = parseFloat(d.count)

    # precompute the largest count value for each request type
    s.maxCount = d3.max(s.values, (d) -> d.count)

  data.sort((a,b) -> b.maxCount - a.maxCount)


The requests.json file has data for every request type, which would overload our visualization. Here we perform a basic filter to cherry pick some interesting types.

d3.time.format and the other time formatting capabilities of D3.js are great for converting strings into JavaScript Date objects. Here, our parser is expecting a date string in the %m/%d/%y format (which is what %x is shorthand for. We use this formatter when we iterate through the raw data to convert each string into a date and save it back in the object.

Then we call start() to get the display ball rolling.

The Start of the Visualization

Finally, we are ready to create the elements needed to get our charts going. Here is the start() function which sets up these elements:

start = () ->
  # x domain setup
  minDate = d3.min(data, (d) -> d.values[0].date)
  maxDate = d3.max(data, (d) -> d.values[d.values.length - 1].date)
  x.domain([minDate, maxDate])

  # I want the starting chart to emanate from the
  # middle of the display. 
  area.y0(height / 2)
    .y1(height / 2)

  # now we bind our data to create
  # a new group for each request type
  g = svg.selectAll(".request")

  requests = g.append("g")
    .attr("class", "request")

  # add some paths that will
  # be used to display the lines and
  # areas that make up the charts
    .attr("class", "area")
    .style("fill", (d) -> color(d.key))
    .attr("d", (d) -> area(d.values))

    .attr("class", "line")
    .style("stroke-opacity", 1e-6)

  # default to streamgraph display

We still haven’t drawn anything, but we are getting close.

The data array is bound to the empty .request selection. Then, as mentioned in the data section above, a g element is created for each request type.

Finally, two path elements are appended to the group. One of which is for drawing the areas of the three charts. The other, with the class .line, will be used to draw lines in the regular area chart.

Without this, the first transition will just cause the areas to appear immediately.
As a little detail, I’ve started the .area paths in the center of the display, so the first transition to the first chart will grow out from the center.

A Movement in Three Parts

Now that we have the basic visualization framework, we can focus on developing the code for each chart.

We want the user to be able to switch back and forth between all the graph styles, in a non-linear manner. To accomplish this, the functions implementing each chart needs to accomplish 3 things:

  1. Recompute values that might get changed by switching to the other charts.
  2. Reset shared layouts and scales to handle the selected chart.
  3. Create a new transition on the elements making up each chart.

With this consistent structure in mind, let’s start coding up some charts.


The initial streamgraph displayStreamgraph display

We will start with the streamgraph – because of my original dreams to emulate Wired, and because it is pretty easy to create with the stack layout.

streamgraph = () ->
  # 'wiggle' is streamgraph offset

  # reset our y domain and range so that it 
  # accommodates the highest value + offset
  y.domain([0, d3.max(data[0] -> d.count0 + d.count))])
    .range([height, 0])

  # setup the area generator to utilize
  # the count0 values created from the layout
  area.y0((d) -> y(d.count0))
    .y1((d) -> y(d.count0 + d.count))

  # here we create the transition
  t = svg.selectAll(".request")
  # D3 will take care of the details of transitioning"path.area")
    .style("fill-opacity", 1.0)
    .attr("d", (d) -> area(d.values))

Its all a bit anticlimactic, right? The shape of the path is defined by the attribute d. See the MDN tutorial if you aren’t familiar with SVG paths.Look at that. We didn’t even have to get our hands dirty with creating SVG paths. The area generator did it all for us. Nor did we have to deal with any of the animation from current state to final streamgraph. The transition helped us out there. So what did we do?

The initial call to stack(data) causes the stack layout to run on our data. Its setup to use wiggle as the offset, which is the offset to use for streamgraphs.

The y scale needs to be updated to ensure the tallest ‘stream’ is accounted for in its calculation.

Again, check out that Transition Guide for more clarity on how this works.The last section of the streamgraph function is the transition. We create a new transition selection on the .request groups. Then we select the .area path’s inside each group and set the path and opacity they should end up using the attr() calls.

D3 will interpolate the path’s values smoothly over the duration of the transition to end up at a nice looking streamgraph for our data. The great thing is that this same code will work for transitioning from the initial blank display as well as from the other chart types!

Stacked Area Chart

The stacked area chart provides a new view with little code.Stacked area chart

I’m not going to go over the code for the stacked area chart – as it is near identical to the streamgraph.

The only real difference is that the offset used for the stack layout calculations is switched from wiggle to zero. This modifies the count0 values when the stack is executed on the data, which then adjusts the area paths to be stacked instead of streamed.

Area Chart

With the overlapping area chart, we reduce opacity to prevent from obscuring ‘short’ areasArea chart

Our last chart is a basic overlapping area chart. This one is a little different, as we won’t need to use the stack layout for area positioning. Also, we will finally get to use that .line path we created during the setup.

Here is the relevant code for this chart:

areas = () ->
  g = svg.selectAll(".request")

  # as there is no stacking in this chart, the maximum
  # value of the input domain is simply the maximum count value,
  # which we precomputed in the display function 
  y.domain([0, d3.max( -> d.maxCount))])
    .range([height, 0])

  # the baseline of this chart will always
  # be at the bottom of the display, so we
  # can set y0 to a constant.
    .y1((d) -> y(d.count))

  line.y((d) -> y(d.count))

  t = g.transition()

  # partially transparent areas"path.area")
    .style("fill-opacity", 0.5)
    .attr("d", (d) -> area(d.values))

  # show the line"path.line")
    .style("stroke-opacity", 1)
    .attr("d", (d) -> line(d.values))

The main difference between this chart and the previous two is that we are not using the count0 values in any of the area layouts. Instead, the bottom line of the areas is set to the height of the visualization, so it will always stay at the bottom of the display.

The .line is adjusted in the other charts too (just not shown in these snippets). It is just always set to be invisible in the transition.In the transition, we set the opacity of the area paths to be 0.5 so that all the areas are still visible. Then we do another selection to set the .line path so that it appears as the top outline of our areas.

Switching Back and Forth

As each of these charts is contained in its own function, transitioning between charts becomes as easy as just executing the right function.

Here is the code that does just that when the toggle button is pushed:

transitionTo = (name) ->
  if name == "stream"
  if name == "stack"
  if name == "area"

Each of these functions creates and starts a new transition, meaning switching to a new chart will halt any transition currently running, and then immediately start the new transition from the current element locations.

The Little Details

There are some finishing touches that I’ve made to the visualization that I won’t go into too much depth on. D3’s axis component was used to create the background lines marking every other day.

Shameless plug: Check out my tutorial on small multiples if you want to take a deeper look into the implementation of this great pieceA little legend, inspired by the legend in the Manifest Destiny visualization. It is also an SVG element and the mouseover event causes a transition that shifts the key into view. The details are in the code.

Finally, like I mentioned above, the toggle button to switch between charts was created using bootstrap. Checkout the button documentation for the details.

Wrapping Up

Well hopefully now you have a better grasp on using transitions to switch between different displays for your data. We can really see the power of D3 in how little code it takes to create these different charts and interactively move between them.

Thanks again to Mike Bostock, the creator of D3. His presentation on flexible transitions served as the main inspiration for this tutorial.

Now get out there and start transitioning! Let me know when you create your own face melting (and functional) animations.

Your rating: None

Biella Coleman is a geek anthropologist, in both senses of the epithet: an anthropologist who studies geeks, and a geek who is an anthropologist. Though she's best known today for her excellent and insightful work on the mechanism and structure underpinning Anonymous and /b/, Coleman is also an expert on the organization, structure, philosophy and struggles of the free software/open source movements. I met Biella while she was doing fieldwork as an intern at the Electronic Frontier Foundation. She's also had deep experience with the Debian project and many other hacker/FLOSS subcultures.

Coleman's has published her dissertation, edited and streamlined, under the title of Coding Freedom: The Ethics and Aesthetics of Hacking, which comes out today from Princeton University Press (Quinn Norton, also well known for her Wired reporting on Anonymous and Occupy, had a hand in the editing). Coding Freedom walks the fine line between popular accessibility and scholarly rigor, and does a very good job of expressing complex ideas without (too much) academic jargon.

Coding Freedom is insightful and fascinating, a superbly observed picture of the motives, divisions and history of the free software and software freedom world. As someone embedded in both those worlds, I found myself surprised by connections I'd never made on my own, but which seemed perfectly right and obvious in hindsight. Coleman's work pulls together a million IRC conversations and mailing list threads and wikiwars and gets to their foundations, the deep discussion evolving through the world of free/open source software.

Coding Freedom: The Ethics and Aesthetics of Hacking

Your rating: None

Fabio Bucciarelli / AFP - Getty Images

October 23: An elderly woman crosses a street next to a long black cloth used to separate the area from Syrian government forces' sniper fire, in the Bab el-Adid district in Aleppo. UN-Arab League envoy Lakhdar Brahimi is pushing "extremely hard" for a ceasefire in Syria and will brief the UN Security Council on Wednesday on his efforts, the UN spokesman said.

By David R Arnott, NBC News

As we edited our slideshow on the conflict in Syria today, the picture above made us pause. The scene looked familiar. Checking back through the hundreds of pictures wire agencies have transmitted from Aleppo over recent weeks, we found out why: We had seen this street before, 39 days earlier.    

Marco Longari / AFP - Getty Images

September 14: A man carrying grocery bags tries to dodge sniper fire as he runs through an alley near a checkpoint manned by the Free Syrian Army in the northern city of Aleppo. Syrian regime forces used fighter jets and helicopter gunships to pound the city and province of Aleppo, monitors said.

Some tell-tale details remain the same. The red traffic sign on the right has the same small scratch across its band of white. The same green and red graffiti is just about visible on a distant wall. But in the intervening weeks, other things have changed. Rubble is piled up on the left of the frame, where an intact wall and sidewalk was previously visible. And while desperate civilians continue to risk the dangerous path across this piece of open ground, a long piece of cloth has been hung from one side of the street to the other, in an attempt to block the view of snipers.

In an article published on Tuesday, Hamza Hendawi of The Associated Press described the daily lives of Aleppans as the conflict rages around them:

With death lurking around every corner, the survival instincts of Aleppo's population are being stretched to the limit every day as the battle between Syria's rebels and the regime of President Bashar Assad for the country's largest city stretches through its fourth destructive month. Residents in the rebel-held neighborhoods suffering the war's brunt tell tales of lives filled with fear over the war in their streets, along with an ingenuity and resilience in trying to keep their shattered families going.

And while residents of the rebel-held areas express their hatred of Assad's regime and their dream of seeing him go, they also voice their worries over the rebels and the destruction that their offensive has brought to their city. Graffiti on the shutter of a closed store declares the population's sense of resignation: "God, you are all we've got." Read the full story.

Related content:

Follow @NBCNewsPictures

Sign up for the Photos Newsletter


Your rating: None

Boing Boing has spotlighted "How's Your News" in years past, and I'm delighted to see the team reassembled to cover the 2012 presidential elections. The project features a team of reporters with various developmental disabilities roaming the halls at the Republican and Democratic national conventions, interviewing big TV news personalities and politicians: Rudy Giuliani, Mitt Romney, Diane Sawyer, Karl Rove, Sen. Rob Portman, Herman Cain, Anne Coulter, Jesse Jackson, Rep. Michelle Bachman, Olivia Wilde, Sen. Barbra Boxer, Stephen Baldwin, Piers Morgan, Jared Leto, Sen. Pat Leahy, Rep Barney Frank, and many more.

Download the hour-long documentary for $5. I watched it last night, and I strongly recommend. It's not "political," in the sense that it's not advocating a particular party or candidate; it's more about the culture of news and the surreality of what it's like to be at a convention. I've been inside that beast, and this is the most accurate capture of that weird world I've seen. Also, if you work in TV news? There are some scenes in this film that will prove to you, without any doubt, that politicians tend to spew prepared talking points as answers to questions, even when the questions are unintelligible non-word vocalizations.

Above, a trailer. Below, an exclusive clip, and a Boing Boing Q&A with director Arthur Bradford, and Matt Stone ( South Park, Book of Mormon ), who backed the project and is a big fan.

Matt Stone and Trey Parker have been involved with Arthur Bradford and "How's Your News" for 15 years. Matt tells Boing Boing, "It is a great relationship and a totally cool thing." Arthur also directed "The Making of South Park: 6 Days to Air," and received an Emmy nomination for that documentary.

Boing Boing/XJ: Matt, I know you're a big news junkie, what do you get out of watching this that you don't out of, say, reading the New York Times or watching CNN's coverage of the political conventions?

Matt Stone: Even to a news junkie like me, the current incarnation of the political conventions are pretty absurd. The regular news dutifully tries to distill the psychodrama and bullshit into a horserace of political power. How's Your News always puts a smile on my face because they so effortlessly resist that narrative. I need more How's Your News in my life. I am a huge fan.

Boing Boing/XJ: Arthur, my question to you, why are you doing this project?

Arthur Bradford: I've been making these How's Your News films for over fifteen years now. It really just just started as a lark at this summer camp I was working at. We wanted to make videos which we could show after dinner at the camp and have people laugh. When Matt and Trey got in touch way back in 1996, before they became famous, I thought it was both great and weird that people I didn't know enjoyed these videos. Over time we became friends and if it weren't for their encouragement, and later, financial help, this whole project would not exist. I like making these films because I think they are pure - we have the same motivations we did back at the summer camp, just wanting to make people smile and surprise them. I know of no less pretentious people than the reporters from How's Your News? I have learned so much from watching them approach and converse with the various public figures they meet. I honestly believe you can learn quite a lot about a person by watching the way he or she interacts with a person with a disability. In that sense I have found that the conversations which take place before our cameras are often more revealing than the supposedly hard hitting interviews we see on major networks. What I particularly like about this latest film is the chance to watch the way political figures, and the many handlers surrounding them, work so hard to manipulate the way they are portrayed in the media. Often the most interesting part of the interview for us is not the actual interview at all. It's the slightly uncomfortable negotiation which takes place beforehand as we ask them if they will speak with us. I liked being able to include those discussions in this new film. In the past we didn't have the freedom, or good sense, to do that.

Arthur Bradford: Over the years we have endeavored to produce How's Your News in many different ways, as a film festival entry, a DVD, an HBO documentary, and even an MTV series. This latest version, a completely independent, pay-per-view online stream/download, is truly the best form of distribution yet. For those of you who feel frustrated by commercial news media, I really urge you to support this kind of thing. Not to get on a high horse, but hey, this is It's the future of independent media. It's a very good thing.

Boing Boing/XJ: What's it like working with the correspondents?

Arthur Bradford: I've known all of them for so long now, they are some of my oldest friendships. And I do mean friendships. I first met Jeremy when he was just a kid, seven or eight years old. He was a crazy little ball of energy and we all wondered what he was going to be like when he grew up. Would people still think he was cute and charming? He's grown up now and, well, you can decide. Sue calls me up at least once a week, usually more. She is relentless when she's got something on her mind. This latest "How's Your News?" project came about in part because of her prodding. She was leaving messages on my phone saying, "Is this How's Your News horse dead or what? Come on!" Bobby is like an uncle to me. He was an usher at my wedding and plays with my children. I honestly don't know of anyone who can so easily mix and mingle with such a wide array of people. You could take him to a Hell's Angles rally in the morning and he'd have everyone hugging him and then attend a formal White House luncheon an hour later and he'd be cozying up the the Secretary of State. He'd know just how to behave immediately. It's a skill few of us have.

I hold our reporters to a high standard. I often feel like I'm the coach and they are my team. I have to assess who is feeling good and who will interact in the most interesting way with a given interviewee. I sometimes get frustrated with the reporters if they ask banal questions or act shy. I let them know it when I think they can do better. But I never feed them questions. That doesn't come off well. The questions need to come from them. If they are not having a good time and showing genuine curiosity then it's not enjoyable to watch. I find directing How's Your News to be exhausting and draining and usually after each one is done I swear I'll never do it again. But then Sue and Jeremy starting calling me up and we end up hitting the road. And in the end I'm glad we do it.

Download the documentary.

(All images courtesy Arthur Bradford)

Your rating: None

NASA / JPL-Caltech / Univ. of Ariz.

A long strip image from the high-resolution camera on NASA's Mars Reconnaissance Orbiter shows the Curiosity rover's landing spot in Gale Crater, as well as the terrain leading south toward the mountain known as Aeolis Mons or Mount Sharp. The colors have been stretched to emphasize differences in surface composition. A dune field can be seen in deep shades of blue. Beyond the dunes, mesas and buttes are part of the terrain surrounding the 3-mile-high mountain.

By Alan Boyle

Follow @b0yle

Fresh imagery from NASA's Mars Reconnaissance Orbiter shows the newly arrived Curiosity rover sitting at its landing site in Gale Crater, as well as the sand dunes and rugged terrain that the rover must pass through to conduct its $2.5 billion science mission.

The dunes are painted in colorful shades of ultramarine, but those aren't the true colors: Most of the color images from the orbiter's High Resolution Imaging Science Experiment, or HiRISE, are color-coded to emphasize subtle differences in surface composition. The shades of blue are actually dusty shades of gray to the human eye. The area around the rover itself has a blue tinge because of the dust that was disturbed during Curiosity's rocket-powered sky-crane landing on Aug. 5.

Even some of the pictures sent back from the surface by Curiosity have been brightened up to reflect Earthlike lighting conditions, said HiRISE's principal investigator, Alfred McEwen of the University of Arizona. Pictures from Mars look "blander" because the sunlight has to filter through red Martian dust in the atmosphere, he said. Many of the processed pictures from Curiosity's mission are being provided in both "true color" (Marslike) and "white-balanced" (Earthlike) versions.

Curiosity's primary mission is due to last one Martian year, or almost two Earth years, and the rover might need the first half of that mission to make its way south through the dunes. A picture from Curiosity's vantage point shows the dunes as a dark streak in the distance.

"We need to get to the clays which are just beyond that dune field that you see, and then up into the sulfate-bearing rocks which tend to form these buttes and mesas," said Ashwin Vasavada, deputy project scientist. "You're seeing really the scientific mission before you here."

Follow @CosmicLog

Vasavada said it's about 5 miles (8 kilometers) as the crow flies between the rover and its science targets at the base of a 3-mile-high mountain (5-kilometer-high) known as Aeolis Mons or Mount Sharp. McEwen said there's roughly 4 miles (6.5 kilometers) between the rover and the bottom edge of the orbital image, which was taken six days after Curiosity's landing from an altitude of about 168 miles (270 kilometers).

The rover is designed to analyze rocks and soil for the chemical signatures of potential habitability — using a laser zapper, an X-ray beam, a drill, an onboard laboratory and other high-tech gear. Curiosity is still going through its post-landing checkouts, but the show could start going on the road in a week or so.

More about Mars:

Alan Boyle is's science editor. Connect with the Cosmic Log community by "liking" the log's Facebook page, following @b0yle on Twitter and adding the Cosmic Log page to your Google+ presence. To keep up with Cosmic Log as well as NBC News' other stories about science and space, sign up for the Tech & Science newsletter, delivered to your email in-box every weekday. You can also check out "The Case for Pluto," my book about the dwarf planet and the search for new worlds.

Your rating: None

Feature, Fotografia, Go Itami, Interviste, Libri, Photo, Photo Issue:

Saremo sinceri: di Go Itami non sapevamo niente, tranne la sua data di nascita (1976) e che stava a Tokyo. Abbiamo scoperto i suoi lavori tramite I Like This Blog – un sito, principalmente di fotografia, curato da Paul Paper - e ci siamo innamorati immediatamente. L’occasione della recente uscita della quarta parte del suo ‘Mazime’ ci è sembrata l’opportunità perfetta per conoscerlo meglio e per farvi vedere alcuni suoi lavori presi da questo volume.

Ciao Go Itami, come stai? Dove ti trovi?
Sto bene. Sono a casa mia, a Kanagawa.

Raccontaci un po’ di te. Quando hai cominciato a scattare? Come mai? Qual è la tua formazione?
Ho frequentato una scuola di moda, dove ho seguito il corso di fotografia e là me ne sono interessato per la prima volta. Si tratta di circa 10 anni fa: fui incoraggiato da un commento positivo del mio professore. A scuola comunque ho (solo) imparato come usare la macchina fotografica, per il resto sono autodidatta.

Quindi adesso lavori come fotografo?
Sì, scatto principalmente per le (varie) riviste. Ma sai com’è… guadagno con gli altri lavori.

Cosa vuol dire ‘Mazime’?
Detto in inglese vuol dire ‘serio, costante, onesto, grave’, ma in giapponese non ha un significato così positivo. Sarebbe tipo ‘non-interessante, testardo, chiuso’, e visto che sono onesto ma anche ottuso, mi è sembrato perfetto. Ci vuole un po’ di auto-ironia, no?

È la quarta parte di una serie, ho capito bene?
Sì, ma la prima e la seconda sono esaurite. Le foto dell’intera serie puoi trovarle qua.

Dove hai scattato le foto di questo libro?
Quasi tutte a Tokyo e Kanagawa. Cammino tutti i giorni e scatto quello che vedo.

Quindi porti sempre una macchina fotografica con te?
Sì, ma principalmente un piccola mirroless, per le foto di mia moglie. Per ‘Mazime’ ho una macchina grossa e pesante, è un’altra storia.

L’hai fatto uscire da solo. Perché?
Sì è self-published. Mi piace così.

Collezioni anche libri di fotografia?
Sì, ne ho un bel po’.

Ci dai i nomi dei tre giovani fotografi giapponesi che ti piaccono di più?
È una domanda difficile, soprattutto nominare solo tre persone. Space Cadet (la galleria online, n.d.r) di cui ho fatto anche parte, ha tanti nomi interessanti. Anche se ci trovi un paio di nomi più o meno established, ci sono sicuramente anche alcuni che non sono ancora diventati rappresentativi per la fotografia giapponese.

Cosa farai quest’estate?
Ad agosto diventerò papà! Sarà un grande giorno per me. Poi da novembre a febbraio dell’anno prossimo ho le mostre individuali a Tokyo, Osaka, Nagoya, Fukuoka, e a Kanazawa.



Your rating: None

Update Required

To play the media you will need to either update your browser to a recent version or update your Flash plugin.

Superstructure is probably the largest unsung hero for his musical talents, he’s done a completely midi version of Kid A by Radiohead which you won’t find anywhere but on cassette, he has stuck to his sound from the beginning and everything that pops up even like this snippet I always try to check out.

This is the Best Coast killer, prepare for Purity Ring to be bigger than ever imagined. The girl sings lyrics that give me goosebumps, young and old girls are not even ready for this sound, CocoRosie and Joanna Newsom fans will have a new girl to gush over and its definitely a true talent.

When I listen to this Toby Tobias track it has this dance end to it which made buy it because I wanted to play it out but also it creates this lil cutesy environment in my head that I imagine up, like some gummy animal world on a black backdrop, lots of fun things going on.

I’d be happy in a world where this Sportag remix was in the top 40s.

Permalink |
Comment On This Post (13) |
Tweet This Post | Add to | Stumbleupon

Post tags:

Your rating: None