Resolutions and Search Trends

Every New Year, people make resolutions to better themselves. It’s great that people use the holiday as a catalyst, but it seems like most resolutions are not very long lived, e.g. the gym is always more crowded in Jan than June.

I thought it would be interesting to see this phenomenon in a less anecdotal light. I started messing with Google Trends and found the data to be as I suspected: huge spikes for most new-years-resolutiony terms. It was also interesting to see how similar the trends were for some terms were year over year.

I also compared the search traffic for each term in January with the year round search traffic for that term. The term that I found with the largest Jan vs rest of year average traffic difference was ‘get organized’ with 1.52 times more search traffic in January.

I graphed the search trends of some new-years-resolutiony terms with d3.js:

Mouseover a label to highlight a specific term

View Source Hide Source

#
margin = { top: 20, right: 80, bottom: 30, left: 50 }
width  = 720 - margin.left
height = 500 - margin.top

#
dateParser = d3.time.format("%x").parse
color      = d3.scale.category10()

#
x = d3.time.scale().range [0, width]
y = d3.scale.linear().range [height, 0]

#
xAxis = d3.svg.axis()
        .scale(x)
        .ticks(d3.time.years, 1)
        .orient('bottom')
yAxis = d3.svg.axis()
         .scale(y)
         .orient('left')

#
line = d3.svg.line()
        .interpolate('basis')
        .x((d) -> x(d.date))
        .y((d) -> y(d.val))
svg  = d3.select('#res-graph')
        .append('svg')
        .attr('width', width + margin.left + margin.right)
        .attr('height', height + margin.top + margin.bottom)
        .append('g')
        .attr('transform', "translate(#{margin.left},#{margin.top})")

#
d3.csv '/resolution_graph_data.csv', (error, data) ->

  #
  color.domain(d3.keys(data[0]).filter( (key) ->  key != 'Week' ))

  #
  data.forEach((d) -> d.date = dateParser(d.Week))

  #
  keywords = color.domain().map (name, ndx) ->
    {
      name:   name,
      values: (data.map((d) -> { date: d.date, val: +d[name] })),
      color:  color(ndx)
    }

  #
  x.domain d3.extent(data, (d) -> d.date)
  y.domain [
    d3.min(keywords, (k) -> d3.min(k.values, (v) -> v.val)),
    d3.max(keywords, (k) -> d3.max(k.values, (v) -> v.val))
  ]

  #
  svg.append('g')
      .attr('class', 'x axis')
      .attr('transform', "translate(0, #{height})")
      .call(xAxis.tickSize(-height, 0, 0))

  #
  svg.append('g')
      .attr('class', 'y axis')
      .call(yAxis)

  #
  keyword = svg.selectAll('.keyword')
             .data(keywords).enter()
             .append('g').attr('class', 'keyword')

  #
  keyword.append('path')
          .attr('class', 'line')
          .attr('id',     (d) -> d.name.replace(/\s/g,'') )
          .attr('d',      (d) -> line(d.values))
          .attr('stroke', (d) -> color(d.name))

  #
  labels = d3.select('#res-labels').append('ul')
              .selectAll('li').data(keywords).enter()
              .append('li')
              .attr('class', 'color-label')
              .text((d) -> d.name)
              .style('color', (d) -> d.color)
              .on('mouseover', (d) ->
                d3.select("##{d.name.replace(/\s/g,'')}")
                   .style('stroke-opacity', '1'))
              .on('mouseout', (d) ->
                d3.select("##{d.name.replace(/\s/g,'')}")
                   .style('stroke-opacity', '.15'))

Raw data collected via Google Trends

All the best in 2013!