Skip to content

Instantly share code, notes, and snippets.

@tomwayson

tomwayson/index.html

Last active August 29, 2015 14:21
Show Gist options
  • Save tomwayson/8ea426069e639886682c to your computer and use it in GitHub Desktop.
Save tomwayson/8ea426069e639886682c to your computer and use it in GitHub Desktop.
Download ZIP
Cedar AMD Example
Raw
index.html
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class="not-ie"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Esri Cedar</title>
<meta name="description" content="Esri Cedar">
<meta name="viewport" content="width=device-width">
<!--[if lt IE 9]>
<script src="//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv-printshiv.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
<!-- stylesheet -->
<link rel="stylesheet" href="http://esri.github.io/cedar/css/style.css">
</head>
<body>
<div class="container white">
<div class="row">
<h1>cedar.js <small>Lightweight charting for the ArcGIS platform</small></h1>
<div class="col-lg-12" id="chart">
</div>
</div>
<div style='clear:both;'></div>
</div>
<div class="container centered-text">
<p class="copyright">Cedar is a project from the <a href="http://dc.esri.com">Esri DC R&amp;D Center</a> </p>
</div>
</div>
<script>
// configure dojo loader to read d3, vega, and cedar as AMD packages
window.dojoConfig = {
async: true,
packages: [
{
name: 'd3',
location: 'http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5',
main: 'd3'
}, {
name: 'topojson',
location: 'https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19',
main: 'topojson'
}, {
name: 'vega',
location: 'http://trifacta.github.io/vega',
main: 'vega'
}, {
name: 'cedar',
// TODO: update to http://esri.github.io/cedar/js
// once UMD PR is merged
location: 'http://tomwayson.github.io/cedar/js',
main: 'cedar'
}
]
};
</script>
<script src="http://js.arcgis.com/3.13/"></script>
<script>
require(['cedar'], function(Cedar) {
var chart = new Cedar({
definition:'http://esri.github.io/cedar/data/definitions/home-scatter-chart.json'
});
chart.show({
elementId: '#chart',
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment