D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
BenHeubl
Full window
Github gist
AI - Infographic
<!DOCTYPE html> <meta charset="utf-8"> <style> h1 { font-family: futura; font-size: 30; font-color: grey; } h2 { font-family: futura; font-size: 15 } .link { fill: none; stroke: grey; stroke-width: 0.5px; } #licensing { fill: green; stoke: green; } #resolved { fill: green; stoke: green; } .link.licensing { stroke-dasharray: 0,2 5; stroke: #33CCFF; stroke-width: 2px; } .link.resolved { stroke-dasharray: 0,2 5; stroke: #33CCFF; stroke-width: 2px; } rect { fill: #33CCFF; stroke: #333; stroke-width: 0px; } rect1 { fill: #33CCFF; stroke: #333; stroke-width: 0px; } text { font: 9px futura; pointer-events: none; text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff; } </style> <body> <h1>Where AI Plays A Role: </h1> <h2>Artificial Intelligence (AI) infographic</h2> <script src="https://d3js.org/d3.v3.min.js"></script> <script> var links = [ {source: "AI", target: "Healthcare", type: "licensing"}, {source: "AI", target: "Financial", type: "licensing"}, {source: "AI", target: "Marketing", type: "licensing"}, {source: "AI", target: "Recruitment", type: "licensing"}, {source: "AI", target: "Dating", type: "licensing"}, {source: "AI", target: "Human_assistant", type: "licensing"}, {source: "Healthcare", target: "IBM Watson", type: "suit"}, {source: "Healthcare", target: "Barnes & Noble", type: "suit"}, {source: "Healthcare", target: "Foxconn", type: "suit"}, {source: "Healthcare", target: "Google", type: "suit"}, {source: "Healthcare", target: "HTC", type: "suit"}, {source: "Financial", target: "Cortex ", type: "suit"}, {source: "Financial", target: "Kodak", type: "resolved"}, {source: "Financial", target: "Kodak", type: "resolved"}, {source: "Marketing", target: "Flights", type: "suit"}, {source: "Flights", target: "Skyscanner", type: "suit"}, {source: "Flights", target: "Rumbo", type: "suit"}, {source: "Flights", target: "Opodo", type: "suit"}, {source: "Marketing", target: "Shopping", type: "licensing"}, {source: "Shopping", target: "Amazon", type: "suit"}, {source: "Shopping", target: "Alibaba", type: "suit"}, {source: "Marketing", target: "Music", type: "suit"}, {source: "Music", target: "Spotify", type: "suit"}, {source: "Music", target: "iTunes", type: "suit"}, {source: "Marketing", target: "FlipChart", type: "suit"}, {source: "Marketing", target: "Versus", type: "suit"}, {source: "Marketing", target: "RadiumOne", type: "suit"}, {source: "Marketing", target: "Quid", type: "suit"}, {source: "Recruitment", target: "Humanoid", type: "suit"}, {source: "Dating", target: "OkCupid", type: "suit"}, {source: "Marketing", target: "Every-labs: Food delivery", type: "suit"}, {source: "Marketing", target: "Yummly: Take aways ", type: "suit"}, {source: "Marketing", target: "Heyzap mobile advertising ", type: "suit"}, {source: "Marketing", target: "Livestar", type: "suit"}, {source: "Marketing", target: "Retargeter", type: "suit"}, {source: "Marketing", target: "Zemanta for bloggers", type: "suit"}, {source: "Marketing", target: "Campanja adverts ", type: "suit"}, {source: "Marketing", target: "Preact", type: "suit"}, {source: "Marketing", target: "Mattermark ", type: "suit"}, {source: "Marketing", target: "Moz marketing ", type: "suit"}, {source: "Marketing", target: "Wise-io-2 ", type: "suit"}, {source: "Marketing", target: "Launchhub ", type: "suit"}, {source: "Marketing", target: "Targetingmantra ", type: "suit"}, {source: "Marketing", target: "Catnip", type: "suit"}, {source: "Marketing", target: "Mavin", type: "suit"}, {source: "Marketing", target: "Permutive ", type: "suit"}, {source: "Marketing", target: "Fashion-metric ", type: "suit"}, {source: "Marketing", target: "Wordwatch ", type: "suit"}, {source: "Recruitment", target: "Gradberry", type: "suit"}, {source: "Recruitment", target: "Springrole", type: "suit"}, {source: "AI", target: "Teaching", type: "licensing"}, {source: "Teaching", target: "Knewton.com", type: "suit"}, {source: "AI", target: "Human assistant", type: "licensing"}, {source: "Human assistant", target: "Incredible-labs", type: "suit"}, {source: "Human assistant", target: "Kwikdesk", type: "suit"}, {source: "Human assistant", target: "Gridspace", type: "suit"}, {source: "Human assistant", target: "Petnet", type: "suit"}, {source: "Human assistant", target: "Topicmarks", type: "suit"}, {source: "Human assistant", target: "Neura", type: "suit"}, {source: "Human assistant", target: "Vurb", type: "suit"}, {source: "Human assistant", target: "Rockmelt", type: "suit"}, {source: "Human assistant", target: "Rainforest", type: "suit"}, {source: "Human assistant", target: "Stanza-1", type: "suit"}, {source: "Human assistant", target: "Cinchcast", type: "suit"}, {source: "AI", target: "Transport", type: "licensing"}, {source: "Transport", target: "Google’s self driving cars", type: "suit"}, {source: "Transport", target: "Trains", type: "suit"}, {source: "Transport", target: "Traffic lights", type: "suit"}, {source: "AI", target: "Data Security", type: "licensing"}, {source: "Data Security", target: "Harvest-ai", type: "suit"}, {source: "Data Security", target: "Sift-science", type: "suit"}, {source: "Data Security", target: "Rescue-forensics", type: "suit"}, {source: "AI", target: "Voice Recognition", type: "licensing"}, {source: "Voice Recognition", target: "Rexpect-labs", type: "suit"}, {source: "Voice Recognition", target: "Cleverbot", type: "suit"}, {source: "Voice Recognition", target: "Siri", type: "suit"}, {source: "Voice Recognition", target: "Wit-ai", type: "suit"}, {source: "Voice Recognition", target: "Desti for planning travels ", type: "suit"}, ]; // Transport // Google’s self driving cars // trains // traffic lights // Data Security // https://angel.co/harvest-ai safe login // https://angel.co/sift-science prevent online fraud // https://angel.co/rescue-forensics digital law enforcement // Voice Recognition // https://angel.co/expect-labs // https://www.cleverbot.com/ // Siri // https://angel.co/wit-ai turns speech into the IoT // https://angel.co/desti planning travels var nodes = {}; links.forEach(function(link) { link.source = nodes[link.source] || (nodes[link.source] = {name: link.source}); link.target = nodes[link.target] || (nodes[link.target] = {name: link.target}); }); var width = 760, height = 800; var force = d3.layout.force() .nodes(d3.values(nodes)) .links(links) .size([width, height]) .linkDistance(80) .charge(-500) .on("tick", tick) .start(); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); svg.append("defs").selectAll("marker") .data(["suit", "licensing", "resolved"]) .enter().append("marker") .attr("id", function(d) { return d; }) .attr("viewBox", "0 -5 10 10") .attr("refX", 15) .attr("refY", -1.5) .attr("markerWidth", 2) .attr("markerHeight", 1) .attr("orient", "auto") .append("path") .attr("d", "M0,-5L10,0L0,5"); var path = svg.append("g").selectAll("path") .data(force.links()) .enter().append("path") .attr("class", function(d) { return "link " + d.type; }) .attr("marker-end", function(d) { return "url(#" + d.type + ")"; }); var rect = svg.append("g").selectAll("rect") .data(force.nodes()) .enter().append("rect") .attr("height", 10) .attr("width", 10) .call(force.drag); var text = svg.append("g").selectAll("text") .data(force.nodes()) .enter().append("text") .attr("x", 10) .attr("y", ".90em") .style("font-family", "futura") .text(function(d) { return d.name; }); function tick() { path.attr("d", linkArc); rect.attr("transform", transform); text.attr("transform", transform); } function linkArc(d) { var dx = d.target.x - d.source.x, dy = d.target.y - d.source.y, dr = Math.sqrt(dx * dx + dy * dy); return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y; } function transform(d) { return "translate(" + d.x + "," + d.y + ")"; } </script>
Modified
http://d3js.org/d3.v3.min.js
to a secure url
https://d3js.org/d3.v3.min.js