Use sci notation for axis ticks abs(tick) >= 10000 (#1363)

Fixes https://github.com/chanzuckerberg/cellxgene/issues/1349

For more information see https://github.com/d3/d3-format

Note that does not _fully_ fix the issue described in #1349, but rather
makes the formatting issue far less likely. It is _still_ possible for
this to occur if the difference between two ticks in axes happes in the
a significant digit cropped by the scientific notation format
This commit is contained in:
Matt Weiden
2020-04-08 09:45:32 -07:00
committed by GitHub
parent b466d952f9
commit 1f94c71c22
2 changed files with 8 additions and 8 deletions
+3 -3
View File
@@ -41,7 +41,7 @@ export const datasets = {
{ {
metadata: "n_genes", metadata: "n_genes",
"coordinates-as-percent": { x1: 0.25, y1: 0.5, x2: 0.55, y2: 0.5 }, "coordinates-as-percent": { x1: 0.25, y1: 0.5, x2: 0.55, y2: 0.5 },
count: "1552" count: "1537"
} }
] ]
}, },
@@ -140,8 +140,8 @@ export const datasets = {
metadata: "n_genes", metadata: "n_genes",
gene: "S100A8", gene: "S100A8",
"coordinates-as-percent": { x1: 0.25, y1: 0.5, x2: 0.55, y2: 0.5 }, "coordinates-as-percent": { x1: 0.25, y1: 0.5, x2: 0.55, y2: 0.5 },
count: "392", count: "386",
"gene-cell-count": "421" "gene-cell-count": "416"
} }
} }
}; };
@@ -80,8 +80,8 @@ class HistogramBrush extends React.PureComponent {
constructor(props) { constructor(props) {
super(props); super(props);
this.marginLeft = 3; // Space for 0 tick label on X axis this.marginLeft = 12; // Space for 0 tick label on X axis
this.marginRight = 40; // space for Y axis & labels this.marginRight = 52; // space for Y axis & labels
this.marginBottom = 25; // space for X axis & labels this.marginBottom = 25; // space for X axis & labels
this.marginTop = 3; this.marginTop = 3;
@@ -374,8 +374,8 @@ class HistogramBrush extends React.PureComponent {
.call( .call(
d3 d3
.axisBottom(x) .axisBottom(x)
.ticks(5) .ticks(4)
.tickFormat(d3.format(".0s")) .tickFormat(d3.format(x.domain().some(n => Math.abs(n) >= 10000) ? ".2e" : ","))
); );
/* Y AXIS */ /* Y AXIS */
@@ -387,7 +387,7 @@ class HistogramBrush extends React.PureComponent {
d3 d3
.axisRight(y) .axisRight(y)
.ticks(3) .ticks(3)
.tickFormat(d3.format(".0s")) .tickFormat(d3.format(y.domain().some(n => Math.abs(n) >= 10000) ? ".0e" : ","))
); );
/* axis style */ /* axis style */