D3 Examples - Graph #1

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
    
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400" rel="stylesheet">
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://dimplejs.org/dist/dimple.v2.0.0.min.js"></script>
    
    <style>        
/*
        *{
        border: 1px solid orange !important;
        }
*/
        body{
            font-family: 'Lato', sans-serif;
            font-weight: 300;
            color: #716c6c;
            text-align: left;
            border: 15px;
            width: 800px;
            height: 800px;
            }
        
        h2 {
            margin-left: 15px;
            margin-bottom: 1px;            
            font-size: 30px;
        }
        
        h3{
            margin-left: 15px;
            margin-top: 0px;
            font-weight: 100;
            font-size: 15px;
            }
​
        
        circle.dimple-series-1 {
        fill:#716c6c;
        }
        
        path.dimple-line {
        stroke:lightgray;
        }
    </style>
    
    <script type="text/javascript">
      function draw(data) {
​
          "use strict";
          var margin = {top: 20, right: 20, bottom: 20, left:25},
              width = 800 - margin.left - margin.right,
              height = 350 - margin.top - margin.bottom;
          
          d3.select("body").append("h2").text("Rollercoaster");
          d3.select("body").append("h3").text("A 10 year ride");
          
          var svg = d3.select("body")
            .append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append('g')
            //.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
            .attr('class','chart');
​
//          debugger;
          
          var myChart = new dimple.chart(svg, data);
          
          var x = myChart.addTimeAxis("x", "date","%m/%d/%Y","%m/%d/%y");
          var y = myChart.addMeasureAxis("y", "amount");
​
          x.title = "Date";
          x.tickFormat = "%b  '%y";
          x.fontFamily = 'Lato';
          // More frequent time labels:
          //x.timePeriod = d3.time.months;
          //x.timeInterval = 4;
          
          y.title = "Value";
          y.tickFormat = "d";
          y.showGridlines = false;
          y.fontFamily = 'Lato';
          
          myChart.setBounds("10%", "10%", "80%", "75%")  
          
          myChart.addSeries(null, dimple.plot.line);
          myChart.addSeries(null, dimple.plot.scatter);
                    
          myChart.draw();
          
          // Post-drawing axis layout:
            x.titleShape.remove();
          
          // Add new text label for the y axis
            y.titleShape.remove();
            svg.append("text")
            .attr("transform", "translate("+ .3*margin.left + "," + 1.9*margin.top + ")")
            .style("text-anchor", "right    ")
            .style("font-size", "10px")  
            .text("Value");
          
          // Add data source text labels
            svg.append("text")
            .attr("transform", "translate("+ (margin.left) + "," + (1.1*height) + ")")
            .style("text-anchor", "left")
            .style("font-size", "10px")            
            .text("Source: Collected throughout the years");
          
          // Add "made by" and date labels
            svg.append("a")
            .attr("xlink:href", "https://www.saramaria.org/")
            .append("text")
            .text(" Sara Maria | October 2016 ")
            .attr("transform", "translate("+ (.8*width) + "," + (1.1*height) + ")")
            .style("fill", "#4C5D7C")
            .style("font-weight", "300")
            .style("text-anchor", "right")
            .style("font-size", "10px")            
        };
        
      </script>
  </head>
    
<body>
 
    <div class="content">
        <script type="text/javascript">
            d3.csv("amount_over_time.csv",draw);          
        </script>   
    </div>
</body>
</html>
​
    