Format histogram axes: 200,000 --> 200k (#913)

* remove dead file

* tickformat
This commit is contained in:
Colin Megill
2019-09-16 17:07:51 -04:00
committed by GitHub
parent 20317fd08f
commit ec4da63408
2 changed files with 16 additions and 89 deletions

View File

@@ -24,8 +24,8 @@ import { makeContinuousDimensionName } from "../../util/nameCreators";
class HistogramBrush extends React.Component {
static getColumn(world, field, clipped = true) {
/*
Return the underlying Dataframe column for our field. By default,
returns the clipped column. If clipped===false, will return the
Return the underlying Dataframe column for our field. By default,
returns the clipped column. If clipped===false, will return the
unclipped column.
*/
const obsAnnotations = clipped
@@ -357,14 +357,24 @@ class HistogramBrush extends React.Component {
.append("g")
.attr("class", "axis axis--x")
.attr("transform", `translate(0,${this.height - this.marginBottom})`)
.call(d3.axisBottom(x).ticks(5));
.call(
d3
.axisBottom(x)
.ticks(5)
.tickFormat(d3.format(".0s"))
);
/* Y AXIS */
svg
.append("g")
.attr("class", "axis axis--y")
.attr("transform", `translate(${this.width - this.marginRight},0)`)
.call(d3.axisRight(y).ticks(3));
.call(
d3
.axisRight(y)
.ticks(3)
.tickFormat(d3.format(".0s"))
);
/* axis style */
svg.selectAll(".axis text").style("fill", "rgb(80,80,80)");
@@ -407,8 +417,8 @@ class HistogramBrush extends React.Component {
isDiffExp
? "histogram-diffexp"
: isUserDefined
? "histogram-user-gene"
: "histogram-continuous-metadata"
? "histogram-user-gene"
: "histogram-continuous-metadata"
}
style={{
padding: globals.leftSidebarSectionPadding,

View File

@@ -1,83 +0,0 @@
// jshint esversion: 6
import * as d3 from "d3";
import styles from "./parallelCoordinates.css";
import { yAxis, brushstart } from "./util";
const drawAxes = (
svg,
ctx,
dimensions,
xscale,
height,
width,
handleBrushAction,
handleColorAction
) => {
/*****************************************
******************************************
Handles a brush event, toggling the display of foreground lines.
******************************************
******************************************/
function brush() {
const actives = [];
svg
.selectAll(".parcoords_axis .parcoords_brush")
.filter(() => d3.brushSelection(this))
.each(d => {
actives.push({
dimension: d,
extent: d3.brushSelection(this)
});
});
/* fire action, with selected dimensions & their values */
handleBrushAction(actives);
}
const axes = svg
.selectAll(".parcoords_axis")
.data(dimensions)
.enter()
.append("g")
.attr("class", `${styles.axis} parcoords_axis`)
.attr("transform", (d, i) => `translate(${xscale(i)})`);
axes
.append("g")
.each(d => {
const renderAxis =
"axis" in d
? d.axis.scale(d.scale) // custom axis
: yAxis.scale(d.scale); // default axis
d3.select(this).call(renderAxis);
})
.append("text")
.on("click", d => {
handleColorAction(d.key);
})
.attr("class", styles.title)
.attr("text-anchor", "start")
.text(d => ("description" in d ? `${d.description} 🖌️` : `${d.key} 🖌️`));
// Add and store a brush for each axis.
axes
.append("g")
.attr("class", `${styles.brush} parcoords_brush`)
.each(d => {
d3.select(this).call(
(d.brush = d3
.brushY()
.extent([[-10, 0], [10, height]])
.on("start", brushstart)
.on("brush", brush)
.on("end", brush))
);
})
.selectAll("rect")
.attr("x", -8)
.attr("width", 16);
return axes;
};
export default drawAxes;