Skip to content

Commit

Permalink
text track
Browse files Browse the repository at this point in the history
  • Loading branch information
@nicgirault
nicgirault committed Mar 1, 2017
1 parent 2d68fbe commit d4ba565
Show file tree
Hide file tree
Showing 8 changed files with 189 additions and 41 deletions.
16 changes: 16 additions & 0 deletions demo/text/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang='en'>

<head>
<title>circosJS</title>
<meta charset='utf-8'></meta>
<script src='../../dist/circos.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3-queue/3.0.3/d3-queue.js'></script>
</head>

<body>
<div id='chart'></div>
<script src='./index.js'></script>
</body>
</html>
75 changes: 75 additions & 0 deletions demo/text/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
var circos = new Circos({
container: '#chart',
width: 1000,
height: 1000,
});

var gieStainColor = {
gpos100: 'rgb(0,0,0)',
gpos: 'rgb(0,0,0)',
gpos75: 'rgb(130,130,130)',
gpos66: 'rgb(160,160,160)',
gpos50: 'rgb(200,200,200)',
gpos33: 'rgb(210,210,210)',
gpos25: 'rgb(200,200,200)',
gvar: 'rgb(220,220,220)',
gneg: 'rgb(255,255,255)',
acen: 'rgb(217,47,39)',
stalk: 'rgb(100,127,164)',
select: 'rgb(135,177,255)',
};

var drawCircos = function(error, GRCh37, cytobands) {

cytobands = cytobands.map(function(d) {
return {
block_id: d.chrom,
start: parseInt(d.chromStart),
end: parseInt(d.chromEnd),
gieStain: d.gieStain,
name: d.name,
};
});

circos
.layout(
[GRCh37[0]],
{
innerRadius: 300,
outerRadius: 320,
labels: {display: false},
ticks: {display: false},
}
)
.highlight('cytobands', cytobands, {
innerRadius: 300,
outerRadius: 320,
opacity: 0.7,
color: function(d) {
return gieStainColor[d.gieStain];
},
tooltipContent: function(d) {
return d.name;
},
})
.text('cytobands-labels', cytobands.map(function(d) {
d.position = (d.start + d.end) / 2;
d.value = d.name;
return d;
}), {
innerRadius: 330,
outerRadius: 400,
style: {
'font-size': 12,
},
color: function(d) {
return gieStainColor[d.gieStain];
},
})
.render();
};

d3.queue()
.defer(d3.json, '../data/GRCh37.json')
.defer(d3.csv, '../data/cytobands.csv')
.await(drawCircos);
53 changes: 35 additions & 18 deletions dist/circos.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10116,6 +10116,18 @@ var Circos =
style: {
value: {},
iteratee: true
},
color: {
value: 'black',
iteratee: true
},
axes: {
value: [],
iteratee: false
},
backgrounds: {
value: [],
iteratee: false
}
}, _configs.common, _configs.radial);

Expand All @@ -10130,14 +10142,22 @@ var Circos =

