D3 Examples - Baseball Be Very Very Good To Me

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <style>
        html, body, #Chart {
            height: 100%;
            min-height: 100%;
            width: 100%;
            min-width: 100%;
        }
​
        #Chart {
            display: inline-block;
        }
​
    </style>
    <title>dex.js : Clustered Force</title>
​
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.theme.min.css">
    <link rel="stylesheet" href="https://dexjs.net/js/dex-jquery.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"/>
    <link rel="stylesheet" href="https://dexjs.net/js/dex-bootstrap.css">
    <link rel="stylesheet" href="https://dexjs.net/js/dex.css">
​
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://dexjs.net/js/dex-jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://dexjs.net/js/dex-bootstrap.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
    <script src="https://dexjs.net/js/dex-libs.js"></script>
    <script src="https://dexjs.net/js/dex.js"></script>
​
</head>
<body>
​
<div class="ui-layout-center">
    <div id="Legend"></div>
    <div id="Chart"></div>
</div>
<div class="ui-layout-west">
    <div id="ConfigurationPane"></div>
</div>
​
<script>
  d3.csv("baseball-salaries-2015.csv", function (error, data) {
    var crime = new dex.csv(data);
​
    $(document).ready(function () {
      $('body').layout({
        applyDemoStyles: false,
        west: {
          size: 335
        },
        onresize: function () {
          chart.resize();
        }
      });
​
      var chart = dex.charts.d3.ClusteredForce({
        'parent': '#Chart',
        'csv': crime
      }).render();
​
      var legend = dex.charts.d3.Legend({
          'parent': '#Legend',
          eventSources: [chart]
        }
      );
​
      legend.render();
​
      chart.subscribe(legend, "mouseover", function(event) {
        chart.highlight(event.text);
      });
​
      chart.subscribe(legend, "mouseout", function(event) {
        chart.highlight();
      });
​
      var configPane = dex.ui.ConfigurationPane({
        "parent": "#ConfigurationPane",
        "csv": crime,
        "components": [legend, chart]
      }).render();
    });
​
  });
</script>
</body>
</html>
​
​
​
    