D3 Examples - Sunburst for your skill map

Sunburst for your skill map

Extract from my work, you can a demo in live Combined sunburst and line chart, currently you must generate the data by yourself, I also uploaded the skills.xlsx file to help generate this file(skillsdata.js).

Features:

[TODO]works with data that is in a CSV format (you don't need to pre-generate a hierarchical JSON file, unless your data file is very large)

interactive breadcrumb trail helps to emphasize the sequence, so that it is easy for a first-time user to understand what they are seeing

If you want to simply reuse this with your own data, here are some tips for generating the skillsdata.js file:

Fill in your data to skills.xlsx

Select whole W column and copy

Convert to js by using http://js2coffee.org/

Save and overwrite to skillsdata.js file

Indeed, I'm greatly inspired by someone else, but now I can't find who he is and where his site located, maybe I'll add his site link here later, if you do, please let me know, thanks!

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Skills sunburst</title>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <link rel="stylesheet" type="text/css" href="skill.css"/>
  </head>
  <body>
    <div id="skills">
      <div id="skillmap">
        <div class="skills-wrapper">
          <div class="skills-sunburst"></div>
          <div class="skills-chart">
            <div id="skills-chart-breadcrumb"></div>
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="skillsdata.js"></script>
    <script type="text/javascript" src="skill.js"></script>
    <script type="text/javascript">
      // Hack to make this example display correctly in an iframe on bl.ocks.org
      d3.select(self.frameElement).style("height", "700px");
  </script> 
  </body>
</html>
​
    