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

parallel working

Browse Source
This commit is contained in:
Colin Megill
2017-08-26 00:15:23 -07:00
parent da24945bf2
commit 129ffa1ec6
4 changed files with 106 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+93
View File
@@ -5,6 +5,99 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#db5945">
<title>Cellx</title>
<style>
/*
This code can be found: https://bl.ocks.org/syntagmatic/05a5b0897a48890133beb59c815bd953
body {
min-width: 760px;
}
*/
.parcoords {
display: block;
}
.parcoords svg,
.parcoords canvas {
font: 10px sans-serif;
position: absolute;
}
.parcoords canvas {
opacity: 0.9;
pointer-events: none;
}
.axis .title {
font-size: 10px;
transform: rotate(-21deg) translate(-5px,-6px);
fill: #222;
}
.axis line,
.axis path {
fill: none;
stroke: #ccc;
stroke-width: 1px;
}
.axis .tick text {
fill: #222;
pointer-events: none;
}
/*
old, from reference bl.ocks
.axis.manufac_name .tick text,
.axis.food_group .tick text {
opacity: 1;
}
*/
.axis:hover line,
.axis:hover path,
.axis.active line,
.axis.active path {
fill: none;
stroke: #222;
stroke-width: 1px;
}
.axis:hover .title {
font-weight: bold;
}
.axis:hover .tick text {
opacity: 1;
}
.axis.active .title {
font-weight: bold;
}
.axis.active .tick text {
opacity: 1;
font-weight: bold;
}
.brush .extent {
fill-opacity: .3;
stroke: #fff;
stroke-width: 1px;
}
pre {
width: 100%;
height: 300px;
margin: 6px 12px;
tab-size: 40;
font-size: 10px;
overflow: auto;
}
</style>
</head>
<body>
<noscript>If you're seeing this message, that means <strong>JavaScript has been disabled on your browser</strong>, please <strong>enable JS</strong> to make this app work.</noscript>
src/components/categorical/categorical.js
+5 -5
View File
@@ -9,9 +9,9 @@ const Button = ({category, c, i}) => (
<button
key={i}
style={{
border: i === 0 ? "none" : `1px solid ${globals.lightgrey}`,
background: i === 0 ? globals.hcaBlue : "none",
color: i === 0 ? "white" : "black",
border: i > -1 ? "none" : `1px solid ${globals.lightgrey}`,
background: i > -1 ? globals.hcaBlue : "none",
color: i > -1 ? "white" : "black",
padding: "7px 10px",
marginRight: 20,
borderRadius: 3,
@@ -20,8 +20,8 @@ const Button = ({category, c, i}) => (
{c}
<span
style={{
fontWeight: i === 0 ? globals.bolder : "auto",
background: i === 0 ? "white" : "none",
fontWeight: i > -1 ? globals.bolder : "auto",
background: i > -1 ? "white" : "none",
color: "black",
marginLeft: 10,
padding: "2px 4px",
src/components/continuous/drawParallelCoordinates.js
+8 -9
View File
@@ -113,7 +113,7 @@ const drawParallelCoordinates = (data) => {
******************************************/
var container = d3.select("body").append("div")
.attr("class", styles.parcoords)
.attr("class", "parcoords")
.style("width", width + margin.left + margin.right + "px")
.style("height", height + margin.top + margin.bottom + "px");
@@ -142,12 +142,12 @@ const drawParallelCoordinates = (data) => {
var axes = svg.selectAll(".axis")
.data(dimensions)
.enter().append("g")
.attr("class", styles.axis)
.attr("class", "axis")
.attr("transform", function(d,i) { return "translate(" + xscale(i) + ")"; });
/*****************************************
******************************************
process and visualize data
process data and extract features
******************************************
******************************************/
@@ -236,14 +236,13 @@ const drawParallelCoordinates = (data) => {
******************************************
******************************************/
const brush = () => {
function brush () {
render.invalidate();
console.log('brush', svg.selectAll(".axis .brush"))
var actives = [];
svg.selectAll(".axis .brush")
.filter((d) => {
.filter(function (d) {
console.log('this', this)
return d3.brushSelection(this);
})
.each(function(d) {
@@ -298,13 +297,13 @@ const drawParallelCoordinates = (data) => {
d3.select(this).call(renderAxis);
})
.append("text")
.attr("class", styles.title)
.attr("class", "title")
.attr("text-anchor", "start")
.text(function(d) { return "description" in d ? d.description : d.key; });
// Add and store a brush for each axis.
axes.append("g")
.attr("class", styles.brush)
.attr("class", "brush")
.each(function(d) {
d3.select(this).call(d.brush = d3.brushY()
.extent([[-10,0], [10,height]])
src/components/continuous/parallelCoordinates.css
-91
View File
@@ -1,91 +0,0 @@
/*
This code can be found: https://bl.ocks.org/syntagmatic/05a5b0897a48890133beb59c815bd953
body {
min-width: 760px;
}
*/
.parcoords {
display: block;
}
.parcoords svg,
.parcoords canvas {
font: 10px sans-serif;
position: absolute;
}
.parcoords canvas {
opacity: 0.9;
pointer-events: none;
}
.axis .title {
font-size: 10px;
transform: rotate(-21deg) translate(-5px,-6px);
fill: #222;
}
.axis line,
.axis path {
fill: none;
stroke: #ccc;
stroke-width: 1px;
}
.axis .tick text {
fill: #222;
opacity: 0;
pointer-events: none;
}
/*
old, from reference bl.ocks
.axis.manufac_name .tick text,
.axis.food_group .tick text {
opacity: 1;
}
*/
.axis:hover line,
.axis:hover path,
.axis.active line,
.axis.active path {
fill: none;
stroke: #222;
stroke-width: 1px;
}
.axis:hover .title {
font-weight: bold;
}
.axis:hover .tick text {
opacity: 1;
}
.axis.active .title {
font-weight: bold;
}
.axis.active .tick text {
opacity: 1;
font-weight: bold;
}
.brush .extent {
fill-opacity: .3;
stroke: #fff;
stroke-width: 1px;
}
pre {
width: 100%;
height: 300px;
margin: 6px 12px;
tab-size: 40;
font-size: 10px;
overflow: auto;
}