martinduparc edited this page Nov 10, 2014 · 12 revisions

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:

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.

Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.