This line chart has been built using data from the Berkeley Ecoinformatics Engine API. It gets data from the Sensors database, and lays out an svg line chart using the D3.js javascript library. The chart was developed using an line chart from the D3 examples gallery as a starting point, and also borrows from some sample code that enables the tooltip on mouseover.
You can also load this Gist in JSFiddle
| BEGIN; | |
| -- CREATE SOME POINT LOCATIONS | |
| DROP TABLE IF EXISTS geostuff.locations; | |
| DROP SEQUENCE IF EXISTS geostuff.locations_id; | |
| CREATE SEQUENCE geostuff.locations_id START 1; | |
| CREATE TABLE geostuff.locations ( | |
| id integer PRIMARY KEY DEFAULT nextval('geostuff.locations_id'), | |
| name varchar(30), | |
| geom geometry(POINT, 4326)); | |
| ALTER TABLE geostuff.locations OWNER TO dbuser; |
| import com.rbnb.sapi.SAPIException; | |
| import edu.ucsd.rbnb.simple.*; | |
| import jssc.SerialPort; | |
| import jssc.SerialPortException; | |
| public class main { | |
| public static void main(String[] args) { | |
| SerialPort serialPort = new SerialPort("/dev/rfcomm1"); | |
| String buffer = ""; | |
| SimpleSource src = new SimpleSource("Arduino Sensors"); |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: black; | |
| shape-rendering: crispEdges; | |
| } | |
| .axis text { | |
| font-family: sans-serif; | |
| font-size: 11px; |
Using census data.
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: black; | |
| shape-rendering: crispEdges; | |
| } | |
| .axis text { | |
| font-family: sans-serif; | |
| font-size: 11px; |
| // This is called a closure which makes sure that all variables stay local. | |
| // Start script when everything is loaded properly. | |
| window.onload = (function () { | |
| var data = [['red', 0], | |
| ['green', 30], | |
| ['blue', 60]]; | |
| var canvas = d3.select('#canvas').append('svg:svg'); | |
| var update = function (data) { | |
| // This selection is the same for appending, updating, and removing elements | |
| // for this reason I am using a variable here. I think this pattern makes it |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>title</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="script.js"></script> | |
| </head> | |
| <body> | |
| Hello world! |
| *.bin | |
| *_test* |