d3v4 checkout chart - making sure the color scheme is correct for the legend and circles

Question

So I made this prototype chart -- and wanted to create a kind of birdseye view -- of a pyramid type chart.

So for example with foursquare -- restaurants, butchers, cafes -- would have different attributes associated - like count, chekin, popularity

This is a version 3 of the chart. http://jsfiddle.net/0ht35rpb/33/

This is the version 4 https://jsfiddle.net/pLo6mubx/

        var color = d3.scaleOrdinal()
            .range(["#a8e6cf", "#dcedc1", "#ffd3b6", "#ffaaa5"]);

-- but I am unsure if the colors are correct - as if the count is small in series A -- is it consistent when looking at the other series -- the size of the circle may change - but its really just its layer. I want to make sure the data is represented correctly - and that the colors are correct throughout the circles themselves and the legend. - Also if there is a way to clean up the diagonally pointing labels - it gets messy as the overall size of the group may change -- so that's causing the angle to change.

so the chart itself should be correct as its recalling the data index

        circles.enter().append("circle")
        .attr("cy", height / 2)
        .attr("cx", 0)
        .attr("r", function(d) {
            return scale(Math.sqrt(d.value));
        })
        .style("fill", function(d) {
            return color(d.index);
        });

but the legend is using just a one series of data and just looping through the colors.

        ring.enter().append("circle")
          .attr("cy", function(d, i) {
            return (vertical * i) + ringRadius;
          })
          .attr("r", ringRadius)
          .attr("width", ringRadius*2)
          .attr("height", ringRadius*2)
          .style("fill", function(d, i) {
            return color(i);
          });

Fix the the pointer label displacements -- the angles are coming off at odd and sharp angles -- its as if the labels 200,500,4000,200 -- need to be in relative position to EACH parent pyramid -- and then off-set to the right by the same amount like 100px?
CHECK and/or CORRECT -- the colors in the legend and in the circles themselves -- I am not sure the legend is a true representative of the way the colors are being used -- the colors on the chart should be consistent throughout - but I think the way the circles are plotting their fill colors and the way the legend does it - are relying on different indexes -- please check/correct

June 8th - latest version - https://jsfiddle.net/e8bmyvra/1/ - remaining "fix the the pointer label displacements"

user_13602750 · Answer

So from your updates it seems like the remaining problem is fixing the labels for the numbers so that they have the same angle and snap to the centre of the circles instead of the circumferences. We can actually accomplish this with some minor modifications of your code. Specifically at two places:

When drawing the lines that point to the number labels, we remove the code that displaces the lines according to the circle radius. For y1 we give it the y-value for the centre of the circle, and for x2 and y2 we give them a fixed displacement. i.e.

newGroups.append("g").attr("class", "datumLine")
  .append("line")
  .attr("class", "datumValue")
  .attr("y2", 30) // <---- Adjusted this value slightly
  .attr("y1", function(d) {
    return height / 2; // <---- note that we remove the dependence on radius here
  })
  .attr("x2", function(d) {
    return (height / 2) - 70; // <---- Likewise we use a fixed displacement here
});

For the portion where we add the numbers 200, 500, 4000, 2000, we likewise remove the code that displaces the numbers according to the circle radius and give it a fixed value (the same value we use for the x2 attribute in the code above). We also adjust the rotation slightly. i.e.
```
newGroups.append("text")
  .attr("class", "datumValue")
  .attr("y", 10)
  .text(function(d) {
    return fetchValue(d.items, focus);
  })
  .attr("transform", function(d) {
    return "translate(" + ((height / 2) - 70) + ",20) rotate(-60)"; // <- Note changes here
});
```

The exact numbers used in the example above, such as displacement and rotation, can be altered as desired. This is just an example of values that avoids the problem of the lines intersecting adjacent circles. Here is a jsfiddle of the results https://jsfiddle.net/a8qod3z0/:

Let me know if this is your intended output, or if you had something different in mind and we can work on that!

d3v4 checkout chart - making sure the color scheme is correct for the legend and circles

1 Answers