stevenwmarks/.block

## .block
license: mit
scrolling: yes
border: no
height: 960

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!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="http://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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
            
          
## vintageData.csv

          
            year
            freq
            avgPrice

            
              2011
              213
              226

            
              2012
              241
              188

            
              2013
              658
              131

            
              2014
              889
              135

            
              2015
              1367
              152

            
              2016
              2096
              163
	<!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="http://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>
year	freq	avgPrice
2011	213	226
2012	241	188
2013	658	131
2014	889	135
2015	1367	152
2016	2096	163