0

I am stumped trying to get a line to render - I suspect it has something to do with the date formatting or x-axis range as I am seeing the line as an svg with the width of -1.

I'm new to D3 and trying to use it to plot the history of each team across all of the past NFL seasons. The X axis is the year and the Y axis is their win percentage, a value between 0-1.

I can get as far as having the chart render with both axes but no line. When inspecting the elements I see the path that should be the line but when I hover it shows as "path.line -1px x 333px".1

The path for the line is

<path class="line" d="M-125905248000000,345.7142857142857C-118914768000000,345.7142857142857,-97962480000000,298.57142857142856,-83962368000000,298.57142857142856S-55904688000000,282.8571428571429,-41904576000000,282.8571428571429S-13942656000000,361.42857142857144,38304000000,361.42857142857144S28000224000000,282.8571428571429,41981184000000,282.8571428571429S69923952000000,361.42857142857144,83924064000000,361.42857142857144S111981744000000,282.8571428571429,125981856000000,282.8571428571429S153943776000000,282.8571428571429,167924736000000,282.8571428571429S195886656000000,377.14285714285717,209867616000000,377.14285714285717S237810384000000,314.2857142857143,251810496000000,314.2857142857143S279868176000000,345.7142857142857,293868288000000,345.7142857142857S321830208000000,247.5,335811168000000,247.5S363773088000000,220,377754048000000,220S405696816000000,412.5,419696928000000,412.5S447754608000000,330,461754720000000,330S489716640000000,244.44444444444446,503697600000000,244.44444444444446S531659520000000,220,545640480000000,220S573583248000000,247.5,587583360000000,247.5S615641040000000,302.5,629641152000000,302.5S657603072000000,247.5,671584032000000,247.5S699545952000000,88,713526912000000,88S741469680000000,165,755469792000000,165S783527472000000,192.5,797527584000000,192.5S825489504000000,220,839470464000000,220S867432384000000,137.5,881413344000000,137.5S909356112000000,110,923356224000000,110S951413904000000,220,965414016000000,220S993375936000000,247.5,1007356896000000,247.5S1035318816000000,247.5,1049299776000000,247.5S1077242544000000,357.5,1091242656000000,357.5S1119300336000000,275,1133300448000000,275S1161262368000000,275,1175243328000000,275S1203205248000000,357.5,1217186208000000,357.5S1245128976000000,165,1259129088000000,165S1287186768000000,247.5,1301186880000000,247.5S1329148800000000,192.5,1343129760000000,192.5S1371091680000000,220,1385072640000000,220S1413015408000000,220,1427015520000000,220S1455073200000000,357.5,1469073312000000,357.5S1497035232000000,165,1511016192000000,165S1538978112000000,247.5,1552959072000000,247.5S1580901840000000,220,1594901952000000,220S1622959632000000,82.5,1636959744000000,82.5S1664921664000000,137.5,1678902624000000,137.5S1706864544000000,82.5,1720845504000000,82.5S1755797904000000,247.5,1762788384000000,247.5" style="stroke: #d2b887;"></path>

When trying to debug, I can get the line to render fine if I use integers instead of dates for the X axis.

Everything was working fine until I decided to change my data format from a CSV to JSON. The format I'm currently using looks like

[{"color": "#D2B887", "seasons": [{"record": 0.21428571428571427, "wins": "3", "ties": "0", "losses": "11", "year": "1967"}, {"record": 0.32142857142857145, "wins": "4", "ties": "1", "losses": "9", "year": "1968"}], "display_name": "New Orleans Saints", "team": "aints"}]

I am manipulating the year using

d3.time.format("%Y").parse;

The domain is set using

x.domain([parseDate("1920"), parseDate("2013")]);

And I verified using console.log() that the date is in the format of "Sun Jan 01 2006 00:00:00 GMT-0800 (PST)"

Full code here

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>NFL Standings</title>
    <script type="text/javascript" src="d3.v3/d3.v3.js"></script>
    <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-19251792-1']);
      _gaq.push(['_trackPageview']);

      (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

    </script>
<style> /* set the CSS */

body { font: 12px Arial;}

path { 
    stroke: LightGray;
    stroke-width: 2;
    fill: none;
}

.axis path,
.axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
}

</style>
<body>

<div id="outer" style="width:100%">
    <div id="inner" style="display:table;margin:0 auto;">
<h1>NFL Win Percentages</h1>

<script type="text/javascript">
// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 30, left: 50},
    width = 1400 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

// Parse the date / time
var parseDate = d3.time.format("%Y").parse;

// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);

// Define the axes
var xAxis = d3.svg.axis().scale(x)
    .orient("bottom").ticks(5);

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

// Define the line
var valueline = d3.svg.line()
    .x(function(d, i) { return x( parseDate(d.year) ) })
    .y(function(d) { return y( d.record ) })
    .interpolate("monotone");

// Adds the svg canvas
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 + ")");

var team_season_data;

// Iterate over each team and plot the line for that team
d3.json("data/nfl_team_season_data.json", function(error, json) {
    if (error) return console.warn(error);
        team_season_data = json;

    // Add the valueline paths
    svg.selectAll("path")
        .data(team_season_data)
        .enter()
        .append("path")  // Add the valueline path.
            .attr("class", "line")
            .style("stroke", function(d) {
                return d.color;
            })
            .attr("d", function(d) {
                return valueline(d.seasons);
            })
        .on("mouseover",function(d) {
            d3.select(this).style("stroke", function(d) {
                return d.color;
            })
        })
        .on("mouseout",function(d) {
            d3.select(this).style("stroke", "LightGray")
        });

    // Scale the range of the data
    x.domain([parseDate("1920"), parseDate("2013")]);
    y.domain([0, 1]);

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

    // Add the Y Axis
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis);
});

</script>
</div //inner>
</div //outer>
</body>

See working gist at http://bl.ocks.org/GregKroleski/6124514

Any ideas?

3
  • Have you verified that your x scale gives you back a sensible value for a given date? Jul 31, 2013 at 8:16
  • Can you post this as a full example to bl.ocks.org, JS Fiddle, JS Bin, CodePen, or similar? I suspect the problem is in your data file, but you haven’t included a link to your data in the above code so it’s hard to say. (Knowing exactly which version of D3 you are using could also be relevant.) It’s always easier to understand a problem when you can reproduce it in the browser.
    – mbostock
    Jul 31, 2013 at 15:21
  • Thanks for taking a look. Lars, no I can not get anything to render, I even manually created an array in the code with a few data points and it did not render. Mike - I was running D3 3.0.6. I've also updated the question with a bl.ocks.org link. Jul 31, 2013 at 18:13

1 Answer 1

1

You need to set your scales’ domains before you use them.

Currently you’re setting the x and y scales’ domains after you create the path elements (indirectly via your d3.svg.line instance). So, you’re getting the default domains for those scales, which is leading to nonsensical values.

1
  • That worked! Thank you for taking a look. I figured it was something like that, I just didn't know where to look. Aug 9, 2013 at 5:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.