Anaglyph 3D

Try this page with 3D glasses!

var document = d3.select('body')
var chartDiv = document.getElementById("figurecontainer")
var width = chartDiv.clientWidth;
var height = chartDiv.clientHeight;
var chartHeight = height * 0.7
var chartWidth = width * 0.7

var myData = [
  { x: 1, y: 1, r: 5 },
  { x: 2, y: 2, r: 5 },
  { x: 3, y: 1, r: 5 },
  { x: 4, y: 2, r: 5 },
  { x: 5, y: 1, r: 5 },
  { x: 6, y: 2, r: 5 },
  { x: 7, y: 1, r: 5 },
  { x: 8, y: 2, r: 5 },
  { x: 9, y: 1, r: 5 },
]

var margin = { 
  top: 20,
  bottom: 20,
  left: 30,
  right: 20 
};

var xScale = d3.scaleLinear()
  .range([0, chartWidth]);

var yScale = d3.scaleLinear()
  .range([chartHeight, 0]);
  
xScale.domain([1, 9])
yScale.domain([1, 4])

var g = d3.select("#figurecontainer")
    .append("svg")
    .attr("height", height)
    .attr("width", width)

var myred = "#FF0000";
var myblue = "#00FFFF";

var x = 60;
var y = 150;
var dodge = 3;
var text = "Nice!"

var line = d3.line()
  .x(function (d) { return xScale(d.x) })
  .y(function (d) { return yScale(d.y) })

var makeText = function (x, y, dodge, text, color) {
  g.append("text")
    .attr("x", x - dodge)
    .attr("y", y - dodge)
    .attr("font-size", "84px")
    .attr("font-family", "sans-serif")
    .text(text)
    .attr("fill", color)
}

var makeLines = function (color, dodge) {
  g.selectAll('.path')
    .data(myData)
    .enter()
    .append("path")
    .attr("d", line(myData))
    .attr('stroke', color)
    .attr('stroke-width', 2)
    .attr("fill", "none")
    .attr("transform", "translate(" + (margin.left + dodge) + "," + (margin.top + dodge) + ")")
}

makeLines(myred, dodge)
makeLines(myblue, -dodge)
makeLines("black", 0)

makeText(x, y, dodge, text, myblue)
makeText(x, y, -dodge, text, myred)
makeText(x, y, 0, text, "black")