Feature Request: Draw a 45 degrees line

[MastafaF]

Hi,

I am using st.produce_scattertext_explorer with topics. How can I draw a 45 degrees line on the produced scatter plot?

Also ideally, I would like to color each side of the line in a different color to show predominance of a given category over the other. Could you find an easy way to do that? Else, could you point me to the source code that is handling drawing of this 45 deg line + coloring? 😄

Cheers,

[JasonKessler]

Hi Mastafa,

Optionally plotting a 45 degree line through the chart is a great idea, and is done in some similar charts. It's something I should work on soon, and if it's not done by next month, please ping me, or re-up this issue.

The code would go in main.js, and should be enabled by a boolean parameter to the buildViz function at the top of the file. This parameter should be propagated to ScatterplotStructure and the produce_scattertext_explorer function.

Jason

[JasonKessler]

You now can show a line from the lower left-hand corner to the upper right-hand of the plot by using the show_diagonal parameter in produce_scattertext_explorer. This is available in version 0.0.2.71 and higher.

[MastafaF]

Thanks @JasonKessler,

In main.js, I have added the following to have dashed line instead of a plain one:

  if (showDiagonal) {
                var diagonal = svg.append("g")
                    .append("line")
                    .attr("x1", 0)
                    .attr("y1", height)
                    .attr("x2", width)
                    .attr("y2", 0)
                    .style("stroke-dasharray", "5,5")
                    .style("stroke", "#cccccc")
                    .style("stroke-width", "1px")
                    .moveToBack();
            }

I would rather have a dashed line myself so up to you to integrate it as an additional parameter or put it as a default view. 😄

[JasonKessler]

Cool! Feel free to follow the structure of the last commit and submit a PR.

…

On Thu, Oct 15, 2020 at 8:56 AM MastafaF ***@***.***> wrote: Thanks @JasonKessler <https://github.com/JasonKessler>, In main.js, I have added the following to have dashed line instead of a plain one: if (showDiagonal) { var diagonal = svg.append("g") .append("line") .attr("x1", 0) .attr("y1", height) .attr("x2", width) .attr("y2", 0) .style("stroke-dasharray", "5,5") .style("stroke", "#cccccc") .style("stroke-width", "1px") .moveToBack(); } I would rather have a dashed line myself so up to you to integrate it as an additional parameter or put it as a default view. 😄 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#71 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACMMXCHCD6LD4DUY2DRPPTSK4LRZANCNFSM4SKL4Z4A> .

[MastafaF]

Will do so @JasonKessler . I would like to color the point from the left side of the diagonal in a given color and the ones from the right side in another color now. Do you think you could point me out to the files to update for that or probably you have a quick solution for that?

We might iterate on the data points coordinates in the graph and color them one by one depending the (x,y) coordinates. I wonder if in this case they would have a color attribute. Any help would be appreciated here 😄

[JasonKessler]

Again, you can look the previous commit for guidance.

[MastafaF]

Thanks for the recommendation @JasonKessler. What is the usage of colorFunc in main.js?

.style("fill", function (d) {
                    //.attr("fill", function (d) {
                    if (colorFunc) {
                        return colorFunc(d);
                    } else if (greyZeroScores && d.os == 0) {
                        return d3.rgb(230, 230, 230);
                    } else if (pValueColors && d.p) {
                        if (d.p >= 1 - minPVal) {
                            return wordVecMaxPValue ? d3.interpolateYlGnBu(d.s) : color(d.s);
                        } else if (d.p <= minPVal) {
                            return wordVecMaxPValue ? d3.interpolateYlGnBu(d.s) : color(d.s);
                        } else {
                            return interpolateLightGreys(d.s);
                        }
                    } else {
                        if (d.term == "psychological") {
                            console.log("COLS " + d.s + " " + color(d.s) + " " + d.term)
                            console.log(d)
                            console.log(color)
                        }
                        return color(d.s);
                    }
                })

If it is a function, we could do something like the following:

def colorFunc(d):
  if d.y > d.x: 
    d.color = 'Blue' # color points on the left side of the diagonal in Blue 
  else: 
    d.color = 'Red' # color points on the right side of the diagonal in Red 

[JasonKessler]

It's a javascript function which returns the color of a point. You can see examples of its use in some of the demos, such as https://github.com/JasonKessler/scattertext/blob/19d98fc632727dc204b6095e83ef88dafc62f0e8/demo_tsne_style_for_publication.py