The History of AI

Ling 26520: Cognition- Final Project University of Chicago Jillian Ritchey

This is an interactive timeline showing events in the field of Artificial Intellegnce, categorized by the type of event/advancement. The timeline can be panned horizontally by clicking and dragging either on the x-axis or anywhere within the plot. It can be zoomed in and out by scrolling horizontally while the mouse is over the graph. Hovering over a dot will show a brief description of the event.

The line represents the frequency of the term "artificial intelligence" in the English language corpus each year, according to Google ngram data.

<!DOCTYPE html>
<meta chars et="utf-8">
<title>The History of AI</title>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<style>
.axis path, .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}
.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
  max-width: 200px;
}

</style>
<body>
<div id="chart"></div>
<script>
  
d3.csv("datasort.csv", function(error, data) {
  d3.csv("ngram.csv", function(error2, ngramdata) {
  if (error || error2) throw error;
	
  data.forEach(d => {
    d.year = +d.year;
    d.index = 0;
  });
  let i = 0;
  let currYear = -1000;
  data.forEach(elem => {
    if(currYear === elem.year) {
      elem.index = i;
      i++;
    } else {
      i = 0;
      elem.index= i;
      currYear = elem.year;
    }
  });

var line = d3.svg.line()
    .x(function(d) { console.log(xscale(d.year)); return xscale(d.year); })
    .y(function(d) { console.log(yscale(d.value)); return yscale(d.value); });
    
    function update() {
      
      var gs = svg.select("g.scatter");

svg.call(tip);
      var circle = gs.selectAll("circle")
        .data(function(d) {
          return d;
        });
      const min = xscale.invert(0);
      const max = xscale.invert(width - margin.left - margin.right);
      const range = max - min;
      const radScale = d3.scale.linear().domain([40, 75, 200, 3000]).range([10,7,5, 1]).clamp(true);
      const radius = radScale(range);
      console.log(radius);
      circle.enter().append("svg:circle")
        .attr("class", "points")
        .style("fill", d => color(d.category))
        .attr("r", d => radius)
        .attr("cx", function(d) {
          return xscale(d.year);
        })
        .attr("cy", function(d) {
          return yscale(d.index);
        })
      	.attr('transform', 'translate(0,'+ (-1*radius) +')');
 
      circle.attr("cx", function(d) {
        return xscale(d.year);
      })
        .attr("cy", function(d) {
          return yscale(d.index);
        })
      	.attr("r", radius)
        .attr('transform', 'translate(0,'+ (-1*radius) +')')
      	.on("mouseenter", tip.show)
      	.on("mouseleave", tip.hide)
        .on("mouseover", function(d) {
  				d3.select(this).style("stroke", "black");
        	})
        .on("mouseout", function(d) {
        	tip.hide;
  				d3.select(this).style("stroke", "none");
        	});
  
      circle.exit().remove();
      
      var gl = svg.select("g.line");
      d3.selectAll("#p").remove();
      gl.append("path")
      .datum(ngramdata)
      .attr("id", "p")
      .attr("fill", "none")
      .attr("stroke", "gold")
      .attr("stroke-linejoin", "round")
      .attr("stroke-linecap", "round")
      .attr("stroke-width", 1.5)
      .attr("d", line);
    }
  
    function zoom_update() {
      
      xzoom = d3.behavior.zoom()
        .x(xscale)
        .on("zoom", zoomable ? draw : null);
  
     // svg.select('rect.zoom.xy.box').call(xyzoom);
      svg.select('rect.zoom.x.box').call(xzoom);
     // svg.select('rect.zoom.y.box').call(yzoom);
    }
  
    function draw() {
      svg.select('g.x.axis').call(xaxis);
  
      update();
      zoom_update();
    };
    chart.zoom = function (_){
      if (!arguments.length) return zoomable;
      zoomable = _;
      return chart;
    }
  
    return chart;
  }
 });
})
</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js to a secure url

https://d3js.org/d3.v3.min.js

https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js