Square, Circles & Triangles taking the same dataset - Mike's example

[jose banks]

I was wondering how I would go about using one dataset & it being represented by different shapes. I am currently using json data:

 [{Name:"Jake", id:7, mark:"Medium"}, { Name:"Jke", id:7, mark:"High"}, { Name: "ake", id:7, mark :"Low"}];

Essentially, I would like to use the circles, squares & triangles to represent the different relevance stages e.g. low, medium & high. I have tried using the similar concept as Mike Bostock - http://bl.ocks.org/1062383

So far I have this:  http://jsfiddle.net/xwZjN/3/ I would appreciate any advice or help

Thanks!

[Chris Viau]

You should use d3.svg.symbol instead of SVG shapes, as in Mike's example:

.attr("d", d3.svg.symbol().type("circle"))

[jose banks]

Thanks, but would I be able to call more than one shape at once e.g.  

.attr("d", d3.svg.symbol().type("circle", "square", "triangle-up")) ??

[Chris Viau]

You will be able to render the shape you want by setting the type in the dataset:

[{Name:"Jake", id:7, mark:"Medium", type: 'circle'}, { Name:"Jke", id:7, mark:"High", type: 'square'}];

.attr("d", d3.svg.symbol().type(function(d) { return d.type; }))

I can tweak your JsFiddle if you need a more concrete example.

[jose banks]

If you could that would be great - thanks! I have tried the following : 

var node = svg.selectAll("path.node")

     .data(nodes)

     .enter().append("svg:path")

     .attr("d", d3.svg.symbol().type(function(d) {return d.type;}))

     .style("fill", "blue")

     .attr("opacity", 0.6)

     .attr("r", 5)

It does appear on the arc but the shapes are on top of each other, whereas, they should be positioned on the left of the names. I have tried using transform, but it doesn't seem to wrok. 

[Chris Viau]

You are almost there. Here it is: http://jsfiddle.net/xwZjN/8/ Since you use a path, you need to update its position with the transform attribute.

[jose banks]

Am I able to change the colors of each shape e.g. red the square & yellow for the triangle?

[Chris Viau]

var colors = {"circle": "orange", "square": "red", "diamond": "green", "cross": "grey"};
....
   .style("fill", function(d){ return colors[d.type];})

http://jsfiddle.net/xwZjN/9/

[jose banks]

Thanks, a lot! I'm trying to use javascript switch statement to do the shapes, as I dont wish to declare the type in my json as then I will have to change all of my json. 

So far I have this switch statement: 

var shape; 

var relevance = d.Relevance; 

switch (relevance)

{

   case High: 

   shape = "square";

   break;

   case Medium:

   shape = "circle"; 

   break;

   case Low: 

   shape = "triangle-up"; 

   break; 

}

And then I have the .symbol to return the desired shapes : 

.attr("d", d3.svg.symbol().type(function(d) {return shape})

I don't know where I'm going wrong

[Chris Viau]

I'm not sure to understand your switch statement. If you don't want to add the shape type in your dataset, you can select it on the fly the same way I showed you for colors:

var shape = {"Low": "circle", "Medium": "square", "High": "cross"};

...

.attr("d", d3.svg.symbol().type(function(d) { return shape[d.mark]; }))

[jose banks]

Thanks, Chris. I don't suppose you have an idea how I could plot these shapes on the Arc I have created either dynamically or hard coded (bear in mind I will have much more data entries)?