syntagmatic · December 14, 2015 16:09
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <meta charset="utf-8">
 <body></body>
 <script src="http://d3js.org/d3.v3.min.js"></script>
 <script>
 var currentLine = 0;

 var svg = d3.select("body")
  .append("svg")
  .attr("width", 960)
  .attr("height", 500)
  .append("g")
  .attr("transform", "translate(180,200)")

 d3.text("poem", function(poem) {
  var data = poem.split("\n");
  var lines = svg.selectAll("text")
    .data(data)
    .enter().append("text")
    .text(String)
    .attr("x", function(d,i) { return 4*(i-currentLine); })
    .attr("y", function(d,i) { return 24*(i+1); })
    .style("opacity", function(d,i) { return 1/Math.pow((i+1),1.2); })
    .attr("transform", function(d,i) { return "rotate(" + Math.pow(i-currentLine,2)/10 + ")" })

  setInterval(rollText, 1120);

  function rollText() {
    currentLine++;

    svg.transition()
       .duration(1120)
       .ease("linear")
       .attr("transform", "translate(180," + (200-(24*currentLine)) + ")");

     lines.transition()
       .duration(700)
       .ease("sin")
       .style("opacity", function(d,i) { return 1/Math.pow((Math.abs(currentLine-i)+1),1.2); })
       .attr("transform", function(d,i) { return "rotate(" + Math.pow(i-currentLine,2)/10 + ")" })
       .attr("x", function(d,i) { return 4*(i-currentLine); })
  };
 });
 </script>
 <style>
 svg {
  height: 800px;
 }
 svg text {
  font-size: 16px;
  font-family: Helvetica, Arial, sans-serif;
 }
 </style>
