Bubbles Chart main source: ··· Home

Notes:

  • Using the NV3D extension for D3JS
  • Data taken from the Nike API (via the Codepen)

Data: data.json

Code:

  • bubbles.ejs

    <%  demo = {category: "d3js", key: "bubbles", files: files}; %>
    
    <%- partial("../mixins/_demo_title", demo) %>
    
    <div id="chart" class="<%= demo.key %>-chart"></div>
    
    <script type="text/javascript" src="/vendors/bower/d3/d3.min.js"></script>
    <script type="text/javascript" src="/vendors/bower/nvd3/nv.d3.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/vendors/bower/nvd3/nv.d3.min.css">
    <script type="text/javascript" src="/js/d3js/<%= demo.key %>.js"></script>
    
    <%- partial("../mixins/_notes", demo) %>
    <%- partial("../mixins/_sources_data", demo) %>
    <%- partial("../mixins/_code", demo) %>
  • bubbles.coffee

    ready = ->
      width = $('#chart').innerWidth()
      color = d3.scale.category20b()
    
      strToMinutes = ((str)->
        str = str.split(':')
        60 * str[0] + 1 * str[1] + str[2] / 60
      )
    
      defaultScatterPlot = (->
        chart = nv.models.scatterChart()
        chart.margin({top: 100, right: 100, bottom: 100, left: 100})
        chart.xAxis.axisLabelDistance(45).tickFormat(d3.format('.1f'))
        chart.yAxis.axisLabelDistance(45).tickFormat(d3.format('.2f'))
        nv.utils.windowResize(chart.update)
        chart.forceY([4.5,6.5]).forceX([0,135])
      )
    
      showChart = ((chart, data, title)->
        d3.select('#chart').append('svg').attr({width: width})
        .datum(data).call(chart)
      )
    
      d3.json('/data/d3js/bubbles/data.json', (error, jsonData)->
        data = []
        
        jsonData.data.forEach((d,i,arr)->
          distance = +d.metricSummary.distance
          time = strToMinutes(d.metricSummary.duration)
          pace = time / distance
          
          data.push({x: arr.length - i, y: pace, size: distance, \
            color: color(distance)})
        )
    
        data = [{key: 'Data', values: data}]
        
        chart = defaultScatterPlot()
        
        chart.tooltipContent((key, x, y, obj)-> obj.point.size.toFixed(1) + ' km' )
        chart.xAxis.tickFormat(d3.format('f')).axisLabel('Person Number')
        chart.yAxis.axisLabelDistance(10).axisLabel('Pace (min/km)')
        
        showChart(chart, data, 'Pace Trend')
      )
    
    $(document).ready(ready)
  • _bubbles.styl

    .bubbles-chart
        .nvd3 .nv-axis.nv-x path.domain
            stroke-opacity .75
        .nvd3 .nv-axis line
            stroke-opacity .4

Home