Skip to content

Instantly share code, notes, and snippets.

@ajturner

ajturner/index.html

Last active June 23, 2017 01:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ajturner/b86b5e04bd5685e8c9e85e251a9609e9 to your computer and use it in GitHub Desktop.
Save ajturner/b86b5e04bd5685e8c9e85e251a9609e9 to your computer and use it in GitHub Desktop.
Download ZIP
Stackexchange question: Dynamic Scatterplot with Cedar https://gis.stackexchange.com/questions/244080/dynamic-scatterplot-with-cedar
Raw
index.html
<html>
<head>
<meta charset=utf-8 />
<title>Map with Cedar Plots</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>
<script type="text/javascript" src="https://unpkg.com/arcgis-cedar@0.9.1/dist/cedar.min.js"></script>
<!-- Load Cedar -->
<!--script type="text/javascript" src="cedar.js"></script-->
<script>
window.dojoConfig = {
async: true,
packages: [
{
name: 'd3',
location: 'https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6',
main: 'd3.min'
}, {
name: 'vega',
location: 'https://cdnjs.cloudflare.com/ajax/libs/vega/2.6.1',
main: 'vega.min'
}, {
name: 'cedar',
location: 'https://unpkg.com/arcgis-cedar@0.7.0/dist',
main: 'cedar.min'
}
]
};
</script>
<link rel="stylesheet" href="https://js.arcgis.com/3.19/esri/css/esri.css">
<script src="https://js.arcgis.com/3.19/"></script>
</head>
<body>
<div class="row">
<button id="selectFieldsButton" data-dojo-type="dijit/form/Button">Select on Map</button>
<button id="clearSelectionButton" data-dojo-type="dijit/form/Button">Clear Map Selection</button><br>
<div id="map"></div>
<div class="col-lg-12" id="chart"></div>
</div>
<script>
require(["cedar", "esri/map", "esri/InfoTemplate", "esri/layers/FeatureLayer", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/renderers/SimpleRenderer", "esri/renderers/UniqueValueRenderer", "esri/Color", "esri/graphic", "esri/tasks/query", "esri/toolbars/draw", "dojo/dom", "dojo/on", "dojo/parser", "dojo/_base/array","dojo/domReady!"], function(Cedar, Map, InfoTemplate, FeatureLayer, SimpleFillSymbol, SimpleMarkerSymbol, SimpleLineSymbol, SimpleRenderer, UniqueValueRenderer, Color, Graphic, Query, Draw, dom, on, parser, arrayUtil) {
//create esri map
var map = new Map("map", {
center: [138.587234,-34.916636 ],
zoom: 13,
basemap: "dark-gray",
smartNavigation: false
});
// FeaturelLayer Popup
var infoTemplate = new InfoTemplate();
infoTemplate.setTitle("grid_id: ${GRID_ID}");
infoTemplate.setContent("<b>frequency:</b>${FREQUENCY}<br/>" +
"<b>Var_A: </b>${Var_A}<br/>" +
"<b>Var_B: </b>${Var_B}<br/>");
var featureLayer = new FeatureLayer("http://services1.arcgis.com/vHnIGBHHqDR6y0CR/ArcGIS/rest/services/Hex10000m/FeatureServer/0",{
mode: FeatureLayer.SNAPSHOT,
infoTemplate: infoTemplate,
outFields: ["*"]
});
// FeatureLayer Symbol
var selectSymbol = new SimpleFillSymbol( // This is for indivudal clicks on the map (not via the 'Select on Map' tool)
SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new Color([255,255,255,0.35]),
1
),
new Color([0,180,180,0.35])
);
featureLayer.setSelectionSymbol(selectSymbol);
map.addLayer(featureLayer);
// Create Chart
var chart = new Cedar({
"type":"scatter",
});
//create the dataset w/ mappings
var dataset = {
"url":"http://services1.arcgis.com/vHnIGBHHqDR6y0CR/ArcGIS/rest/services/Hex10000m/FeatureServer/0",
"query":{},
"mappings":{
"y": {"field":"Var_A","label":"Var_A"},
"x": {"field":"Var_B","label":"Var_B"},
"color":{"field":"FREQUENCY","label":"frequency"}, // If I use Var_A, it uses unique values and not the classes used for the symbology = massive list
"hoverColor": "#33FFFF",
"grid_id": {"field":"GRID_ID","label":"grid_id"}
}
};
chart.dataset = dataset;
chart.tooltip = {
"title": "Grid ID: {GRID_ID}", // currently undefined?
"content": "Frequency is {FREQUENCY}" // currently undefined?
}
chart.show({
elementId: "#chart"
});
//Chart event
chart.on('click', onClick);
function onClick(event,data) {
if (data) {
var selected = data[dataset.mappings.grid_id.field];
var selectQuery = new Query();
selectQuery.where = "GRID_ID = '" +selected+"'";
featureLayer.selectFeatures(selectQuery,
FeatureLayer.SELECTION_ADD);
}
}
window.chart = chart;
var selectedfeatures = null;
featureLayer.on("selection-complete", highlightGraph);
function highlightGraph(event) {
arrayUtil.forEach(event.features, function (feature) {
selectedfeatures = event.features;
id = feature.attributes.GRID_ID;
chart.select({key:"GRID_ID", value: id});
});
}
// FeatureLayer event
featureLayer.on("click", function(event) {
clearHighlights(function() {
highlightGraph({features: [event.graphic]})
});
});
function clearHighlights(cb) {
selectedfeatures = null
chart.update(cb); // remove previous selections
}
// Map event
var selectionToolbar;
map.on("load", initSelectToolbar);
function initSelectToolbar (event) {
selectionToolbar = new Draw(event.map);
var selectQuery = new Query();
on(selectionToolbar, "DrawEnd", function (geometry) {
selectionToolbar.deactivate();
selectQuery.geometry = geometry;
featureLayer.selectFeatures(selectQuery,
FeatureLayer.SELECTION_ADD);
});
}
map.on("extent-change", onExtentChanged);
function onExtentChanged(event) {
var extent = map.extent;
extent = JSON.stringify(extent);
chart.dataset.query.geometry = extent;
chart.update(function (){
if (selectedfeatures) {
arrayUtil.forEach(selectedfeatures, function (feature) {
id = feature.attributes.GRID_ID;
console.log("onExtentChanged", id)
chart.select({key:"GRID_ID", value: id});
});
}
});
}
// Handle selection
on(dom.byId("selectFieldsButton"), "click", function () {
selectionToolbar.activate(Draw.EXTENT);
});
on(dom.byId("clearSelectionButton"), "click", function () {
selectedfeatures = null;
featureLayer.clearSelection();
chart.clearSelection({});
chart.update();
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment