Vintage trends

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Trends in Vintage Sales at Auction</title>
	<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
	<style type="text/css">
	
		body { font-family: Verdana, Tahoma, sans-serif; }
		
		h2 { margin: 10px;}
		
		h5 { font-style: italic;
				color: gray;
				margin: 10px;
		}
		 
		#container svg { border: 1px solid gray;}
		
		p { font-size: 80%;
				line-height: 1.2;
				width: 600px;
				margin: 10px;
		}	
		
		.line {
				fill: none;
				stroke: steelblue;
				stroke-width: 2px;
		}
		
		.line1 {
				fill: none;
				stroke: red;
				stroke-width: 2px;
		}
		
		.axisBlue text {
				fill: steelblue;
				font-style: strong;
		}
		
		.axisRed text {
				fill: red;
				font-style: strong;
		}
		
		.axisLabel {
				font-family: Verdana, Tahoma, sans-serif;
				font-style: strong;
				font-size: 80%;
		}
		
		.dataSource {
				font-family: Verdana, Tahoma, sans-serif;
				font-style: strong;
				font-size: 60%;
		}
		
		div.tooltip {
				position: absolute;
				text-align: center;
				width: 60px;
				height: 28px;
				padding: 2px;
				font: 12px sans-serif;
				background: lightsteelblue;
				border: 0px;
				border-radius: 8px;
				pointer-events: none;
		}

</style>
</head>
<body>
	<div id="container">
	<h2>Are 'vintage' items trending up at auction?</h2>
	<h5>Big increase in 'vintage' items sold between 2011-2016</h5>
	<p>The number of items sold (indicated by the blue line and blue "x" axis on the left) shows 
	almost a <strong>ten-fold increase</strong> over the time period. The average price (red line 
	and red "x" axis on right), however, does <strong>not</strong> strongly correlate with the 
	number of items sold. A possible explanation is that the average price levels off between
	$130 and $160 as supply and demand come into balance. To see the actual figures for "number
	of items" or "average price," place your cursor over each dot below.</p>
	
	<script type="text/javascript">

var margin = {top: 20, right: 50, bottom: 40, left: 50},
		width = 600 - margin.left - margin.right,
		height = 400 - margin.top - margin.bottom;
		
	//parse date
	var parseTime = d3.timeParse("%Y");
	var formatTime = d3.timeFormat("%Y");
	
	//set scales (range)
	var x = d3.scaleTime()
		.range([0, width]);
	var y = d3.scaleLinear()
		.range([height, 0]);
	var y1 = d3.scaleLinear()
		.range([height, 0]);

//define line
	var valueLine = d3.line()
		.x(function(d) { return x(d.year); })
		.y(function(d) { return y(d.freq); });
				
	var valueLine1 = d3.line()
		.x(function(d) { return x(d.year); })
		.y(function(d) { return y1(d.avgPrice); });
		
	var div = d3.select("body").append("div")
    .attr("class", "tooltip")
    .style("opacity", 0);
				
	var svg = d3.select("#container").append("svg")
		.attr("width", width + margin.left + margin.right)
		.attr("height", height + margin.top + margin.bottom)
		.append("g")
		.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
		
	//get data
	d3.csv("vintageData.csv", function(error, data) {
		if (error) throw error;

// format data
	data.forEach(function(d) {
		d.year = parseTime(d.year);
		d.freq = +d.freq;
		d.avgPrice = +d.avgPrice;
	});
	
	//set domains
	x.domain(d3.extent(data, function(d) { return d.year; }));
	y.domain([0, d3.max(data, function(d) { return Math.max(d.freq); })]);
	y1.domain([0, d3.max(data, function(d) { return Math.max(d.avgPrice); })]);
	
	//append line for freq
	svg.append("path")
		.data([data])
		.attr("class", "line")
		.attr("d", valueLine);

//append dots for freq
	svg.selectAll("circle")
		.data(data)
		.enter().append("circle")
		.attr("r", 4)
		.attr("cx", function(d) { return x(d.year); })
		.attr("cy", function(d) { return y(d.freq); })
		.style("fill", "steelblue")
		.on("mouseover", function(d) {
      div.transition()
        .duration(200)
        .style("opacity", .9);
      div.html(formatTime(d.year) + "<br/>" + d.freq + " Items")
        .style("left", (d3.event.pageX) + "px")
        .style("top", (d3.event.pageY - 28) + "px");
    })
		.on("mouseout", function(d) {
      div.transition()
        .duration(500)
        .style("opacity", 0);
    });

//append line for avgPrice 
	svg.append("path")
		.data([data])
		.attr("class", "line1")
		.attr("d", valueLine1);

//append dots for avgPrice
	svg.selectAll("dot")
		.data(data)
		.enter().append("circle")
		.attr("r", 4)
		.attr("cx", function(d) { return x(d.year); })
		.attr("cy", function(d) { return y1(d.avgPrice); })
		.style("fill", "red")
		.on("mouseover", function(d) {
      div.transition()
				.duration(200)
        .style("opacity", .9);
      div.html(formatTime(d.year) + "<br/>" + "$" + d.avgPrice)
        .style("left", (d3.event.pageX) + "px")
        .style("top", (d3.event.pageY - 28) + "px");
    })
    .on("mouseout", function(d) {
       div.transition()
         .duration(500)
         .style("opacity", 0);
       });

// add X axis
	svg.append("g")
		.attr("transform", "translate(0, " + height + ")")
		.call(d3.axisBottom(x));
		
	// add Y axis
	svg.append("g")
		.attr("class", "axisBlue")
		.call(d3.axisLeft(y));  
		
	// text label for the y axis
  svg.append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 0 - margin.left)
      .attr("x", 0 - (height / 2))
      .attr("dy", "1em")
			.attr("class", "axisLabel")
      .style("text-anchor", "middle")
      .text("# of Items Sold");

//add right Y1 axis
	svg.append("g")
		.attr("transform", "translate(" + width + ", 0)")
		.attr("class", "axisRed")
		.call(d3.axisRight(y1));

// text label for the y1 axis
  svg.append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", width + (margin.left - 17))
      .attr("x",0 - (height / 2))
      .attr("dy", "1em")
			.attr("class", "axisLabel")
      .style("text-anchor", "middle")
      .text("Average Price ($)");

// text label for the x axis
  svg.append("text")             
      .attr("transform",
            "translate(" + (width -70) + " ," + 
                           (height + margin.top + 12) + ")")
			.attr("class", "dataSource")
      .style("text-anchor", "middle")
			.text("Data Source: liveauctioneers.com");
			
	});

</script>
	<h4>Trend likely to continue in 2017</h4>
	<p>As of mid-June 2017, almost 2,000 "vintage" items had been sold according to the auction 
	records at <a href="https://liveauctioneers.com">liveauctioneers.com</a>, a worldwide host 
	of online auctions in real time. At this rate, some 4,000 items would be sold by year's end 
	if trends continue at the same pace. The slope of the blue line from 2012 onward seems to indicate that there is room for the number of items
	sold each year to grow for at least the near future.</p>
	<p>One sign that the trend upward may be leveling off is when the average price starts falling.
	This would indicate that supply exceeds demand and foretell a decline in the market.</p>
	<p>The data in this chart reflect items that sold for at least $1.00 at auction houses in the United 
	States and items of American origin. There are 5,464 such items in liveauctioneers.com's records with
	the word, "vintage," in the heading of the item. The worldwide total for "vintage" items 
	that sold for at least $1.00 is approximately 280,000 items. </p>
	</div>
</body>
</html>

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