Skip to content

Instantly share code, notes, and snippets.

@stevenwmarks

stevenwmarks/.block

Last active July 9, 2017 01:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save stevenwmarks/24e2997474ea834657ba0ebd13a235cc to your computer and use it in GitHub Desktop.
Save stevenwmarks/24e2997474ea834657ba0ebd13a235cc to your computer and use it in GitHub Desktop.
Download ZIP
Vintage trends
Raw
.block
license: mit
scrolling: yes
border: no
height: 960
Raw
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>
Raw
vintageData.csv
year freq avgPrice
2011 213 226
2012 241 188
2013 658 131
2014 889 135
2015 1367 152
2016 2096 163
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment