???
xxxxxxxxxx<head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } </style></head><body> <script> var margin = {top: 20, right: 10, bottom: 20, left: 10}; var width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", `translate(${margin.left}, ${ margin.top})`); d3.csv("MergedIMIData1947-2005.csv", function(error, data) { if (error) throw error; let code_to_idx = {} let idx_to_code = {} let next_idx = 0 function to_idx(code) { if (code in code_to_idx) { return code_to_idx[code] } code_to_idx[code] = next_idx idx_to_code[next_idx] = code next_idx += 1 return next_idx -1 } for (row of data) { console.log(to_idx(row['intervener'])) console.log(to_idx(row['target'])) console.log(to_idx(row['intervener'])) break; } }); // From https://mkweb.bcgsc.ca/circos/guide/tables/var matrix = [ [11975, 5871, 8916, 2868], [ 1951, 10048, 2060, 6171], [ 8010, 16145, 8090, 8045], [ 1013, 990, 940, 6907]];var svg = d3.select("svg"), width = +svg.attr("width"), height = +svg.attr("height"), outerRadius = Math.min(width, height) * 0.5 - 40, innerRadius = outerRadius - 30;var formatValue = d3.formatPrefix(",.0", 1e3);var chord = d3.chord() .padAngle(0.05) .sortSubgroups(d3.descending);var arc = d3.arc() .innerRadius(innerRadius) .outerRadius(outerRadius);var ribbon = d3.ribbon() .radius(innerRadius);var color = d3.scaleOrdinal() .domain(d3.range(4)) .range(["#000000", "#FFDD89", "#957244", "#F26223"]);var g = svg.append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")") .datum(chord(matrix));var group = g.append("g") .attr("class", "groups") .selectAll("g") .data(function(chords) { return chords.groups; }) .enter().append("g");group.append("path") .style("fill", function(d) { return color(d.index); }) .style("stroke", function(d) { return d3.rgb(color(d.index)).darker(); }) .attr("d", arc);var groupTick = group.selectAll(".group-tick") .data(function(d) { return groupTicks(d, 1e3); }) .enter().append("g") .attr("class", "group-tick") .attr("transform", function(d) { return "rotate(" + (d.angle * 180 / Math.PI - 90) + ") translate(" + outerRadius + ",0)"; });groupTick.append("line") .attr("x2", 6);groupTick .filter(function(d) { return d.value % 5e3 === 0; }) .append("text") .attr("x", 8) .attr("dy", ".35em") .attr("transform", function(d) { return d.angle > Math.PI ? "rotate(180) translate(-16)" : null; }) .style("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; }) .text(function(d) { return formatValue(d.value); });g.append("g") .attr("class", "ribbons") .selectAll("path") .data(function(chords) { return chords; }) .enter().append("path") .attr("d", ribbon) .style("fill", function(d) { return color(d.target.index); }) .style("stroke", function(d) { return d3.rgb(color(d.target.index)).darker(); });// Returns an array of tick angles and values for a given group and step.function groupTicks(d, step) { var k = (d.endAngle - d.startAngle) / d.value; return d3.range(0, d.value, step).map(function(value) { return {value: value, angle: value * k + d.startAngle}; });} </script></body> https://d3js.org/d3.v4.min.js