js+html 实现关系拓扑图

最近要做一个功能。需要用到关系拓扑图。做了一些调研。发现相关插件很多接下来做个分析

1.yWorks

德国人做的。支持jAjax,html ,php。

官网 https://www.yworks.com/ 需要收费 官网demo效果如下:


2.Qunee 

中国人自己开发的,js+html5 有中文文档api

官网 http://www.qunee.com/  需要收费 官网demo 效果如下:


3.Echart

开源免费。但是他自己不能独立的完成图形的生成。需要引入其他插件。学习成本高不推荐
管网:http://gallery.echartsjs.com/ demo 图形如下:

4.jTopo

官网 http://www.jtopo.com/index.html
2014年后没有再更新,且本身存在一些bug,不推荐使用,这里就不列出它的demo图形了。有兴趣的朋友可以自己去官网上查看。

4.D3.js

我这里主要说的是D3,支持json数据格式。页面简单。效果绚丽。开源免费。有中文文档手册api简单易学。推荐使用。
官网:https://d3js.org/
我这里列出两个官网demo的地址读者可以自己去感受下
http://bl.ocks.org/MoritzStefaner/1377729

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Force based label placement</title>
		<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.6.0"></script>
		<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?2.6.0"></script>
		<script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?2.6.0"></script>
	</head>
	<body>
<script type="text/javascript" charset="utf-8">
			var w = 960, h = 500;

			var labelDistance = 0;

			var vis = d3.select("body").append("svg:svg").attr("width", w).attr("height", h);

			var nodes = [];
			var labelAnchors = [];
			var labelAnchorLinks = [];
			var links = [];

			for(var i = 0; i < 30; i++) {
				var node = {
					label : "node " + i
				};
				nodes.push(node);
				labelAnchors.push({
					node : node
				});
				labelAnchors.push({
					node : node
				});
			};

			for(var i = 0; i < nodes.length; i++) {
				for(var j = 0; j < i; j++) {
					if(Math.random() > .95)
						links.push({
							source : i,
							target : j,
							weight : Math.random()
						});
				}
				labelAnchorLinks.push({
					source : i * 2,
					target : i * 2 + 1,
					weight : 1
				});
			};

			var force = d3.layout.force().size([w, h]).nodes(nodes).links(links).gravity(1).linkDistance(50).charge(-3000).linkStrength(function(x) {
				return x.weight * 10
			});


			force.start();

			var force2 = d3.layout.force().nodes(labelAnchors).links(labelAnchorLinks).gravity(0).linkDistance(0).linkStrength(8).charge(-100).size([w, h]);
			force2.start();

			var link = vis.selectAll("line.link").data(links).enter().append("svg:line").attr("class", "link").style("stroke", "#CCC");

			var node = vis.selectAll("g.node").data(force.nodes()).enter().append("svg:g").attr("class", "node");
			node.append("svg:circle").attr("r", 5).style("fill", "#555").style("stroke", "#FFF").style("stroke-width", 3);
			node.call(force.drag);


			var anchorLink = vis.selectAll("line.anchorLink").data(labelAnchorLinks)//.enter().append("svg:line").attr("class", "anchorLink").style("stroke", "#999");

			var anchorNode = vis.selectAll("g.anchorNode").data(force2.nodes()).enter().append("svg:g").attr("class", "anchorNode");
			anchorNode.append("svg:circle").attr("r", 0).style("fill", "#FFF");
				anchorNode.append("svg:text").text(function(d, i) {
				return i % 2 == 0 ? "" : d.node.label
			}).style("fill", "#555").style("font-family", "Arial").style("font-size", 12);

			var updateLink = function() {
				this.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;
				});

			}

			var updateNode = function() {
				this.attr("transform", function(d) {
					return "translate(" + d.x + "," + d.y + ")";
				});

			}


			force.on("tick", function() {

				force2.start();

				node.call(updateNode);

				anchorNode.each(function(d, i) {
					if(i % 2 == 0) {
						d.x = d.node.x;
						d.y = d.node.y;
					} else {
						var b = this.childNodes[1].getBBox();

						var diffX = d.x - d.node.x;
						var diffY = d.y - d.node.y;

						var dist = Math.sqrt(diffX * diffX + diffY * diffY);

						var shiftX = b.width * (diffX - dist) / (dist * 2);
						shiftX = Math.max(-b.width, Math.min(0, shiftX));
						var shiftY = 5;
						this.childNodes[1].setAttribute("transform", "translate(" + shiftX + "," + shiftY + ")");
					}
				});


				anchorNode.call(updateNode);

				link.call(updateLink);
				anchorLink.call(updateLink);

			});

		</script>
	</body>
</html>


http://bl.ocks.org/mbostock/afecf1ce04644ad9036ca146d2084895


<!DOCTYPE html>
<meta charset="utf-8">
<a target="_blank" style="outline:none;"><canvas width="960" height="960"></canvas></a>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var canvas = document.querySelector("canvas"),
    context = canvas.getContext("2d"),
    width = canvas.width,
    height = canvas.height,
    searchRadius = 40;

var color = d3.scaleOrdinal()
    .range(d3.schemeCategory20);

var simulation = d3.forceSimulation()
    .force("charge", d3.forceManyBody().strength(-18))
    .force("link", d3.forceLink().iterations(4).id(function(d) {
      return d.id; }))
    .force("x", d3.forceX())
    .force("y", d3.forceY());

d3.json("graph.json", function(error, graph) {
     
  if (error) throw error;

  var users = d3.nest()
      .key(function(d) {
      return d.user; })
      .entries(graph.nodes)
      .sort(function(a, b) {
      return b.values.length - a.values.length; });

  color.domain(users.map(function(d) {
      return d.key; }));

  simulation
      .nodes(graph.nodes)
      .on("tick", ticked);

  simulation.force("link")
      .links(graph.links);

  d3.select(canvas)
      .on("mousemove", mousemoved)
      .call(d3.drag()
          .container(canvas)
          .subject(dragsubject)
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended));

  function ticked() {
     
    context.clearRect(0, 0, width, height);
    context.save();
    context.translate(width / 2, height / 2);

    context.beginPath();
    graph.links.forEach(drawLink);
    context.strokeStyle = "#aaa";
    context.stroke();

    users.forEach(function(user) {
     
      context.beginPath();
      user.values.forEach(drawNode);
      context.fillStyle = color(user.key);
      context.fill();
    });

    context.restore();
  }

  function dragsubject() {
     
    return simulation.find(d3.event.x - width / 2, d3.event.y - height / 2, searchRadius);
  }

  function mousemoved() {
     
    var a = this.parentNode, m = d3.mouse(this), d = simulation.find(m[0] - width / 2, m[1] - height / 2, searchRadius);
    if (!d) return a.removeAttribute("href"), a.removeAttribute("title");
    a.setAttribute("href", "http://bl.ocks.org/" + (d.user ? d.user + "/" : "") + d.id);
    a.setAttribute("title", d.id + (d.user ? " by " + d.user : "") + (d.description ? "\n" + d.description : ""));
  }
});

function dragstarted() {
     
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d3.event.subject.fx = d3.event.subject.x;
  d3.event.subject.fy = d3.event.subject.y;
}

function dragged() {
     
  d3.event.subject.fx = d3.event.x;
  d3.event.subject.fy = d3.event.y;
}

function dragended() {
     
  if (!d3.event.active) simulation.alphaTarget(0);
  d3.event.subject.fx = null;
  d3.event.subject.fy = null;
}

function drawLink(d) {
     
  context.moveTo(d.source.x, d.source.y);
  context.lineTo(d.target.x, d.target.y);
}

