Merge pull request #13 from jeromejsyang/master

Update for blog post #5
Esri · Dec 1, 2014 · 65f6462 · 65f6462
2 parents c1ae641 + 82d8696
commit 65f6462
Show file tree

Hide file tree

Showing 11 changed files with 199 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -36,6 +36,14 @@ To explore these samples, you can:
 |[![](color_classed/thumbnail.png)](https://esri.github.io/visualization-js/color_classed)|||
 |[Classify data](color_classed)|||
 
+### Show Data by Size
+
+|[![](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/)|
+|:-:|:-:|:-:|
+|[Show data values by size](size_simple)|[Show data values in real-world unit](size_real)|[Show line data by size](size_line)|
+|[![](size_uniquevalue/thumbnail.png)](https://esri.github.io/visualization-js/size_uniquevalue)|||
+|[Show data values by size amd unique value](size_uniquevalue)|||
+
 ## Resources
 
 * [ArcGIS API for JavaScript](https://developers.arcgis.com/javascript/)

diff --git a/size_line/readme.md b/size_line/readme.md
@@ -0,0 +1,7 @@
+# size_line
+
+[View Code](https://developers.arcgis.com/javascript/jssamples/renderer_proportional_lines.html) | [Live Sample](http://developers.arcgis.com/javascript/samples/renderer_proportional_lines/)
+
+Mapping line features with different sizes.
+
+[![](thumbnail.png)]((http://developers.arcgis.com/javascript/samples/renderer_proportional_lines/))
diff --git a/size_line/thumbnail.png b/size_line/thumbnail.png
diff --git a/size_real/readme.md b/size_real/readme.md
@@ -0,0 +1,7 @@
+# size_real
+
+[View Code](https://developers.arcgis.com/javascript/jssamples/renderer_proportional_points.html) | [Live Sample](https://developers.arcgis.com/javascript/samples/renderer_proportional_points/)
+
+Mapping data in real-world unit with their actual sizes on map.
+
+[![](thumbnail.png)]((https://developers.arcgis.com/javascript/samples/renderer_proportional_points/))
diff --git a/size_real/thumbnail.png b/size_real/thumbnail.png
diff --git a/size_simple/index.html b/size_simple/index.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
+    <title>Data Visualization - Use Renderer</title>
+    <link rel="stylesheet" href="//js.arcgis.com/3.11/esri/css/esri.css">
+    <style>
+      html, body, #map {
+        height: 100%;
+        margin: 0;
+      }
+      #info {
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        padding: 10px;
+        background-color: #fff;
+        font-family: Segoe UI;
+      }
+    </style>
+    <script src="//js.arcgis.com/3.11/"></script>
+    <script>
+      require([
+        "esri/map",
+        "esri/layers/FeatureLayer",
+        "esri/renderers/SimpleRenderer",
+        "esri/symbols/SimpleMarkerSymbol",
+        "esri/Color",
+        "esri/dijit/Legend",
+        "dojo/domReady!"
+      ], function(Map, FeatureLayer, SimpleRenderer, SimpleMarkerSymbol, Color, Legend) {
+        var map = new Map("map", {
+          basemap: "topo",
+          center: [-100, 40],
+          zoom: 5
+        });
+
+        var layer = new FeatureLayer("//services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/NationalParkStats2013/FeatureServer/0");
+        map.addLayer(layer);
+
+        var symbol = new SimpleMarkerSymbol();
+        symbol.setColor(new Color([227,139,79,1.0]));
+        symbol.outline.setColor(new Color([255,255,255,1.0]));
+        var renderer = new SimpleRenderer(symbol);
+
+        renderer.setProportionalSymbolInfo({
+          field: "Visitor",
+          minDataValue: 100000,
+          maxDataValue: 10000000,
+          minSize: 10,
+          maxSize: 120,
+          valueUnit: "unknown",
+          legendOptions: {
+            customValues: [100000, 1000000, 5000000, 10000000]
+          }
+        });
+
+        layer.setRenderer(renderer);
+
+        var legend = new Legend({
+          map: map,
+          layerInfos: [{
+            layer: layer,
+            title: "NPS site number of visits in 2013"
+          }]
+        }, "legend");
+        legend.startup();
+      });
+    </script>
+  </head>
+  <body>
+    <div id="map"></div>
+    <div id="info">
+      <div id="legend"></div>
+    </div>
+  </body>
+</html>
diff --git a/size_simple/readme.md b/size_simple/readme.md
@@ -0,0 +1,7 @@
+# size_simple
+
+[View Code](index.html) | [Live Sample](https://esri.github.io/visualization-js/size_simple)
+
+Mapping data by size. Showing number of visitors at each national park service site in 2013.
+
+[![](thumbnail.png)]((https://esri.github.io/visualization-js/size_simple))
diff --git a/size_simple/thumbnail.png b/size_simple/thumbnail.png
diff --git a/size_uniquevalue/index.html b/size_uniquevalue/index.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
+    <title>Data Visualization - Use Renderer</title>
+    <link rel="stylesheet" href="//js.arcgis.com/3.11/esri/css/esri.css">
+    <style>
+      html, body, #map {
+        height: 100%;
+        margin: 0;
+      }
+      #info {
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        padding: 10px;
+        background-color: #fff;
+        font-family: Segoe UI;
+      }
+    </style>
+    <script src="//js.arcgis.com/3.11/"></script>
+    <script>
+      require([
+        "esri/map",
+        "esri/layers/FeatureLayer",
+        "esri/renderers/UniqueValueRenderer",
+        "esri/symbols/SimpleMarkerSymbol",
+        "esri/Color",
+        "esri/dijit/Legend",
+        "dojo/domReady!"
+      ], function(Map, FeatureLayer, UniqueValueRenderer, SimpleMarkerSymbol, Color, Legend) {
+        var map = new Map("map", {
+          basemap: "topo",
+          center: [-100, 40],
+          zoom: 5
+        });
+
+        var layer = new FeatureLayer("//services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/NationalParkStats2013/FeatureServer/0");
+        map.addLayer(layer);
+
+        var renderer = new UniqueValueRenderer(null, "Type");
+
+        var symbol1 = new SimpleMarkerSymbol();
+        symbol1.setColor(new Color([253,127,111,0.8]));
+        symbol1.outline.setColor(new Color([255,255,255,1.0]));
+        renderer.addValue("National Park", symbol1);
+
+        var symbol2 = new SimpleMarkerSymbol();
+        symbol2.setColor(new Color([255,181,90,0.8]));
+        symbol2.outline.setColor(new Color([255,255,255,1.0]));
+        renderer.addValue("National Monument", symbol2);
+
+        renderer.setProportionalSymbolInfo({
+          field: "Visitor",
+          minDataValue: 100000,
+          maxDataValue: 10000000,
+          minSize: 10,
+          maxSize: 120,
+          valueUnit: "unknown",
+          legendOptions: {
+            customValues: [100000, 500000, 1000000, 10000000]
+          }
+        });
+
+        layer.setRenderer(renderer);
+
+        var legend = new Legend({
+          map: map,
+          layerInfos: [{
+            layer: layer,
+            title: "NPS site visitors in 2013"
+          }]
+        }, "legend");
+        legend.startup();
+      });
+    </script>
+  </head>
+  <body>
+    <div id="map"></div>
+    <div id="info">
+      <div id="legend"></div>
+    </div>
+  </body>
+</html>
diff --git a/size_uniquevalue/readme.md b/size_uniquevalue/readme.md
@@ -0,0 +1,7 @@
+# size_uniquevalue
+
+[View Code](index.html) | [Live Sample](https://esri.github.io/visualization-js/size_uniquevalue)
+
+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.
+
+[![](thumbnail.png)]((https://esri.github.io/visualization-js/size_uniquevalue))
diff --git a/size_uniquevalue/thumbnail.png b/size_uniquevalue/thumbnail.png