galvanic · July 6, 2016 16:13
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <title>Visualisation</title>
    <link rel='stylesheet' type='text/css' href='style.css'>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.js' charset='utf-8'></script>
    <script src='./timeline.js'></script>
    <script src='./main.js'></script>
  </head>
  <body>

    <div id='vis'></div>

  </body>
 </html>
diff --git a/main.js b/main.js
 'use strict';

 var dataFilepath = 'zevents.csv'

 d3.csv(dataFilepath, function(d) {

  return {
    user_id: +d.user_id
  , occurred_at: d.occurred_at
  , event_type: d.event_type
  }

 }, function(loadedData) {

  var eventsByUser = d3.nest()
    .key(function(d) { return d.user_id })
    .entries(loadedData)

  // config
  var circleRadius = 20

  // the chart
  var svg = d3.select('div#vis')
    .append('svg')
      .attr('width', 960)
      .attr('height', 500)

  function draw(data) {

    var timelines = svg.selectAll('g.timelinechart')
      .data(data)

    timelines.enter()
      .append('g')
        .classed('timelinechart', true)
        .attr('transform', function(d,i) { return 'translate(' + 0 + ',' + i*circleRadius*2 + ')' })

    timelines
      .call(TimelineChart())

    timelines.exit()
      .remove()

    requestAnimationFrame(render)
    
  }

  function getRandInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min }

  function genRandDataset(dataByUser) {

    var start = getRandInt(0, dataByUser.length)
    return dataByUser.slice(start, start+getRandInt(1,9))

  }
  
  function render() {
    
    setTimeout(function() {

      draw(genRandDataset(eventsByUser).map(function(d) { return d.values }))

    }, 1000)
  
  }
  
  render()

 })
diff --git a/style.css b/style.css
 div#vis {
  width: 960px;
  margin: 0px auto;
 }

 g.timelinechart line {
  stroke: orange;
  opacity: 0.2;
 }
diff --git a/thumbnail.png b/thumbnail.png
diff --git a/timeline.js b/timeline.js
 function TimelineChart() {

  // assumptions about the data passed to this chart:
  // i.e. dataset of each selection
  // -> list of objects. each object has the following keys:
  // -> user_id, occurred_at, event_type

  // chart config
  var circleRadius = 20
    , margin = {top: 2, right: circleRadius+2, bottom: 2, left: circleRadius+2}
    , width = 960 - margin.left - margin.right // TODO: depends on container
    , height = circleRadius*2
    , toDate = function(d) { return d.occurred_at }
    , x = d3.time.scale()
    , xScaleRound = d3.time.day

  function drawChart(selection) {
    selection.each(function(dataset, i) {

      // update scales
      x
        .domain(d3.extent(dataset, function(d) { return new Date(toDate(d)) }))
        .range([0, width])
        .nice(xScaleRound)

      // select chart element(s) (eg. innerchart) if they exist already
      var innerchart = d3.select(this).selectAll('g.innerchart')
        .data(function (d) { return [d] })

      // otherwise create them and the elements they contain
      var innerchartEnter = innerchart.enter()
        .append('g')
          .classed('innerchart', true)
          .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')

      innerchartEnter.append('line')
        .attr('x1', x.range()[0])
        .attr('y1', height/2)
        .attr('x2', x.range()[1])
        .attr('y2', height/2)

      // update data
      var circles = innerchart.selectAll('circle')
        .data(function(d) { return d }, function(d) { return d.occurred_at })

      circles.enter()
        .append('circle')
          .style('fill', 'gray')
          .style('opacity', 0.2)
          .attr('cx', function(d) { return x(new Date(toDate(d))) })
          .attr('cy', height/2)
          .attr('r', 0)
        .transition()
          .duration(200)
          .attr('r', circleRadius)

      circles.exit()
        .transition()
          .duration(200)
          .attr('r', 0)
          .style('opacity', 0)
        .remove()

    })
  }

  return drawChart

 }
diff --git a/zevents.csv b/zevents.csv
	<!DOCTYPE html>
	<html>
	<head>
	<title>Visualisation</title>
	<link rel='stylesheet' type='text/css' href='style.css'>
	<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.js' charset='utf-8'></script>
	<script src='./timeline.js'></script>
	<script src='./main.js'></script>
	</head>
	<body>

	<div id='vis'></div>

	</body>
	</html>
	'use strict';

	var dataFilepath = 'zevents.csv'

	d3.csv(dataFilepath, function(d) {

	return {
	user_id: +d.user_id
	, occurred_at: d.occurred_at
	, event_type: d.event_type
	}

	}, function(loadedData) {

	var eventsByUser = d3.nest()
	.key(function(d) { return d.user_id })
	.entries(loadedData)

	// config
	var circleRadius = 20

	// the chart
	var svg = d3.select('div#vis')
	.append('svg')
	.attr('width', 960)
	.attr('height', 500)

	function draw(data) {

	var timelines = svg.selectAll('g.timelinechart')
	.data(data)

	timelines.enter()
	.append('g')
	.classed('timelinechart', true)
	.attr('transform', function(d,i) { return 'translate(' + 0 + ',' + icircleRadius2 + ')' })

	timelines
	.call(TimelineChart())

	timelines.exit()
	.remove()

	requestAnimationFrame(render)

	}

	function getRandInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min }

	function genRandDataset(dataByUser) {

	var start = getRandInt(0, dataByUser.length)
	return dataByUser.slice(start, start+getRandInt(1,9))

	}

	function render() {

	setTimeout(function() {

	draw(genRandDataset(eventsByUser).map(function(d) { return d.values }))

	}, 1000)

	}

	render()

	})
	div#vis {
	width: 960px;
	margin: 0px auto;
	}

	g.timelinechart line {
	stroke: orange;
	opacity: 0.2;
	}
	function TimelineChart() {

	// assumptions about the data passed to this chart:
	// i.e. dataset of each selection
	// -> list of objects. each object has the following keys:
	// -> user_id, occurred_at, event_type

	// chart config
	var circleRadius = 20
	, margin = {top: 2, right: circleRadius+2, bottom: 2, left: circleRadius+2}
	, width = 960 - margin.left - margin.right // TODO: depends on container
	, height = circleRadius*2
	, toDate = function(d) { return d.occurred_at }
	, x = d3.time.scale()
	, xScaleRound = d3.time.day

	function drawChart(selection) {
	selection.each(function(dataset, i) {

	// update scales
	x
	.domain(d3.extent(dataset, function(d) { return new Date(toDate(d)) }))
	.range([0, width])
	.nice(xScaleRound)

	// select chart element(s) (eg. innerchart) if they exist already
	var innerchart = d3.select(this).selectAll('g.innerchart')
	.data(function (d) { return [d] })

	// otherwise create them and the elements they contain
	var innerchartEnter = innerchart.enter()
	.append('g')
	.classed('innerchart', true)
	.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')

	innerchartEnter.append('line')
	.attr('x1', x.range()[0])
	.attr('y1', height/2)
	.attr('x2', x.range()[1])
	.attr('y2', height/2)

	// update data
	var circles = innerchart.selectAll('circle')
	.data(function(d) { return d }, function(d) { return d.occurred_at })

	circles.enter()
	.append('circle')
	.style('fill', 'gray')
	.style('opacity', 0.2)
	.attr('cx', function(d) { return x(new Date(toDate(d))) })
	.attr('cy', height/2)
	.attr('r', 0)
	.transition()
	.duration(200)
	.attr('r', circleRadius)

	circles.exit()
	.transition()
	.duration(200)
	.attr('r', 0)
	.style('opacity', 0)
	.remove()

	})
	}

	return drawChart

	}