| <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; |
| 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' |
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:
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.
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.
The area of each circle in this symbol map is proportional to the population of the associated state.
| <!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 { |
| <!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 |
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( |