Comments (5)
Hi @GaloisGun can you be more explicite? Can you write an example?
from circosjs.
I am trying to visualization DNA data with 24 chromosome. Example:
lable start end value
Chr01 1 2 0.5
... ... ... ...
Chr01 185 186 0.3
...
ChrY 1 2 0.2
from circosjs.
@GaloisGun I still don't understand what is your problem. Please write your code in a jsfiddle or codeopen and explain clearly what is the actual behavior and what is the expected behavior
from circosjs.
Sorry for confusion. I am trying to import my data set into heat map demo you have showed. The data format is exactly same as data in demo. What different is I have 24 labels and 3000 tuples.
I changed months.json like this and put my data into demo csv without changing names
There is no graph showing on my browser.
[ { "len": 316, "color": "#8dd3c7", "label": "Chr01", "id": "Chr01" }, { "len": 230, "color": "#ffffb3", "label": "Chr02", "id": "Chr02" }, { "len": 188, "color": "#bebada", "label": "Chr03", "id": "Chr03" }, { "len": 124, "color": "#fb8072", "label": "Chr04", "id": "Chr04" }, { "len": 148, "color": "#80b1d3", "label": "Chr05", "id": "Chr05" }, { "len": 134, "color": "#fdb462", "label": "Chr06", "id": "Chr06" }, { "len": 156, "color": "#b3de69", "label": "Chr07", "id": "Chr07" }, { "len": 176, "color": "#fccde5", "label": "Chr08", "id": "Chr08" }, { "len": 168, "color": "#d9d9d9", "label": "Chr09", "id": "Chr09" }, { "len": 138, "color": "#bc80bd", "label": "Chr10", "id": "Chr10" }, { "len": 204, "color": "#ccebc5", "label": "Chr11", "id": "Chr11" }, { "len": 152, "color": "#ffed6f", "label": "Chr12", "id": "Chr12" }, { "len": 80, "color": "#8dd3c7", "label": "Chr13", "id": "Chr13" }, { "len": 196, "color": "#ffffb3", "label": "Chr14", "id": "Chr14" }, { "len": 138, "color": "#bebada", "label": "Chr15", "id": "Chr15" }, { "len": 158, "color": "#fb8072", "label": "Chr16", "id": "Chr16" }, { "len": 218, "color": "#80b1d3", "label": "Chr17", "id": "Chr17" }, { "len": 70, "color": "#fdb462", "label": "Chr18", "id": "Chr18" }, { "len": 282, "color": "#b3de69", "label": "Chr19", "id": "Chr19" }, { "len": 96, "color": "#fccde5", "label": "Chr20", "id": "Chr20" }, { "len": 58, "color": "#d9d9d9", "label": "Chr21", "id": "Chr21" }, { "len": 92, "color": "#bc80bd", "label": "Chr22", "id": "Chr22" }, { "len": 236, "color": "#ccebc5", "label": "ChrX", "id": "ChrX" }, { "len": 4, "color": "#ffed6f", "label": "ChrY", "id": "ChrY" }, ]
I repeat Demo data like this:
`
function drawCircos(error, months, electricalConsumption, daysOff) {
var width = document.getElementsByClassName('mdl-card__supporting-text')[0].offsetWidth
var circosHeatmap = new Circos({
container: '#heatmapChart',
width: width,
height: width
});
electricalConsumption = electricalConsumption.map(function(d) {
return {
block_id: d.month,
start: parseInt(d.start),
end: parseInt(d.end),
value: parseFloat(d.value)
};
})
daysOff = daysOff.map(function(d) {
return {
block_id: d.month,
start: parseInt(d.start),
end: parseInt(d.end),
value: parseFloat(d.value)
};
})
circosHeatmap
.layout(
months,
{
innerRadius: width / 2 - 80,
outerRadius: width / 2 - 30,
ticks: {display: false},
labels: {
position: 'center',
display: true,
size: 14,
color: '#000',
radialOffset: 15
}
}
)
.heatmap('electricalConsumption', electricalConsumption, {
innerRadius: 0.8,
outerRadius: 0.98,
logScale: false,
color: 'YlOrRd'
})
.heatmap('days-off', daysOff, {
innerRadius: 0.7,
outerRadius: 0.79,
logScale: false,
color: 'Blues'
})
.render()
}
d3.queue()
.defer(d3.json, './data/months.json')
.defer(d3.csv, './data/electrical-consumption.csv')
.defer(d3.csv, './data/days-off.csv')
.await(drawCircos)`
Thank you for your help!
from circosjs.
In the demo I get the width dynamically according to an elemnt that might not be in your document. Can you try to change
function drawCircos(error, months, electricalConsumption, daysOff) {
var width = document.getElementsByClassName('mdl-card__supporting-text')[0].offsetWidth
var circosHeatmap = new Circos({
container: '#heatmapChart',
width: width,
height: width
});
to
function drawCircos(error, months, electricalConsumption, daysOff) {
var width = 1000
var circosHeatmap = new Circos({
container: '#heatmapChart',
width: width,
height: width
});
You should have a
<div id="heatmapChart"></div>
in your html.
Does it solve the problem? If not, can you provide a https://jsfiddle.net/ showing your bug?
from circosjs.
Related Issues (20)
- How to deal with json string?
- Using CircosJS with Observable HOT 1
- events not working? HOT 1
- what input data are required to create a circos plot using miRNA and associated gene ?
- tooltipContent on chords chart HOT 1
- chords connecting two tracks HOT 1
- D3.queue is not a function HOT 1
- Source for Heat map calendar example HOT 1
- Community Feedback: CircosJS wrapper for Dash by Plotly - with zoom/pan & download feature
- Heatmap examples fails to load Firefox 64.0 HOT 1
- It seem是 HOT 2
- Add images just next to the text or label
- Problem with Histogram HOT 1
- Problem with Stack
- Choords not visible ! HOT 1
- Chords: conf.tooltipContent is not a function HOT 1
- version 2.2.0 not available on npm
- whether the width of source-target line can be changed in Chords?
- How to initiate Chords plot in javascript?
- Anyway to use this library on Mobile with React Native?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from circosjs.