fork/cellxgene
1
0
Fork 0
mirror of https://github.com/chanzuckerberg/cellxgene.git synced 2026-10-06 07:18:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

d3 scale for dot size

Browse Source
This commit is contained in:
Colin Megill
2021-07-23 13:29:10 -07:00
parent ed97013277
commit e29a6f72c2
2 changed files with 14 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/dotplot/dot.js
+13 -6
View File
@@ -1,4 +1,5 @@
import React from "react"; import React from "react";
import * as d3 from "d3";
const Dot = (props) => { const Dot = (props) => {
const { const {
@@ -14,15 +15,21 @@ const Dot = (props) => {
? histogramMap.get(categoryValue) ? histogramMap.get(categoryValue)
: new Array(100).fill(0); : new Array(100).fill(0);
const zeros = bins.shift(); /* MUTATES, REMOVES FIRST ELEMENT */ const totalCells = bins.reduce(
const rest = bins.reduce( (acc, current) => acc + current
); /* SUM REMAINING ELEMENTS */
bins.shift(); /* MUTATES, REMOVES FIRST ELEMENT */
const expressing = bins.reduce(
(acc, current) => acc + current (acc, current) => acc + current
); /* SUM REMAINING ELEMENTS */ ); /* SUM REMAINING ELEMENTS */
/* TODO(colinmegill) #632 scale between correct dimensions */ /* TODO(colinmegill) #632 scale between correct dimensions */
const _maxSize = rowColumnSize; const paddingEquivalentToRowColumnIndexOffset = 0;
const _radius = const dotscale = d3
(rest / zeros) * 10 > _maxSize ? _maxSize : (rest / zeros) * 10; .scaleLinear()
.domain([0, 1])
.range([0, rowColumnSize - paddingEquivalentToRowColumnIndexOffset]);
const _radius = dotscale(expressing / totalCells);
return ( return (
<g <g
@@ -46,7 +53,7 @@ const Dot = (props) => {
cy="-3.5" cy="-3.5"
style={{ style={{
fill: "steelblue", fill: "steelblue",
fillOpacity: 0.3, fillOpacity: 0.5,
stroke: "none", stroke: "none",
}} }}
/> />
client/src/components/dotplot/index.js
+1 -1
View File
@@ -42,7 +42,7 @@ class Dotplot extends React.Component {
const { genesets } = this.props; const { genesets } = this.props;
const _TESTgeneset = genesets.get("bladder urothelial"); const _TESTgeneset = genesets.get("bladder urothelial");
const _TESTmetadatField = "cell_ontology_class"; const _TESTmetadatField = "tissue";
/* TODO(colinmegill) #632 componetize */ /* TODO(colinmegill) #632 componetize */
if (!_TESTgeneset) return null; if (!_TESTgeneset) return null;