How can I get labels on the D3 Correlogram Chart Brick?

DHo

I love correlation matrices for exploration, but Domo's implementation is very tough to get value out of without labeled axes. Anyone know enough about bricks or D3 to guide me?

GrantSmith

Are you wanting tick labels or just a generic x and y label?

If you're looking to just put some text on the axis to state what the units or metric you're displaying is you can just add a new text feature.

x-axis

svg.append("text")
    .attr("class", "x label")
    .attr("text-anchor", "end")
    .attr("x", width)
    .attr("y", height - 6)
    .text("X LABEL");

y-axis

svg.append("text")
    .attr("class", "y label")
    .attr("text-anchor", "end")
    .attr("y", 6)
    .attr("dy", ".75em")
    .attr("transform", "rotate(-90)")
    .text("Y LABEL");

GrantSmith

Are you wanting tick labels or just a generic x and y label?

If you're looking to just put some text on the axis to state what the units or metric you're displaying is you can just add a new text feature.

x-axis

svg.append("text")
    .attr("class", "x label")
    .attr("text-anchor", "end")
    .attr("x", width)
    .attr("y", height - 6)
    .text("X LABEL");

y-axis

svg.append("text")
    .attr("class", "y label")
    .attr("text-anchor", "end")
    .attr("y", 6)
    .attr("dy", ".75em")
    .attr("transform", "rotate(-90)")
    .text("Y LABEL");

DHo

🤔

How exactly would I do that? I'm "pitching in" here for a company that doesn't have a BI dev available right now. I'm looking at the js in the brick, but I'm not sure where your snippets would go.

To answer your question, I'm just trying to set it up like a "normal" correlation matrix where each measure on the matrix is listed next to it's respective row and column.

Here's an example of what I'm used to working with.

I'm surprised Domo would have built their example without the axis labels. This chart type already makes most people's eyes roll back in their head as it is.