ProQuestionAsker/Example2.csv

## Example2.csv

          
            Month
            Sales
            Fruit

            
              Jan
              87
              strawberry

            
              Feb
              3
              strawberry

            
              Mar
              89
              strawberry

            
              Apr
              56
              strawberry

            
              May
              1
              strawberry

            
              Jun
              17
              strawberry

            
              Jul
              59
              strawberry

            
              Aug
              43
              strawberry

            
              Sep
              16
              strawberry

            
              Oct
              94
              strawberry

            
              Nov
              99
              strawberry

            
              Dec
              53
              strawberry

            
              Jan
              93
              grape

            
              Feb
              8
              grape

            
              Mar
              95
              grape

            
              Apr
              62
              grape

            
              May
              5
              grape

            
              Jun
              24
              grape

            
              Jul
              62
              grape

            
              Aug
              49
              grape

            
              Sep
              18
              grape

            
              Oct
              101
              grape

            
              Nov
              103
              grape

            
              Dec
              53
              grape

            
              Jan
              94
              blueberry

            
              Feb
              15
              blueberry

            
              Mar
              95
              blueberry

            
              Apr
              64
              blueberry

            
              May
              11
              blueberry

            
              Jun
              33
              blueberry

            
              Jul
              64
              blueberry

            
              Aug
              53
              blueberry

            
              Sep
              27
              blueberry

            
              Oct
              103
              blueberry

            
              Nov
              108
              blueberry

            
              Dec
              62
              blueberry

## Exploration2.js
// Set the margins
var margin = {top: 60, right: 100, bottom: 20, left: 80},
  width = 850 - margin.left - margin.right,
  height = 370 - margin.top - margin.bottom;

// Parse the month variable
var parseMonth = d3.timeParse("%b");
var formatMonth = d3.timeFormat("%b");

// Set the ranges
var x = d3.scaleTime().domain([parseMonth("Jan"),parseMonth("Dec")]).range([0, width]);
var y = d3.scaleLinear().range([height, 0]);

// Define the line
var valueLine = d3.line()
    .x(function(d) { return x(d.Month); })
    .y(function(d) { return y(+d.Sales); })

// Create the svg canvas in the "graph" div
var svg = d3.select("#graph")
        .append("svg")
        .style("width", width + margin.left + margin.right + "px")
        .style("height", height + margin.top + margin.bottom + "px")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform","translate(" + margin.left + "," + margin.top + ")")
        .attr("class", "svg");

// Import the CSV data
d3.csv("Example2.csv", function(error, data) {
  if (error) throw error;

   // Format the data
  data.forEach(function(d) {
      d.Month = parseMonth(d.Month);
      d.Sales = +d.Sales;
      d.Fruit = d.Fruit;
  });

  var nest = d3.nest()
	  .key(function(d){
	    return d.Fruit;
	  })
	  .entries(data)

  // Scale the range of the data
  x.domain(d3.extent(data, function(d) { return d.Month; }));
  y.domain([0, d3.max(data, function(d) { return d.Sales; })]);

  // Set up the x axis
  var xaxis = svg.append("g")
       .attr("transform", "translate(0," + height + ")")
       .attr("class", "x axis")
       .call(d3.axisBottom(x)
          .ticks(d3.timeMonth)
          .tickSize(0, 0)
          .tickFormat(d3.timeFormat("%B"))
          .tickSizeInner(0)
          .tickPadding(10));

  // Add the Y Axis
   var yaxis = svg.append("g")
       .attr("class", "y axis")
       .call(d3.axisLeft(y)
          .ticks(5)
          .tickSizeInner(0)
          .tickPadding(6)
          .tickSize(0, 0));

 // yaxis.select(".domain").style("display","none")

  // Add a label to the y axis
  svg.append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 0 - 60)
        .attr("x", 0 - (height / 2))
        .attr("dy", "1em")
        .style("text-anchor", "middle")
        .text("Monthly Sales")
        .attr("class", "y axis label");

  // Draw the line
  svg.selectAll(".line")
      .data(nest)
      .enter()
      .append("path")
	      .attr("class", "line")
	      .attr("d", function(d){
	      	return valueLine(d.values)});

})

