<html>
<head>
  <meta charset=utf-8 />
  <title>Cedar Quickstart</title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

  <!-- Load D3 and vega -->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vega/2.6.1/vega.min.js"></script>

  <!-- Load Cedar -->
  <script type="text/javascript" src="cedar.js"></script>

</head>
<body>

<div class="row">
  <div class="col-lg-12" id="chart"></div>
</div>

<script>

  var chart = new Cedar({
    "type":"scatter",
    "dataset":{
      "url":"https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "query":{},
      "mappings":{
        "x": {"field":"Number_of","label":"Student Enrollment (2008)"},
        "y": {"field":"F_of_teach","label":"Fraction of Teachers"},
        "color":{"field":"Type","label":"Facility Type"}
      }
    }
  });

  chart.tooltip = {
    "title": "{NAME}",
    "content": "{Number_of} students with a {Number_of} student Number_of."
  }

  chart.show({
    elementId: "#chart",
    autolabels: true
  });


</script>
</body>
</html>