title: d3.js scatterplot with different colors and symbols - issues encountered
body: <p>I am trying to create a scatterplot of hundreds of datapoints, each with about 5 different attributes.
  The data is loaded from a .csv as an array of objects, each of which looks like this:</p>
  
  <p><code>{hour: "02",yval: "63",foo: "33", goo:"0", bar:"1"},</code></p>
  
  <p>I want to display the scatterplot with the following attributes:</p>
  
  <p><strong>Shape for <code>bar</code>:</strong></p>
  
  <p>-circle to represent all points where <code>bar=0</code>, and a triangle-down to represent those where <code>bar=1</code> (this is a dummy variable).</p>
  
  <p><strong>Color for <code>foo</code> and <code>goo</code>:</strong></p>
  
  <ul>
  <li>All points start as grey. <code>goo</code> is categorical with values [0,1,2] while <code>foo</code> is quantitative with a range from 0-50. <em>foo and goo are mutually exclusive, so only one of them has a value. In other words, for each data point either <code>foo=0</code> or <code>goo=0</code>.</em></li>
  <li>Points with <code>goo=1</code> should be orange; points with <code>goo=2</code> should be red.</li>
  <li><code>foo</code> should be mapped onto a linear color scale from light blue to dark blue, ie <code>d3.scale.linear().domain([0, 50]).range(["#87CEFF", "#0000FF"]);</code></li>
  </ul>
  
  <p>I can do each of these individually, but defining everything together is creating issues for me.</p>
  
  <p>My code with reproducible data is here: <a href="http://jsfiddle.net/qy5ohw0x/3/" rel="nofollow">http://jsfiddle.net/qy5ohw0x/3/</a></p>
  
  <p><strong>Issues</strong></p>
  
  <ul>
  <li>For the symbol, i tried</li>
  </ul>
  
  <p><code>.append("svg:path")</code></p>
  
  <p><code>.attr("d", d3.svg.symbol())</code></p>
  
  <p>which did not work. I tried a different approach altogether, but this did not map the values correctly:</p>
  
  <pre><code>var series = svg.selectAll("g.series") 
      .data(dataSet, function(d, i) { return d.bar; })
      .enter() 
      .append("svg:g")
  
  series.selectAll("g.point")
      .data(dataSet)
      .enter()
      .append("svg:path")
      .attr("transform", function(d, i) { return "translate(" + d.hour +  "," + d.yval + ")"; })
      .attr("d", function(d,i, j) { return d3.svg.symbol().type(symbolType[j])(); })
      .attr("r", 2);
  </code></pre>
  
  <ul>
  <li>For the <code>goo</code> colors (grey/orange/red), i mapped the values to the 3 colors manually:</li>
  </ul>
  
  <p>First define <code>var colors = ["grey", "orange", "red"];</code>  </p>
  
  <p>Then while drawing the data points chain </p>
  
  <p><code>.style("fill", function (d) { return colors[d.type]; })</code></p>
  
  <p>This worked alone, but not with the different symbols.</p>
  
  <ul>
  <li>Finally, can i chain a second color .attr for <code>foo</code>? <code>d3.scale.linear().domain([0, 50]).range(["#87CEFF", "#0000FF"]);</code> would probably work if this is possible.</li>
  </ul>
  
  <p>Again, the jsfiddle is here: <a href="http://jsfiddle.net/qy5ohw0x/3/" rel="nofollow">http://jsfiddle.net/qy5ohw0x/3/</a></p>
  
  <p>Thanks!!</p>