## index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3 Page Template</title>
        <script src="https://d3js.org/d3.v4.js"></script>
        <link rel="stylesheet" href="style.css">
    </head>

  <body>
    <div id="graph"></div>
    <script src="Exploration2.js"></script>
  </body>

</html>

## style.css
.line {
  fill: none;
  stroke: #EF5285;
  stroke-width: 2px;
}
Month	Sales	Fruit
Jan	87	strawberry
Feb	3	strawberry
Mar	89	strawberry
Apr	56	strawberry
May	1	strawberry
Jun	17	strawberry
Jul	59	strawberry
Aug	43	strawberry
Sep	16	strawberry
Oct	94	strawberry
Nov	99	strawberry
Dec	53	strawberry
Jan	93	grape
Feb	8	grape
Mar	95	grape
Apr	62	grape
May	5	grape
Jun	24	grape
Jul	62	grape
Aug	49	grape
Sep	18	grape
Oct	101	grape
Nov	103	grape
Dec	53	grape
Jan	94	blueberry
Feb	15	blueberry
Mar	95	blueberry
Apr	64	blueberry
May	11	blueberry
Jun	33	blueberry
Jul	64	blueberry
Aug	53	blueberry
Sep	27	blueberry
Oct	103	blueberry
Nov	108	blueberry
Dec	62	blueberry
	// Set the margins
	var margin = {top: 60, right: 100, bottom: 20, left: 80},
	width = 850 - margin.left - margin.right,
	height = 370 - margin.top - margin.bottom;

	// Parse the month variable
	var parseMonth = d3.timeParse("%b");
	var formatMonth = d3.timeFormat("%b");

	// Set the ranges
	var x = d3.scaleTime().domain([parseMonth("Jan"),parseMonth("Dec")]).range([0, width]);
	var y = d3.scaleLinear().range([height, 0]);

	// Define the line
	var valueLine = d3.line()
	.x(function(d) { return x(d.Month); })
	.y(function(d) { return y(+d.Sales); })

	// Create the svg canvas in the "graph" div
	var svg = d3.select("#graph")
	.append("svg")
	.style("width", width + margin.left + margin.right + "px")
	.style("height", height + margin.top + margin.bottom + "px")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform","translate(" + margin.left + "," + margin.top + ")")
	.attr("class", "svg");

	// Import the CSV data
	d3.csv("Example2.csv", function(error, data) {
	if (error) throw error;

	// Format the data
	data.forEach(function(d) {
	d.Month = parseMonth(d.Month);
	d.Sales = +d.Sales;
	d.Fruit = d.Fruit;
	});

	var nest = d3.nest()
	.key(function(d){
	return d.Fruit;
	})
	.entries(data)

	// Scale the range of the data
	x.domain(d3.extent(data, function(d) { return d.Month; }));
	y.domain([0, d3.max(data, function(d) { return d.Sales; })]);

	// Set up the x axis
	var xaxis = svg.append("g")
	.attr("transform", "translate(0," + height + ")")
	.attr("class", "x axis")
	.call(d3.axisBottom(x)
	.ticks(d3.timeMonth)
	.tickSize(0, 0)
	.tickFormat(d3.timeFormat("%B"))
	.tickSizeInner(0)
	.tickPadding(10));

	// Add the Y Axis
	var yaxis = svg.append("g")
	.attr("class", "y axis")
	.call(d3.axisLeft(y)
	.ticks(5)
	.tickSizeInner(0)
	.tickPadding(6)
	.tickSize(0, 0));

	// yaxis.select(".domain").style("display","none")

	// Add a label to the y axis
	svg.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 0 - 60)
	.attr("x", 0 - (height / 2))
	.attr("dy", "1em")
	.style("text-anchor", "middle")
	.text("Monthly Sales")
	.attr("class", "y axis label");

	// Draw the line
	svg.selectAll(".line")
	.data(nest)
	.enter()
	.append("path")
	.attr("class", "line")
	.attr("d", function(d){
	return valueLine(d.values)});

	})
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>D3 Page Template</title>
	<script src="https://d3js.org/d3.v4.js"></script>
	<link rel="stylesheet" href="style.css">
	</head>

	<body>
	<div id="graph"></div>
	<script src="Exploration2.js"></script>
	</body>

	</html>