test

_.md

[ Launch: test ] 089a3d72e5fc01fd881f by vicapow

config.json

{"description":"test","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"tab":"edit","display_percent":0.7,"thumbnail":"http://i.imgur.com/Z4ghHZY.png","fullscreen":true,"ajax-caching":true}

inlet.js

var svg = d3.select('svg')
var x = d3.scale.linear()
var y = d3.scale.linear()
var w = 900
var h = 265
var padding = 100
d3.select('body').style({'background-color': '#f1f1f1'})
var margin = {left: padding, top: 91, right: padding, bottom: 10}
var schedule = [
  {start: 9, end: 10, label: 'Coffee and Pasteries', type: 'break'},
  {start: 10, end: 12.00, label: 'Session 1', type: 'session'},
  {start: 12.00, end: 12.75, label: 'Lunch', type: 'break'},
  {start: 12.75, end: 14.25, label: 'Session 2', type: 'session'},
  {start: 14.25, end: 14.5, label: 'break', type: 'break'},
  {start: 14.5, end: 16, label: 'Session 3', type: 'session'}
]
var color = function(type) {
  if (type === 'session') return '#428bca'
  else return '#a4c1d7'
}

x.domain([9, 16]).range([margin.left, w - margin.right])
y.domain([0, schedule.length - 0.5]).range([margin.top, h - margin.bottom])


var axis = d3.svg.axis().scale(x)
  .ticks(6)
  .tickFormat(function(d) { return d <= 12 ? d + 'am' : (d - 12) + 'pm' })


svg.append('g')
  .attr('transform', 'translate(0, ' + h + ')')
  .style({
    fill: 'none',
    stroke: 'black',
    'shape-rendering': 'crispEdges'
  })
  .call(axis)
.selectAll('text').style({fill: 'black', stroke: 'none', 'font-size': '12px'})

svg.append('g')
  .selectAll('path').data(schedule)
  .enter().append('path')
  .attr('d', function(d, i) {
    return 'M' + [x(d.start), y(i)] + 'L' + [x(d.end), y(i)]
  }).style({
    stroke: function(d) { return color(d.type) },
    'stroke-width': 13
  })

svg.append('g').selectAll('text')
  .data(schedule).enter().append('text')
  .attr({
    transform: function(d, i) {
      return 'translate(' + [ x(d.start) + (x(d.end) - x(d.start)) / 2, y(i) - 11] + ')'
    },
    'text-anchor': 'middle',
    'font-size': '12px',
  }).text(function(d) { return d.label })

svg.append('g').selectAll('text')
  .data(schedule).enter().append('text')
  .attr({
    transform: function(d, i) {
      return 'translate(' + [ x(d.start) + (x(d.end) - x(d.start)) / 2, y(i) + 21] + ')'
    },
    'text-anchor': 'middle',
    'font-size': '10px',
  }).text(function(d) { return d3.round((d.end - d.start) * 60, 2) + 'm' })