Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Caesar Bell
Caesar Bell
24,877 Points
Posted by Caesar Bell
Caesar Bell
24,877 Points

D3 Cant get lines to retrieve a path

Having a issue pulling the data from my JSON file to create the path for my lines in my line graph. I get the y axis lines to create and my x axis is fine, I set that to display none in the css. The only issue is having the lines being drawn based on my data.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Graph 6</title>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/app.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//d3js.org/d3.v3.min.js"></script>
<script data-main="js/app.js" src="js/require.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-12" id="graph-title">
            <h3>relevance over time</h3>
        </div>
    </div>
    <div class="row">
        <div id="line">
            <!-- line chart goes here --> 
        </div>
        <div id="footer"></div>
    </div>
</div>
<script type="text/javascript">
$(document).ready(function($){
    $('#footer').load('../footer.html'); 
})
</script>
</body>
</html>

Here is my js 

var margin = {top: 20, right: 80, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var parseDate = d3.time.format("%Y%m%d").parse;

var x = d3.time.scale()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

var color = d3.scale.category10();

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

var svg = d3.select("#line").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 + ")");


// a global 
var data; 

d3.json("data/data.json", function(error, json) {
  //if (error) throw error;
    if(error) return console.log(error); 
    data = json;
    //console.log(data);  

    var lines = svg.selectAll(".feeds")
      .data(data)
      .enter()
      .append('g')
      .attr('class', 'feeds'); 

    for(var i = 0; leng = data.length, i < leng; i++){
      console.log(data[i]); 

      svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)

      lines.append('path')
      .attr('class', 'lines')
      .attr('d', function(d) { return d; })
      .style('stroke', 'black'); 
    }

var color_hash = {
          0 : ["Invite","#1f77b4"],
          1 : ["Accept","#2ca02c"]
      };


svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis); 

  svg.append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", -50)
      .attr("x", -140)
      .attr("dy", ".71em")
      .style("font-size", "20px")
      .style("text-anchor", "end")
      .text("Relevance Score");    
});

Here is my json 

[  
   {  
      "date":20150110,
      "facebook":63.4,
      "twitter":62.7
   },
   {  
      "date":20150121,
      "facebook":58,
      "twitter":59.9
   },
   {  
      "date":20150101,
      "facebook":53.3,
      "twitter":59.1
   },
   {  
      "date":20150119,
      "facebook":55.7,
      "twitter":58.8  
   },
   {  
      "date":20150122,
      "facebook":64.2,
      "twitter":58.7
   },
   {  
      "date":20150129,
      "facebook":58.8,
      "twitter":57  },
   {  
      "date":20150117,
      "facebook":57.9,
      "twitter":56.7
   },
   {  
      "date":20150109,
      "facebook":61.8,
      "twitter":56.8
   },
   {  
      "date":20150110,
      "facebook":69.3,
      "twitter":56.7
   },
   {  
      "date":20150111,
      "facebook":71.2,
      "twitter":60.1
   },
   {  
      "date":20150105,
      "facebook":68.7,
      "twitter":61.1
   },
   {  
      "date":20150108,
      "facebook":61.8,
      "twitter":61.5
   },
   {  
      "date":20150109,
      "facebook":63,
      "twitter":64.3
   },
   {  
      "date":20150101,
      "facebook":66.9,
      "twitter":67.1
   },
   {  
      "date":20150117,
      "facebook":61.7,
      "twitter":64.6  
   },
   {  
      "date":20150130,
      "facebook":61.8,
      "twitter":61.6
   },
   {  
      "date":20150102,
      "facebook":62.8,
      "twitter":61.1
   },
   {  
      "date":20150103,
      "facebook":60.8,
      "twitter":59.2  
   },
   {  
      "date":20150113,
      "facebook":62.1,
      "twitter":58.9
   },
   {  
      "date":20150106,
      "facebook":65.1,
      "twitter":57.2
   },
   {  
      "date":20150119,
      "facebook":55.6,
      "twitter":56.4
   },
   {  
      "date":20150124,
      "facebook":54.4,
      "twitter":60.7
   },
   {  
      "date":20150122,
      "facebook":54.4,
      "twitter":65.1
   },
   {  
      "date":20150112,
      "facebook":54.8,
      "twitter":60.9
   },
   {  
      "date":20150128,
      "facebook":57.9,
      "twitter":56.1
   }

]