Question for ability to accept data set about circosjs

[nicgirault]

Hi @GaloisGun can you be more explicite? Can you write an example?

[GaloisGun]

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

[nicgirault]

@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

[GaloisGun]

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!

[nicgirault]

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?