Maptimify yr life

  last updated September 28, 2014 12:00 AM

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:

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

We'll define the d3 target

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

append the text element to it

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

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

1var words = svg.selectAll('text').append('text')
2  .data(colors).enter()
3  .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:

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

the text

1.text(maptimify)

the font

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

and finally the color

1.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

1function itsMapTime(maptime){
2  location.hash = maptime;
3  width = maptime.length*100;
4  var height = 140;
5  var colors = ['#ee1c24','#fcb03f','#fdf000','#38b54a','#00aeee','#662d91'];
6  var maptimify = '#'+maptime+'!';
7  d3.select('svg').remove()
8  var svg = d3.select("#maptime").append("svg")
9    .attr("width",width)
10    .attr("height",height);
11  var words = svg.selectAll('text').append('text')
12    .data(colors).enter()
13    .append('text');
14
15  var wordsAttributes = words
16    .attr('x',function(d,i){return i*2})
17    .attr('y',function(d,i){return i*2+height*.65})
18    .text(maptimify)
19    .attr('font-size',height*.8+'px')
20    .attr('font-family','Comfortaa')
21    .attr('fill',function(d){return d})
22}
23if (location.hash){
24  itsMapTime(location.hash.slice(1))
25} else {
26  itsMapTime('maptime')
27}

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.