Comments (1)
I am still wondering about the error. But, It worked following way:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.js"></script>
<script src='https://cdn.rawgit.com/nicgirault/circosJS/v2/dist/circos.js'></script>
</head>
<body>
<script>
var width = $(window).width() - 20,
height = $(window).height() - 20
var svg = d3.select("body")
.append("svg")
.attr('id', 'chart')
.attr("width", width)
.attr("height", height)
var myCircos = new Circos({
container: '#chart',
width: width,
height: height,
})
var layout_data = [
{"len": 31, "color": "#8dd3c7", "label": "January", "id": "january"},
{"len": 28, "color": "#ffffb3", "label": "February", "id": "february"},
{"len": 31, "color": "#bebada", "label": "March", "id": "march"},
{"len": 30, "color": "#fb8072", "label": "April", "id": "april"},
{"len": 31, "color": "#80b1d3", "label": "May", "id": "may"},
{"len": 30, "color": "#fdb462", "label": "June", "id": "june"},
{"len": 31, "color": "#b3de69", "label": "July", "id": "july"},
{"len": 31, "color": "#fccde5", "label": "August", "id": "august"},
{"len": 30, "color": "#d9d9d9", "label": "September", "id": "september"},
{"len": 31, "color": "#bc80bd", "label": "October", "id": "october"},
{"len": 30, "color": "#ccebc5", "label": "November", "id": "november"},
{"len": 31, "color": "#ffed6f", "label": "December", "id": "december"}
]
var layout_data2 = [
{
source: { id: 'january', start: 1, end: 12 },
target: { id: 'april', start: 18, end: 20 }
},
{
source: { id: 'february', start: 20, end: 28 },
target: { id: 'december', start: 1, end: 13 }
}
]
var configuration = {
innerRadius: 250,
outerRadius: 300,
cornerRadius: 10,
gap: 0.04, // in radian
labels: {
display: true,
position: 'center',
size: '14px',
color: '#000000',
radialOffset: 20,
},
ticks: {
display: true,
color: 'grey',
spacing: 10000000,
labels: true,
labelSpacing: 10,
labelSuffix: 'Mb',
labelDenominator: 1000000,
labelDisplay0: true,
labelSize: '10px',
labelColor: '#000000',
labelFont: 'default',
majorSpacing: 5,
size: {
minor: 2,
major: 5,
}
},
clickCallback: null
}
myCircos.layout(layout_data, configuration)
myCircos.chords('my-coord', layout_data2, configuration)
myCircos.render()
</script>
</body>
</html>
from circosjs.
Related Issues (20)
- 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
- 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?
- How to deal with json string?
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.