Map Example

Possible Vegetation %

Code

<h3>Possible Vegetation %</h3>
<div id="chart" style="height: 100%"></div>

<script>
  //create the specification
  var spec ={
        "inputs": [
        {"name":"value","type":["numeric"], "required":true}
        ],
      "template":{
          "data": [
            {
                "name": "table",
                "format": {"property": "features"}
            },
            {
              "name": "area",
              "url": "http://opendata.dc.gov/datasets/4919ca2fa0894de18e4752a5e16ca683_22.geojson",
              "format": {"type": "json","property": "features"},
              "transform": [
                {
                  "type": "geopath",
                  "value": "data",
                  "projection": "mercator",
                  "scale": 100000,
                  "center": [-77.03687, 38.90719],
                    "translate": [0, 0]
                }
              ]
            }
          ],
          "legends": [
            {"fill": "color", "title": "Vegetation", "offset": -600, "values": [0,0.2, 0.4, 0.6, 0.8, 1.0]}
          ],
          "scales": [
            {
              "name": "color",
              "type": "quantize",
              "domain": {"data": "area", "field": "properties.{value.field}"},
              "range": ["#f7fbff", "#deebf7", "#c6dbef", "#9ecae1", "#6baed6",
                        "#4292c6", "#2171b5", "#08519c", "#08306b"]
            }],
          "marks": [
            {
              "type": "path",
              "from": {"data": "area"},
              "properties": {
                "enter": {
                          "fill": {"value": "#dedede"},
                          "stroke": {"value": "white"},
                          "path": {"field": "layout_path"}
                        },
                        "update": { "fill": {"scale": "color", "field": "properties.{value.field}"} },

                        "hover": {
                          "fill": {"value": "red"}
                        }
              }
            }
          ]
        }
      };
  var chart = new Cedar({"specification":spec});
  var dataset = {
      // placeholder until Cedar can just accept GeoJSON
    "url":"https://services.arcgis.com/bkrWlSKcjUDFDtgw/arcgis/rest/services/It's_a_Tornado_Map/FeatureServer/0",
    "mappings":{
        "value": {"field":"DCGISUTC_WardUTC_PV_P", "label": "Possible Vegetation %"}
    }
  };
  chart.tooltip = {
    "title": "Hi",
    "content": "World"
  };
  chart.dataset = dataset;
  //chart.dataset.mappings.sort = "DATE";
  chart.show({
    elementId: "#chart",
    renderer: "svg"
  });

</script>