D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
WeikerWT
Full window
Github gist
https://bl.ocks.org/denjn5/f059c1f78f9c39d922b1c208815d18af
Built with
blockbuilder.org
<!DOCTYPE html> <head> <script src="https://d3js.org/d3.v4.min.js"></script> </head> <body> <style> @import url('https://fonts.googleapis.com/css?family=Raleway'); body { font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif; } </style> <svg></svg> <script> var nodeData = { "name": "Pipeline", "children": [ { "name": "Data Management", "children": [ { "name": "Coca-Cola (Icecek)", "children": [ {"name": "Qualified Lead", "size": 0}, { "name": "Qualified Lead", "children": [ {"name": "Opportunity Created", "size": 0}, { "name": "Opportunity Created", "children": [ {"name": "Solution Proposed", "size": 0}, { "name": "Solution Proposed", "children": [ {"name": "POC", "size": 1}, { "name": "POC", "children": [ {"name": "Legal/IT", "size": 0}, { "name": "Legal/IT", "children": [ {"name": "Closed - Won", "size": 0} ] } ] } ] } ] } ] } ] }, { "name": "Coca-Cola (Euro)", "children": [ { "name": "Qualified Lead", "children": [ {"name": "Opportunity Created", "size": 0}, { "name": "Opportunity Created", "children": [ {"name": "Solution Proposed", "size": 1}, { "name": "Solution Proposed", "children": [ {"name": "POC", "size": 0}, { "name": "POC", "children": [ {"name": "Legal/IT", "size": 0}, { "name": "Legal/IT", "children": [ {"name": "Closed - Won", "size": 0} ] } ] } ] } ] } ] } ] }, { "name": "Keurig Green Mtn", "children": [ {"name": "Qualified Lead", "size": 0}, { "name": "Qualified Lead", "children": [ {"name": "Opportunity Created", "size": 0}, { "name": "Opportunity Created", "children": [ {"name": "Solution Proposed", "size": 0}, { "name": "Solution Proposed", "children": [ {"name": "POC", "size": 0}, { "name": "POC", "children": [ {"name": "Legal/IT", "size": 1}, { "name": "Legal/IT", "children": [ {"name": "Closed - Won", "size": 0} ] } ] } ] } ] } ] } ] } ] }, { "name": "Microsoft", "children": [ { "name": "AIG", "children": [ { "name": "Qualified Lead", "children": [ {"name": "Opportunity Created", "size": 0}, { "name": "Opportunity Created", "children": [ {"name": "Solution Proposed", "size": 0}, { "name": "Solution Proposed", "children": [ {"name": "POC", "size": 1}, { "name": "POC", "children": [ {"name": "Legal/IT", "size": 0}, { "name": "Legal/IT", "children": [ {"name": "Closed - Won", "size": 0} ] } ] } ] } ] } ] } ] }, { "name": "Freddie Mac", "children": [ { "name": "Qualified Lead", "children": [ {"name": "Opportunity Created", "size": 1}, { "name": "Opportunity Created", "children": [ {"name": "Solution Proposed", "size": 0}, { "name": "Solution Proposed", "children": [ {"name": "POC", "size": 0}, { "name": "POC", "children": [ {"name": "Legal/IT", "size": 0}, { "name": "Legal/IT", "children": [ {"name": "Closed - Won", "size": 0} ] } ] } ] } ] } ] } ] }, { "name": "Parkview Health", "children": [ {"name": "Qualified Lead", "size": 1}, { "name": "Qualified Lead", "children": [ {"name": "Opportunity Created", "size": 0}, { "name": "Opportunity Created", "children": [ {"name": "Solution Proposed", "size": 0}, { "name": "Solution Proposed", "children": [ {"name": "POC", "size": 0}, { "name": "POC", "children": [ {"name": "Legal/IT", "size": 0}, { "name": "Legal/IT", "children": [ {"name": "Closed - Won", "size": 0} ] } ] } ] } ] } ] } ] }, { "name": "Cintas", "children": [ { "name": "Qualified Lead", "children": [ {"name": "Opportunity Created", "size": 1}, { "name": "Opportunity Created", "children": [ {"name": "Solution Proposed", "size": 0}, { "name": "Solution Proposed", "children": [ {"name": "POC", "size": 0}, { "name": "POC", "children": [ {"name": "Legal/IT", "size": 0}, { "name": "Legal/IT", "children": [ {"name": "Closed - Won", "size": 0} ] } ] } ] } ] } ] } ] }, { "name": "Panama Canal", "children": [ { "name": "Qualified Lead", "children": [ {"name": "Opportunity Created", "size": 0}, { "name": "Opportunity Created", "children": [ {"name": "Solution Proposed", "size": 0}, { "name": "Solution Proposed", "children": [ {"name": "POC", "size": 1}, { "name": "POC", "children": [ {"name": "Legal/IT", "size": 0}, { "name": "Legal/IT", "children": [ {"name": "Closed - Won", "size": 0} ] } ] } ] } ] } ] } ] }, { "name": "AutoNation", "children": [ {"name": "Qualified Lead", "size": 1}, { "name": "Qualified Lead", "children": [ {"name": "Opportunity Created", "size": 0}, { "name": "Opportunity Created", "children": [ {"name": "Solution Proposed", "size": 0}, { "name": "Solution Proposed", "children": [ {"name": "POC", "size": 0}, { "name": "POC", "children": [ {"name": "Legal/IT", "size": 0}, { "name": "Legal/IT", "children": [ {"name": "Closed - Won", "size": 0} ] } ] } ] } ] } ] } ] }, { "name": "Becton Dickinson", "children": [ { "name": "Qualified Lead", "children": [ {"name": "Opportunity Created", "size": 1}, { "name": "Opportunity Created", "children": [ {"name": "Solution Proposed", "size": 0}, { "name": "Solution Proposed", "children": [ {"name": "POC", "size": 0}, { "name": "POC", "children": [ {"name": "Legal/IT", "size": 0}, { "name": "Legal/IT", "children": [ {"name": "Closed - Won", "size": 0} ] } ] } ] } ] } ] } ] }, { "name": "Tenneco", "children": [ { "name": "Qualified Lead", "children": [ {"name": "Opportunity Created", "size": 1}, { "name": "Opportunity Created", "children": [ {"name": "Solution Proposed", "size": 0}, { "name": "Solution Proposed", "children": [ {"name": "POC", "size": 0}, { "name": "POC", "children": [ {"name": "Legal/IT", "size": 0}, { "name": "Legal/IT", "children": [ {"name": "Closed - Won", "size": 0} ] } ] } ] } ] } ] } ] }, { "name": "United Airlines", "children": [ {"name": "Qualified Lead", "size": 1}, { "name": "Qualified Lead", "children": [ {"name": "Opportunity Created", "size": 0}, { "name": "Opportunity Created", "children": [ {"name": "Solution Proposed", "size": 0}, { "name": "Solution Proposed", "children": [ {"name": "POC", "size": 0}, { "name": "POC", "children": [ {"name": "Legal/IT", "size": 0}, { "name": "Legal/IT", "children": [ {"name": "Closed - Won", "size": 0} ] } ] } ] } ] } ] } ] }, { "name": "Cummins", "children": [ {"name": "Qualified Lead", "size": 1}, { "name": "Qualified Lead", "children": [ {"name": "Opportunity Created", "size": 0}, { "name": "Opportunity Created", "children": [ {"name": "Solution Proposed", "size": 0}, { "name": "Solution Proposed", "children": [ {"name": "POC", "size": 0}, { "name": "POC", "children": [ {"name": "Legal/IT", "size": 0}, { "name": "Legal/IT", "children": [ {"name": "Closed - Won", "size": 0} ] } ] } ] } ] } ] } ] }, { "name": "Energy Transfer", "children": [ { "name": "Qualified Lead", "children": [ {"name": "Opportunity Created", "size": 0}, { "name": "Opportunity Created", "children": [ {"name": "Solution Proposed", "size": 1}, { "name": "Solution Proposed", "children": [ {"name": "POC", "size": 0}, { "name": "POC", "children": [ {"name": "Legal/IT", "size": 0}, { "name": "Legal/IT", "children": [ {"name": "Closed - Won", "size": 0} ] } ] } ] } ] } ] } ] }, { "name": "Economical Insurance", "children": [ { "name": "Qualified Lead", "children": [ {"name": "Opportunity Created", "size": 1}, { "name": "Opportunity Created", "children": [ {"name": "Solution Proposed", "size": 0}, { "name": "Solution Proposed", "children": [ {"name": "POC", "size": 0}, { "name": "POC", "children": [ {"name": "Legal/IT", "size": 0}, { "name": "Legal/IT", "children": [ {"name": "Closed - Won", "size": 0} ] } ] } ] } ] } ] } ] }, { "name": "Fiedlity", "children": [ { "name": "Qualified Lead", "children": [ {"name": "Opportunity Created", "size": 1}, { "name": "Opportunity Created", "children": [ {"name": "Solution Proposed", "size": 0}, { "name": "Solution Proposed", "children": [ {"name": "POC", "size": 0}, { "name": "POC", "children": [ {"name": "Legal/IT", "size": 0}, { "name": "Legal/IT", "children": [ {"name": "Closed - Won", "size": 0} ] } ] } ] } ] } ] } ] }, { "name": "Huntington", "children": [ { "name": "Qualified Lead", "children": [ {"name": "Opportunity Created", "size": 1}, { "name": "Opportunity Created", "children": [ {"name": "Solution Proposed", "size": 0}, { "name": "Solution Proposed", "children": [ {"name": "POC", "size": 0}, { "name": "POC", "children": [ {"name": "Legal/IT", "size": 0}, { "name": "Legal/IT", "children": [ {"name": "Closed - Won", "size": 0} ] } ] } ] } ] } ] } ] }, { "name": "KEMET", "children": [ {"name": "Qualified Lead", "size": 0}, { "name": "Qualified Lead", "children": [ {"name": "Opportunity Created", "size": 0}, { "name": "Opportunity Created", "children": [ {"name": "Solution Proposed", "size": 0}, { "name": "Solution Proposed", "children": [ {"name": "POC", "size": 0}, { "name": "POC", "children": [ {"name": "Legal/IT", "size": 0}, { "name": "Legal/IT", "children": [ {"name": "Closed - Won", "size": 0} ] } ] } ] } ] } ] } ] }, { "name": "Kizan", "children": [ {"name": "Qualified Lead", "size": 1}, { "name": "Qualified Lead", "children": [ {"name": "Opportunity Created", "size": 0}, { "name": "Opportunity Created", "children": [ {"name": "Solution Proposed", "size": 0}, { "name": "Solution Proposed", "children": [ {"name": "POC", "size": 0}, { "name": "POC", "children": [ {"name": "Legal/IT", "size": 0}, { "name": "Legal/IT", "children": [ {"name": "Closed - Won", "size": 0} ] } ] } ] } ] } ] } ] }, { "name": "Nationwide", "children": [ {"name": "Qualified Lead", "size": 0}, { "name": "Qualified Lead", "children": [ {"name": "Opportunity Created", "size": 0}, { "name": "Opportunity Created", "children": [ {"name": "Solution Proposed", "size": 0}, { "name": "Solution Proposed", "children": [ {"name": "POC", "size": 1}, { "name": "POC", "children": [ {"name": "Legal/IT", "size": 0}, { "name": "Legal/IT", "children": [ {"name": "Closed - Won", "size": 0} ] } ] } ] } ] } ] } ] }, { "name": "Kingfisher", "children": [ { "name": "Qualified Lead", "children": [ {"name": "Opportunity Created", "size": 0}, { "name": "Opportunity Created", "children": [ {"name": "Solution Proposed", "size": 1}, { "name": "Solution Proposed", "children": [ {"name": "POC", "size": 0}, { "name": "POC", "children": [ {"name": "Legal/IT", "size": 0}, { "name": "Legal/IT", "children": [ {"name": "Closed - Won", "size": 0} ] } ] } ] } ] } ] } ] }, { "name": "Sanofi Pasteur", "children": [ {"name": "Qualified Lead", "size": 1}, { "name": "Qualified Lead", "children": [ {"name": "Opportunity Created", "size": 0}, { "name": "Opportunity Created", "children": [ {"name": "Solution Proposed", "size": 0}, { "name": "Solution Proposed", "children": [ {"name": "POC", "size": 0}, { "name": "POC", "children": [ {"name": "Legal/IT", "size": 0}, { "name": "Legal/IT", "children": [ {"name": "Closed - Won", "size": 0} ] } ] } ] } ] } ] } ] }, { "name": "Putnam", "children": [ { "name": "Qualified Lead", "children": [ {"name": "Opportunity Created", "size": 1}, { "name": "Opportunity Created", "children": [ {"name": "Solution Proposed", "size": 0}, { "name": "Solution Proposed", "children": [ {"name": "POC", "size": 0}, { "name": "POC", "children": [ {"name": "Legal/IT", "size": 0}, { "name": "Legal/IT", "children": [ {"name": "Closed - Won", "size": 0} ] } ] } ] } ] } ] } ] }, { "name": "TMobile", "children": [ {"name": "Qualified Lead", "size": 1}, { "name": "Qualified Lead", "children": [ {"name": "Opportunity Created", "size": 0}, { "name": "Opportunity Created", "children": [ {"name": "Solution Proposed", "size": 0}, { "name": "Solution Proposed", "children": [ {"name": "POC", "size": 0}, { "name": "POC", "children": [ {"name": "Legal/IT", "size": 0}, { "name": "Legal/IT", "children": [ {"name": "Closed - Won", "size": 0} ] } ] } ] } ] } ] } ] }, { "name": "Travellers", "children": [ { "name": "Qualified Lead", "children": [ {"name": "Opportunity Created", "size": 1}, { "name": "Opportunity Created", "children": [ {"name": "Solution Proposed", "size": 0}, { "name": "Solution Proposed", "children": [ {"name": "POC", "size": 0}, { "name": "POC", "children": [ {"name": "Legal/IT", "size": 0}, { "name": "Legal/IT", "children": [ {"name": "Closed - Won", "size": 0} ] } ] } ] } ] } ] } ] }, { "name": "Wendy's", "children": [ {"name": "Qualified Lead", "size": 1}, { "name": "Qualified Lead", "children": [ {"name": "Opportunity Created", "size": 0}, { "name": "Opportunity Created", "children": [ {"name": "Solution Proposed", "size": 0}, { "name": "Solution Proposed", "children": [ {"name": "POC", "size": 0}, { "name": "POC", "children": [ {"name": "Legal/IT", "size": 0}, { "name": "Legal/IT", "children": [ {"name": "Closed - Won", "size": 0} ] } ] } ] } ] } ] } ] } ] }, { "name": "PLACEHOLDER", "children": [ {"name": "PLACEHOLDER", "size": 0} ] }, { "name": "Workplace", "children": [ { "name": "AZ", "children": [ { "name": "Qualified Lead", "children": [ {"name": "Opportunity Created", "size": 0}, { "name": "Opportunity Created", "children": [ {"name": "Solution Proposed", "size": 0}, { "name": "Solution Proposed", "children": [ {"name": "POC", "size": 0}, { "name": "POC", "children": [ {"name": "Legal/IT", "size": 0}, { "name": "Legal/IT", "children": [ {"name": "Closed - Won", "size": 1} ] } ] } ] } ] } ] } ] }, { "name": "YUM!", "children": [ { "name": "Qualified Lead", "children": [ {"name": "Opportunity Created", "size": 0}, { "name": "Opportunity Created", "children": [ {"name": "Solution Proposed", "size": 0}, { "name": "Solution Proposed", "children": [ {"name": "POC", "size": 1}, { "name": "POC", "children": [ {"name": "Legal/IT", "size": 0}, { "name": "Legal/IT", "children": [ {"name": "Closed - Won", "size": 0} ] } ] } ] } ] } ] } ] }, { "name": "Amadeus", "children": [ { "name": "Qualified Lead", "children": [ {"name": "Opportunity Created", "size": 1}, { "name": "Opportunity Created", "children": [ {"name": "Solution Proposed", "size": 0}, { "name": "Solution Proposed", "children": [ {"name": "POC", "size": 0}, { "name": "POC", "children": [ {"name": "Legal/IT", "size": 0}, { "name": "Legal/IT", "children": [ {"name": "Closed - Won", "size": 0} ] } ] } ] } ] } ] } ] }, { "name": "Absa Bank", "children": [ { "name": "Qualified Lead", "children": [ {"name": "Opportunity Created", "size": 1}, { "name": "Opportunity Created", "children": [ {"name": "Solution Proposed", "size": 0}, { "name": "Solution Proposed", "children": [ {"name": "POC", "size": 0}, { "name": "POC", "children": [ {"name": "Legal/IT", "size": 0}, { "name": "Legal/IT", "children": [ {"name": "Closed - Won", "size": 0} ] } ] } ] } ] } ] } ] }, { "name": "Ageas", "children": [ { "name": "Qualified Lead", "children": [ {"name": "Opportunity Created", "size": 0}, { "name": "Opportunity Created", "children": [ {"name": "Solution Proposed", "size": 0}, { "name": "Solution Proposed", "children": [ {"name": "POC", "size": 1}, { "name": "POC", "children": [ {"name": "Legal/IT", "size": 0}, { "name": "Legal/IT", "children": [ {"name": "Closed - Won", "size": 0} ] } ] } ] } ] } ] } ] }, { "name": "Campbell Soup", "children": [ { "name": "Qualified Lead", "children": [ {"name": "Opportunity Created", "size": 1}, { "name": "Opportunity Created", "children": [ {"name": "Solution Proposed", "size": 0}, { "name": "Solution Proposed", "children": [ {"name": "POC", "size": 0}, { "name": "POC", "children": [ {"name": "Legal/IT", "size": 0}, { "name": "Legal/IT", "children": [ {"name": "Closed - Won", "size": 0} ] } ] } ] } ] } ] } ] }, { "name": "CIBC", "children": [ { "name": "Qualified Lead", "children": [ {"name": "Opportunity Created", "size": 1}, { "name": "Opportunity Created", "children": [ {"name": "Solution Proposed", "size": 0}, { "name": "Solution Proposed", "children": [ {"name": "POC", "size": 0}, { "name": "POC", "children": [ {"name": "Legal/IT", "size": 0}, { "name": "Legal/IT", "children": [ {"name": "Closed - Won", "size": 0} ] } ] } ] } ] } ] } ] }, { "name": "Coke", "children": [ { "name": "Qualified Lead", "children": [ {"name": "Opportunity Created", "size": 0}, { "name": "Opportunity Created", "children": [ {"name": "Solution Proposed", "size": 0}, { "name": "Solution Proposed", "children": [ {"name": "POC", "size": 1}, { "name": "POC", "children": [ {"name": "Legal/IT", "size": 0}, { "name": "Legal/IT", "children": [ {"name": "Closed - Won", "size": 0} ] } ] } ] } ] } ] } ] }, { "name": "Eurocash", "children": [ { "name": "Qualified Lead", "children": [ {"name": "Opportunity Created", "size": 1}, { "name": "Opportunity Created", "children": [ {"name": "Solution Proposed", "size": 0}, { "name": "Solution Proposed", "children": [ {"name": "POC", "size": 0}, { "name": "POC", "children": [ {"name": "Legal/IT", "size": 0}, { "name": "Legal/IT", "children": [ {"name": "Closed - Won", "size": 0} ] } ] } ] } ] } ] } ] }, { "name": "Farmer's Insurance", "children": [ { "name": "Qualified Lead", "children": [ {"name": "Opportunity Created", "size": 0}, { "name": "Opportunity Created", "children": [ {"name": "Solution Proposed", "size": 1}, { "name": "Solution Proposed", "children": [ {"name": "POC", "size": 0}, { "name": "POC", "children": [ {"name": "Legal/IT", "size": 0}, { "name": "Legal/IT", "children": [ {"name": "Closed - Won", "size": 0} ] } ] } ] } ] } ] } ] }, { "name": "GEMS", "children": [ {"name": "Qualified Lead", "size": 1}, { "name": "Qualified Lead", "children": [ {"name": "Opportunity Created", "size": 0}, { "name": "Opportunity Created", "children": [ {"name": "Solution Proposed", "size": 0}, { "name": "Solution Proposed", "children": [ {"name": "POC", "size": 0}, { "name": "POC", "children": [ {"name": "Legal/IT", "size": 0}, { "name": "Legal/IT", "children": [ {"name": "Closed - Won", "size": 0} ] } ] } ] } ] } ] } ] }, { "name": "Hyperion", "children": [ { "name": "Qualified Lead", "children": [ {"name": "Opportunity Created", "size": 1}, { "name": "Opportunity Created", "children": [ {"name": "Solution Proposed", "size": 0}, { "name": "Solution Proposed", "children": [ {"name": "POC", "size": 0}, { "name": "POC", "children": [ {"name": "Legal/IT", "size": 0}, { "name": "Legal/IT", "children": [ {"name": "Closed - Won", "size": 0} ] } ] } ] } ] } ] } ] }, { "name": "GSK", "children": [ { "name": "Qualified Lead", "children": [ {"name": "Opportunity Created", "size": 0}, { "name": "Opportunity Created", "children": [ {"name": "Solution Proposed", "size": 0}, { "name": "Solution Proposed", "children": [ {"name": "POC", "size": 0}, { "name": "POC", "children": [ {"name": "Legal/IT", "size": 1}, { "name": "Legal/IT", "children": [ {"name": "Closed - Won", "size": 0} ] } ] } ] } ] } ] } ] }, { "name": "KRD", "children": [ {"name": "Qualified Lead", "size": 1}, { "name": "Qualified Lead", "children": [ {"name": "Opportunity Created", "size": 0}, { "name": "Opportunity Created", "children": [ {"name": "Solution Proposed", "size": 0}, { "name": "Solution Proposed", "children": [ {"name": "POC", "size": 0}, { "name": "POC", "children": [ {"name": "Legal/IT", "size": 0}, { "name": "Legal/IT", "children": [ {"name": "Closed - Won", "size": 0} ] } ] } ] } ] } ] } ] }, { "name": "Magellan", "children": [ { "name": "Qualified Lead", "children": [ {"name": "Opportunity Created", "size": 0}, { "name": "Opportunity Created", "children": [ {"name": "Solution Proposed", "size": 0}, { "name": "Solution Proposed", "children": [ {"name": "POC", "size": 1}, { "name": "POC", "children": [ {"name": "Legal/IT", "size": 0}, { "name": "Legal/IT", "children": [ {"name": "Closed - Won", "size": 0} ] } ] } ] } ] } ] } ] }, { "name": "Northwell", "children": [ { "name": "Qualified Lead", "children": [ {"name": "Opportunity Created", "size": 0}, { "name": "Opportunity Created", "children": [ {"name": "Solution Proposed", "size": 0}, { "name": "Solution Proposed", "children": [ {"name": "POC", "size": 1}, { "name": "POC", "children": [ {"name": "Legal/IT", "size": 0}, { "name": "Legal/IT", "children": [ {"name": "Closed - Won", "size": 0} ] } ] } ] } ] } ] } ] }, { "name": "Origin ENergy", "children": [ {"name": "Qualified Lead", "size": 1}, { "name": "Qualified Lead", "children": [ {"name": "Opportunity Created", "size": 0}, { "name": "Opportunity Created", "children": [ {"name": "Solution Proposed", "size": 0}, { "name": "Solution Proposed", "children": [ {"name": "POC", "size": 0}, { "name": "POC", "children": [ {"name": "Legal/IT", "size": 0}, { "name": "Legal/IT", "children": [ {"name": "Closed - Won", "size": 0} ] } ] } ] } ] } ] } ] }, { "name": "RBS", "children": [ { "name": "Qualified Lead", "children": [ {"name": "Opportunity Created", "size": 0}, { "name": "Opportunity Created", "children": [ {"name": "Solution Proposed", "size": 0}, { "name": "Solution Proposed", "children": [ {"name": "POC", "size": 1}, { "name": "POC", "children": [ {"name": "Legal/IT", "size": 0}, { "name": "Legal/IT", "children": [ {"name": "Closed - Won", "size": 0} ] } ] } ] } ] } ] } ] }, { "name": "Oxfam", "children": [ { "name": "Qualified Lead", "children": [ {"name": "Opportunity Created", "size": 0}, { "name": "Opportunity Created", "children": [ {"name": "Solution Proposed", "size": 0}, { "name": "Solution Proposed", "children": [ {"name": "POC", "size": 0}, { "name": "POC", "children": [ {"name": "Legal/IT", "size": 0}, { "name": "Legal/IT", "children": [ {"name": "Closed - Won", "size": 1} ] } ] } ] } ] } ] } ] }, { "name": "VWFS", "children": [ { "name": "Qualified Lead", "children": [ {"name": "Opportunity Created", "size": 1}, { "name": "Opportunity Created", "children": [ {"name": "Solution Proposed", "size": 0}, { "name": "Solution Proposed", "children": [ {"name": "POC", "size": 0}, { "name": "POC", "children": [ {"name": "Legal/IT", "size": 0}, { "name": "Legal/IT", "children": [ {"name": "Closed - Won", "size": 0} ] } ] } ] } ] } ] } ] } ] } ] } var width = 500; var height = 500; var radius = Math.min(width, height) / 2; var color = d3.scaleOrdinal(d3.schemeCategory20b); var g = d3.select('svg') .attr('width', width) .attr('height', height) .append('g') .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')'); var g = d3.select('svg') .attr('width', width) .attr('height', height) .append('g') .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')'); var partition = d3.partition() .size([2 * Math.PI, radius]); d3.json("data.json", function(error, nodeData) { if (error) throw error; var root = d3.hierarchy(nodeData) .sum(function (d) { return d.size}); partition(root); var arc = d3.arc() .startAngle(function (d) { return d.x0 }) .endAngle(function (d) { return d.x1 }) .innerRadius(function (d) { return d.y0 }) .outerRadius(function (d) { return d.y1 }); g.selectAll('path') .data(root.descendants()) .enter() .append('path') .attr("display", function (d) { return d.depth ? null : "none"; }) .attr("d", arc) .style('stroke', '#fff') .style("fill", function (d) { return color((d.children ? d : d.parent).data.name); g.selectAll(".node") .append("text") .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")rotate(" + computeTextRotation(d) + ")"; }) .attr("dx", "-20") // radius margin .attr("dy", ".5em") // rotation align .text(function(d) { return d.parent ? d.data.name : "" }); }); function computeTextRotation(d) { var angle = (d.x0 + d.x1) / Math.PI * 90; return (angle < 120 || angle > 270) ? angle : angle + 180; } </script> </body>
https://d3js.org/d3.v4.min.js