A force-directed graph using images as nodes, with accompanying text labels.
forked from mbostock's block: Labeled Force Layout
xxxxxxxxxx<meta charset="utf-8"><style>.link { stroke: #ccc;}.node text { pointer-events: none; font: 14px sans-serif;}</style><body><script src="https://d3js.org/d3.v3.min.js"></script><script>var link, node, width = 960, height = 700, maxDist = 300, minDist = 20, circleRadius = 25, collisionIndex = 2, collisionOffset = 15, gradientStart = '#ffa474', gradientStop = '#8b0000', svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); force = d3.layout.force() .gravity(0) .charge(-600) .size([width, height]); var cfg = { w: 800, //Width of the circle h: 800, //Height of the circle margin: {top: 20, right: 20, bottom: 20, left: 20}, //The margins around the circle levels: 5, //How many levels or inner circles should there be drawn maxValue: 1, //What is the value that the biggest circle will represent labelFactor: 1.25, //How much farther than the radius of the outer circle should the labels be placed wrapWidth: 135, //The number of pixels after which a label needs to be given a new line opacityArea: 0.35, //The opacity of the area of the blob dotRadius: 4, //The size of the colored circles of each blog opacityCircles: 0.05, //The opacity of the circles of each blob strokeWidth: 2, //The width of the stroke around each blob roundStrokes: false, //If true the area and stroke will follow a round path (cardinal-closed) color: d3.scale.ordinal().range(d3.shuffle(['#1f77b4','#ff7f0e','#2ca02c','#d62728','#8c564b','#e377c2','#EDB220'])), //Color function sourceNode: '001', additionalDistance: 50, axisName: "axis", value: "value", sortAreas: true, id: ".radarChart" }; var radius = Math.min(cfg.w/2, cfg.h/2), //Radius of the outermost circle Format = d3.format('%'); //Percentage formatting ///////////////////////////////////////////////////////// //////////// Create the container SVG and g ///////////// ///////////////////////////////////////////////////////// //Initiate the radar chart SVG svg .attr("width", cfg.w + cfg.margin.left + cfg.margin.right) .attr("height", cfg.h + cfg.margin.top + cfg.margin.bottom) .attr("class", "radar"+cfg.id); //Append a g element var g = svg.append("g") .attr("transform", "translate(" + (cfg.w/2 + cfg.margin.left) + "," + (cfg.h/2 + cfg.margin.top) + ")"); ///////////////////////////////////////////////////////// ////////// Glow filter for some extra pizzazz /////////// ///////////////////////////////////////////////////////// //Filter for the outside glow var filter = g.append('defs').append('filter').attr('id','glow'), feGaussianBlur = filter.append('feGaussianBlur').attr('stdDeviation','2.5').attr('result','coloredBlur'), feMerge = filter.append('feMerge'), feMergeNode_1 = feMerge.append('feMergeNode').attr('in','coloredBlur'), feMergeNode_2 = feMerge.append('feMergeNode').attr('in','SourceGraphic'); ///////////////////////////////////////////////////////// /////////////// Draw the Circular grid ////////////////// ///////////////////////////////////////////////////////// //Wrapper for the grid & axes var axisGrid = g.append("g").attr("class", "axisWrapper"); //Draw the background circles axisGrid.selectAll(".levels") .data(d3.range(1,(cfg.levels+1)).reverse()) .enter() .append("circle") .attr("class", "gridCircle") .attr("id", function(d, i) { return "c" + i; }) .attr("r", function(d, i){return radius/cfg.levels*d;}) .style("fill", "#CDCDCD") .style("stroke", "#CDCDCD") .style("fill-opacity", cfg.opacityCircles) .style("filter" , "url(#glow)"); //Text indicating at what % each level is axisGrid.selectAll(".axisLabel") .data(d3.range(1,(cfg.levels+1))) .enter().append("text") .attr("class", "axisLabel") .attr("x", 1) .attr("y", function(d){return -d*radius/cfg.levels;}) .attr("dy", "0.4em") .style("font-size", "14px") .attr("fill", "#737373") .text(function(d,i) { var scaleLabel = cfg.maxValue * d/cfg.levels -1; if (scaleLabel !== 0) { scaleLabel = scaleLabel * -1; } return Format(scaleLabel); }); var h = 140, w = 400; var key = d3.select("body").append("svg").attr("width", w).attr("height", h); var legend = svg.append("defs").append("svg:linearGradient").attr("id", "gradient").attr("x1", "100%").attr("x2", "0%"); legend.append("stop").attr("offset", "0%").attr("stop-color", "#B30000").attr("stop-opacity", 1); legend.append("stop").attr("offset", "100%").attr("stop-color", "#FEE8c8").attr("stop-opacity", 1); svg.append("rect").attr("width", w - 100).attr("height", h - 100).style("fill", "url(#gradient)"); var y = d3.scale.linear().range([300, 0]).domain([1, 100]); d3.json("graph.json", function(error, json) { if (error) throw error; var xnodes = [ {"id": "001", "name": "title", "score": 1}, {"id": "002", "name": "title", "score": 0.4}, {"id": "003", "name": "title", "score": 0.4}, {"id": "003", "name": "title", "score": 0.4}, {"id": "004", "name": "title", "score": 0.4}, {"id": "005", "name": "title", "score": 0.4}, {"id": "006", "name": "title", "score": 0.4}, {"id": "007", "name": "title", "score": 0.4}, {"id": "008", "name": "title", "score": 0.4}, {"id": "009", "name": "title", "score": 0.4}, {"id": "010", "name": "title", "score": 0.4}, {"id": "003", "name": "title", "score": 0.4}, {"id": "004", "name": "title", "score": 0.4}, {"id": "005", "name": "title", "score": 0.4}, {"id": "006", "name": "title", "score": 0.4}, {"id": "007", "name": "title", "score": 0.4}, {"id": "008", "name": "title", "score": 0.4}, {"id": "009", "name": "title", "score": 0.4}, {"id": "010", "name": "title", "score": 0.4}, {"id": "003", "name": "title", "score": 0.4}, {"id": "004", "name": "title", "score": 0.4}, {"id": "005", "name": "title", "score": 0.4}, {"id": "006", "name": "title", "score": 0.4}, {"id": "007", "name": "title", "score": 0.4}, {"id": "008", "name": "title", "score": 0.4}, {"id": "009", "name": "title", "score": 0.4}, {"id": "010", "name": "title", "score": 0.4} ], xlinks = [], xSource = xnodes.filter(function(x) { return x.id === "001"; })[0], rScale = d3.scale.linear().domain([0, 1]).range([0, radius]); xnodes.forEach(function(node) { var distance = rScale(node.score); // Math.floor(1 - node.score) node.name = node.score.toFixed(2); xlinks.push({ source: xSource, target: node, dist: distance });}); force .nodes(xnodes) .links(xlinks) .distance(function(d){ return d.dist; }) .charge(function(d){ var charge = -400; if (d.index === 0) charge = 10 * charge; return charge; }) .start(); link = svg.selectAll(".link") .data(xlinks) .enter().append("line") .attr("class", "link"); // Create a 'g' node for each data entry node = svg.selectAll(".node") .data(xnodes) .enter().append("g") .attr("class", "node"); //.call(force.drag); // Insert image element node.append("circle") .attr("x", -8) .attr("y", -8) .attr('r', function(d) { if (d.index === 0) { return 80; } else return circleRadius; }) .style('fill', '#1f77b4'); // Insert rect element with no width yet node.append("rect") .attr("x", 6) .attr("y", -15) .attr("rx", 8) .attr("ry", 8) .attr("height", 24) .style("fill", "#FFE6F0") .style("opacity", 0); // Add title name node.append("text") .attr("dx", -12) .attr("dy", ".35em") .attr("class", "text") .attr("data-weight", function(d) { return d.weight; }) .text(function(d) { return d.name }) .style("fill", "white"); // Now, set the rect width based on title length node.selectAll("rect") .attr("width", function(d) { var txtWidth = this.parentNode.children[2].getComputedTextLength(); return Math.floor(txtWidth + 15); }); node.call(force.drag); force.on("tick", function() { link.attr("x1", function(d) { return d.source.x; }) .attr("y1", function(d) { return d.source.y; }) .attr("x2", function(d) { return d.target.x; }) .attr("y2", function(d) { return d.target.y; }); node.attr("transform", function(d) { if (d.index == 0) { d.x = cfg.w/2 + cfg.margin.left; d.y = cfg.h/2 + cfg.margin.top; } return "translate(" + d.x + "," + d.y + ")"; }); }); });</script> https://d3js.org/d3.v3.min.js