D3 Examples - Data Canvas Part 4

Data Canvas Part 4 - Colors

This program makes a bar chart and line chart from data in the Data Canvas - Sense Your City API.

The line chart shows the temperature for all cities with available data for the past 24 hours, while the bar chart shows the current temperature of each city. The data is up to date, and updates every 5 minutes. Colors code the lines to the city.

Based on

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
​
    <!-- Use RequireJS for module loading. -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.js"></script>
​
    <!-- Configure RequireJS paths for third party libraries. -->
    <script>
      requirejs.config({
        paths: {
​
          // Use ModelJS - github.com/curran/model
          model: "//curran.github.io/cdn/model-v0.2.0/dist/model",
​
          d3: "//d3js.org/d3.v3.min",
          jquery: "//code.jquery.com/jquery-2.1.1.min",
          lodash: "//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.4.0/lodash.min",
          async: "//cdnjs.cloudflare.com/ajax/libs/async/0.9.0/async",
          crossfilter: "//cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.11/crossfilter.min"
        }
      });
    </script>
​
    <!-- Include CSS that styles the visualization. -->
    <link rel="stylesheet" href="styles.css">
​
    <title>Colors</title>
  </head>
  <body>
​
    <!-- The visualization will be injected into this div. -->
    <div id="container"></div>
    
    <!-- Run the main program. -->
    <script src="main.js"></script>
​
  </body>
</html>
​
    