edwardkenfox/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>d3 test</title>
    <link href="https://fonts.googleapis.com/css?family=Noto+Sans" rel="stylesheet">
  </head>
  <body>
    <style type="text/css">
      .tick line{
        stroke: black;
        opacity: 0.1;
        stroke-width: 1px;
      }
      svg text {
        font-family: 'Noto Sans', serif;
        font-size: 14px;
      }
    </style>
    <div id="container"></div>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.6/d3.min.js"></script>
    <script type="text/javascript">
      var deliveries = [
        { event_idx: 0, occurrence: 681 },
        { event_idx: 1, occurrence: 590 },
        { event_idx: 2, occurrence: 679 },
        { event_idx: 3, occurrence: 650 },
        { event_idx: 4, occurrence: 640 },
        { event_idx: 5, occurrence: 810 },
        { event_idx: 6, occurrence: 744 },
        { event_idx: 7, occurrence: 628 },
        { event_idx: 8, occurrence: 747 },
      ]

      var opens = [
        { event_idx: 0, occurrence: 57 },
        { event_idx: 1, occurrence: 200 },
        { event_idx: 2, occurrence: 179 },
        { event_idx: 3, occurrence: 308 },
        { event_idx: 4, occurrence: 241 },
        { event_idx: 5, occurrence: 448 },
        { event_idx: 6, occurrence: 463 },
        { event_idx: 7, occurrence: 408 },
        { event_idx: 8, occurrence: 750 },
      ]

      var conversions = [
        { event_idx: 0, occurrence: 120 },
        { event_idx: 1, occurrence: 130 },
        { event_idx: 2, occurrence: 138 },
        { event_idx: 3, occurrence: 160 },
        { event_idx: 4, occurrence: 133 },
        { event_idx: 5, occurrence: 170 },
        { event_idx: 6, occurrence: 181 },
        { event_idx: 7, occurrence: 201 },
        { event_idx: 8, occurrence: 192 },
      ]

      // TODO: make svg_size dynamic to its parent container
      // TODO: capture window.resize event and dynamically change svg_size.width until max & min value
      var svg_size = { width: 640, height: 400 },
          margin = { top: 20, right: 20, bottom: 30, left: 40 },
          width  = svg_size.width - margin.left - margin.right,
          height = svg_size.height - margin.top - margin.bottom;

      var svg = d3.select("#container").append("svg")
          .attr("height", height + margin.left + margin.right + margin.top + margin.bottom)
          .attr("width", width + margin.top + margin.bottom);

      var chart = svg.append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

      var xScale = d3.scale.linear().range([0, width]);
      var yScale = d3.scale.linear().range([height, 0]);

      xScale.domain([
        // TODO: get min & max from all of the data's idx & occurrence
        d3.min(opens, function(event) {
          return event.event_idx;
        }),
        d3.max(opens, function(event) {
          return event.event_idx;
        })
      ]).nice();

      yScale.domain([
        // TODO: get min & max from all of the data's idx & occurrence
        d3.min(opens, function(event) {
          return event.occurrence;
        }),
        d3.max(opens, function(event) {
          return event.occurrence;
        })
      ]).nice();

      var xAxis = d3.svg.axis().scale(xScale)
          .orient("bottom")
          .tickSize("1.5")
          .innerTickSize(-height)
          .outerTickSize(0)
          .tickPadding(10);
      var yAxis = d3.svg.axis().scale(yScale)
          .orient("left")
          .tickSize("1.5")
          .innerTickSize(-width)
          .outerTickSize(0)
          .tickPadding(10);

      var xAxisGroup = chart
          .append("g")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis)
          .append("text")
            .attr("x", width)
            .attr("y", -6)
            .style("text-anchor", "end")

      var yAxisGroup = chart
          .append("g")
            .call(yAxis)
          .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", ".71em")
            .style("text-anchor", "end")

      var line_group = svg.append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

      var circle_group = svg.append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

      var legend_group = svg.append("g")
          .attr("transform", "translate(" + -80 + "," + 80 + ")");

      var charts = [deliveries, opens, conversions];
      var colors = ["#ddd", "#888", "#000"];
      var legend_names = ["Deliveries", "Opens", "Conversions"];

      charts.forEach(function(chart_data) {
        chart_data_idx = charts.indexOf(chart_data)
        color = colors[chart_data_idx]

        var legend_container = legend_group.append("g")
          .on("click", function(){
            // TODO: show/hide event
            console.log("clicked!")
          })
        legend_container.append("circle")
          .attr("cx", (width / 2) + chart_data_idx * 100 - 10)
          .attr("cy", height - 5)
          .attr("r", 6)
          .attr("stroke", color)
          .attr("stroke-width", 2)
          .attr("fill", "white")
        legend_container.append("text")
          .attr("x", (width / 2) + chart_data_idx * 100)
          .attr("y", height)
          .attr("class", "legend")
          .attr("fill", "black")
          .text(legend_names[chart_data_idx]);

        chart_data.forEach(function(event) {
          idx = chart_data.indexOf(event)

          // create lines that connect circles until the one before last one
          if (idx < chart_data.length - 1) {
            line_group.append("line")
              .attr("x1", xScale(event.event_idx))
              .attr("x2", xScale(chart_data[idx + 1].event_idx))
              .attr("y1", yScale(event.occurrence))
              .attr("y2", yScale(chart_data[idx + 1].occurrence))
              .attr("stroke", color)
              .attr("stroke-width", "1.5px")
          }

          // create circles depending on the x & y axis values
          circle_group.append("circle")
            .attr("cx", xScale(event.event_idx))
            .attr("cy", yScale(event.occurrence))
            .attr("r", 6)
            .attr("stroke", color)
            .attr("stroke-width", 2)
            .attr("fill", "white")

        })
      })
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>d3 test</title>
	<link href="https://fonts.googleapis.com/css?family=Noto+Sans" rel="stylesheet">
	</head>
	<body>
	<style type="text/css">
	.tick line{
	stroke: black;
	opacity: 0.1;
	stroke-width: 1px;
	}
	svg text {
	font-family: 'Noto Sans', serif;
	font-size: 14px;
	}
	</style>
	<div id="container"></div>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.6/d3.min.js"></script>
	<script type="text/javascript">
	var deliveries = [
	{ event_idx: 0, occurrence: 681 },
	{ event_idx: 1, occurrence: 590 },
	{ event_idx: 2, occurrence: 679 },
	{ event_idx: 3, occurrence: 650 },
	{ event_idx: 4, occurrence: 640 },
	{ event_idx: 5, occurrence: 810 },
	{ event_idx: 6, occurrence: 744 },
	{ event_idx: 7, occurrence: 628 },
	{ event_idx: 8, occurrence: 747 },
	]

	var opens = [
	{ event_idx: 0, occurrence: 57 },
	{ event_idx: 1, occurrence: 200 },
	{ event_idx: 2, occurrence: 179 },
	{ event_idx: 3, occurrence: 308 },
	{ event_idx: 4, occurrence: 241 },
	{ event_idx: 5, occurrence: 448 },
	{ event_idx: 6, occurrence: 463 },
	{ event_idx: 7, occurrence: 408 },
	{ event_idx: 8, occurrence: 750 },
	]

	var conversions = [
	{ event_idx: 0, occurrence: 120 },
	{ event_idx: 1, occurrence: 130 },
	{ event_idx: 2, occurrence: 138 },
	{ event_idx: 3, occurrence: 160 },
	{ event_idx: 4, occurrence: 133 },
	{ event_idx: 5, occurrence: 170 },
	{ event_idx: 6, occurrence: 181 },
	{ event_idx: 7, occurrence: 201 },
	{ event_idx: 8, occurrence: 192 },
	]

	// TODO: make svg_size dynamic to its parent container
	// TODO: capture window.resize event and dynamically change svg_size.width until max & min value
	var svg_size = { width: 640, height: 400 },
	margin = { top: 20, right: 20, bottom: 30, left: 40 },
	width = svg_size.width - margin.left - margin.right,
	height = svg_size.height - margin.top - margin.bottom;

	var svg = d3.select("#container").append("svg")
	.attr("height", height + margin.left + margin.right + margin.top + margin.bottom)
	.attr("width", width + margin.top + margin.bottom);

	var chart = svg.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	var xScale = d3.scale.linear().range([0, width]);
	var yScale = d3.scale.linear().range([height, 0]);

	xScale.domain([
	// TODO: get min & max from all of the data's idx & occurrence
	d3.min(opens, function(event) {
	return event.event_idx;
	}),
	d3.max(opens, function(event) {
	return event.event_idx;
	})
	]).nice();

	yScale.domain([
	// TODO: get min & max from all of the data's idx & occurrence
	d3.min(opens, function(event) {
	return event.occurrence;
	}),
	d3.max(opens, function(event) {
	return event.occurrence;
	})
	]).nice();

	var xAxis = d3.svg.axis().scale(xScale)
	.orient("bottom")
	.tickSize("1.5")
	.innerTickSize(-height)
	.outerTickSize(0)
	.tickPadding(10);
	var yAxis = d3.svg.axis().scale(yScale)
	.orient("left")
	.tickSize("1.5")
	.innerTickSize(-width)
	.outerTickSize(0)
	.tickPadding(10);

	var xAxisGroup = chart
	.append("g")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis)
	.append("text")
	.attr("x", width)
	.attr("y", -6)
	.style("text-anchor", "end")

	var yAxisGroup = chart
	.append("g")
	.call(yAxis)
	.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", ".71em")
	.style("text-anchor", "end")

	var line_group = svg.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	var circle_group = svg.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	var legend_group = svg.append("g")
	.attr("transform", "translate(" + -80 + "," + 80 + ")");

	var charts = [deliveries, opens, conversions];
	var colors = ["#ddd", "#888", "#000"];
	var legend_names = ["Deliveries", "Opens", "Conversions"];

	charts.forEach(function(chart_data) {
	chart_data_idx = charts.indexOf(chart_data)
	color = colors[chart_data_idx]

	var legend_container = legend_group.append("g")
	.on("click", function(){
	// TODO: show/hide event
	console.log("clicked!")
	})
	legend_container.append("circle")
	.attr("cx", (width / 2) + chart_data_idx * 100 - 10)
	.attr("cy", height - 5)
	.attr("r", 6)
	.attr("stroke", color)
	.attr("stroke-width", 2)
	.attr("fill", "white")
	legend_container.append("text")
	.attr("x", (width / 2) + chart_data_idx * 100)
	.attr("y", height)
	.attr("class", "legend")
	.attr("fill", "black")
	.text(legend_names[chart_data_idx]);

	chart_data.forEach(function(event) {
	idx = chart_data.indexOf(event)

	// create lines that connect circles until the one before last one
	if (idx < chart_data.length - 1) {
	line_group.append("line")
	.attr("x1", xScale(event.event_idx))
	.attr("x2", xScale(chart_data[idx + 1].event_idx))
	.attr("y1", yScale(event.occurrence))
	.attr("y2", yScale(chart_data[idx + 1].occurrence))
	.attr("stroke", color)
	.attr("stroke-width", "1.5px")
	}

	// create circles depending on the x & y axis values
	circle_group.append("circle")
	.attr("cx", xScale(event.event_idx))
	.attr("cy", yScale(event.occurrence))
	.attr("r", 6)
	.attr("stroke", color)
	.attr("stroke-width", 2)
	.attr("fill", "white")

	})
	})
	</script>
	</body>
	</html>