D3 Examples - smart

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <title>drag 'n drop test</title>
    <!--<script src="../bower_components/d3/d3.js" charset="utf-8"></script>-->
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
    <style>
      svg {
        font: 10px sans-serif;
        background: white;
        display:block;
        margin:0 auto;
      }
      /*button {
      clear:right;
      float:right;
      }*/
      .chart rect {
        stroke: white;
​
      }
      rect.section {
        cursor: ns-resize;
      }
      .line {
        fill:none;
        stroke:#000;
        stroke-width:1.5px;
      }
      .axis path, .axis line {
        fill:none;
        stroke:silver;
        shape-rendering: crispEdges;
      }
      .axis path {
        display: none;
      }
      .grid {
        fill:none;
        stroke-width:0.5px;
        stroke:#000;
        opacity:0.2;
      }
      .ratio {
        fill:#f2c180;
        color:#f2c180;
      }
      .fsratio {
        fill:#f3a53d;
        color:#f3a53d;
      }
      .students {
        fill:#5cadf0;
        color:#5cadf0;
      }
      .faculty {
        fill:steelblue;
        color:steelblue;
      }
      #wrap {
        width:910px;
        margin:0 auto;
      }
      div.tooltip {
        color: #222;
        background-color: #fff;
        padding: .5em;
        text-shadow: #f5f5f5 0 1px 0;
        border-radius: 2px;
        opacity: 0.9;
        position: absolute;
      }
      .hidden {
        display: none;
      }
    </style>
  </head>
  <body>
    <script>
      /**
 * Created by jmuyskens on 2/9/14.
 */
​
      var margin = {top:10, right: 10, bottom: 10, left: 50},
          height = 500 - margin.top - margin.bottom,
          height = 500 - margin.top - margin.bottom,
          width  = 500 - margin.left - margin.right;
​
      var days = ['lundi','mardi','mercredi','jeudi','vendredi'];
      var hours = ['08:00 AM','08:30 AM','09:00 AM','09:30 AM','10:00 AM','10:30 AM','11:00 AM','11:30 AM','12:00 PM','12:30 PM',
                   '01:00 PM','01:30 PM','02:00 PM','02:30 PM','03:00 PM','03:30 PM','04:00 PM','04:30 PM','05:00 PM','05:30 PM','06:00 PM',
                   '06:30 PM','07:00 PM','07:30 PM','08:00 PM','08:30 PM','09:00 PM','09:30 PM'];
​
      var hourScaleRangeBand = height / hours.length;
​
      var tooltip = d3.select('body').append('div')
      .attr('class', 'hidden tooltip');
​
      courses = [
        {
          id: 0,
          abbr: '',
          time: {
            start: '10:00 AM',
            end: '10:15 AM'
          },
          day: ['lundi'],
          name: "Theo"
        }
      ];
​
      var week = [];
      var format = d3.time.format("%I:%M %p");
      var drag = d3.behavior.drag()
      .origin(Object);
​
      var d3datehours = hours.map(format.parse);
​
      days.forEach(function(day){
        var hourObj = {};
        hours.forEach(function(hour){
          hourObj[hour] = {
            occupied: false,
            course: ''
          };
        });
        week.push(hourObj.day = day);
      });
​
      var dayScale = d3.scale.ordinal()
      .domain(days)
      .rangeRoundBands([0, width], 0.01);
​
      var hourScale = d3.time.scale()
      .domain([d3datehours[0],d3datehours[27]])
      .rangeRound([0, height]);
​
      svg = d3.select('body').append('svg')
        .attr('height', height + margin.top + margin.bottom)
        .attr('width', width + margin.right + margin.left)
        .append('g')
        .attr('transform','translate(' + margin.left + ',' + margin.top + ')');
​
​
      function makeHourAxis() {
        return d3.svg.axis()
          .scale(hourScale)
          .orient('left')
      }
​
      function makeDayAxis() {
        return d3.svg.axis()
          .scale(dayScale)
          .orient('top')
      }
​
      svg.append('g')
        .attr('class', 'hour axis')
        .attr('transform','translate(' + width + ',0)')
        .attr('transform','translate(' + width + ',0)')
        .call(makeHourAxis().ticks(hours.length).tickSize(width, 0, 0).tickFormat(""));
​
      svg.append('g')
        .attr('class', 'hour axis')
        .call(makeHourAxis());
​
​
      svg.append('g')
        .attr('class', 'day axis')
        .attr('transform', 'translate(' + (dayScale.rangeBand() / 2) + ',' + height + ')')
        .call(makeDayAxis().tickSize(height, 0, 0).tickFormat(""));
​
      svg.append('g')
        .attr('class', 'day axis')
        .call(makeDayAxis().tickSize(0));
​
​
​
      var courseGroups = svg.selectAll('g.course')
      .data(courses)
      .enter().append('g')
      .attr('class', 'course')
      .attr('transform', function(d) {
        return 'translate(' + 0 + ',' + hourScale(format.parse(d.time.start)) + ')';
      })
      .attr("fill", "green")
      .on("mousemove", function(d) {        
        var mouse = d3.mouse(svg.node()).map(function(d) {
          return parseInt(d);
        });
        tooltip.classed('hidden', false)
          .attr('style', 'left:' + (mouse[0] + 250) +
                'px; top:' + (mouse[1] - 40) + 'px')
          .html(d.name);
      })
      .on('mouseout', function() {
        tooltip.classed('hidden', true);
      });
​
​
      var sections = courseGroups.selectAll('g.section')
      .data(function(d) {
        return d.day.map(function(e){
          return {day: e, time: d.time, abbr: d.abbr};
        });
      })
      .enter().append('g')
      .attr('class','section');
​
      sections.append('rect')
        .attr('class','section')
        .attr('y', 0)
        .attr('x', function(d){ return dayScale(d.day); })
        .attr('width', dayScale.rangeBand())
        .attr('height', function(d) {
        return hourScale(format.parse(d.time.end)) - hourScale(format.parse(d.time.start));
      });
​
      sections.append('text')
        .style('fill', 'white')
        .attr('y', 10)
        .attr('x', function(d){ return dayScale(d.day); })
        .text(function(d){ return d.abbr; });
​
​
    </script>
  </body>
</html>
    