Home

Installing and using Crosslet

Dependencies

External dependencies

You have to include them explicitly in the code

In the head of the html doc:

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.css" />

In the bottom of the file:

<script src="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.0.1/d3.v3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>

Embedded dependencies

These are already in the code, you don't have to download them separately:

• crossfilter.js
• cie.js

Downloading Source

TL;DR : download here.

Javascript source file is located in the /dist directory.

• For production, use crosslet-min.js
• In case if you already use cie.js and crosslet.js in your code, you can use crosslet-raw-min.js
• For debugging purposes, use the versions of files without "min" in it

Once downloaded, include it in your document as well:

<script src="crosslet-min.js"></script>

Using Crosslet

Minimal configuration

var config = {
  map: {
    leaflet: {
      key: "<your key>",
    },
    view: {
      center: [40.42, -98.73],
      zoom:4
    },
    geo: {
      url: "data/us_counties.topo.json",
      name_field: "NAME",
      id_field: "GEOID",
      topo_object: "us_counties"
    }
  },
  data: {
    version: "1.0",
    id_field: "fips"
  },
  dimensions: {
    obama: {
      title: "Obama",
      data: {
        dataSet: "data/us_elect_county.csv",
        field: "obama_p",
    },  
    },
  },
  defaults: {
   order: ["obama"],
    active: "obama"
  },
};

See also Developer's Reference and Tutorial for further info.