More Maptime! More Stacked Rainbows!

#Maptime is one of my favorite things. Back in Portland, I was fortunate to have MaptimePDX to keep me motivated. Here in Grenoble, I missed it so much, that I started organizing Maptime-Alpes. I was trying to make a sticker to hand out at events, but I wanted to personalize to Maptime-Alpes. So instead of photoshop (the obvious way) I decided to make it with d3. And as a webpage. And dynamic.

Maptime’s logo is very simple, but yet iconic - the maptime hashtag, made of stacked and offset rainbow colors.

So let’s define the colors in the order in which we will draw: red - purple:

var colors = ['#ee1c24','#fcb03f','#fdf000','#38b54a','#00aeee','#662d91'];

We’ll define the d3 target

var svg = d3.select("#maptime").append("svg")
  .attr("width",width)
  .attr("height",height);

append the text element to it

var words = svg.selectAll('text').append('text')

and then iterate the colors to make one text element per color

var words = svg.selectAll('text').append('text')
  .data(colors).enter()
  .append('text');

To build the actual text, and style and place it, we will set attributes for each iteration (d = item, i = index.)

For the offsets:

var wordsAttributes = words
  .attr('x',function(d,i){return i*2})
  .attr('y',function(d,i){return i*2+height*.65})

the text

.text(maptimify)

the font

.attr('font-size',height*.8+'px')
.attr('font-family','Comfortaa')

and finally the color

.attr('fill',function(d){return d})

To make it dynamic, I wrap the whole thing in a function which I call on keyup of an inputbox.

The whole script comes in at 27 lines

function itsMapTime(maptime){
  location.hash = maptime;
  width = maptime.length*100;
  var height = 140;
  var colors = ['#ee1c24','#fcb03f','#fdf000','#38b54a','#00aeee','#662d91'];
  var maptimify = '#'+maptime+'!';
  d3.select('svg').remove()
  var svg = d3.select("#maptime").append("svg")
    .attr("width",width)
    .attr("height",height);
  var words = svg.selectAll('text').append('text')
    .data(colors).enter()
    .append('text');

  var wordsAttributes = words
    .attr('x',function(d,i){return i*2})
    .attr('y',function(d,i){return i*2+height*.65})
    .text(maptimify)
    .attr('font-size',height*.8+'px')
    .attr('font-family','Comfortaa')
    .attr('fill',function(d){return d})
}
if (location.hash){
  itsMapTime(location.hash.slice(1))
} else {
  itsMapTime('maptime')
}

Is this useful? Well, I made a maptime-styled tacos banner, so yeah… but useful or not - fun to play with d3 to make simple solutions to (silly) issues!

Check out the live page, and check out the source if interested.

Updated: