openvis tweets #4

Spread of tweets during the two days of Openvis Conf.

Built with blockbuilder.org

forked from sxywu's block: openvis tweets #1

forked from sxywu's block: openvis tweets #2

forked from sxywu's block: openvis tweets #3

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://fb.me/react-0.14.3.js"></script>
  <script src="https://fb.me/react-dom-0.14.3.js"></script>
  <script src="https://npmcdn.com/babel-core@5.8.34/browser.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.11.2/lodash.js'></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
  <link href='https://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
  <style>
    body {
      font-family: 'Lora', serif;
      margin:0;
      color: #49438C;
    }
    svg {
      width: 100%;
      height: 125px;
    }
    text {
      font-size: .8em;
    }
    
    .axis path,
    .axis line {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
    }
    
    a {
      color: #fe2b75;
    }
  </style>
</head>

var Histogram = React.createClass({
  getInitialState() {
    return {
      width: window.innerWidth - padding.left * 2,
      height: 75,
      bars: [],
    };
  },

componentWillMount() {
    this.timeScale = d3.time.scale()
      .domain([startDate, endDate])
      .range([0, this.state.width]);
      
    this.heightScale = d3.scale.linear()
      .range([5, this.state.height]);
      
    this.axis = d3.svg.axis()
      .orient('bottom')
      .ticks(d3.time.hours, 6)
      .scale(this.timeScale);
  },

componentDidMount() {
    this.axisG = d3.select(this.refs.axis);
  },
  
  componentWillReceiveProps(nextProps) {
    var minHeight = d3.min(nextProps.tweetsByTime, time => time.tweets.length);
    var maxHeight = d3.max(nextProps.tweetsByTime, time => time.tweets.length);
    this.heightScale.domain([minHeight, maxHeight]);
    var bars = [];
    _.each(nextProps.tweetsByTime, (time) => {
      bars.push({
        data: time,
        x: Math.floor(this.timeScale(time.date) * 100) / 100,
        height: Math.floor(this.heightScale(time.tweets.length) * 100) / 100,
        selected: time.date <= nextProps.time,
      });
    });
    
    this.setState({bars});
  }, 
  
  componentDidUpdate() {
    this.axisG.call(this.axis);
  },

onClick(bar) {
    this.props.onClick(bar.date);
  },
  
  render() {
    var barWidth = Math.floor(this.state.width / this.state.bars.length);
    var bars = _.map(this.state.bars, (bar, i) => {
      var x = bar.x - (barWidth / 2);
      var y = this.state.height - bar.height;
      var barStyle = {
        fill: bar.selected ? colors['pink'] : colors['purple'],
        fillOpacity: 0.5,
        cursor: 'pointer',
      }
      return (<rect key={i} x={x} y={y} width={barWidth} height={bar.height}
        style={barStyle} onClick={this.onClick.bind(this, bar.data)} />);
    });
    var axis = (<g className='axis' ref='axis'
      transform={'translate(0,' + this.state.height + ')'} />);
      
    return (
      <svg>
        <g transform={'translate(' + padding.left + ',' + padding.top + ')'}>
          {bars}
          {axis}
        </g>
      </svg>
    );
  }
});

this.setState({tweets, tweetsByTime, tweetsAtTime});
    });
  },
  
  onClickBar(time) {
    this.setState({time});
  	playing = false;
  },

onClickPlay() {
    playing = true;

var fifteen = 1000 * 60 * 15;
    var tick = 250;
    var lastTick = 0;
    var time = this.state.time >= endDate ? startDate : this.state.time;
    d3.timer(elapsed => {
      if (elapsed > (lastTick + tick)) {
        lastTick = elapsed;
        time = new Date(time.getTime() + fifteen);
        console.log(time);

this.setState({time});
      }

if (time >= endDate || !playing) {
        playing = false;
        this.forceUpdate();
        return true;
      }
    });
  },

onClickPause() {
    playing = false;
    this.forceUpdate();
  },
  
  render() {
    var headerStyle = {
      padding: padding.top + 'px ' + padding.left + 'px',
      cursor: 'pointer',
    }
    var tweetStyle = {
      padding: '10px',
    };
    var tweets = [];
    _.each(this.state.tweetsByTime, (time, i) => {
      // if tweets are less than current time, then show them
      if (time.date <= this.state.time) {
        _.each(time.tweets, (tweet, j) => {
          var key = i + ',' + j;
          tweets.push((
            <div key={key} style={tweetStyle}>
              <strong>{tweet.actor.displayName}</strong> (<a href={tweet.link} target='_new'>{dateFormat(tweet.date)}</a>)
              <div dangerouslySetInnerHTML={{__html: tweet.body}} />
            </div>
          ));
        });
      }
    });
    var play = (<span className='glyphicon glyphicon-play' onClick={this.onClickPlay} />);
    if (playing) {
      play = (<span className='glyphicon glyphicon-pause' onClick={this.onClickPause} />);
    }

return (
      <div>
        <h2 style={headerStyle}>
          {play} {dateFormat(this.state.time)}
        </h2>
        <Histogram {...this.state} onClick={this.onClickBar} />
        <div style={tweetStyle}>
          {tweets}
        </div>
      </div>
    );
  },
});

ReactDOM.render(
  <App />,
  document.getElementById('main') 
);
  </script>
</body>

https://fb.me/react-0.14.3.js

https://fb.me/react-dom-0.14.3.js

https://npmcdn.com/babel-core@5.8.34/browser.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.11.2/lodash.js