README.md

## README.md

      
        

          Raw
        
        
          
            
          
          
            
              README.md
            
          
        
      
    
  
    Possible schedule for a D3.JS workshop.

  

  

## index.html
<!DOCTYPE html>
<style>
body {
  font-family: helvetica;
}
svg path{
shape-rendering: crispEdges;
}
</style>
<body></body>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
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 w = 960, h = 400
var horPadding = 100
var margin = {left: horPadding, top: 91, right: horPadding, bottom: 20}
var x = d3.scale.linear()
  .domain([9, 16])
  .range([margin.left, w - margin.right])
var y = d3.scale.linear()
  .domain([0, schedule.length - 0.5])
  .range([margin.top, h - margin.bottom])

var svg = d3.select('body').append('svg').attr({width: w, height: h})
var color = function(type) {
  if (type === 'session') return '#B20061'
  else return '#FF8BCA'
}

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 - margin.bottom) + ')')
  .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' })

</script>