Skip to content

Instantly share code, notes, and snippets.

@ajturner

ajturner/index.html

Created January 12, 2016 15:26
Show Gist options
  • Save ajturner/983ecc6f7d23eaf903f5 to your computer and use it in GitHub Desktop.
Save ajturner/983ecc6f7d23eaf903f5 to your computer and use it in GitHub Desktop.
Download ZIP
Example of Cedar for Dublin, Ohio
Raw
index.html
<html>
<head>
<meta charset=utf-8 />
<title>Dublin Pie</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<!-- Load D3 and vega -->
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script type="text/javascript" src="http://vega.github.io/vega/vega.min.js"></script>
<!-- Load Cedar -->
<script type="text/javascript" src="https://rawgit.com/Esri/cedar/develop/src/cedar.js"></script>
<style type="text/css">
#feature {
position: absolute;
top: 200px;
left: 700px;
}
</style>
</head>
<body>
<div class="row">
<div class="col-lg-6" id="chart"></div>
<div id="feature"></div>
</div>
<script>
var chart = new Cedar({"type":"pie"});
var dataset = {
"url":"http://mapping.dublin.oh.us/arcgis/rest/services/Recreation/MapServer/3",
"query": {
"groupByFieldsForStatistics": "Park_Type",
"outStatistics": [{
"statisticType": "sum",
"onStatisticField": "Fishing",
"outStatisticFieldName": "Fishing_SUM"
}]
},
"mappings":{
"label": {"field":"Park_Type","label":"Park Type"},
"y": {"field":"Fishing_SUM","label":"Fishing Holes"},
"radius": 270
}
};
chart.dataset = dataset;
chart.on('mouseover', function(e,d) {
console.log("hover", d)
document.getElementById("feature").innerHTML = d["Park_Type"] + "s have " + d["Fishing_SUM"] + " fishing facilities."
});
chart.show({
elementId: "#chart",
width: 600,
height: 600
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment