D3 Examples - AI - Infographic

xxxxxxxxxx
 
<!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>
​
    