_createClass(Text, [{
key: 'renderDatum',
value: function renderDatum(parentElement, conf, layout, utils) {
value: function renderDatum(parentElement, conf, layout) {
var _this2 = this;

var text = parentElement.selectAll('g').data(function (d) {
return d.values;
return d.values.map(function (item) {
item._angle = _this2.theta(item.position, layout.blocks[item.block_id]) * 360 / (2 * Math.PI) - 90;
item._anchor = item._angle > 90 ? 'end' : 'start';
item._rotate = item._angle > 90 ? 180 : 0;
return item;
});
}).enter().append('g').append('text').text(function (d) {
return d.value;
}).attr('transform', function (d) {
var angle = utils.theta(d.position, layout.blocks[d.block_id]) * 360 / (2 * Math.PI) - 90;
return 'rotate(' + angle + ') translate(' + conf.innerRadius + ', 0)';
return '\n rotate(' + d._angle + ')\n translate(' + conf.innerRadius + ', 0)\n rotate(' + d._rotate + ')\n ';
}).attr('text-anchor', function (d) {
return d._anchor;
});
(0, _forEach2.default)(conf.style, function (value, key) {
text.style(key, value);
Expand Down Expand Up @@ -19975,22 +19995,17 @@ var Circos =
}

function parsePositionTextData(data, layoutSummary) {
console.log(data);
// ['parent_id', 'position', 'value']
if (data.length === 0) {
return { data: [], meta: { min: null, max: null } };
}

var preParsedData = normalize(data, ['parent_id', 'position', 'value']);
var filteredData = preParsedData.filter(function (datum, index) {
return checkParent(datum[0], index, layoutSummary, 'parent');
return checkParent(datum.block_id, index, layoutSummary, 'parent');
}).filter(function (datum, index) {
return checkNumber({ position: datum[1] }, index);
}).map(function (datum) {
return {
block_id: datum[0],
position: Math.min(layoutSummary[datum[0]], parseFloat(datum[1])),
value: datum[2]
};
return checkNumber({ position: datum.position }, index);
});

return buildOutput(filteredData);
Expand Down Expand Up @@ -20610,7 +20625,7 @@ var Circos =

_createClass(Histogram, [{
key: 'renderDatum',
value: function renderDatum(parentElement, conf, layout, utils) {
value: function renderDatum(parentElement, conf, layout) {
var _this2 = this;

var bin = parentElement.selectAll('.bin').data(function (d) {
Expand All @@ -20628,9 +20643,9 @@ var Circos =
}
return conf.outerRadius;
}).startAngle(function (d) {
return utils.theta(d.start, layout.blocks[d.block_id]);
return _this2.theta(d.start, layout.blocks[d.block_id]);
}).endAngle(function (d) {
return utils.theta(d.end, layout.blocks[d.block_id]);
return _this2.theta(d.end, layout.blocks[d.block_id]);
}));
bin.attr('fill', conf.color);
return bin;
Expand Down Expand Up @@ -21486,7 +21501,9 @@ var Circos =
}
}, {
key: 'renderDatum',
value: function renderDatum(parentElement, conf, layout, utils) {
value: function renderDatum(parentElement, conf, layout) {
var _this2 = this;

var that = this;

return parentElement.selectAll('.tile').data(function (d) {
Expand All @@ -21495,8 +21512,8 @@ var Circos =
return {
innerRadius: radius[0],
outerRadius: radius[1],
startAngle: utils.theta(datum.start, layout.blocks[datum.block_id]),
endAngle: utils.theta(datum.end, layout.blocks[datum.block_id])
startAngle: _this2.theta(datum.start, layout.blocks[datum.block_id]),
endAngle: _this2.theta(datum.end, layout.blocks[datum.block_id])
};
});
}).enter().append('path').attr('class', 'tile').attr('d', (0, _d3Shape.arc)()).attr('opacity', conf.opacity).attr('stroke-width', conf.strokeWidth).attr('stroke', conf.strokeColor).attr('fill', conf.color);
Expand Down
12 changes: 6 additions & 6 deletions dist/circos.min.js
View file

Large diffs are not rendered by default.

Binary file added doc/text.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
26 changes: 26 additions & 0 deletions readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -344,6 +344,32 @@ Configuration:

### Text

<p align="center">
<img src="doc/text.png" width="60%" alt="text">
<br/>
<i><a href="demo/text">source</a></i>
</p>

```javascript
myCircos.text('text', data, configuration);
```

The minimal datum should have `block_id`, `position` and `value` attributes.

Configuration:

```javascript
{
innerRadius: null,
outerRadius: null,
style: {
'font-size': 12,
color: 'black',
},
opacity: 1,
}
```

## Colors

You can specify the color of the track in the track configuration:
Expand Down
13 changes: 3 additions & 10 deletions src/dataParser.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,18 +157,11 @@ export function parsePositionTextData(data, layoutSummary) {
const preParsedData = normalize(data, ['parent_id', 'position', 'value']);
const filteredData = preParsedData
.filter((datum, index) =>
checkParent(datum[0], index, layoutSummary, 'parent')
checkParent(datum.block_id, index, layoutSummary, 'parent')
)
.filter((datum, index) =>
checkNumber({position: datum[1]}, index)
)
.map((datum) => {
return {
block_id: datum[0],
position: Math.min(layoutSummary[datum[0]], parseFloat(datum[1])),
value: datum[2],
};
});
checkNumber({position: datum.position}, index)
);

return buildOutput(filteredData);
}
Expand Down
35 changes: 28 additions & 7 deletions src/tracks/Text.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,18 @@ const defaultConf = assign({
value: {},
iteratee: true,
},
color: {
value: 'black',
iteratee: true,
},
axes: {
value: [],
iteratee: false,
},
backgrounds: {
value: [],
iteratee: false,
},
}, common, radial);

export default class Text extends Track {
Expand All @@ -18,17 +30,26 @@ export default class Text extends Track {

renderDatum(parentElement, conf, layout) {
const text = parentElement.selectAll('g')
.data((d) => d.values)
.data((d) => d.values.map((item) => {
item._angle = this.theta(
item.position,
layout.blocks[item.block_id]
) * 360 / (2 * Math.PI) - 90;
item._anchor = item._angle > 90 ? 'end' : 'start';
item._rotate = item._angle > 90 ? 180 : 0;
return item;
}))
.enter().append('g')
.append('text')
.text((d) => d.value)
.attr('transform', (d) => {
const angle = this.theta(
d.position,
layout.blocks[d.block_id]
)*360/(2*Math.PI) - 90;
return `rotate(${angle}) translate(${conf.innerRadius}, 0)`;
});
return `
rotate(${d._angle})
translate(${conf.innerRadius}, 0)
rotate(${d._rotate})
`;
})
.attr('text-anchor', (d) => d._anchor);
forEach(conf.style, (value, key) => {
text.style(key, value);
});
Expand Down

0 comments on commit d4ba565

Please sign in to comment.