Documentation request: Example in ES6. #40

imranariffin · 2017-07-23T18:14:26Z

Thank you for creating this library. This is the only the I found to be able to do what I need ie. create flexible polar chart. Recently I've been using for my work and now I want to integrate it into reactjs so that it is more modular.

However, I am stuck. I am having problem migrating my code into ES6. So, I request that you show example in the documentation on how to create a simple chart in ES6, preferably in reactjs. I think will be useful to many junior developers like me since ES6 and reactjs are taking place really soon.

Thank you.

winni2k · 2017-10-29T15:40:25Z

Is this really a circos.js issue, or just a plain old "How do I migrate to ES6" issue? This SO question sounds like it would be relevant.

FWIW here is my working version of the circos example using ES6 syntax ¯\_(ツ)_/¯:

<!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>
    let width = $(window).width() - 20,
        height = $(window).height() - 20

    let svg = d3.select("body")
        .append("svg")
        .attr('id', 'chart')
        .attr("width", width)
        .attr("height", height)

    let instance = new Circos({
        container: '#chart',
        width: width,
        height: height,
    })

    let 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"}
    ]
    let 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
    }

    instance.layout(layout_data, configuration)
    instance.render()

</script>
</body>


</html>

winni2k mentioned this issue Oct 29, 2017

SVG container #32

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Documentation request: Example in ES6. #40

Documentation request: Example in ES6. #40

imranariffin commented Jul 23, 2017

winni2k commented Oct 29, 2017

Documentation request: Example in ES6. #40

Documentation request: Example in ES6. #40

Comments

imranariffin commented Jul 23, 2017

winni2k commented Oct 29, 2017