app.coffee

margin =
    top: 20
    right: 50
    bottom: 30
    left: 50

width = 960
height = 430
strokecolor = "#B30000"

tooltip = d3.select(".tooltip")
    .attr("class", "remove")
    .style("visibility", "hidden")

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

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

z = d3.scale.ordinal()
    .range(d3.scale.category20().range())

xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")

yAxis = d3.svg.axis()
    .scale(y)

yAxisr = d3.svg.axis()
    .scale(y)

stack = d3.layout.stack()
    .offset("zero")
    .values((d) ->
        return d.values)
    .x((d) ->
        return d.date)
    .y((d) ->
        return d.count)

area = d3.svg.area()
    .interpolate("cardinal")
    .x((d) ->  x(d.date))
    .y0((d) -> y(d.y0))
    .y1((d) -> y(d.y0 + d.y))

svg = d3.select(".chart")
    .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 + ")")

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)

svg.append("g")
    .attr("class", "y axis")
    .call(yAxis.orient("left"))


commitsToLayers = (commits) ->
    ###
    Transform our commit data into format suitable for d3's area graphs.

    e.g.
    in = [
        {
            'id': '123'
            'timestamp': '1421423491'
            'files': {
                'app.py': 1,
            }
        },
        {
            'id': '124'
            'date': '1421473491'
            'files': {
                'app.py': 10,
            }
        }
    ]

    out = [
        {
            'name': 'app.py'
            'values': [
                {
                    'date': new Date(2014, 1, 2)
                    'count': 1
                    'id': '123'
                }
                {
                    'date': new Date(2014, 1, 3)
                    'count': 10
                    'id': '124'
                }
            ]
        }
    ]
    ###
    layers = []
    filenames = []

    for commit in commits
        for filename, _ of commit.files
            filenames.push(filename)

    filenames = d3.set(filenames).values()
    for filename in filenames
        values = []
        for commit in commits
            values.push({
                'date': commit.date,
                'id': commit.id,
                'count': commit.files[filename] or 0
            })
        layers.push({
            'name': filename,
            'values': values
        })
    return layers

cleanData = (data) ->
    for d in data
        d.date = new Date(d.timestamp * 1000)
    return data

updateData = (data) ->
    layers = stack(commitsToLayers(cleanData(data)))
    x.domain(d3.extent(data, (d) -> d.date))
    y.domain([
        0,
        d3.max(data, (d) -> d3.sum(k for v, k of d.files))
    ])
    svg.select(".x").call(xAxis)
    svg.select(".y").call(yAxis)

    svg.selectAll(".layer").remove()
    s = svg.selectAll(".layer")
        .data(stack(layers))

    s.enter().append("path")
        .attr("class", "layer")
        .attr("d", (d) -> area(d.values))
        .style("fill", (d, i) -> z(i))


    svg.selectAll(".layer")
        .attr("opacity", 1)
        .on("mouseover", (d, i) ->
            svg.selectAll(".layer")
            .transition()
            .duration(250)
            .style("opacity", (d, j) ->
                if j != i
                    return 0.6
                return 1)
        )
        .on("mousemove", (d, i) ->
            d3.select(@)
                .classed("hover", true)
                .attr("stroke", strokecolor)
                .attr("stroke-width", "0.25px")
                .style("opacity", 1)

            tooltip
                .html(d.name)
                .style("visibility", "visible")
        )
        .on("mouseout", (d, i) ->
            svg.selectAll(".layer")
                .transition()
                .duration(250)
                .style("opacity", 1)

            d3.select(@)
                .classed("hover", false)
                .attr("stroke-width", "0px")
        )


demoName = window.location.hash.replace("#/", "")

d3.json("../data/#{demoName}.json", (error, json) ->
    if error
        console.warn(error)
    else
        updateData(json)
)

index.html

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- inject:css -->
    <link rel="stylesheet" href="/css/main.css">
    <!-- endinject -->

  </head>
  <body>
    <div class="container">
      <div class="row">
        <h2 class="tooltip" style="text-align: center; margin-top: 20px; ">Files Over Time</h2>
      </div>
      <div class="row">
        <div class="chart"></div>
      </div>
    </div>

    <script src="/js/vendors.js"></script>
    <script src="/js/app.js"></script>

  </body>
</html>