diff --git a/poem b/poem
 Hi,
 Attempting to update a line graph based on new filtered dataset
 but I'm getting
 this error?
 Error: Problem parsing d="MNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaN"
 Not having any luck fixing the problem - can anyone help?

 The d3.json call is asynchronous,
 so the data is not available
 when you try to bind it to the dom

 So I need to call the data again? 

 No, you'd end up with the same problem

 "asynchronous" means that the code inside the callback function
 that you pass to the d3.json call will run
 at some indeterminate point in the future
 what's happening is that you're calling d3.json
 your drawing code is executing
 then at some point after that
 you get the json data back
 So calling it twice won't do what you want

 Thanks a lot Simon to take the time
 to expand my too short answer
 Indeed, the typical way
 is to place the drawing code inside the callback
 as you can see in a lot of examples like this one

 Thank you both:)

 Was looking at your replies and my code again
 isn't everything within the callback function already?
 I've marked start and end of function
 in gist

 Wow, yes
 Github is really screwing up your formatting
 I haven't counted the brackets
 but I'll take it
 you have

 Looking closer
 in "upDate" you're replacing selectedData with
 d3.nest
 when calling the d3.nest with itself
 rather than your selectedData
 Unless the tabs
 are confusing me again

 Thanks for taking the time to look at it for me:)
 I've updated the gist 
 hopefully a bit more readable!

 Both the filter and nest functions
 return correct data 
 but there seems to be a problem
 with applying this new data
 to the graph and updating it
 I've amended as per your advice
 but for some reason 
 a parsing error

 Right
 I think I was wrong anyway
 shouldn't try and help with so
 little sleep
 but it's good not to reassign variables
 generally
 Umm... 
 what do x.domain and y.domain end up looking like?

 At the moment
 with the parsing error 
 they're not displaying on update at all
 if I comment out the entire nest function
 and use the filtered data "selectedData" for the domain
 and update the line
 everything works
 perfectly

 I mean the x.domain and y.domain values
 you're assigning them using
 d3.extent/d3.max etc

 what values are you getting there?

 undefined at mo:)
  [undefined, undefined]
  [0, undefined]

 Right,
 well,
 I'm assuming your nested data isn't quite
 as you're expecting it to be.

 No:)
 Can't understand why
 as it does seem
 to be returning
 correct data
	<meta charset="utf-8">
	<body></body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>
	var currentLine = 0;

	var svg = d3.select("body")
	.append("svg")
	.attr("width", 960)
	.attr("height", 500)
	.append("g")
	.attr("transform", "translate(180,200)")

	d3.text("poem", function(poem) {
	var data = poem.split("\n");
	var lines = svg.selectAll("text")
	.data(data)
	.enter().append("text")
	.text(String)
	.attr("x", function(d,i) { return 4*(i-currentLine); })
	.attr("y", function(d,i) { return 24*(i+1); })
	.style("opacity", function(d,i) { return 1/Math.pow((i+1),1.2); })
	.attr("transform", function(d,i) { return "rotate(" + Math.pow(i-currentLine,2)/10 + ")" })

	setInterval(rollText, 1120);

	function rollText() {
	currentLine++;

	svg.transition()
	.duration(1120)
	.ease("linear")
	.attr("transform", "translate(180," + (200-(24*currentLine)) + ")");

	lines.transition()
	.duration(700)
	.ease("sin")
	.style("opacity", function(d,i) { return 1/Math.pow((Math.abs(currentLine-i)+1),1.2); })
	.attr("transform", function(d,i) { return "rotate(" + Math.pow(i-currentLine,2)/10 + ")" })
	.attr("x", function(d,i) { return 4*(i-currentLine); })
	};
	});
	</script>
	<style>
	svg {
	height: 800px;
	}
	svg text {
	font-size: 16px;
	font-family: Helvetica, Arial, sans-serif;
	}
	</style>
	Hi,
	Attempting to update a line graph based on new filtered dataset
	but I'm getting
	this error?
	Error: Problem parsing d="MNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaN"
	Not having any luck fixing the problem - can anyone help?

	The d3.json call is asynchronous,
	so the data is not available
	when you try to bind it to the dom

	So I need to call the data again?

	No, you'd end up with the same problem

	"asynchronous" means that the code inside the callback function
	that you pass to the d3.json call will run
	at some indeterminate point in the future
	what's happening is that you're calling d3.json
	your drawing code is executing
	then at some point after that
	you get the json data back
	So calling it twice won't do what you want

	Thanks a lot Simon to take the time
	to expand my too short answer
	Indeed, the typical way
	is to place the drawing code inside the callback
	as you can see in a lot of examples like this one

	Thank you both:)

	Was looking at your replies and my code again
	isn't everything within the callback function already?
	I've marked start and end of function
	in gist

	Wow, yes
	Github is really screwing up your formatting
	I haven't counted the brackets
	but I'll take it
	you have

	Looking closer
	in "upDate" you're replacing selectedData with
	d3.nest
	when calling the d3.nest with itself
	rather than your selectedData
	Unless the tabs
	are confusing me again

	Thanks for taking the time to look at it for me:)
	I've updated the gist
	hopefully a bit more readable!

	Both the filter and nest functions
	return correct data
	but there seems to be a problem
	with applying this new data
	to the graph and updating it
	I've amended as per your advice
	but for some reason
	a parsing error

	Right
	I think I was wrong anyway
	shouldn't try and help with so
	little sleep
	but it's good not to reassign variables
	generally
	Umm...
	what do x.domain and y.domain end up looking like?

	At the moment
	with the parsing error
	they're not displaying on update at all
	if I comment out the entire nest function
	and use the filtered data "selectedData" for the domain
	and update the line
	everything works
	perfectly

	I mean the x.domain and y.domain values
	you're assigning them using
	d3.extent/d3.max etc

	what values are you getting there?

	undefined at mo:)
	[undefined, undefined]
	[0, undefined]

	Right,
	well,
	I'm assuming your nested data isn't quite
	as you're expecting it to be.

	No:)
	Can't understand why
	as it does seem
	to be returning
	correct data