function drawNode(d) {
     
  context.moveTo(d.x + 3, d.y);
  context.arc(d.x, d.y, 3, 0, 2 * Math.PI);
}
graph.json:
{
"nodes": [
{"id":"4062045","user":"mbostock","description":"Force-Directed Graph"},
{"id":"1341021","user":"mbostock","description":"Parallel Coordinates"},
{"id":"1341281","user":"jasondavies","description":"Parallel Coordinates"},
{"id":"b3ff6ae1c120eea654b5","user":"d3noob","description":"Simple d3.js Graph"},
{"id":"4963004","user":"calvinmetcalf","description":"Quadtree Madness Round 2"},
{"id":"4962892","user":"calvinmetcalf","description":"Quadtree Madness Round 2"},
{"id":"4963273","user":"calvinmetcalf","description":"Quadtree Madness Round 2"},
{"id":"4967213","user":"calvinmetcalf","description":"Rtree Madness"},
{"id":"4060606","user":"mbostock","description":"Choropleth"},
{"id":"4686432","user":"dwtkns","description":"Faux-3d Shaded Globe"},
{"id":"3757101","user":"mbostock","description":"Lambert Azimuthal Equal-Area"},
{"id":"5028304","user":"d3noob","description":"Sankey diagram with horizontal and vertical node movement"},
{"id":"4343214","user":"mbostock","description":"Quadtree"},
{"id":"1346410","user":"mbostock","description":"Pie Chart Update, II"},
{"id":"1098617","user":"mbostock","description":"Arc Clock"},
{"id":"4341574","user":"mbostock","description":"The Amazing Pie"},
{"id":"4341417","user":"mbostock","description":"Donut Transitions"},
{"id":"4183330","user":"mbostock","description":"World Tour"},
{"id":"9656675","user":"mbostock","description":"Zoom to Bounding Box II"},
{"id":"4707858","user":"mbostock","description":"Project to Bounding Box"},
{"id":"1153292","user":"mbostock","description":"Mobile Patent Suits"},
{"id":"2706022","user":"mbostock","description":"Force-Directed Graph with Mouseover"},
{"id":"5141278","user":"d3noob","description":"Basic Directional Force Layout Diagram"},
{"id":"5107491","user":"espinielli","description":"Random World Tour with flags"},
{"id":"5044313","user":"mbostock","description":"Gray Earth"},
{"id":"5141528","user":"d3noob","description":"Directional Force Layout Diagram with Node Highlighting"},
{"id":"4342045","user":"mbostock","description":"Symbol Map"},
{"id":"3711652","user":"mbostock","description":"Projection Transitions"},
{"id":"4063530","user":"mbostock","description":"Circle Packing"},
{"id":"3305854","user":"mbostock","description":"Custom Tweens"},
{"id":"5180185","user":"mbostock","description":"Zipdecode"},
{"id":"5386999","user":"herrstucki","description":"Zipdecode Switzerland"},
{"id":"5416440","user":"mbostock","description":"Merging States II"},
{"id":"5416405","user":"mbostock","description":"Merging States"},
{"id":"4061961","user":"mbostock","description":"Bullet Charts"},
{"id":"5518052","user":"milroc","description":"bar + sum: vanilla d3.js"},
{"id":"5519642","user":"milroc","description":"bar + sum: reusable d3.js"},
{"id":"5519819","user":"milroc","description":"bar + sum: d3.js & angular.js"},
{"id":"5520449","user":"milroc","description":"bar + sum: d3.js & ember.js " },
{"id":"5522467","user":"milroc","description":"bar + sum: d3.js & backbone.js"},
{"id":"d22bbf92231876505e5d","user":"milroc","description":"bar + sum: d3.js, react.js, & Flux"},
{"id":"5553051","user":"milroc","description":"    " },
{"id":"5593150","user":"mbostock","description":"Vector Tiles"},
{"id":"1642989","user":"mbostock","description":"Spline Transition"},
{"id":"1705868","user":"mbostock","description":"Point-Along-Path Interpolation"},
{"id":"5662135","user":"cloudshapes","description":"attrTween in a Transition to Move an Element Using a Function"},
{"id":"1667367","user":"mbostock","description":"Focus+Context via Brushing"},
{"id":"4180634","user":"mbostock","description":"World Map"},
{"id":"5732685"},
{"id":"4973620","user":"dwtkns","description":"Faux-3D Arcs"},
{"id":"5732719","user":"darrenjaworski","description":"TOPOJSON from shapefile - OK Census tracts"},
{"id":"5616813","user":"mbostock","description":"Vector Tiles"},
{"id":"5874133","user":"darrenjaworski","description":"Tutorial I"},
{"id":"5874214","user":"darrenjaworski","description":"Tutorial II"},
{"id":"5874227","user":"darrenjaworski","description":"Tutorial III"},
{"id":"5874229"},
{"id":"5874233"},
{"id":"5874236"},
{"id":"5397362","user":"darrenjaworski","description":"Continuous gradient key"},
{"id":"5886992","user":"d3noob","description":"Simple d3.js Bullet Chart example"},
{"id":"1021953","user":"mbostock","description":"Multi-Foci Force Layout"},
{"id":"5691513"},
{"id":"1389927","user":"mbostock","description":"A Bar Chart"},
{"id":"1129492","user":"mbostock","description":"Bounded Force Layout"},
{"id":"5820393","user":"karmadude","description":"San Francisco Contours"},
{"id":"6052814","user":"nbremer","description":"Self Organizing Map - Heatmap - D3"},
{"id":"6052681","user":"nbremer","description":"Self Organizing Map - Hexagonal Heatmap - Lines"},
{"id":"6187523","user":"CodeXmonk","description":"BulleT: a variant based on mbostock's bullet with Miso's d3.chart.js"},
{"id":"5249328","user":"mbostock","description":"Hexagon Mesh"},
{"id":"6150151","user":"nitaku","description":"Colored hex regions"},
{"id":"3887118","user":"mbostock","description":"Scatterplot"},
{"id":"6112167","user":"CodeXmonk","description":"Simple modification based on mbostock's Bullet Charts."},
{"id":"1703449","user":"christophermanning","description":"Hamiltonian Graph Builder"},
{"id":"6203413","user":"christophermanning","description":"CTA Line Simplification"},
{"id":"4062085","user":"mbostock","description":"Population Pyramid"},
{"id":"6226150","user":"cmdoptesc","description":"JavaScript D3: Drawing Concentric Arcs"},
{"id":"5100636","user":"mbostock","description":"Arc Tween"},
{"id":"6228457","user":"cmdoptesc","description":"JavaScript D3: Arc tween transitions using attrTween and attr methods"},
{"id":"6279966","user":"hugolpz","description":"France_topographic_map.svg"},
{"id":"5649592","user":"mbostock","description":"Stroke Dash Interpolation"},
{"id":"2846454","user":"mbostock","description":"Force Layout & Matrix Market Format"},
{"id":"4060366","user":"mbostock","description":"Voronoi Tessellation"},
{"id":"1405439","user":"njvack","description":"Voronoi-based point picker"},
{"id":"1734663","user":"christophermanning","description":"Voronoi Diagram with Force Directed Nodes and Delaunay Links"},
{"id":"6439398","user":"simzou","description":"Kobe Bryant 2012-13 Game Log Line Graph"},
{"id":"3884955","user":"mbostock","description":"Multi-Series Line Chart"},
{"id":"6459889","user":"simzou","description":"US Map of Nielsen Media Markets"},
{"id":"2206590","user":"mbostock","description":"click-to-zoom via transform"},
{"id":"3019563","user":"mbostock","description":"Margin Convention"},
{"id":"3894205","user":"mbostock","description":"Difference Chart"},
{"id":"3885304","user":"mbostock","description":"Bar Chart"},
{"id":"21746a9668ffdf6d8242","user":"nbremer","description":"Radar Chart Redesign"},
{"id":"6514960","user":"nitaku","description":"Hilbert curve (L-system)"},
{"id":"11094667","user":"ndarville","description":"Party Trend (Multi-Party Display)"},
{"id":"5230564","user":"mbostock","description":"Times"},
{"id":"6901037","user":"nitaku","description":"Circles"},
{"id":"6622700","user":"nitaku","description":"GeoJSON squares"},
{"id":"6173659","user":"nitaku","description":"Hex coordinates"},
{"id":"7023140","user":"nitaku","description":"Gosper hex tiling"},
{"id":"7008736","user":"nitaku","description":"Custom hex projection"},
{"id":"6521802","user":"nitaku","description":"Gosper curve (L-system)"},
{"id":"7015186","user":"nitaku","description":"Gosper hex tiling (fancy)"},
{"id":"7023794","user":"nitaku","description":"Gosper regions"},
{"id":"6982528","user":"nitaku","description":"TopoJSON geometrical renderer"},
{"id":"7025272","user":"nitaku","description":"Precomputed Gosper regions"},
{"id":"7051552","user":"phil-pedruco","description":"Disable zoom on scrollwheel but retain the ability to pan #2"},
{"id":"7051484","user":"phil-pedruco","description":"Disable zoom on scrollwheel but retain the ability to pan #1"},
{"id":"4063423","user":"mbostock","description":"Sunburst Partition"},
{"id":"7032353","user":"radiocontrolled","description":"Humanitarian population by major Canadian city, 2012"},
{"id":"4237768","user":"mbostock","description":"Voronoi Clipping"},
{"id":"3846051","user":"mbostock","description":"Voronoi tests"},
{"id":"7233233","user":"nitaku","description":"Voronoi"},
{"id":"1157787","user":"mbostock","description":"Small Multiples"},
{"id":"6476579","user":"Caged","description":"Using d3-tip to add tooltips to a d3 bar chart"},
{"id":"2295155"},
{"id":"3680999","user":"mbostock","description":"SVG Geometric Zooming"},
{"id":"7328902","user":"jkutianski","description":"My attempt to add templating to d3.js"},
{"id":"3750558","user":"mbostock","description":"Sticky Force Layout"},
{"id":"7483341","user":"nitaku","description":"ID-based force layout"},
{"id":"7493693","user":"nitaku","description":"Graph editing"},
{"id":"5001347","user":"rkirsling","description":"Directed Graph Editor"},
{"id":"7512487","user":"nitaku","description":"Graph editing tools"},
{"id":"6890861","user":"nitaku","description":"IndexedDB"},
{"id":"7517984","user":"nitaku","description":"Graph editing with persistence"},
{"id":"7475950","user":"jkutianski","description":"A new attempt to add templating to d3.js"},
{"id":"5052095","user":"timelyportfolio","description":"" },
{"id":"7188018","user":"radiocontrolled","description":"Humanitarian population by Canadian region, 2012"},
{"id":"4339184","user":"mbostock","description":"Reingold–Tilford Tree"},
{"id":"1093025","user":"mbostock","description":"Collapsible Indented Tree"},
{"id":"7910706","user":"nitaku","description":"Random tree"},
{"id":"7962295"},
{"id":"7938492","user":"nitaku","description":"Random tree II"},
{"id":"7960622"},
{"id":"4136647","user":"mbostock","description":"U.S. TopoJSON"},
{"id":"8028264","user":"nitaku","description":"Fractal treemap (random, Gosper)"},
{"id":"7518871","user":"nitaku","description":"Graph with immutable nodes and links"},
{"id":"3757132","user":"mbostock","description":"Spherical Mercator"},
{"id":"8031205","user":"nitaku","description":"Fractal tree depth map (random, Gosper)"},
{"id":"8260510","user":"nitaku","description":"Canonical representation of unordered rooted trees"},
{"id":"8185373","user":"rveciana","description":"Base map for Haiyan typhoon track"},
{"id":"1346395","user":"mbostock","description":"Pie Chart Update, I"},
{"id":"8244446","user":"nitaku","description":"Random tree (unordered)"},
{"id":"8272105"},
{"id":"8272715","user":"nitaku","description":"Fractal treemap of Konanopii (1,724 leaves)"},
{"id":"3014589","user":"mbostock","description":"Lab and HCL Color Spaces"},
{"id":"8699346","user":"StewartNoyce","description":"D3 Authors by Domain"},
{"id":"3808218","user":"mbostock","description":"General Update Pattern, I"},
{"id":"8772179","user":"nitaku","description":"Space-flling curve layout (Gosper)"},
{"id":"8784278","user":"nitaku","description":"Jigsaw treemap (Gosper)"},
{"id":"8784942","user":"nitaku","description":"Jigsaw treemap (Hilbert)"},
{"id":"8787102","user":"nitaku","description":"Hilbert treemap (area encoding)"},
{"id":"4341134","user":"mbostock","description":"Hierarchical Edge Bundling"},
{"id":"8788101","user":"nitaku","description":"Gosper treemap with hierarchical edge bundling"},
{"id":"8566245","user":"nitaku","description":"Categorical color scale generator (HCL)"},
{"id":"8246732","user":"radiocontrolled","description":"What per cent of people in the UK have used the Internet?"},
{"id":"8900555","user":"nitaku","description":"Coloring of intersecting regions"},
{"id":"8882722","user":"nitaku","description":"Label placement for Hilbert treemaps"},
{"id":"8955159","user":"nitaku","description":"Stability of Peano curve"},
{"id":"8947871","user":"nitaku","description":"Stable Hilbert curve"},
{"id":"8947565","user":"nitaku","description":"Unstable Hilbert curve"},
{"id":"6531064","user":"nitaku","description":"Peano (?) curve (L-system)"},
{"id":"8949471","user":"nitaku","description":"Peano curve (L-system)"},
{"id":"8968230","user":"nitaku","description":"FASS curve I (L-system)"},
{"id":"4063269","user":"mbostock","description":"Bubble Chart"},
{"id":"4327678","user":"herrstucki","description":"Swiss Cantons and Municipalities"},
{"id":"9205257","user":"herrstucki","description":"Transitions with React and D3 I"},
{"id":"9205264","user":"herrstucki","description":"Transitions with React and D3 II"},
{"id":"9205238","user":"herrstucki","description":"Transitions with D3"},
{"id":"9216081"},
{"id":"9216751","user":"vlandham"},
{"id":"9204795","user":"herrstucki","description":"Swiss Cantons and Municipalities with React"},
{"id":"9265219","user":"bollwyvl","description":"A fishbone editor"},
{"id":"9239214","user":"bollwyvl","description":"d3 fishbone"},
{"id":"9572040","user":"dbuezas","description":"Pie Chart Labels with missing data"},
{"id":"5126418","user":"mbostock","description":"New Jersey State Plane"},
{"id":"4573883","user":"mbostock","description":"Threshold Key"},
{"id":"9417919","user":"StewartNoyce","description":"D.C. Choropleth"},
{"id":"3886208","user":"mbostock","description":"Stacked Bar Chart"},
{"id":"950642","user":"mbostock","description":"Labeled Force Layout"},
{"id":"9746652","user":"erkal","description":"Directed Links with Polygons"},
{"id":"9746628","user":"erkal","description":"Mobile Patent Suits with Polygon Links"},
{"id":"7607535","user":"mbostock","description":"Zoomable Circle Packing"},
{"id":"7090426","user":"kerryrodden","description":"Sequences sunburst"},
{"id":"9845999","user":"milroc","description":"Fitts's Bar, II"},
{"id":"9842179"},
{"id":"9842284"},
{"id":"9842512","user":"milroc","description":"Fitts's Bar, I"},
{"id":"9871234","user":"erkal","description":"General Update Pattern with playButton"},
{"id":"9871048","user":"erkal","description":"playButton"},
{"id":"9914167","user":"erkal","description":"waitAndEval II"},
{"id":"9912897","user":"erkal","description":"waitAndEval"},
{"id":"4282586","user":"mbostock","description":"Three-Axis Rotation"},
{"id":"9733594","user":"VisDockHub","description":"VisDock in Stacked Bar Chart"},
{"id":"9972460","user":"Sumbera","description":"Another brushing with d3"},
{"id":"11085004","user":"monfera","description":"circinus b"},
{"id":"3795544","user":"mbostock","description":"Adaptive Resampling"},
{"id":"5732029","user":"mbostock","description":"Line Simplification"},
{"id":"4090846"},
{"id":"4163057","user":"mbostock","description":"Gradient Along Stroke"},
{"id":"10990305","user":"danharr","description":"Remote football stadiums (with labels)"},
{"id":"10989553","user":"danharr","description":"Most remote football stadiums"},
{"id":"10527804","user":"monfera","description":"circinus"},
{"id":"5731632","user":"mbostock","description":"Orthographic to Equirectangular"},
{"id":"1256572","user":"mbostock","description":"D3 Show Reel"},
{"id":"6574995","user":"ndarville","description":"Party Trend (Single-Party Display)"},
{"id":"7e8e57368175a1433791","user":"Sumbera","description":"SVG scaled overlay in Leaflet " },
{"id":"11273546","user":"radiocontrolled","description":"Interactive thermometer, version 2"},
{"id":"9885869","user":"radiocontrolled","description":"Interactive thermometer"},
{"id":"ce9c2deb92042df13179","user":"georules","description":"oh yes spiral"},
{"id":"6958e230e69a377620e3","user":"georules","description":"oh yes spiral"},
{"id":"d67e0c64f0cb392f8a78","user":"georules","description":"wankel spiral"},
{"id":"3cc1a2a289dddbd64688","user":"curran","description":"Fundamental Visualizations"},
{"id":"c8b4472a648b08a26720","user":"vicapow","description":"fresh block"},
{"id":"a23f857ee922bea4bded","user":"vicapow","description":"fresh block"},
{"id":"818723e652995b6c110d","user":"vicapow","description":"fresh block"},
{"id":"310c99e53880faec2434","user":"mbostock","description":"A Less-Angry Rainbow"},
{"id":"76342abc327062128604","user":"mbostock","description":"Color Mesh II"},
{"id":"3150059","user":"syntagmatic","description":"Nutrient Parallel Coordinates"},
{"id":"eb9cddd11657887e1e0d","user":"saraquigley","description":"Curriculum Exploration"},
{"id":"5194141","user":"saraquigley","description":"Issue Breakdown"},
{"id":"c256fda4965d38e7c59b","user":"syntagmatic","description":"Hexbin Heightmap Transitions"},
{"id":"1092fe86860def004ea7","user":"syntagmatic","description":"Hexbin Heightmap"},
{"id":"3289530","user":"mbostock","description":"Heightmap"},
{"id":"4248145","user":"mbostock","description":"Hexagonal Binning"},
{"id":"280d83080497c8c13152","user":"mbostock","description":"Connected Particles III"},
{"id":"b3831331f475fdcb13df","user":"mbostock","description":"Poisson-Disc V"},
{"id":"9c87aed9a53a3ff20e29","user":"enoex","description":"Poisson-Disc V"},
{"id":"e7a13ff417ff5257a067","user":"enoex","description":"Poisson-Disc V"},
{"id":"1af08ad6cdb01707c33f","user":"curran","description":"Chiasm Boilerplate"},
{"id":"60b40877ef898f19aeb8","user":"curran","description":"Standalone Line Chart"},
{"id":"3887235","user":"mbostock","description":"Pie Chart"},
{"id":"134ed87c99257e3f2e31","user":"curran","description":"Standalone Scatter Plot"},
{"id":"0e57e7fff27f2eee431f","user":"enoex","description":"Fundamental Visualizations"},
{"id":"7e830bd65ad749237e4d","user":"enoex","description":"data yoga 1"},
{"id":"620ebec1c2841ea5a929","user":"enoex","description":"breathe"},
{"id":"4188334","user":"jasondavies","description":"World Map"},
{"id":"6123708","user":"mbostock","description":"Drag + Zoom"},
{"id":"8beea1d918ff4104f9ab","user":"d3noob","description":"Simple Difference Chart"},
{"id":"e5daff57a04c2639125e","user":"d3noob","description":"Favorite tooltip (simple version)"},
{"id":"3902569","user":"mbostock","description":"X-Value Mouseover"},
{"id":"4618602"},
{"id":"c2637e28b79fb3bfea13","user":"d3noob","description":"Sankey diagram from formatted JSON"},
{"id":"38744a17f9c0141bcd04","user":"d3noob","description":"Simple scatterplot with d3.js"},
{"id":"473f0cf66196a008cf99","user":"d3noob","description":"Simple graph and table using d3.js"},
{"id":"7030f35b72de721622b8","user":"d3noob","description":"Update d3.js data with button press"},
{"id":"4ad06b0d9ee2a390eb20","user":"sampathweb","description":"datasana #1"},
{"id":"2efd8084d345dd23ef96","user":"sampathweb","description":"datasana #circles"},
{"id":"29a00092e4dbb7c659f7","user":"sxywu","description":"visfest block visualization"},
{"id":"b3b3ff937241182ee67e","user":"sxywu","description":"visfest block visualization 2"},
{"id":"33bc932b850792e832f8","user":"sxywu","description":"How D3 Transitions Work, Pt. 1: d3.interpolate"},
{"id":"3a81930c054bb8ee39bf","user":"sxywu","description":"How D3 Transitions Work, Pt. 2: d3.interpolate with multiple elements"},
{"id":"779f2db53e1e365e98d4","user":"curran","description":"Density-based Ticks"},
{"id":"28f1fbeb41df9753e120","user":"syntagmatic","description":"Issue Breakdown"},
{"id":"002ef2fb5c1dc2df5821","user":"syntagmatic","description":"Hexbin Canvas Transitions"},
{"id":"1308257","user":"mbostock","description":"The Euro Debt Crisis"},
{"id":"433a9b04f82a1c78af4b","user":"emeeks","description":"Modal Infoboxes - d3.carto.map"},
{"id":"6746848","user":"mbostock","description":"See-Through Globe"},
{"id":"c88435cb568dcaf11308","user":"emeeks","description":"Non-Rotating SVG Transparent Globe"},
{"id":"29bccce80df0f253c97e","user":"syntagmatic","description":"Quantile, Quantize, Threshold Scales"},
{"id":"6769077","user":"syntagmatic","description":"Github Users Worldwide"},
{"id":"6419716","user":"syntagmatic","description":"Force-directed Splitting"},
{"id":"0d1635533f6fb5ac4da3","user":"syntagmatic","description":"Nutrient Parallel Coordinates II"},
{"id":"895eb781d88148cfd8e5","user":"syntagmatic","description":"Clock"},
{"id":"ba569633d51ebec6ec6e","user":"syntagmatic","description":"Comparing Map Projections"},
{"id":"8fadc5ac9c2a9e7c5ba2","user":"mbostock","description":"Map Pan & Zoom I"},
{"id":"7352810","user":"linssen","description":"Programmatically and smoothly zoom to the centre."},
{"id":"c2cc7242c8f800c736c4","user":"mgold","description":"Zoom Buttons I"},
{"id":"bbc451a7b9f902954e7c","user":"mgold","description":"Zoom Buttons II"},
{"id":"81271937fa94fdbdd854","user":"curran","description":"Migrant Deaths Map (direct)"},
{"id":"87d038562333a7ad4a64","user":"curran","description":"Crossfilter & Chiasm"},
{"id":"47aceae44bb5f8b63d7b","user":"boeric","description":"Deaths of Migrants"},
{"id":"60eec0e1727c6c628728","user":"shobhitg","description":"Migrants-Deaths-Visualization"},
{"id":"3943967","user":"mbostock","description":"Stacked-to-Grouped Bars"},
{"id":"752b97cef3f880a813ab","user":"curran","description":"World City Explorer"},
{"id":"a931688fa8cb65db4079","user":"curran","description":"Magic Bar Chart (Browserified)"},
{"id":"b6e1d23c16dc76371a92","user":"curran","description":"Magic Bar Chart"},
{"id":"2c736a99c2f57bfac7e4","user":"curran","description":"Margin Convention with Model.js"},
{"id":"87d5dd02739089986d4a","user":"curran","description":"fresh block"},
{"id":"3a68b0c81991e2e94b19","user":"curran","description":"Responding to Resize"},
{"id":"d1e9ea2850047562be09","user":"curran","description":"Focus + Context Scatter Plots"},
{"id":"cf4b98fff0517ca04667","user":"curran","description":"Scatter Plot Zooming"},
{"id":"ba63c55dd2dbc3ab0127","user":"mbostock","description":"This Is a Globe"},
{"id":"e2744ee563f7cab80350"},
{"id":"bd552e711b8325c64729","user":"enjalot","description":"visualizing map distortion"},
{"id":"66d926fe73211fd650ec","user":"curran","description":"Towards Reusable Charts Example"},
{"id":"8033015","user":"mbostock","description":"Multi-Line Voronoi"},
{"id":"5577023","user":"mbostock","description":"Every ColorBrewer Scale"},
{"id":"5537697","user":"mbostock","description":"Log Axis"},
{"id":"a22c42db65eb00d4e369","user":"d3noob","description":"Simple d3.js tooltips"},
{"id":"9e04ccfebeb84bcdc76c","user":"curran","description":"Scatter Plot"},
{"id":"4ce2ee825811f1c32125","user":"curran","description":"Chiasm Bar Chart and Line Chart"},
{"id":"3b811f05a0ce39d0d7cd","user":"curran","description":"Data Canvas Part 4 - Colors"},
{"id":"015d34d6d3d562877e51","user":"curran","description":"Data Canvas Part 3 - Bar Chart"},
{"id":"015402cce2caa074551e","user":"curran","description":"Data Canvas Part 2 - Line Chart"},
{"id":"dd73d3d8925cdf50df86","user":"curran","description":"Picking N Colors Automatically"},
{"id":"5905182da50a4667dc00","user":"curran","description":"Reactive Flow Diagram"},
{"id":"5f255332a9dcb9906f84","user":"curran","description":"Data Canvas Part 1 - Data"},
{"id":"0854f60e489b5ee6e11a","user":"herrstucki","description":"Animating Circles (D3 & SVG)"},
{"id":"40a7be58639daf5d510e","user":"herrstucki","description":"Animating Circles (React & SVG)"},
{"id":"dc5be7c1d700eb6ecf46","user":"herrstucki","description":"Animating Circles (Canvas)"},
{"id":"b6bdb82045c2aa8225f5","user":"susielu","description":"Annual Temp - New York 2015"},
{"id":"2fffa9abe50ac97603c7","user":"emeeks","description":"Brushable Radial Chart"},
{"id":"95800d30829ab8ab4ba6","user":"zeffii","description":"stage fright"},
{"id":"b602b35c682ec69b9025","user":"zeffii","description":"stage fright 2"},
{"id":"f2aff83148a5f64f3222","user":"micahstubbs","description":"Animated ROC Chart"},
{"id":"f1b4a29749408dd826ef"},
{"id":"465725cdc547c7cc8491","user":"micahstubbs","description":"radar chart with smallest area on top"},
{"id":"44bb05aab218a40a4c12","user":"micahstubbs","description":"radar chart for nested data"},
{"id":"2975320","user":"ZJONSSON","description":"barStack - stacking with negative values"},
{"id":"6100713"},
{"id":"a40254b6cb914018ff81","user":"micahstubbs","description":"stacking with negative values"},
{"id":"5661984","user":"cloudshapes","description":"Dotted Path Following the Mouse"},
{"id":"eda532b01c24bf4ac1d6","user":"timelyportfolio","description":"BioFabric in R as an htmlwidget with d3.js"},
{"id":"7148ee2a60a09fed0b43","user":"timelyportfolio","description":"biofabric as an rstats htmlwidget - pre-alpha"},
{"id":"a6916e88484f962d8f95","user":"timelyportfolio","description":"R | Norvig's English Letter ngrams with sunburstR (d3.js sequence sunburst htmlwidget)"},
{"id":"3793462de638478937"},
{"id":"d6658135f11023171587","user":"timelyportfolio","description":"R base graphics plot using stateface from propublica"},
{"id":"58f8fe3e167ef47145d0","user":"timelyportfolio","description":"R + d3.js Parallel Coordinates of partykit ver 2 with interactive querying"},
{"id":"d4ff502dc32b5b04eae4","user":"timelyportfolio","description":"R + d3.js Parallel Coordinates of partykit"},
{"id":"adc2dfee7aef48ce5485","user":"timelyportfolio","description":" rCharts + d3.js view of rpart with sankey-like link width"},
{"id":"7880033","user":"robschmuecker","description":"D3.js Drag and Drop, Zoomable, Panning, Collapsible Tree with auto-sizing."},
{"id":"782b91b09326541a0fc8"},
{"id":"a5df8dc94786a27d6420","user":"enjalot","description":"datasana #1"},
{"id":"859c7b7150c81cc512b3","user":"rcrocker13","description":"datasana #1"},
{"id":"67648b87e80fbc31ad20","user":"arrayjam","description":"Overlapping Geographic Circles"},
{"id":"5c4288aa30de1b949433","user":"arrayjam","description":"Non-Overlapping Geographic Circles"},
{"id":"5348789","user":"mbostock","description":"Concurrent Transitions"},
{"id":"7ef773bdf11999c9eebb","user":"maartenzam","description":"Responsive map with Cartodb/Leaflet"},
{"id":"1a5e8d77ae8feb464167","user":"asielen","description":"Violin Plot + Box Plot v2"},
{"id":"d15a4f16fa618273e10f","user":"asielen","description":"Reusable Violin + Box Plot"},
{"id":"5014368"},
{"id":"6506614","user":"nbremer","description":"D3.js - Radar Chart or Spider Chart - Adjusted from radar-chart-d3"},
{"id":"3a33bfdeda5b8f8c8cd2","user":"nbremer","description":"Text on an Arc - Animal Donut Slices - Default Arc Labels"},
{"id":"b603c3e0f7a74794da87","user":"nbremer","description":"Text on an Arc - Animal Donut Slices - Flipped & Centered Arc Labels"},
{"id":"7b051187fe329d705ee9","user":"nbremer","description":"Text on an Arc - Animal Donut Slices - Centered Arc Labels"},
{"id":"25e2db4abc9eaf080190","user":"nbremer","description":"Text on an Arc - Animate from a Wavy line to an Arc"},
{"id":"3916621","user":"mbostock","description":"Path Tween"},
{"id":"bf3d285e48189507e0ea","user":"nbremer","description":"Text on an Arc - Animate from Arc to an Arc"},
{"id":"f9dacd23eece9d23669c","user":"nbremer","description":"Stretched Chord Diagram - From educations to occupations"},
{"id":"5b16c2a5716d346e2f34","user":"nbremer","description":"Stretched Chord - Step 4 - How to pull the two halves apart"},
{"id":"c11409af47b5950f0289","user":"nbremer","description":"Stretched Chord - The Final Result - Including the hover effects"},
{"id":"2e10bf27fa0f9f49588b","user":"nbremer","description":"Stretched Chord - Step 3 - Different Color Scheme"},
{"id":"b99e416bd99fc0191b50","user":"nbremer","description":"Stretched Chord - Step 5 - How to make the chords touch the pulled apart arcs again"},
{"id":"dcd01f820aa098133596","user":"nbremer","description":"Stretched Chord - Step 3 - How to make the two sections symmetrical"},
{"id":"8295697aee7844da2299","user":"nbremer","description":"Stretched Chord - Step 2 - How to create an empty section in between the two halves"},
{"id":"1527c2dd26a26d9ee942","user":"nbremer","description":"Stretched Chord - Step 1 - How to set up a Chord Diagram matrix to show Flows"},
{"id":"f6952f1ef900d84be918","user":"nbremer","description":"Gooey Effect - Line"},
{"id":"69808ec7ec07542ed7df","user":"nbremer","description":"Gooey Effect - Circle"},
{"id":"a3684c52fb527c8fa415","user":"nbremer","description":"Gooey effect - Rectangle"},
{"id":"8e25e1434cdd6db25b69","user":"nbremer","description":"Valentine's day Heart curve"},
{"id":"df7f87361bb7e297e751","user":"nbremer","description":"Valentine's day Heart curve - One Line"},
{"id":"2b1446f496c3968f6ecd","user":"enjalot","description":"Stacked-to-Grouped Police Killings"},
{"id":"7833311","user":"mbostock","description":"Dynamic Hexbin"},
{"id":"f3225fa363fbaccb8c9e","user":"enjalot","description":"visfest experiment #1"},
{"id":"a74519c5a055b2903b41","user":"enjalot","description":"visfest experiment #2"},
{"id":"98cf105e8531ff12013b"},
{"id":"e7f4634cd71473c9658c"},
{"id":"f8c41743ca81d7828c3a","user":"enjalot","description":"visfest experiment #3"},
{"id":"7492cc85b1311f69ba3f","user":"enjalot","description":"morph experiment #1"},
{"id":"02ac156db28e61ff20bb","user":"enjalot","description":"morph experiment #2"},
{"id":"ebda1656976d90e2a636","user":"enjalot","description":"morph experiment #3"},
{"id":"20d4098ce7ed88dde5c4","user":"enjalot","description":"viSFest logo: small multiples"},
{"id":"7ea44d0bc364b6bddbd8","user":"enjalot","description":"The Migrant Files: Deaths"},
{"id":"d6696d28fb47fcf8a537","user":"enjalot","description":"The Migrant Files: Deportations"},
{"id":"d6a92a077e78fd33316a","user":"enjalot","description":"The Migrant Files: Money"},
{"id":"157333662ef11c151080","user":"mbostock","description":"Connected Particles"},
{"id":"7f14a531dec565ca0884","user":"vicapow","description":"WebGL + d3.layout.force"},
{"id":"4bd6d92fd553bb9bac11","user":"enjalot","description":"sparse matrix zoo"},
{"id":"42a531c5d87bfc91036e","user":"enjalot","description":"sparse matrix zoo: canvas"},
{"id":"5109a9fbd5f9a7230f17","user":"enjalot","description":"hilbert grid"},
{"id":"77cfa8eb62e34833ae7c","user":"enjalot","description":"hilbert grid marching"},
{"id":"e662bb2e2c0783ee82f9","user":"enjalot","description":"hilbert grid creeping"},
{"id":"6ac67b0d8ed673c9aa61","user":"enjalot","description":"all the blocks"},
{"id":"1d679f0322174b65d032","user":"enjalot","description":"block wall"},
{"id":"211bd42857358a60a936","user":"enjalot","description":"block wall: thumbnails only"},
{"id":"7b63fef8ccfbad1f851e","user":"enjalot","description":"block wall: thumbnails hilbert"},
{"id":"1554783","user":"jasondavies","description":"alpha-shapes aka concave hulls in d3"},
{"id":"27969219a945e2bd20dc","user":"enjalot","description":"d3.geo.weichel"},
{"id":"c1f459768d09e0c334c1","user":"enjalot","description":"cosine similarity"},
{"id":"c741995e777c0e089418","user":"enjalot","description":"copy paste aesthetic"},
{"id":"01aa2685f083b6c1b9fb","user":"curran","description":"Map & Globe"},
{"id":"eec4a6cda2f573574a11","user":"mbostock","description":"Map Pan & Zoom II"},
{"id":"618daab0fc5a3ff494d9","user":"enjalot","description":"中文: simplified characters"},
{"id":"a9a3b146cfe63ab68a6b","user":"enjalot","description":"中文: traditional characters"},
{"id":"65ae9c0fc95337107448","user":"enjalot","description":"matrix: reboot"},
{"id":"bc38c32d24e6fba4db84","user":"emeeks","description":"Sketchy Network II"},
{"id":"3887051","user":"mbostock","description":"Grouped Bar Chart"},
{"id":"e285b8e4c7b84710e463"},
{"id":"a7c02c493896a33d5f37","user":"bricedev","description":"Diverging Stacked Bar Chart (odd)"},
{"id":"f80fdbc2c03dbc1ae4e8","user":"bricedev","description":"Diverging Stacked Bar Chart (even)"},
{"id":"1377729","user":"MoritzStefaner","description":"Force-based label placement"},
{"id":"5653692","user":"djjupa","description":"Collapsible force layout with directed paths and images/text in the nodes. " },
{"id":"4679202","user":"mbostock","description":"Stacked-to-Multiples"},
{"id":"4063663","user":"mbostock","description":"Scatterplot Matrix Brushing"},
{"id":"1fa21f4ccf084f6369d3","user":"enjalot","description":"hull padding"},
{"id":"298e07ea67a640b5d9f4","user":"emeeks","description":"Orbit Layout 4"},
{"id":"d8b1c5f7bc975de83d99","user":"emeeks","description":"Orbital Layout 3"},
{"id":"8e73290130d9e25c6d9c","user":"emeeks","description":"Orbital Layout 2"},
{"id":"7d5925cb7d9721c60360","user":"emeeks","description":"Quadtree clustering - d3.carto.map"},
{"id":"540b1b884b80b14a44c6","user":"emeeks","description":"Improved Circle Pack Clustering - d3.carto"},
{"id":"1a75ec54489368b514f8","user":"emeeks","description":"Feature Clustering - d3.carto"},
{"id":"905bb4f399e0855e08fe","user":"emeeks","description":"Custom Infobox Formatter - d3.carto.map"},
{"id":"f8c0220c54ec8347ea95","user":"emeeks","description":"Changing Markers - d3.carto"},
{"id":"aea3c7fc1acc0eca4d44","user":"emeeks","description":"Styling Canvas Elements - d3.carto"},
{"id":"e6f72fbca42e77be0eb3","user":"emeeks","description":"Canvas Styling (Transform) - d3.carto"},
{"id":"0ad500de10f9edfe5d15","user":"zanarmstrong","description":"Time Data"},
{"id":"23137b412caf6e80b34a","user":"zanarmstrong","description":"Jittery Line w/ option to choose interpolation"},
{"id":"dcfcc3887ff56a9e1928","user":"Sumbera","description":"SVG default overlay in Leaflet v 1.0"},
{"id":"11114288","user":"Sumbera","description":"Leaflet Canvas Overlay"},
{"id":"b57f4cc89dacd38fcdcd","user":"emeeks","description":"circularbrush.filter"},
{"id":"9265674","user":"mbostock","description":"Mexico"},
{"id":"6a83de20f780b42fadb9","user":"boeric","description":"D3 Real Time Chart with Multiple Data Streams"},
{"id":"3b57a788a4b96e1af211","user":"boeric","description":"D3 Based Real Time Chart"},
{"id":"e16ad218bc241dfd2d6e","user":"boeric","description":"D3 Dynamic Array of Tables"},
{"id":"9643738d5f79c7b594d0","user":"hugolpz","description":"Map zoom + responsive frame"},
{"id":"c89a76096c070a5a7d23","user":"hugolpz","description":"Map zoom + static frame"},
{"id":"1014829","user":"mbostock","description":"External SVG"},
{"id":"91254c459602b31ba549","user":"syntagmatic","description":"Curriculum Exploration"},
{"id":"914d024adf10bface11a","user":"dhoboy","description":"Gately Tree"},
{"id":"8027637","user":"mbostock","description":"Closest Point on Path"},
{"id":"8027835","user":"mbostock","description":"Closest Point on Path II"},
{"id":"06af5f439f24bf28aec0","user":"hwangmoretime","description":"Point Tracking for Non-Linear Lines: I"},
{"id":"06aa7e108b77745f1f24","user":"hwangmoretime","description":"Point Tracking for Non-Linear Lines: II"},
{"id":"da8e72b5e680c827d6dd","user":"hwangmoretime","description":"Point Tracking for Non-Linear Lines: III"},
{"id":"98129315d0f7df3b53e3","user":"1wheel","description":"Scatter I"},
{"id":"7e473c251e68ce760e2a","user":"1wheel","description":"Scatter II"},
{"id":"3dfee2b74943398f0550","user":"1wheel","description":"Scatter III"},
{"id":"f0b021b0a56fee82dd97","user":"nitaku","description":"Tangled tree II"},
{"id":"5fb51700f991e4101773","user":"nitaku","description":"Tangled tree"},
{"id":"8822395"},
{"id":"8746032","user":"nitaku","description":"Basic force layout (ID-based, zoomable, fixed random seed)"},
{"id":"833632f23c308ae2d58b","user":"nitaku","description":"Isometric treemap (flare)"},
{"id":"a8aa67de3cd9f2e0554e","user":"nitaku","description":"Tree colors (sunburst, DBpedia)"},
{"id":"d7cbf8fd96ce42fed36d","user":"nitaku","description":"Duck Islands (Pink Floyd)"},
{"id":"3db48ae4c663ca028a6f","user":"nitaku","description":"Duck Similarity (Galileo)"},
{"id":"8f96bf393b94caff688b","user":"nitaku","description":"Isometric projection"},
{"id":"3424eed86f55550622ef","user":"nitaku","description":"Labeled treemap (flare)"},
{"id":"6210bd80bdd20181e1f4","user":"nitaku","description":"Isometric word cloud"},
{"id":"e03a1a5c1a4a95f06c3b","user":"nitaku","description":"Isometric \"treemap\""},
{"id":"79f16392f7e1bed77f07","user":"nitaku","description":"Word cloud treemap (flare)"},
{"id":"0c991d6ed0e994e1c7ed","user":"nitaku","description":"Node Gosper hex tiling"},
{"id":"ce638f8bd5e70cb809e1","user":"nitaku","description":"Node Gosper curve"},
{"id":"1036b853c3f52b8994a4","user":"nitaku","description":"Gosper hex tiling irregularity"},
{"id":"cd8e12c7a18495980bd0"},
{"id":"d8c76dfc03589e6dbf1f","user":"nitaku","description":"Half matrix for symmetrical relations"},
{"id":"5c5078b3cc3e54e4fec2","user":"nitaku","description":"A classic comparison"},
{"id":"4afb54600dc9328d14bd","user":"nitaku","description":"Gosper Displacement"},
{"id":"d3fd26207d7468b6c514","user":"nitaku","description":"Classic hexagonal binning"},
{"id":"bf5c4ea014d0b91f1f04","user":"nitaku","description":"Classic hexagonal binning II"},
{"id":"2d502924bad6152acbe5","user":"nitaku","description":"Basic treemap (flare)"},
{"id":"564fcb398fdad08442c1","user":"nitaku","description":"Node-link circular layout: Sankey links"},
{"id":"a50ccec1c202731fa8f1","user":"nitaku","description":"Node-link polar layout: curved links"},
{"id":"6354551","user":"nitaku","description":"Flowlines"},
{"id":"230ff9a14751b8f3092d"},
{"id":"a161bdb59b9dcec9a32e","user":"nitaku","description":"Node-link polar layout"},
{"id":"d5fc7956ba6896330ea1","user":"nitaku","description":"Node-link polar layout with centrality (eigenvector)"},
{"id":"70da709633904c6de9d9","user":"nitaku","description":"Pie vs. pie"},
{"id":"16933e96f51571fbbcd6","user":"nitaku","description":"Random(ish) polygon"},
{"id":"8543484"},
{"id":"dcce9b645783d5239a04","user":"nitaku","description":"FASS spiral (L-system)"},
{"id":"bffd66a05d5bf04aefa7","user":"nitaku","description":"Hilbert spiral (L-system)"},
{"id":"e2af207bc46782aa460c","user":"nitaku","description":"Hilbert sequence (L-system)"},
{"id":"8b9e134ca8bae13bb470","user":"nitaku","description":"Square spiral (L-system)"},
{"id":"c3d1662948a049fc80dd","user":"nitaku","description":"Hex spiral (L-system)"},
{"id":"11337491","user":"mbostock","description":"Rainbow Luminance"},
{"id":"5171361"},
{"id":"4360c8ac1dcaee373113","user":"darosh","description":"2D with stacksgl"},
{"id":"a71ff1c9d6e163e2faea","user":"darosh","description":"Benchmark"},
{"id":"14e2e4e14898f13e13c7","user":"darosh","description":"Planetary Grid Browser I"},
{"id":"7b816a50e66bb62208a7","user":"darosh","description":"Planetary Grid Browser II"},
{"id":"0444bdd92c1f968c75ef","user":"darosh","description":"Zoom to Group of Countries III"},
{"id":"f5204d3d85bdaa1fd6ea","user":"darosh","description":"Zoom to Group of Countries II"},
{"id":"baf7dd8d481d83b7f37e","user":"darosh","description":"Zoom to Group of Countries"},
{"id":"2d12a584a14910032ab8","user":"darosh","description":"Planetary Grid"},
{"id":"2bab520665d975780931","user":"darosh","description":"Rotating Planetary Grid"},
{"id":"2fe464efd794bde5ed68","user":"darosh","description":"Hexakis Icosahedron"},
{"id":"3055104","user":"mbostock","description":"Icosahedron"},
{"id":"4b6ab7914183dbf7a16f","user":"zanarmstrong","description":"Adaption of Jfire.io animation, for teaching purposes"},
{"id":"3b5f766647e15e23e5b8","user":"zanarmstrong","description":"Stripped adaptation of Jfire.io animation, for teaching purposes"},
{"id":"56aa8232fb56247094ae","user":"zanarmstrong","description":"Bar Chart: stripped easier"},
{"id":"172a6a53ddbce792b10d","user":"zanarmstrong","description":"visualization template based on mouse input"},
{"id":"671c0e7adfb1ce7060b8","user":"emeeks","description":"Simple Correlation Matrix"},
{"id":"5cce4b8ca41650f14bb4","user":"sxywu","description":"Image processing fun #1"},
{"id":"515f713d41186e18e384","user":"sxywu","description":"Image processing fun #2"},
{"id":"680375cb6a66760ea011","user":"sxywu","description":"Image processing fun #3"},
{"id":"98f56f3e840143a4eccf","user":"emeeks","description":"Treemap"},
{"id":"c5f71b45dbd87402e6f2","user":"micahstubbs","description":"County Treemap I"},
{"id":"58f360e13a4397bf3dad","user":"jjelosua","description":"d3intro_ex02"},
{"id":"fe38f5960d1276833555","user":"jjelosua","description":"d3intro_ex03"},
{"id":"9358409","user":"sxywu","description":"Enter-Update-Exit in Force Layout"},
{"id":"4063326","user":"duopixel","description":"Animate path in D3"},
{"id":"4063318","user":"mbostock","description":"Calendar View"},
{"id":"51ccb8b4f111ef4aec1c","user":"zanarmstrong","description":"Stripped adaptation of Jfire.io animation, for teaching purposes: more difficult"},
{"id":"5446416","user":"mbostock","description":"Milky Way"},
{"id":"de262983e3ba0c0f89c1","user":"enjalot","description":"block colors"},
{"id":"0d2e658691a4f93cad92","user":"nbremer","description":"A SOM Clustering of block Colors - Including HSL & RGB"},
{"id":"6f26d011aebc4c75272b","user":"ufenegga","description":"sin(2t), radial projection"},
{"id":"bb29b599bce91048ec40","user":"ufenegga","description":"Radial line generator, interpolation from an empty array"},
{"id":"037488ed37f0e1cbfe32","user":"emeeks","description":"Another UI Voronoi"},
{"id":"29cc3cc4078091fd2115","user":"mbostock","description":"State Grid"},
{"id":"8ba86c4fded2c67b34c7","user":"sxywu","description":"Image processing fun #4"},
{"id":"53c6d59ea70afaf19cf1","user":"nicksrandall","description":"KotoJS BarChart (ES2015)"},
{"id":"58457ea613b84f7544b1","user":"nicksrandall","description":"KotoJS BarChart (ES5)"},
{"id":"5c136de85de1c2abb6fc","user":"timelyportfolio","description":"demo programmatic control of a d3 brush"},
{"id":"a8d01671b04b326d36de","user":"ufenegga","description":"Satellite Projection Explorer"},
{"id":"07ed66cc6fc394d6ea53","user":"jonsadka","description":"Binomial Probability Density"},
{"id":"d7e4f9199c15d71258b5"},
{"id":"667e4df76848e72f250b","user":"nbremer","description":"Zoomable Circle Packing with Canvas & D3.js - I"},
{"id":"5a801d9153059b226bbd","user":"nbremer","description":"Circle Packing at its most Basic - Canvas only"},
{"id":"db24422abdb20150a9dd","user":"nbremer","description":"Zoomable Circle Packing with Canvas & D3.js - II"},
{"id":"4b42493b70dbc9e1ce02","user":"nbremer","description":"A SOM Clustering of block Colors - Including RGB"},
{"id":"a35687613ab0f4991f37"},
{"id":"cc818fff7a1049cc0efe","user":"enjalot","description":"The Migrant Files: Money by Route"},
{"id":"80097d54d4ec4ce83222","user":"zzolo","description":"A scatter plot"},
{"id":"89de858deaf6f8fc78ba","user":"zzolo","description":"A scatter plot"},
{"id":"15f52d2ec0b035b53c6f","user":"Jay-Oh-eN","description":"Civic Impact through Data Visualization: Exercise 1"},
{"id":"34d2ce39d3b8c2f8a577","user":"malcolm-decuire","description":"American Lynches"},
{"id":"19a3f0afed794cf720b3"},
{"id":"40f0f319001394b5f8af","user":"curran","description":"Lynchings by State Pie Charts"},
{"id":"f1a875885437608d17e8","user":"curran","description":"Lynchings by State Pie Charts First Attempt"},
{"id":"e025a50dbaae7186e516","user":"curran","description":"Sized Pie Charts"},
{"id":"11b02f8917fac66d6fe5","user":"curran","description":"Donut Chart Small Multiples"},
{"id":"40d5e61963abf20da067","user":"curran","description":"Polar Area Small Multiples"},
{"id":"be3744cfe1b318bf4035","user":"curran","description":"Pie Chart Small Multiples"},
{"id":"3757119","user":"mbostock","description":"Equirectangular (Plate Carrée)"},
{"id":"14e29858efdd19253787"},
{"id":"1da93bab4cdc708f41ae","user":"curran","description":"Blocks Graph"},
{"id":"d0a42741ce0cf6cdc3ab","user":"curran","description":"Sized Donut Charts"},
{"id":"94f1376b946c9d217014","user":"curran","description":"Polar Area Diagram"},
{"id":"1c23d9c7070deb6f8488","user":"curran","description":"Religions Pie Chart"},
{"id":"950cbe78b4c307fa14a1","user":"curran","description":"Using d3-legend"},
{"id":"805413fb3b2efaada1ce","user":"curran","description":"Stacked Bars"},
{"id":"b66a37afe6581eb5bc0c","user":"zanarmstrong","description":"D3 Bingo! (Zan)"},
{"id":"6daa5503fc60d4a89a11","user":"zanarmstrong","description":"D3 Bingo!"},
{"id":"666179ad5587254694bc","user":"enoex","description":"Styled Map 1 - Working"},
{"id":"010ffad3577afec10ef6","user":"enoex","description":"Styled Map 2 - Broken by default"},
{"id":"92abca0ebac031d77521","user":"enoex","description":"Styled Map 1 - Working"},
{"id":"e749224c89f82788cb18","user":"emeeks","description":"Sankey Particles III"},
{"id":"9673c96a682fe3948379","user":"emeeks","description":"Sankey Particles II"},
{"id":"21f99959d48dd0d0c746","user":"emeeks","description":"Sankey Particles"},
{"id":"4403522","user":"mbostock","descript
  • 8
    点赞
  • 28
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
### 回答1: 好的,下面我将简单介绍一下如何使用 LiteGraph 和 Vue 实现拓扑图 Demo。 LiteGraph 是一个开源的 JavaScript 形编程库,可以用于创建交互式的节点。Vue 是一个流行的 JavaScript 框架,可以用于构建用户界面。 首先,我们需要安装 LiteGraph 和 Vue。可以通过以下命令进行安装: ``` npm install litegraph vue ``` 接下来,我们创建一个 Vue 组件,用于展示拓扑图。在组件中,我们需要引入 LiteGraph 和样式表文件: ```html <template> <div class="topology-graph"> <canvas ref="canvas"></canvas> </div> </template> <script> import LiteGraph from 'litegraph.js'; import 'litegraph.js/css/litegraph.css'; import './topology-graph.css'; export default { name: 'TopologyGraph', mounted() { this.graph = new LiteGraph.LGraph(); this.graph_canvas = new LiteGraph.LGraphCanvas(this.$refs.canvas, this.graph); }, beforeDestroy() { this.graph_canvas?.dispose(); this.graph?.reset(); }, }; </script> ``` 在组件的 `mounted` 生命周期钩子函数中,我们创建了一个 LiteGraph 形对象和一个 LiteGraph 的画布对象,并将画布对象绑定到组件的 `canvas` 元素上。 接下来,我们可以添加节点和连接线到形对象中。例如,以下代码将添加两个节点和一个连接线: ```javascript this.graph.add(new LiteGraph.LGraphNode('input')); this.graph.add(new LiteGraph.LGraphNode('output')); const node1 = this.graph.getNodeById(1); const node2 = this.graph.getNodeById(2); this.graph.add(new LiteGraph.LLink(node1, 0, node2, 0)); ``` 这些节点和连接线可以通过拖动和连接来交互。最后,我们需要使用 CSS 样式表对画布进行布局和样式设置。 以上是一个简单的 LiteGraph 和 Vue 实现拓扑图 Demo 的例子,你可以根据自己的需求进行更加复杂的实现。 ### 回答2: Litegraph是一个轻量级的形编程框架,而Vue是一个流行的前端框架。在Vue中,我们可以使用Litegraph来实现一个拓扑图的demo。 首先,我们需要在Vue项目中引入Litegraph库。可以通过npm或者直接在html中引入Litegraph的脚本文件。 接下来,在Vue组件中,我们可以使用Litegraph来创建一个形化的拓扑图。在组件的生命周期方法中,可以创建Litegraph的Graph实例,并设置其容器。 ```javascript <template> <div> <div ref="graphContainer"></div> </div> </template> <script> import Litegraph from 'litegraph.js'; export default { mounted() { const graph = new Litegraph.LGraph(); const container = this.$refs.graphContainer; // 设置形容器 graph.setCanvas(container); // 在形中添加节点 const node1 = Litegraph.createNode("basic/const"); const node2 = Litegraph.createNode("basic/watch"); // 将节点添加到形中 graph.add(node1); graph.add(node2); // 连接节点 node1.connect(0, node2, 0); // 运行形 graph.start(); } } </script> ``` 在上面的代码中,我们首先创建了一个Litegraph的Graph实例,并设置了一个容器来展示拓扑图。然后,我们创建了两个节点,并将它们添加到中。最后,通过连接节点的输入输出来建立节点之间的关系。当形被创建完毕后,我们可以调用start方法来运行形。 通过以上步骤,我们就可以使用Litegraph和Vue实现一个简单的拓扑图demo了。当然,具体的拓扑图样式和逻辑还需要根据实际需求进行定制和扩展。 ### 回答3: litegraph是一个用于构建流程拓扑图的JavaScript库,而Vue是一种流行的JavaScript框架。结合litegraph和Vue,我们可以实现一个拓扑图的Demo。 首先,我们需要在项目中引入litegraph和Vue的依赖包。可以通过CDN或npm安装这些依赖。然后,我们在Vue的页面中创建一个div元素作为容器,用于展示拓扑图。 接下来,我们可以在Vue的生命周期钩子函数created中,使用litegraph创建一个Graph对象,并将其渲染到之前创建的div中。代码如下: ``` <template> <div id="topology"></div> </template> <script> import LiteGraph from 'litegraph.js'; export default { created() { const container = document.getElementById('topology'); const graph = new LiteGraph.Graph(container); // 添加节点 const node = LiteGraph.createNode('basic/input'); node.pos = [100, 100]; graph.add(node); // 添加连线 const outputNode = graph.getNodeById(node.id); const inputNode = graph.getNodeById(node.id); const link = outputNode.connect(0, inputNode, 0); // 渲染画布 graph.start(); // 支持鼠标拖拽移动节点和连线等交互操作 container.addEventListener('mousemove', graph.processMouseMove.bind(graph)); container.addEventListener('mouseup', graph.processMouseUp.bind(graph)); container.addEventListener('mousedown', graph.processMouseDown.bind(graph)); }, }; </script> ``` 在上述代码中,我们首先获取到之前创建的div容器元素,然后创建一个Graph对象,并将其渲染到该容器中。 接下来,我们创建节点和连线,将节点添加到中,并通过连接连线起来。这里创建了一个输入节点和一个输出节点,并通过连线将它们连接起来。 最后,我们启动Graph对象,使其开始渲染画布。同时,我们添加了一些鼠标事件监听器,以支持鼠标拖拽移动节点和连线等交互操作。 通过上述步骤,我们就可以实现一个简单的拓扑图Demo,使用litegraph和Vue来创建和展示拓扑图。当然,如需更复杂的功能,还可以进一步扩展和定制化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值