Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
      font-family: Helvetica, Arial, sans-serif;
    }
    body: {
      background-color: #dee;
    }
    .states {
      margin-left: 20px;
      margin-top: 10px;
      position: relative;
    }
    .state {
      position: absolute;
      left: 0;
      top: 0;
      font-size: 12px;
      margin-bottom: 5px;
      padding: 3px;
      background-color: white;
      border: 1px solid #999;
      border-radius: 3px;
      transition: transform 1.0s ease;
      -webkit-transition: -webkit-transform 2.0s ease;
    }
  </style>
</head>
<body>
  <script src="//fb.me/react-with-addons-0.10.0.js"></script>
  <script src="//fb.me/JSXTransformer-0.10.0.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore.js"></script>
  <script type="text/jsx">
    /** @jsx React.DOM */
​
    var stateData = [
      {state: "California", population: 38332521},
      {state: "Texas", population: 26448193},
      {state: "New York", population: 19651127},
      {state: "Florida", population: 19552860},
      {state: "Illinois", population: 12882135},
      {state: "Pennsylvania", population: 12773801},
      {state: "Ohio", population: 11570808},
      {state: "Georgia", population: 9992167},
      {state: "Michigan", population: 9895622},
      {state: "North Carolina", population: 9848060},
      {state: "New Jersey", population: 8899339},
      {state: "Virginia", population: 8260405},
      {state: "Washington", population: 6971406},
      {state: "Massachusetts", population: 6692824},
      {state: "Arizona", population: 6626624},
      {state: "Indiana", population: 6570902},
      {state: "Tennessee", population: 6495978},
      {state: "Missouri", population: 6044171},
      {state: "Maryland", population: 5928814},
      {state: "Wisconsin", population: 5742713},
      {state: "Minnesota", population: 5420380},
      {state: "Colorado", population: 5268367},
      {state: "Alabama", population: 4833722},
      {state: "South Carolina", population: 4774839},
      {state: "Louisiana", population: 4625470},
      {state: "Kentucky", population: 4395295},
      {state: "Oregon", population: 3930065},
      {state: "Oklahoma", population: 3850568},
      {state: "Connecticut", population: 3596080},
      {state: "Iowa", population: 3090416},
      {state: "Mississippi", population: 2991207},
      {state: "Arkansas", population: 2959373},
      {state: "Utah", population: 2900872},
      {state: "Kansas", population: 2893957},
      {state: "Nevada", population: 2790136},
      {state: "New Mexico", population: 2085287},
      {state: "Nebraska", population: 1868516},
      {state: "West Virginia", population: 1854304},
      {state: "Idaho", population: 1612136},
      {state: "Hawaii", population: 1404054},
      {state: "Maine", population: 1328302},
      {state: "New Hampshire", population: 1323459},
      {state: "Rhode Island", population: 1051511},
      {state: "Montana", population: 1015165},
      {state: "Delaware", population: 925749},
      {state: "South Dakota", population: 844877},
      {state: "Alaska", population: 735132},
      {state: "North Dakota", population: 723393},
      {state: "Vermont", population: 626630},
      {state: "Wyoming", population: 582658}
    ];
        
    var StateList = React.createClass({
      getInitialState: function() {
        return {
          sortBy: 'state'
        }
      },
      changeSortOrder: function(sortBy) {
        return function(event) {
          this.setState({sortBy: sortBy})
        }.bind(this)
      },
      render: function() {
        var sortedStateData = _(stateData).sortBy(this.state.sortBy);
        if (this.state.sortBy == 'population') {
          sortedStateData.reverse();
        }
        var states = sortedStateData.map(function(state, i) {
          var height = 30;
          var width = 170;
          var row = Math.floor(i / 3);
          var col = i % 3;
          var translate = 'translate(' + width * col + 'px, ' + height * row + 'px)'
          var divStyle = {
            '-webkit-transform': translate,
            transform: translate
          };
          return (
            <div key={state.state}
                 className="state"
                 style={divStyle}>
              <p><strong>{state.state}</strong> {state.population}</p>
            </div>
          );
        }.bind(this));
        return (
          <div className="stateList">
            <div className="sortStates">
              <input type="button" value="Sort By Name" onClick={this.changeSortOrder('state')} />
              <input type="button" value="Sort By Population" onClick={this.changeSortOrder('population')} />
            </div>
            <div className="states">
              {states}
            </div>
          </div>
        );
      }
    });
​
    React.renderComponent(<StateList />, document.body);
​
​
  </script>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
benatkinpro
0viewers