├── CONTRIBUTING.md
├── README.md
├── basic_add_data
    ├── README.md
    ├── index.html
    └── thumbnail.png
├── basic_simple_map
    ├── README.md
    ├── index.html
    └── thumbnail.png
├── basic_use_renderer
    ├── README.md
    ├── index.html
    └── thumbnail.png
├── color_classed
    ├── README.md
    ├── index.html
    └── thumbnail.png
├── color_focus
    ├── README.md
    ├── index.html
    └── thumbnail.png
├── color_simple
    ├── README.md
    ├── index.html
    └── thumbnail.png
├── color_stops
    ├── README.md
    ├── index.html
    └── thumbnail.png
├── enhance_click
    ├── index.html
    ├── readme.md
    └── thumbnail.png
├── enhance_infotemplate
    ├── index.html
    ├── readme.md
    └── thumbnail.png
├── enhance_infotemplate_function
    ├── index.html
    ├── readme.md
    └── thumbnail.png
├── enhance_legend
    ├── index.html
    ├── readme.md
    └── thumbnail.png
├── license.txt
├── size_line
    ├── readme.md
    └── thumbnail.png
├── size_real
    ├── readme.md
    └── thumbnail.png
├── size_simple
    ├── index.html
    ├── readme.md
    └── thumbnail.png
├── size_uniquevalue
    ├── index.html
    ├── readme.md
    └── thumbnail.png
├── thumbnail.png
├── unique_conversion
    ├── index.html
    ├── readme.md
    └── thumbnail.png
├── unique_simple
    ├── index.html
    ├── readme.md
    └── thumbnail.png
└── unique_simple_with_legend
    ├── index.html
    ├── readme.md
    └── thumbnail.png


