Cedar is a library for crafting, sharing and data visualizations powered by ArcGIS Services. Built with D3 and the Vega graphics grammar, Cedar extends them with bindings for making templated chart graphics that can be re-used with different datasets.
At the highest level, Cedar provides a simple chart API. Beyond that it is possible to create new and unique chart types that can be loaded and customized through interactions and styling depending on your needs.
Currently Esri Cedar is in development and should be thought of as a beta or preview.
Cedar charts are defined by the following ingredients:
- a
Specification
is a JSON document which includes, inputs
that declare the variables of the chart such as category or value to be summarizedtemplate
is a declarative syntax for chart design using the Vega visualization grammar.- a
dataset
- either
url
link to the ArcGIS Feature Layer; - ...or
values
can be an array of inline features mappings
bind the Feature Layer attributes to theSpecification inputs
- and
overrides
are specific modifications to theSpecification template
While Cedar provides a set of commonly used chart types including Bar
, Line
, Scatterplot
, and Pyramid
through use of the Vega grammar it is possible for developers to create unique and custom charts that can be used by other developers with new data sources.
When starting with Cedar, we suggest that you begin by exploring the simple charts using your own data services. As you experiment with the interactions with Maps and more complex interaction you can also customize these charts with new capabilities such as legends, size scaling or labeling. Finally, you can fork and create completely custom chart templates that you then provide for other developers to use through Cedar.
var barChart = new Cedar({"specification": "bar.json"});
var schools = {
"url": "http://maps2.dcgis.dc.gov/dcgis/rest/services/DCGIS_DATA/Education_WebMercator/MapServer/5",
"mappings":{
"group": { "field": "ZIP_CODE" },
"count": { "field": "TOTAL_STUD" }
}
};
barChart.dataset = schools;
barChart.show({
"elementId": "#bar"
});
and it is simple to add more charts re-using the same dataset
definition:
var pieChart = new Cedar({"specification": "pie.json", "dataset": schools});
pieChart.show({
"elementId": "#pie"
});
There are is a [simple user interface](http://dbouwman.github.com/cypress] and a few demos showing the basic concepts of Cedar.
Make Sure you have the Grunt CLI installed.
cd
into thecedar
folder- Install the dependencies with
npm install
- Install additional dependencies with
bower install
- Run
grunt docs
from the command line. This will start the web server locally at http://localhost:8001 and start watching the source files and running linting and testing commands. - Push your changes using
grunt docs:build
which pushes to yourorigin/gh-pages
- Create a pull request to
esridc/cedar/master
For transparency into the release cycle and in striving to maintain backward compatibility, Cedar is maintained under the Semantic Versioning guidelines and will adhere to these rules whenever possible.
Releases will be numbered with the following format:
<major>.<minor>.<patch>
And constructed with the following guidelines:
- Breaking backward compatibility bumps the major while resetting minor and patch
- New additions without breaking backward compatibility bumps the minor while resetting the patch
- Bug fixes and misc changes bumps only the patch
For more information on SemVer, please visit http://semver.org/.
Copyright 2014 Esri
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
A copy of the license is available in the repository's LICENSE file.
[](Esri Tags: Visualization) [](Esri Language: JavaScript)