syntagmatic/README.md

## README.md

      
    Raw
  

              README.md
            
          
    A tale of doubt and confusion from the d3 mailing list.

  
## 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>

## 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