View this code at http://livecoding.io/6111936
var map = new OpenLayers.Map('map', { | |
controls: [ | |
new OpenLayers.Control.Navigation(), | |
//new OpenLayers.Control.PanZoomBar(), | |
], | |
numZoomLevels: 10, | |
restrictedExtent: new OpenLayers.Bounds(-20037508.34 * 100,-20037508.34,20037508.34 * 100,20037508.34) | |
}); | |
var osm = new OpenLayers.Layer.OSM( |
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Testing d3.js in Leaflet.js</title> | |
<link rel="stylesheet" href="leaflet.css"></link> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script> | |
<style type="text/css"> | |
path |
<!DOCTYPE html> | |
<script src="http://mbostock.github.com/d3/d3.v2.js?2.8.1"></script> | |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> | |
<style> | |
body { | |
font: 10px sans-serif; | |
} | |
rect { |
The area of each circle in this symbol map is proportional to the population of the associated state.
An example of the New Jersey state plane, a transverse Mercator projection with an origin of 74° 30′ W and 38° 50′ N. The projections for each state are defined in the USGS publication, State Plane Coordinate System of 1983. This map shows census tracts; the data is available as TopoJSON in the U.S. Atlas project. This example borrows from my earlier Project to Bounding Box example to compute the projection’s scale and translate automatically from the displayed geometry.
An example of multiple pie (donut) charts created with D3. The data is represented as a two-dimensional array of numbers; each row in the array is mapped to a pie chart. Thus, each pie represents the relative value of a number (such as 1,013) within its rows. Note that in this dataset, the totals for each row are not equal.
This simple line chart is constructed from a TSV file storing the closing value of AAPL stock over the last few years. The chart employs conventional margins and a number of D3 features:
- d3.tsv - load and parse data
- d3.time.format - parse dates
- d3.time.scale - x-position encoding
- d3.scale.linear - y-position encoding
- d3.extent - compute domains
- d3.svg.axis - display axes
- d3.svg.line - display line shape
from flask import Flask, request, jsonify, json, abort | |
from flask_cors import CORS, cross_origin | |
import pandas as pd | |
app = Flask(__name__) | |
cors = CORS(app) | |
app.config['CORS_HEADERS'] = 'Content-Type' |
<html> | |
<!-- See also: http://kempe.net/blog/2014/06/14/leaflet-pan-zoom-image.html --> | |
<head> | |
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"></script> | |
<style> | |
#image-map { | |
width: 100%; | |
height: 300px; | |
border: 1px solid #ccc; | |
margin-bottom: 10px; |