/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | Esri welcomes contributions from anyone and everyone. Please see our [guidelines for contributing](https://github.com/esri/contributing).
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # visualization-js
 2 | 
 3 | A collection of samples showing how to use the ArcGIS API for JavaScript to create various visualizations.
 4 | 
 5 | To explore these samples, you can:
 6 | * Click any thumbnail below to see a live sample
 7 | * Click the title under a thumbnail to view code
 8 | 
 9 | ## Samples
10 | 
11 | ### Basic
12 | 
13 | |[![](basic_simple_map/thumbnail.png)](https://esri.github.io/visualization-js/basic_simple_map)|[![](basic_add_data/thumbnail.png)](https://esri.github.io/visualization-js/basic_add_data)|[![](basic_use_renderer/thumbnail.png)](https://esri.github.io/visualization-js/basic_use_renderer)|
14 | |:-:|:-:|:-:|
15 | |[Simple map](basic_simple_map)|[Add data](basic_add_data)|[Use renderer (simple)](basic_use_renderer)|
16 | 
17 | ### Show Unique Values
18 | 
19 | |[![](unique_simple/thumbnail.png)](https://esri.github.io/visualization-js/unique_simple)|[![](unique_simple_with_legend/thumbnail.png)](https://esri.github.io/visualization-js/unique_simple_with_legend)|[![](unique_conversion/thumbnail.png)](https://esri.github.io/visualization-js/unique_conversion)|
20 | |:-:|:-:|:-:|
21 | |[Unique value renderer](unique_simple)|[With legend](unique_simple_with_legend)|[With function conversion](unique_conversion)|
22 | 
23 | ### Enhancement Options
24 | 
25 | |[![](enhance_infotemplate/thumbnail.png)](https://esri.github.io/visualization-js/enhance_infotemplate)|[![](enhance_infotemplate_function/thumbnail.png)](https://esri.github.io/visualization-js/enhance_infotemplate_function)|[![](enhance_legend/thumbnail.png)](https://esri.github.io/visualization-js/enhance_legend)|
26 | |:-:|:-:|:-:|
27 | |[InfoTemplate (Pop-up)](enhance_infotemplate)|[InfoTemplate (Pop-up) with custom function](enhance_infotemplate_function)|[Legend](enhance_legend)|
28 | |[![](enhance_click/thumbnail.png)](https://esri.github.io/visualization-js/enhance_click)|||
29 | |[Trigger actions on click](enhance_click)|||
30 | 
31 | ### Show Data by Color
32 | 
33 | |[![](color_simple/thumbnail.png)](https://esri.github.io/visualization-js/color_simple)|[![](color_focus/thumbnail.png)](https://esri.github.io/visualization-js/color_focus)|[![](color_stops/thumbnail.png)](https://esri.github.io/visualization-js/color_stops)|
34 | |:-:|:-:|:-:|
35 | |[Show data values by color](color_simple)|[Focus on a narrower range](color_focus)|[Use stops](color_stops)|
36 | |[![](color_classed/thumbnail.png)](https://esri.github.io/visualization-js/color_classed)|||
37 | |[Classify data](color_classed)|||
38 | 
39 | ### Show Data by Size
40 | 
41 | |[![](size_simple/thumbnail.png)](https://esri.github.io/visualization-js/size_simple)|[![](size_real/thumbnail.png)](https://developers.arcgis.com/javascript/samples/renderer_proportional_points/)|[![](size_line/thumbnail.png)](https://developers.arcgis.com/javascript/samples/renderer_proportional_lines/)|
42 | |:-:|:-:|:-:|
43 | |[Show data values by size](size_simple)|[Show data values in real-world unit](size_real)|[Show line data by size](size_line)|
44 | |[![](size_uniquevalue/thumbnail.png)](https://esri.github.io/visualization-js/size_uniquevalue)|||
45 | |[Show data values by size amd unique value](size_uniquevalue)|||
46 | 
47 | ## Resources
48 | 
49 | * [ArcGIS API for JavaScript](https://developers.arcgis.com/javascript/)
50 | * [ArcGIS Blog](http://blogs.esri.com/esri/arcgis/)
51 | * [twitter@esri](http://twitter.com/esri)
52 | 
53 | ## Issues
54 | 
55 | Find a bug or want to request a new feature?  Please let us know by submitting an issue.
56 | 
57 | ## Contributing
58 | 
59 | Esri welcomes contributions from anyone and everyone. Please see our [guidelines for contributing](https://github.com/esri/contributing).
60 | 
61 | ## Licensing
62 | Copyright 2014 Esri
63 | 
64 | Licensed under the Apache License, Version 2.0 (the "License");
65 | you may not use this file except in compliance with the License.
66 | You may obtain a copy of the License at
67 | 
68 |    http://www.apache.org/licenses/LICENSE-2.0
69 | 
70 | Unless required by applicable law or agreed to in writing, software
71 | distributed under the License is distributed on an "AS IS" BASIS,
72 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
73 | See the License for the specific language governing permissions and
74 | limitations under the License.
75 | 
76 | A copy of the license is available in the repository's [license.txt](license.txt) file.
77 | 
78 | [](Esri Language: JavaScript)​
79 | 


--------------------------------------------------------------------------------
/basic_add_data/README.md:
--------------------------------------------------------------------------------
1 | # basic_add_data
2 | 
3 | [View Code](index.html) | [Live Sample](https://esri.github.io/visualization-js/basic_add_data)
4 | 
5 | Adding a feature layer to a map.
6 | 
7 | [![](thumbnail.png)](https://esri.github.io/visualization-js/basic_add_data)
8 | 


--------------------------------------------------------------------------------
/basic_add_data/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 |     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
 6 |     <title>Data Visualization - Add Data</title>
 7 |     <link rel="stylesheet" href="//js.arcgis.com/3.11/esri/css/esri.css">
 8 |     <style>
 9 |       html, body, #map {
10 |         height: 100%;
11 |         margin: 0;
12 |       }
13 |     </style>
14 |     <script src="//js.arcgis.com/3.11/"></script>
15 |     <script>
16 |       require(["esri/map", "esri/layers/FeatureLayer", "dojo/domReady!"], function(Map, FeatureLayer) {
17 |         var map = new Map("map", {
18 |           basemap: "gray",
19 |           center: [-100, 40],
20 |           zoom: 5
21 |         });
22 |         
23 |         var layer = new FeatureLayer("//services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/NationalParkStats2013/FeatureServer/0")
24 |         map.addLayer(layer);
25 |       });
26 |     </script>
27 |   </head>
28 |   <body>
29 |     <div id="map"></div>
30 |   </body>
31 | </html>
32 | 


--------------------------------------------------------------------------------
/basic_add_data/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/visualization-js/65f6462a33fc0a0b3542f84626ba1d6bc46c5b90/basic_add_data/thumbnail.png


--------------------------------------------------------------------------------
/basic_simple_map/README.md:
--------------------------------------------------------------------------------
1 | # basic_simple_map
2 | 
3 | [View Code](index.html) | [Live Sample](https://esri.github.io/visualization-js/basic_simple_map)
4 | 
5 | Creating a simple map centered at a specific location.
6 | 
7 | [![](thumbnail.png)](https://esri.github.io/visualization-js/basic_simple_map)
8 | 


--------------------------------------------------------------------------------
/basic_simple_map/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 |     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
 6 |     <title>Data Visualization - Simple Map</title>
 7 |     <link rel="stylesheet" href="//js.arcgis.com/3.11/esri/css/esri.css">
 8 |     <style>
 9 |       html, body, #map {
10 |         height: 100%;
11 |         margin: 0;
12 |       }
13 |     </style>
14 |     <script src="//js.arcgis.com/3.11/"></script>
15 |     <script>
16 |       require(["esri/map", "dojo/domReady!"], function(Map) {
17 |         var map = new Map("map", {
18 |           basemap: "gray",
19 |           center: [-100, 40],
20 |           zoom: 5
21 |         });
22 |       });
23 |     </script>
24 |   </head>
25 |   <body>
26 |     <div id="map"></div>
27 |   </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/basic_simple_map/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/visualization-js/65f6462a33fc0a0b3542f84626ba1d6bc46c5b90/basic_simple_map/thumbnail.png


--------------------------------------------------------------------------------
/basic_use_renderer/README.md:
--------------------------------------------------------------------------------
1 | # basic_use_renderer
2 | 
3 | [View Code](index.html) | [Live Sample](https://esri.github.io/visualization-js/basic_use_renderer)
4 | 
5 | Applying a simple renderer on a feature layer.
6 | 
7 | [![](thumbnail.png)](https://esri.github.io/visualization-js/basic_use_renderer)
8 | 


--------------------------------------------------------------------------------
/basic_use_renderer/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 |     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
 6 |     <title>Data Visualization - Use Renderer</title>
 7 |     <link rel="stylesheet" href="//js.arcgis.com/3.11/esri/css/esri.css">
 8 |     <style>
 9 |       html, body, #map {
10 |         height: 100%;
11 |         margin: 0;
12 |       }
13 |     </style>
14 |     <script src="//js.arcgis.com/3.11/"></script>
15 |     <script>
16 |       require([
17 |         "esri/map",
18 |         "esri/layers/FeatureLayer",
19 |         "esri/renderers/SimpleRenderer",
20 |         "esri/symbols/SimpleMarkerSymbol",
21 |         "esri/Color",
22 |         "dojo/domReady!"
23 |       ], function(Map, FeatureLayer, SimpleRenderer, SimpleMarkerSymbol, Color) {
24 |         var map = new Map("map", {
25 |           basemap: "gray",
26 |           center: [-100, 40],
27 |           zoom: 5
28 |         });
29 |         
30 |         var layer = new FeatureLayer("//services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/NationalParkStats2013/FeatureServer/0");
31 |         
32 |         var symbol = new SimpleMarkerSymbol();
33 |         symbol.setColor(new Color("#ffa500"));
34 |         var renderer = new SimpleRenderer(symbol);
35 |         layer.setRenderer(renderer);
36 |         
37 |         map.addLayer(layer);
38 |       });
39 |     </script>
40 |   </head>
41 |   <body>
42 |     <div id="map"></div>
43 |   </body>
44 | </html>
45 | 


--------------------------------------------------------------------------------
/basic_use_renderer/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/visualization-js/65f6462a33fc0a0b3542f84626ba1d6bc46c5b90/basic_use_renderer/thumbnail.png


--------------------------------------------------------------------------------
/color_classed/README.md:
--------------------------------------------------------------------------------
1 | # color_classed
2 | 
3 | [View Code](index.html) | [Live Sample](https://esri.github.io/visualization-js/color_classed)
4 | 
5 | Show data values by color with classification.
6 | 
7 | [![](thumbnail.png)](https://esri.github.io/visualization-js/color_classed)
8 | 


--------------------------------------------------------------------------------
/color_classed/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 |     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
 6 |     <title>Color - Classed</title>
 7 |     <link rel="stylesheet" href="//js.arcgis.com/3.11/esri/css/esri.css">
 8 |     <style>
 9 |       html, body, #map {
10 |         height: 100%;
11 |         margin: 0;
12 |       }
13 |       #info {
14 |         position: absolute;
15 |         left: 0;
16 |         bottom: 0;
17 |         padding: 10px;
18 |         background-color: #fff;
19 |         font-family: Segoe UI;
20 |       }
21 |     </style>
22 |     <script src="//js.arcgis.com/3.11/"></script>
23 |     <script>
24 |       require([
25 |         "esri/map",
26 |         "esri/layers/FeatureLayer",
27 |         "esri/symbols/SimpleFillSymbol",
28 |         "esri/symbols/SimpleLineSymbol",
29 |         "esri/renderers/SimpleRenderer",
30 |         "esri/renderers/ClassBreaksRenderer",
31 |         "esri/Color",
32 |         "esri/dijit/Legend",
33 |         "dojo/domReady!"
34 |       ], function(Map, FeatureLayer, SimpleFillSymbol, SimpleLineSymbol, SimpleRenderer, ClassBreaksRenderer, Color, Legend) {
35 |         var map = new Map("map", {
36 |           basemap: "topo",
37 |           center: [-100, 40],
38 |           zoom: 5
39 |         });
40 |         
41 |         var layer = new FeatureLayer("http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/CHSI2009USCounties/FeatureServer/0");
42 |         layer.setOpacity(0.8);
43 |         map.addLayer(layer);
44 | 
45 |         var outline = new SimpleLineSymbol();
46 |         outline.setColor(new Color("#999999"));
47 |         outline.setWidth(0.5);
48 | 
49 |         var renderer = new ClassBreaksRenderer(null, "Percent_Uninsured");
50 |         renderer.addBreak({
51 |           label: "< 2.5% below national average",
52 |           minValue: 6,
53 |           maxValue: 12.9,
54 |           symbol: new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, outline, new Color("#eecec9"))
55 |         });
56 |         renderer.addBreak({
57 |           label: "within 2.5% above/below national average",
58 |           minValue: 12.9,
59 |           maxValue: 17.9,
60 |           symbol: new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, outline, new Color("#d588b9"))
61 |         });
62 |         renderer.addBreak({
63 |           label: "> 2.5% above national average",
64 |           minValue: 17.9,
65 |           maxValue: 42,
66 |           symbol: new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, outline, new Color("#a14e96"))
67 |         });
68 |         layer.setRenderer(renderer);
69 |         
70 |         var legend = new Legend({
71 |           map: map,
72 |           layerInfos: [{
73 |             layer: layer
74 |           }]
75 |         }, "legend");
76 |         legend.startup();
77 |       });
78 |     </script>
79 |   </head>
80 |   <body>
81 |     <div id="map"></div>
82 |     <div id="info">
83 |       <div id="legend"></div>
84 |     </div>
85 |   </body>
86 | </html>


--------------------------------------------------------------------------------
/color_classed/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/visualization-js/65f6462a33fc0a0b3542f84626ba1d6bc46c5b90/color_classed/thumbnail.png


--------------------------------------------------------------------------------
/color_focus/README.md:
--------------------------------------------------------------------------------
1 | # color_focus
2 | 
3 | [View Code](index.html) | [Live Sample](https://esri.github.io/visualization-js/color_focus)
4 | 
5 | Show data values by color with a focused range.
6 | 
7 | [![](thumbnail.png)](https://esri.github.io/visualization-js/color_focus)
8 | 


--------------------------------------------------------------------------------
/color_focus/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 |     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
 6 |     <title>Color - Focus</title>
 7 |     <link rel="stylesheet" href="//js.arcgis.com/3.11/esri/css/esri.css">
 8 |     <style>
 9 |       html, body, #map {
10 |         height: 100%;
11 |         margin: 0;
12 |       }
13 |       #info {
14 |         position: absolute;
15 |         left: 0;
16 |         bottom: 0;
17 |         padding: 10px;
18 |         background-color: #fff;
19 |         font-family: Segoe UI;
20 |       }
21 |     </style>
22 |     <script src="//js.arcgis.com/3.11/"></script>
23 |     <script>
24 |       require([
25 |         "esri/map",
26 |         "esri/layers/FeatureLayer",
27 |         "esri/symbols/SimpleFillSymbol",
28 |         "esri/symbols/SimpleLineSymbol",
29 |         "esri/renderers/SimpleRenderer",
30 |         "esri/Color",
31 |         "esri/dijit/Legend",
32 |         "dojo/domReady!"
33 |       ], function(Map, FeatureLayer, SimpleFillSymbol, SimpleLineSymbol, SimpleRenderer, Color, Legend) {
34 |         var map = new Map("map", {
35 |           basemap: "topo",
36 |           center: [-100, 40],
37 |           zoom: 5
38 |         });
39 |         
40 |         var layer = new FeatureLayer("http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/CHSI2009USCounties/FeatureServer/0");
41 |         layer.setOpacity(0.8);
42 |         map.addLayer(layer);
43 |         
44 |         var symbol = new SimpleFillSymbol();
45 |         var outline = new SimpleLineSymbol();
46 |         outline.setColor(new Color("#999999"));
47 |         outline.setWidth(0.5);
48 |         symbol.setOutline(outline);
49 |         
50 |         var renderer = new SimpleRenderer(symbol);
51 |         renderer.setColorInfo({
52 |           field: "Percent_Uninsured",
53 |           maxDataValue: 25,
54 |           minDataValue: 5,
55 |           colors: [new Color("#fffcd4"), new Color("#e0b2c1"), new Color("#c168ad"), new Color("#7b3578"), new Color("#350242")]
56 |         });
57 |         layer.setRenderer(renderer);
58 |         
59 |         var legend = new Legend({
60 |           map: map,
61 |           layerInfos: [{
62 |             layer: layer
63 |           }]
64 |         }, "legend");
65 |         legend.startup();
66 |       });
67 |     </script>
68 |   </head>
69 |   <body>
70 |     <div id="map"></div>
71 |     <div id="info">
72 |       <div id="legend"></div>
73 |     </div>
74 |   </body>
75 | </html>


--------------------------------------------------------------------------------
/color_focus/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/visualization-js/65f6462a33fc0a0b3542f84626ba1d6bc46c5b90/color_focus/thumbnail.png


--------------------------------------------------------------------------------
/color_simple/README.md:
--------------------------------------------------------------------------------
1 | # color_simple
2 | 
3 | [View Code](index.html) | [Live Sample](https://esri.github.io/visualization-js/color_simple)
4 | 
5 | Show data values by color - starter sample.
6 | 
7 | [![](thumbnail.png)](https://esri.github.io/visualization-js/color_simple)
8 | 


--------------------------------------------------------------------------------
/color_simple/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 |     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
 6 |     <title>Color - Simple</title>
 7 |     <link rel="stylesheet" href="//js.arcgis.com/3.11/esri/css/esri.css">
 8 |     <style>
 9 |       html, body, #map {
10 |         height: 100%;
11 |         margin: 0;
12 |       }
13 |       #info {
14 |         position: absolute;
15 |         left: 0;
16 |         bottom: 0;
17 |         padding: 10px;
18 |         background-color: #fff;
19 |         font-family: Segoe UI;
20 |       }
21 |     </style>
22 |     <script src="//js.arcgis.com/3.11/"></script>
23 |     <script>
24 |       require([
25 |         "esri/map",
26 |         "esri/layers/FeatureLayer",
27 |         "esri/symbols/SimpleFillSymbol",
28 |         "esri/symbols/SimpleLineSymbol",
29 |         "esri/renderers/SimpleRenderer",
30 |         "esri/Color",
31 |         "esri/dijit/Legend",
32 |         "dojo/domReady!"
33 |       ], function(Map, FeatureLayer, SimpleFillSymbol, SimpleLineSymbol, SimpleRenderer, Color, Legend) {
34 |         var map = new Map("map", {
35 |           basemap: "topo",
36 |           center: [-100, 40],
37 |           zoom: 5
38 |         });
39 |         
40 |         var layer = new FeatureLayer("http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/CHSI2009USCounties/FeatureServer/0");
41 |         layer.setOpacity(0.8);
42 |         map.addLayer(layer);
43 |         
44 |         var symbol = new SimpleFillSymbol();
45 |         var outline = new SimpleLineSymbol();
46 |         outline.setColor(new Color("#999999"));
47 |         outline.setWidth(0.5);
48 |         symbol.setOutline(outline);
49 |         
50 |         var renderer = new SimpleRenderer(symbol);
51 |         renderer.setColorInfo({
52 |           field: "Percent_Uninsured",
53 |           maxDataValue: 42,
54 |           minDataValue: 6,
55 |           colors: [new Color("#fffcd4"), new Color("#e0b2c1"), new Color("#c168ad"), new Color("#7b3578"), new Color("#350242")]
56 |         });
57 |         layer.setRenderer(renderer);
58 |         
59 |         var legend = new Legend({
60 |           map: map,
61 |           layerInfos: [{
62 |             layer: layer
63 |           }]
64 |         }, "legend");
65 |         legend.startup();
66 |       });
67 |     </script>
68 |   </head>
69 |   <body>
70 |     <div id="map"></div>
71 |     <div id="info">
72 |       <div id="legend"></div>
73 |     </div>
74 |   </body>
75 | </html>


--------------------------------------------------------------------------------
/color_simple/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/visualization-js/65f6462a33fc0a0b3542f84626ba1d6bc46c5b90/color_simple/thumbnail.png


--------------------------------------------------------------------------------
/color_stops/README.md:
--------------------------------------------------------------------------------
1 | # color_stops
2 | 
3 | [View Code](index.html) | [Live Sample](https://esri.github.io/visualization-js/color_stops)
4 | 
5 | Show data values by color with stops.
6 | 
7 | [![](thumbnail.png)](https://esri.github.io/visualization-js/color_stops)
8 | 


--------------------------------------------------------------------------------
/color_stops/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 |     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
 6 |     <title>Color - Stops</title>
 7 |     <link rel="stylesheet" href="//js.arcgis.com/3.11/esri/css/esri.css">
 8 |     <style>
 9 |       html, body, #map {
10 |         height: 100%;
11 |         margin: 0;
12 |       }
13 |       #info {
14 |         position: absolute;
15 |         left: 0;
16 |         bottom: 0;
17 |         padding: 10px;
18 |         background-color: #fff;
19 |         font-family: Segoe UI;
20 |       }
21 |     </style>
22 |     <script src="//js.arcgis.com/3.11/"></script>
23 |     <script>
24 |       require([
25 |         "esri/map",
26 |         "esri/layers/FeatureLayer",
27 |         "esri/symbols/SimpleFillSymbol",
28 |         "esri/symbols/SimpleLineSymbol",
29 |         "esri/renderers/SimpleRenderer",
30 |         "esri/Color",
31 |         "esri/dijit/Legend",
32 |         "dojo/domReady!"
33 |       ], function(Map, FeatureLayer, SimpleFillSymbol, SimpleLineSymbol, SimpleRenderer, Color, Legend) {
34 |         var map = new Map("map", {
35 |           basemap: "topo",
36 |           center: [-100, 40],
37 |           zoom: 5
38 |         });
39 |         
40 |         var layer = new FeatureLayer("http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/CHSI2009USCounties/FeatureServer/0");
41 |         layer.setOpacity(0.8);
42 |         map.addLayer(layer);
43 |         
44 |         var symbol = new SimpleFillSymbol();
45 |         var outline = new SimpleLineSymbol();
46 |         outline.setColor(new Color("#999999"));
47 |         outline.setWidth(0.5);
48 |         symbol.setOutline(outline);
49 |         
50 |         var renderer = new SimpleRenderer(symbol);
51 |         renderer.setColorInfo({
52 |           field: "Percent_Uninsured",
53 |           stops: [{
54 |             value: 6,
55 |             color: new Color("#570959")
56 |           }, {
57 |             value: 15.4,
58 |             color: new Color("#ffffff")
59 |           }, {
60 |             value: 42,
61 |             color: new Color("#a53217")
62 |           }]
63 |         });
64 |         layer.setRenderer(renderer);
65 |         
66 |         var legend = new Legend({
67 |           map: map,
68 |           layerInfos: [{
69 |             layer: layer
70 |           }]
71 |         }, "legend");
72 |         legend.startup();
73 |       });
74 |     </script>
75 |   </head>
76 |   <body>
77 |     <div id="map"></div>
78 |     <div id="info">
79 |       <div id="legend"></div>
80 |     </div>
81 |   </body>
82 | </html>


--------------------------------------------------------------------------------
/color_stops/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/visualization-js/65f6462a33fc0a0b3542f84626ba1d6bc46c5b90/color_stops/thumbnail.png


--------------------------------------------------------------------------------
/enhance_click/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 |     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
 6 |     <title>Data Visualization - Enhancement: Click Graphic</title>
 7 |     <link rel="stylesheet" href="//js.arcgis.com/3.10/js/esri/css/esri.css">
 8 |     <style>
 9 |       html, body, #map {
10 |         height: 100%;
11 |         margin: 0;
12 |       }
13 |       #info {
14 |         position: absolute;
15 |         right: 0;
16 |         top: 0;
17 |         padding: 10px;
18 |         background-color: #fff;
19 |         max-width: 200px;
20 |         font: 12px Segoe UI;
21 |       }
22 |     </style>
23 |     <script src="//js.arcgis.com/3.10/"></script>
24 |     <script>
25 |       require([
26 |         "esri/map",
27 |         "esri/layers/FeatureLayer",
28 |         "esri/tasks/query",
29 |         "esri/symbols/SimpleMarkerSymbol",
30 |         "esri/Color",
31 |         "dojo/domReady!"
32 |       ], function(Map, FeatureLayer, Query, SimpleMarkerSymbol, Color) {
33 |         var map = new Map("map", {
34 |           basemap: "gray",
35 |           center: [-100, 40],
36 |           zoom: 5
37 |         });
38 |         
39 |         var layer = new FeatureLayer("//services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/NationalParkStats2013/FeatureServer/0", {
40 |           outFields: ["Name", "Visitor"]
41 |         });
42 |         map.addLayer(layer);
43 |         
44 |         var selectedFeatures = [];
45 |         
46 |         layer.on("click", function(evt){
47 |           //for features selected previously, set symbol to default
48 |           for (var i=0; i<selectedFeatures.length; i++) {
49 |             selectedFeatures[i].setSymbol(layer.renderer.symbol);
50 |           };
51 |           selectedFeatures = [];
52 |         
53 |           //query the layer with 100-mile buffer
54 |           var query = new Query();
55 |           query.geometry = evt.graphic.geometry;
56 |           query.distance = 200;
57 |           query.units = "miles";
58 |           
59 |           //start query
60 |           layer.queryFeatures(query).then(function(featureSet){
61 |             var graphics = featureSet.features;
62 |             var info = "NPS sites within 200 miles near <b>" + evt.graphic.attributes.Name + "</b>:<hr><ul>";
63 |             
64 |             for (var i=0; i<graphics.length; i++) {
65 |               graphics[i].setSymbol(new SimpleMarkerSymbol());
66 |               selectedFeatures.push(graphics[i]);
67 |               if (graphics[i].attributes.Name === evt.graphic.attributes.Name) {
68 |                 graphics[i].symbol.setColor(new Color("#000"));
69 |               } else {
70 |                 graphics[i].symbol.setColor(new Color("#f00"));
71 |                 info += "<li>" + graphics[i].attributes.Name + "</li>";
72 |               };
73 |             };
74 |             layer.redraw();
75 |             
76 |             info += "</ul>";
77 |             document.getElementById("info").innerHTML = info;
78 |           });
79 |         });
80 |       });
81 |     </script>
82 |   </head>
83 |   <body>
84 |     <div id="map"></div>
85 |     <div id="info">Click an NPS site on map to view nearby sites within 200 miles</div>
86 |   </body>
87 | </html>


--------------------------------------------------------------------------------
/enhance_click/readme.md:
--------------------------------------------------------------------------------
1 | # enhance_click
2 | 
3 | [View Code](index.html) | [Live Sample](https://esri.github.io/visualization-js/enhance_click)
4 | 
5 | Trigger event by clicking and update renderer.
6 | 
7 | [![](thumbnail.png)](https://esri.github.io/visualization-js/enhance_click)
8 | 


--------------------------------------------------------------------------------
/enhance_click/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/visualization-js/65f6462a33fc0a0b3542f84626ba1d6bc46c5b90/enhance_click/thumbnail.png


--------------------------------------------------------------------------------
/enhance_infotemplate/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 |     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
 6 |     <title>Data Visualization - Enhancement: InfoTemplate</title>
 7 |     <link rel="stylesheet" href="//js.arcgis.com/3.11/esri/css/esri.css">
 8 |     <style>
 9 |       html, body, #map {
10 |         height: 100%;
11 |         margin: 0;
12 |       }
13 |     </style>
14 |     <script src="//js.arcgis.com/3.11/"></script>
15 |     <script>
16 |       require([
17 |         "esri/map",
18 |         "esri/InfoTemplate",
19 |         "esri/layers/FeatureLayer",
20 |         "esri/renderers/UniqueValueRenderer",
21 |         "esri/symbols/SimpleMarkerSymbol",
22 |         "esri/Color",
23 |         "dojo/domReady!"
24 |       ], function(Map, InfoTemplate, FeatureLayer, UniqueValueRenderer, SimpleMarkerSymbol, Color) {
25 |         var map = new Map("map", {
26 |           basemap: "gray",
27 |           center: [-100, 40],
28 |           zoom: 5
29 |         });
30 |         
31 |         var infoTemplate = new InfoTemplate("${Name}", "${Type}<br>${Visitor} visits in 2013");
32 |         var layer = new FeatureLayer("//services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/NationalParkStats2013/FeatureServer/0", {
33 |           outFields: ["Name", "Type", "Visitor"],
34 |           infoTemplate: infoTemplate
35 |         });
36 | 
37 |         var renderer = new UniqueValueRenderer(null, "Type");
38 |         
39 |         var symbol1 = new SimpleMarkerSymbol();
40 |         symbol1.setColor(new Color("#ed5151"));
41 |         renderer.addValue("National Park", symbol1);
42 |         
43 |         var symbol2 = new SimpleMarkerSymbol();
44 |         symbol2.setColor(new Color("#149ece"));
45 |         renderer.addValue("National Monument", symbol2);
46 | 
47 |         layer.setRenderer(renderer);
48 |         
49 |         map.addLayer(layer);
50 |       });
51 |     </script>
52 |   </head>
53 |   <body>
54 |     <div id="map"></div>
55 |   </body>
56 | </html>
57 | 


--------------------------------------------------------------------------------
/enhance_infotemplate/readme.md:
--------------------------------------------------------------------------------
1 | # enhance_infotemplate
2 | 
3 | [View Code](index.html) | [Live Sample](https://esri.github.io/visualization-js/enhance_infotemplate)
4 | 
5 | Use InfoTemplate to display pop-up.
6 | 
7 | [![](thumbnail.png)](https://esri.github.io/visualization-js/enhance_infotemplate)
8 | 


--------------------------------------------------------------------------------
/enhance_infotemplate/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/visualization-js/65f6462a33fc0a0b3542f84626ba1d6bc46c5b90/enhance_infotemplate/thumbnail.png


--------------------------------------------------------------------------------
/enhance_infotemplate_function/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 |     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
 6 |     <title>Data Visualization - Enhancement: InfoTemplate with Function</title>
 7 |     <link rel="stylesheet" href="//js.arcgis.com/3.11/esri/css/esri.css">
 8 |     <style>
 9 |       html, body, #map {
10 |         height: 100%;
11 |         margin: 0;
12 |       }
13 |     </style>
14 |     <script src="//js.arcgis.com/3.11/"></script>
15 |     <script>
16 |       require([
17 |         "esri/map",
18 |         "esri/InfoTemplate",
19 |         "esri/layers/FeatureLayer",
20 |         "esri/renderers/UniqueValueRenderer",
21 |         "esri/symbols/SimpleMarkerSymbol",
22 |         "esri/Color",
23 |         "dojo/domReady!"
24 |       ], function(Map, InfoTemplate, FeatureLayer, UniqueValueRenderer, SimpleMarkerSymbol, Color) {
25 |         var map = new Map("map", {
26 |           basemap: "gray",
27 |           center: [-100, 40],
28 |           zoom: 5
29 |         });
30 |         
31 |         var infoTemplate = new InfoTemplate("${Name}", function(graphic){
32 |           var dailyVisit = graphic.attributes.Visitor/365;
33 |           dailyVisit = Math.round(dailyVisit);
34 |           return dailyVisit + " visits per day in 2013";
35 |         });
36 |         var layer = new FeatureLayer("//services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/NationalParkStats2013/FeatureServer/0", {
37 |           outFields: ["Name", "Type", "Visitor"],
38 |           infoTemplate: infoTemplate
39 |         });
40 | 
41 |         var renderer = new UniqueValueRenderer(null, "Type");
42 |         
43 |         var symbol1 = new SimpleMarkerSymbol();
44 |         symbol1.setColor(new Color("#ed5151"));
45 |         renderer.addValue("National Park", symbol1);
46 |         
47 |         var symbol2 = new SimpleMarkerSymbol();
48 |         symbol2.setColor(new Color("#149ece"));
49 |         renderer.addValue("National Monument", symbol2);
50 | 
51 |         layer.setRenderer(renderer);
52 |         
53 |         map.addLayer(layer);
54 |       });
55 |     </script>
56 |   </head>
57 |   <body>
58 |     <div id="map"></div>
59 |   </body>
60 | </html>
61 | 


--------------------------------------------------------------------------------
/enhance_infotemplate_function/readme.md:
--------------------------------------------------------------------------------
1 | # enhance_infotemplate_function
2 | 
3 | [View Code](index.html) | [Live Sample](https://esri.github.io/visualization-js/enhance_infotemplate_function)
4 | 
5 | Use InfoTemplate to display pop-up with custom content.
6 | 
7 | [![](thumbnail.png)](https://esri.github.io/visualization-js/enhance_infotemplate_function)
8 | 


--------------------------------------------------------------------------------
/enhance_infotemplate_function/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/visualization-js/65f6462a33fc0a0b3542f84626ba1d6bc46c5b90/enhance_infotemplate_function/thumbnail.png


--------------------------------------------------------------------------------
/enhance_legend/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 |     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
 6 |     <title>Data Visualization - Enhancement: Legend</title>
 7 |     <link rel="stylesheet" href="//js.arcgis.com/3.11/esri/css/esri.css">
 8 |     <style>
 9 |       html, body, #map {
10 |         height: 100%;
11 |         margin: 0;
12 |       }
13 |       #info {
14 |         position: absolute;
15 |         left: 0;
16 |         bottom: 0;
17 |         padding: 10px;
18 |         background-color: #fff;
19 |       }
20 |     </style>
21 |     <script src="//js.arcgis.com/3.11/"></script>
22 |     <script>
23 |       require([
24 |         "esri/map",
25 |         "esri/layers/FeatureLayer",
26 |         "esri/renderers/UniqueValueRenderer",
27 |         "esri/symbols/SimpleMarkerSymbol",
28 |         "esri/Color",
29 |         "esri/dijit/Legend",
30 |         "dojo/domReady!"
31 |       ], function(Map, FeatureLayer, UniqueValueRenderer, SimpleMarkerSymbol, Color, Legend) {
32 |         var map = new Map("map", {
33 |           basemap: "gray",
34 |           center: [-100, 40],
35 |           zoom: 5
36 |         });
37 |         
38 |         var layer = new FeatureLayer("//services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/NationalParkStats2013/FeatureServer/0");
39 |         
40 |         var renderer = new UniqueValueRenderer(null, "Type");
41 |         
42 |         var symbol1 = new SimpleMarkerSymbol();
43 |         symbol1.setColor(new Color("#ed5151"));
44 |         renderer.addValue("National Park", symbol1);
45 |         
46 |         var symbol2 = new SimpleMarkerSymbol();
47 |         symbol2.setColor(new Color("#149ece"));
48 |         renderer.addValue("National Monument", symbol2);
49 | 
50 |         layer.setRenderer(renderer);
51 |         
52 |         map.addLayer(layer);
53 |         
54 |         var legend = new Legend({
55 |           map: map,
56 |           layerInfos: [{
57 |             layer: layer,
58 |             title: "National Park Statistics 2013"
59 |           }]
60 |         }, "legend");
61 |         legend.startup();
62 |       });
63 |     </script>
64 |   </head>
65 |   <body>
66 |     <div id="map"></div>
67 |     <div id="info">
68 |       <div id="legend"></div>
69 |     </div>
70 |   </body>
71 | </html>
72 | 


--------------------------------------------------------------------------------
/enhance_legend/readme.md:
--------------------------------------------------------------------------------
1 | # enhance_legend
2 | 
3 | [View Code](index.html) | [Live Sample](https://esri.github.io/visualization-js/enhance_legend)
4 | 
5 | Add legend to map and use custom layer title.
6 | 
7 | [![](thumbnail.png)]((https://esri.github.io/visualization-js/enhance_click))
8 | 


--------------------------------------------------------------------------------
/enhance_legend/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/visualization-js/65f6462a33fc0a0b3542f84626ba1d6bc46c5b90/enhance_legend/thumbnail.png


--------------------------------------------------------------------------------
/license.txt:
--------------------------------------------------------------------------------
  1 | Apache License - 2.0
  2 | 
  3 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
  4 | 
  5 | 1. Definitions.
  6 | 
  7 | "License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document.
  8 | 
  9 | "Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License.
 10 | 
 11 | "Legal Entity" shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control 
 12 | with that entity. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management 
 13 | of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial 
 14 | ownership of such entity.
 15 | 
 16 | "You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted by this License.
 17 | 
 18 | "Source" form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, 
 19 | and configuration files.
 20 | 
 21 | "Object" form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to 
 22 | compiled object code, generated documentation, and conversions to other media types.
 23 | 
 24 | "Work" shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice 
 25 | that is included in or attached to the work (an example is provided in the Appendix below).
 26 | 
 27 | "Derivative Works" shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the 
 28 | editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes 
 29 | of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, 
 30 | the Work and Derivative Works thereof.
 31 | 
 32 | "Contribution" shall mean any work of authorship, including the original version of the Work and any modifications or additions to that Work 
 33 | or Derivative Works thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual 
 34 | or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this definition, "submitted" means any form of 
 35 | electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication on 
 36 | electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Licensor for 
 37 | the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing 
 38 | by the copyright owner as "Not a Contribution."
 39 | 
 40 | "Contributor" shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and 
 41 | subsequently incorporated within the Work.
 42 | 
 43 | 2. Grant of Copyright License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, 
 44 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, 
 45 | publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form.
 46 | 
 47 | 3. Grant of Patent License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, 
 48 | non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, 
 49 | sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are 
 50 | necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was
 51 | submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work
 52 | or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You
 53 | under this License for that Work shall terminate as of the date such litigation is filed.
 54 | 
 55 | 4. Redistribution. You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications,
 56 | and in Source or Object form, provided that You meet the following conditions:
 57 | 
 58 |     1. You must give any other recipients of the Work or Derivative Works a copy of this License; and
 59 | 
 60 |     2. You must cause any modified files to carry prominent notices stating that You changed the files; and
 61 | 
 62 |     3. You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices 
 63 |     from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and
 64 | 
 65 |     4. If the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works that You distribute must include a 
 66 |     readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the 
 67 |     Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the 
 68 |     Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever 
 69 |     such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. 
 70 |     You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, 
 71 |     provided that such additional attribution notices cannot be construed as modifying the License. You may add Your own copyright statement to 
 72 |     Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your 
 73 |     modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with 
 74 |     the conditions stated in this License.
 75 | 
 76 | 5. Submission of Contributions. Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You 
 77 | to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, 
 78 | nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions.
 79 | 
 80 | 6. Trademarks. This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except 
 81 | as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file.
 82 | 
 83 | 7. Disclaimer of Warranty. Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides 
 84 | its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, 
 85 | any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for 
 86 | determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under 
 87 | this License.
 88 | 
 89 | 8. Limitation of Liability. In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required
 90 | by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, 
 91 | including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the 
 92 | use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or 
 93 | any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages.
 94 | 
 95 | 9. Accepting Warranty or Additional Liability. While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a 
 96 | fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting 
 97 | such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree 
 98 | to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your
 99 | accepting any such warranty or additional liability.
100 | 
101 | END OF TERMS AND CONDITIONS
102 | 


--------------------------------------------------------------------------------
/size_line/readme.md:
--------------------------------------------------------------------------------
1 | # size_line
2 | 
3 | [View Code](https://developers.arcgis.com/javascript/jssamples/renderer_proportional_lines.html) | [Live Sample](http://developers.arcgis.com/javascript/samples/renderer_proportional_lines/)
4 | 
5 | Mapping line features with different sizes.
6 | 
7 | [![](thumbnail.png)]((http://developers.arcgis.com/javascript/samples/renderer_proportional_lines/))
8 | 


--------------------------------------------------------------------------------
/size_line/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/visualization-js/65f6462a33fc0a0b3542f84626ba1d6bc46c5b90/size_line/thumbnail.png


--------------------------------------------------------------------------------
/size_real/readme.md:
--------------------------------------------------------------------------------
1 | # size_real
2 | 
3 | [View Code](https://developers.arcgis.com/javascript/jssamples/renderer_proportional_points.html) | [Live Sample](https://developers.arcgis.com/javascript/samples/renderer_proportional_points/)
4 | 
5 | Mapping data in real-world unit with their actual sizes on map.
6 | 
7 | [![](thumbnail.png)]((https://developers.arcgis.com/javascript/samples/renderer_proportional_points/))
8 | 


--------------------------------------------------------------------------------
/size_real/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/visualization-js/65f6462a33fc0a0b3542f84626ba1d6bc46c5b90/size_real/thumbnail.png


--------------------------------------------------------------------------------
/size_simple/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 |     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
 6 |     <title>Data Visualization - Use Renderer</title>
 7 |     <link rel="stylesheet" href="//js.arcgis.com/3.11/esri/css/esri.css">
 8 |     <style>
 9 |       html, body, #map {
10 |         height: 100%;
11 |         margin: 0;
12 |       }
13 |       #info {
14 |         position: absolute;
15 |         left: 0;
16 |         bottom: 0;
17 |         padding: 10px;
18 |         background-color: #fff;
19 |         font-family: Segoe UI;
20 |       }
21 |     </style>
22 |     <script src="//js.arcgis.com/3.11/"></script>
23 |     <script>
24 |       require([
25 |         "esri/map",
26 |         "esri/layers/FeatureLayer",
27 |         "esri/renderers/SimpleRenderer",
28 |         "esri/symbols/SimpleMarkerSymbol",
29 |         "esri/Color",
30 |         "esri/dijit/Legend",
31 |         "dojo/domReady!"
32 |       ], function(Map, FeatureLayer, SimpleRenderer, SimpleMarkerSymbol, Color, Legend) {
33 |         var map = new Map("map", {
34 |           basemap: "topo",
35 |           center: [-100, 40],
36 |           zoom: 5
37 |         });
38 |         
39 |         var layer = new FeatureLayer("//services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/NationalParkStats2013/FeatureServer/0");
40 |         map.addLayer(layer);
41 |         
42 |         var symbol = new SimpleMarkerSymbol();
43 |         symbol.setColor(new Color([227,139,79,1.0]));
44 |         symbol.outline.setColor(new Color([255,255,255,1.0]));
45 |         var renderer = new SimpleRenderer(symbol);
46 |         
47 |         renderer.setProportionalSymbolInfo({
48 |           field: "Visitor",
49 |           minDataValue: 100000,
50 |           maxDataValue: 10000000,
51 |           minSize: 10,
52 |           maxSize: 120,
53 |           valueUnit: "unknown",
54 |           legendOptions: {
55 |             customValues: [100000, 1000000, 5000000, 10000000]
56 |           }
57 |         });
58 |         
59 |         layer.setRenderer(renderer);
60 |         
61 |         var legend = new Legend({
62 |           map: map,
63 |           layerInfos: [{
64 |             layer: layer,
65 |             title: "NPS site number of visits in 2013"
66 |           }]
67 |         }, "legend");
68 |         legend.startup();
69 |       });
70 |     </script>
71 |   </head>
72 |   <body>
73 |     <div id="map"></div>
74 |     <div id="info">
75 |       <div id="legend"></div>
76 |     </div>
77 |   </body>
78 | </html>


--------------------------------------------------------------------------------
/size_simple/readme.md:
--------------------------------------------------------------------------------
1 | # size_simple
2 | 
3 | [View Code](index.html) | [Live Sample](https://esri.github.io/visualization-js/size_simple)
4 | 
5 | Mapping data by size. Showing number of visitors at each national park service site in 2013.
6 | 
7 | [![](thumbnail.png)]((https://esri.github.io/visualization-js/size_simple))
8 | 


--------------------------------------------------------------------------------
/size_simple/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/visualization-js/65f6462a33fc0a0b3542f84626ba1d6bc46c5b90/size_simple/thumbnail.png


--------------------------------------------------------------------------------
/size_uniquevalue/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 |     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
 6 |     <title>Data Visualization - Use Renderer</title>
 7 |     <link rel="stylesheet" href="//js.arcgis.com/3.11/esri/css/esri.css">
 8 |     <style>
 9 |       html, body, #map {
10 |         height: 100%;
11 |         margin: 0;
12 |       }
13 |       #info {
14 |         position: absolute;
15 |         left: 0;
16 |         bottom: 0;
17 |         padding: 10px;
18 |         background-color: #fff;
19 |         font-family: Segoe UI;
20 |       }
21 |     </style>
22 |     <script src="//js.arcgis.com/3.11/"></script>
23 |     <script>
24 |       require([
25 |         "esri/map",
26 |         "esri/layers/FeatureLayer",
27 |         "esri/renderers/UniqueValueRenderer",
28 |         "esri/symbols/SimpleMarkerSymbol",
29 |         "esri/Color",
30 |         "esri/dijit/Legend",
31 |         "dojo/domReady!"
32 |       ], function(Map, FeatureLayer, UniqueValueRenderer, SimpleMarkerSymbol, Color, Legend) {
33 |         var map = new Map("map", {
34 |           basemap: "topo",
35 |           center: [-100, 40],
36 |           zoom: 5
37 |         });
38 |         
39 |         var layer = new FeatureLayer("//services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/NationalParkStats2013/FeatureServer/0");
40 |         map.addLayer(layer);
41 |         
42 |         var renderer = new UniqueValueRenderer(null, "Type");
43 |         
44 |         var symbol1 = new SimpleMarkerSymbol();
45 |         symbol1.setColor(new Color([253,127,111,0.8]));
46 |         symbol1.outline.setColor(new Color([255,255,255,1.0]));
47 |         renderer.addValue("National Park", symbol1);
48 |         
49 |         var symbol2 = new SimpleMarkerSymbol();
50 |         symbol2.setColor(new Color([255,181,90,0.8]));
51 |         symbol2.outline.setColor(new Color([255,255,255,1.0]));
52 |         renderer.addValue("National Monument", symbol2);
53 |         
54 |         renderer.setProportionalSymbolInfo({
55 |           field: "Visitor",
56 |           minDataValue: 100000,
57 |           maxDataValue: 10000000,
58 |           minSize: 10,
59 |           maxSize: 120,
60 |           valueUnit: "unknown",
61 |           legendOptions: {
62 |             customValues: [100000, 500000, 1000000, 10000000]
63 |           }
64 |         });
65 |         
66 |         layer.setRenderer(renderer);
67 |         
68 |         var legend = new Legend({
69 |           map: map,
70 |           layerInfos: [{
71 |             layer: layer,
72 |             title: "NPS site visitors in 2013"
73 |           }]
74 |         }, "legend");
75 |         legend.startup();
76 |       });
77 |     </script>
78 |   </head>
79 |   <body>
80 |     <div id="map"></div>
81 |     <div id="info">
82 |       <div id="legend"></div>
83 |     </div>
84 |   </body>
85 | </html>


--------------------------------------------------------------------------------
/size_uniquevalue/readme.md:
--------------------------------------------------------------------------------
1 | # size_uniquevalue
2 | 
3 | [View Code](index.html) | [Live Sample](https://esri.github.io/visualization-js/size_uniquevalue)
4 | 
5 | Mapping data by both size and unique value. Showing number of visitors at each national park service site in 2013, with national parks and national monuments in different colors.
6 | 
7 | [![](thumbnail.png)]((https://esri.github.io/visualization-js/size_uniquevalue))
8 | 


--------------------------------------------------------------------------------
/size_uniquevalue/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/visualization-js/65f6462a33fc0a0b3542f84626ba1d6bc46c5b90/size_uniquevalue/thumbnail.png


--------------------------------------------------------------------------------
/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/visualization-js/65f6462a33fc0a0b3542f84626ba1d6bc46c5b90/thumbnail.png


--------------------------------------------------------------------------------
/unique_conversion/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 |     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
 6 |     <title>Data Visualization - Unique Value Renderer with Function Conversion</title>
 7 |     <link rel="stylesheet" href="//js.arcgis.com/3.11/esri/css/esri.css">
 8 |     <style>
 9 |       html, body, #map {
10 |         height: 100%;
11 |         margin: 0;
12 |       }
13 |       #info {
14 |         position: absolute;
15 |         left: 0;
16 |         bottom: 0;
17 |         padding: 10px;
18 |         background-color: #fff;
19 |       }
20 |     </style>
21 |     <script src="//js.arcgis.com/3.11/"></script>
22 |     <script>
23 |       require([
24 |         "esri/map",
25 |         "esri/layers/FeatureLayer",
26 |         "esri/renderers/UniqueValueRenderer",
27 |         "esri/symbols/SimpleMarkerSymbol",
28 |         "esri/Color",
29 |         "esri/dijit/Legend",
30 |         "dojo/domReady!"
31 |       ], function(Map, FeatureLayer, UniqueValueRenderer, SimpleMarkerSymbol, Color, Legend) {
32 |         var map = new Map("map", {
33 |           basemap: "gray",
34 |           center: [-100, 40],
35 |           zoom: 5
36 |         });
37 |         
38 |         var layer = new FeatureLayer("//services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/NationalParkStats2013/FeatureServer/0", {
39 |           outFields: ["Address"]
40 |         });
41 |         
42 |         var symbol = new SimpleMarkerSymbol();
43 |         symbol.setColor(new Color("#fffcd4"));
44 |         var renderer = new UniqueValueRenderer(null, function(graphic){
45 |           if (graphic.attributes['Address'].indexOf("CA") !== -1 || graphic.attributes['Address'].indexOf("OR") !== -1 || graphic.attributes['Address'].indexOf("WA") !== -1) {
46 |             return "Pacific West";
47 |           }else {
48 |             return "Other Areas";
49 |           };
50 |         });
51 |         
52 |         var symbol1 = new SimpleMarkerSymbol();
53 |         symbol1.setColor(new Color("#7b3578"));
54 |         renderer.addValue("Pacific West", symbol1);
55 |         
56 |         var symbol2 = new SimpleMarkerSymbol();
57 |         symbol2.setColor(new Color("#cccccc"));
58 |         renderer.addValue("Other Areas", symbol2);
59 | 
60 |         layer.setRenderer(renderer);
61 |         
62 |         map.addLayer(layer);
63 |         
64 |         var legend = new Legend({
65 |           map: map,
66 |           layerInfos: [{
67 |             layer: layer
68 |           }]
69 |         }, "legend");
70 |         legend.startup();
71 |       });
72 |     </script>
73 |   </head>
74 |   <body>
75 |     <div id="map"></div>
76 |     <div id="info">
77 |       <div id="legend"></div>
78 |     </div>
79 |   </body>
80 | </html>
81 | 


--------------------------------------------------------------------------------
/unique_conversion/readme.md:
--------------------------------------------------------------------------------
1 | # unique_conversion
2 | 
3 | [View Code](index.html) | [Live Sample](https://esri.github.io/visualization-js/unique_conversion)
4 | 
5 | Style data with unique value renderer and field function conversion.
6 | 
7 | [![](thumbnail.png)](https://esri.github.io/visualization-js/unique_conversion)
8 | 


--------------------------------------------------------------------------------
/unique_conversion/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/visualization-js/65f6462a33fc0a0b3542f84626ba1d6bc46c5b90/unique_conversion/thumbnail.png


--------------------------------------------------------------------------------
/unique_simple/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 |     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
 6 |     <title>Data Visualization - Unique Value Renderer</title>
 7 |     <link rel="stylesheet" href="//js.arcgis.com/3.11/esri/css/esri.css">
 8 |     <style>
 9 |       html, body, #map {
10 |         height: 100%;
11 |         margin: 0;
12 |       }
13 |     </style>
14 |     <script src="//js.arcgis.com/3.11/"></script>
15 |     <script>
16 |       require([
17 |         "esri/map",
18 |         "esri/layers/FeatureLayer",
19 |         "esri/renderers/UniqueValueRenderer",
20 |         "esri/symbols/SimpleMarkerSymbol",
21 |         "esri/Color",
22 |         "dojo/domReady!"
23 |       ], function(Map, FeatureLayer, UniqueValueRenderer, SimpleMarkerSymbol, Color) {
24 |         var map = new Map("map", {
25 |           basemap: "gray",
26 |           center: [-100, 40],
27 |           zoom: 5
28 |         });
29 |         
30 |         var layer = new FeatureLayer("//services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/NationalParkStats2013/FeatureServer/0");
31 |         
32 |         var symbol = new SimpleMarkerSymbol();
33 |         symbol.setColor(new Color("#cccccc"));
34 |         var renderer = new UniqueValueRenderer(symbol, "Type");
35 |         
36 |         var symbol1 = new SimpleMarkerSymbol();
37 |         symbol1.setColor(new Color("#ed5151"));
38 |         renderer.addValue("National Park", symbol1);
39 |         
40 |         var symbol2 = new SimpleMarkerSymbol();
41 |         symbol2.setColor(new Color("#149ece"));
42 |         renderer.addValue("National Monument", symbol2);
43 | 
44 |         layer.setRenderer(renderer);
45 |         
46 |         map.addLayer(layer);
47 |       });
48 |     </script>
49 |   </head>
50 |   <body>
51 |     <div id="map"></div>
52 |   </body>
53 | </html>
54 | 


--------------------------------------------------------------------------------
/unique_simple/readme.md:
--------------------------------------------------------------------------------
1 | # unique_simple
2 | 
3 | [View Code](index.html) | [Live Sample](https://esri.github.io/visualization-js/unique_simple)
4 | 
5 | Style data with unique value renderer.
6 | 
7 | [![](thumbnail.png)](https://esri.github.io/visualization-js/unique_simple)
8 | 


--------------------------------------------------------------------------------
/unique_simple/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/visualization-js/65f6462a33fc0a0b3542f84626ba1d6bc46c5b90/unique_simple/thumbnail.png


--------------------------------------------------------------------------------
/unique_simple_with_legend/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 |     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
 6 |     <title>Data Visualization - Unique Value Renderer with Legend</title>
 7 |     <link rel="stylesheet" href="//js.arcgis.com/3.11/esri/css/esri.css">
 8 |     <style>
 9 |       html, body, #map {
10 |         height: 100%;
11 |         margin: 0;
12 |       }
13 |       #info {
14 |         position: absolute;
15 |         left: 0;
16 |         bottom: 0;
17 |         padding: 10px;
18 |         background-color: #fff;
19 |       }
20 |     </style>
21 |     <script src="//js.arcgis.com/3.11/"></script>
22 |     <script>
23 |       require([
24 |         "esri/map",
25 |         "esri/layers/FeatureLayer",
26 |         "esri/renderers/UniqueValueRenderer",
27 |         "esri/symbols/SimpleMarkerSymbol",
28 |         "esri/Color",
29 |         "esri/dijit/Legend",
30 |         "dojo/domReady!"
31 |       ], function(Map, FeatureLayer, UniqueValueRenderer, SimpleMarkerSymbol, Color, Legend) {
32 |         var map = new Map("map", {
33 |           basemap: "gray",
34 |           center: [-100, 40],
35 |           zoom: 5
36 |         });
37 |         
38 |         var layer = new FeatureLayer("//services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/NationalParkStats2013/FeatureServer/0");
39 |         
40 |         var symbol = new SimpleMarkerSymbol();
41 |         symbol.setColor(new Color("#cccccc"));
42 |         var renderer = new UniqueValueRenderer(symbol, "Type");
43 |         
44 |         var symbol1 = new SimpleMarkerSymbol();
45 |         symbol1.setColor(new Color("#ed5151"));
46 |         renderer.addValue("National Park", symbol1);
47 |         
48 |         var symbol2 = new SimpleMarkerSymbol();
49 |         symbol2.setColor(new Color("#149ece"));
50 |         renderer.addValue("National Monument", symbol2);
51 | 
52 |         layer.setRenderer(renderer);
53 |         
54 |         map.addLayer(layer);
55 |         
56 |         var legend = new Legend({
57 |           map: map,
58 |           layerInfos: [{
59 |             layer: layer
60 |           }]
61 |         }, "legend");
62 |         legend.startup();
63 |       });
64 |     </script>
65 |   </head>
66 |   <body>
67 |     <div id="map"></div>
68 |     <div id="info">
69 |       <div id="legend"></div>
70 |     </div>
71 |   </body>
72 | </html>
73 | 


--------------------------------------------------------------------------------
/unique_simple_with_legend/readme.md:
--------------------------------------------------------------------------------
1 | # unique_simple_with_legend
2 | 
3 | [View Code](index.html) | [Live Sample](https://esri.github.io/visualization-js/unique_simple_with_legend)
4 | 
5 | Style data with unique value renderer and add legend to the map.
6 | 
7 | [![](thumbnail.png)](https://esri.github.io/visualization-js/unique_simple_with_legend)
8 | 


--------------------------------------------------------------------------------
/unique_simple_with_legend/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Esri/visualization-js/65f6462a33fc0a0b3542f84626ba1d6bc46c5b90/unique_simple_with_legend/thumbnail.png


--------------------------------------------------------------------------------