Old school D3 from simpler times

All examples By author By category About

zawmoelwin

Full window Github gist

Testing the D3

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.theme.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css">

<meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.17.0/vis.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/patmartin/dexjs/dist/dex.min.js"></script>
    <style>
        html, body, #Sunburst {
            height: 100%;
            min-height: 100%;
            width: 100%;
            min-width: 100%;
        }

</style>
</head>
<div id="Sunburst"></div>
<body>
<script>
    d3.json("flare.json", function (error, data) {
      			console.log(data);
      			data.children.map( function(first_level, i){
              console.log("first level", first_level.name, first_level)
              first_level.map(function(second_level, i) {
                console.log("second level", second_level)
              })
              
            })
//         var presidents = {};
//         presidents.header = Object.keys(data[0]);
//         presidents.data = data.slice(1).map(function (row) {
//             return presidents.header.map(function (h) {
//                 return row[h];
//             });
//         });

//         var sunburst = dex.charts.d3.Sunburst({
//             'parent': '#Sunburst',
//             'csv': dex.csv.columnSlice(presidents, [2, 3, 1])
//         }).render();
    });

</script>
</body>

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.theme.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css">
​
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.17.0/vis.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/patmartin/dexjs/dist/dex.min.js"></script>
    <style>
        html, body, #Sunburst {
            height: 100%;
            min-height: 100%;
            width: 100%;
            min-width: 100%;
        }
​
    </style>
</head>
<div id="Sunburst"></div>
<body>
<script>
    d3.json("flare.json", function (error, data) {
                console.log(data);
                data.children.map( function(first_level, i){
              console.log("first level", first_level.name, first_level)
              first_level.map(function(second_level, i) {
                console.log("second level", second_level)
              })
              
            })
//         var presidents = {};
//         presidents.header = Object.keys(data[0]);
//         presidents.data = data.slice(1).map(function (row) {
//             return presidents.header.map(function (h) {
//                 return row[h];
//             });
//         });
​
//         var sunburst = dex.charts.d3.Sunburst({
//             'parent': '#Sunburst',
//             'csv': dex.csv.columnSlice(presidents, [2, 3, 1])
//         }).render();
    });
​
</script>
</body>
​
    

Updated missing url https://cdn.rawgit.com/PatMartin/dexjs/master/dist/dex.min.js to https://cdn.jsdelivr.net/gh/patmartin/dexjs/dist/dex.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js

https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js

https://cdnjs.cloudflare.com/ajax/libs/vis/4.17.0/vis.min.js

https://cdn.rawgit.com/PatMartin/dexjs/master/dist/dex.min.js