Skip to content

Instantly share code, notes, and snippets.

@borgar

borgar/.block

Created November 12, 2016 19:34
Show Gist options
  • Save borgar/b69cf4f726bd0676b318436b864d4c64 to your computer and use it in GitHub Desktop.
Save borgar/b69cf4f726bd0676b318436b864d4c64 to your computer and use it in GitHub Desktop.
Download ZIP
Proportional housing markets
Raw
.block
license: mit
height: 500
border: yes
Raw
README.md

There is an XKCD joke about maps that makes the point that if you present data about the activity of humans without adjusting it for population, the map simply shows where people live.

The National registry of Iceland publishes market data on the urban housing market in Iceland. They have charts on their page for the number of sales, but as it uses only the raw numbers, those charts too really only show where people live. Visible in inset chart A., the answer is: In Reykjavík.

Stories in data often only emerge after the data has been normalised to an index, or adjusted to per-capita, or for inflation. But the National registry also publishes the data shown in inset chart B., the number of residencies per municipality.

Combine these to end up with the large chart, the number of sales contracts for each municipality as a proportion of the size of the market. The percentages may be slightly off, but what emerges are at least two stories:

  • A significantly higher portion of the real-estates in Hafnarfjörður changes hands every year than in the capital. But why?

  • The difference in Reykjavík and Seltjarnarnes has vanished post-financial crash. Is Reykjavík still to pick up steam or has Seltjarnarnes become a hotter market? Who knows.

What we do know is that without the adjustment, we were not able to see far enough to even ask these questions.

Raw
data.json
[
{
"sales": 3260,
"municipality": "Reykjavík",
"houses": 51231,
"date": "2016"
},
{
"sales": 4037,
"municipality": "Reykjavík",
"houses": 51231,
"date": "2015"
},
{
"sales": 3573,
"municipality": "Reykjavík",
"houses": 50914,
"date": "2014"
},
{
"sales": 3328,
"municipality": "Reykjavík",
"houses": 50516,
"date": "2013"
},
{
"sales": 3072,
"municipality": "Reykjavík",
"houses": 50287,
"date": "2012"
},
{
"sales": 2635,
"municipality": "Reykjavík",
"houses": 50155,
"date": "2011"
},
{
"sales": 1627,
"municipality": "Reykjavík",
"houses": 50149,
"date": "2010"
},
{
"sales": 1039,
"municipality": "Reykjavík",
"houses": 49721,
"date": "2009"
},
{
"sales": 1894,
"municipality": "Reykjavík",
"houses": 49638,
"date": "2008"
},
{
"sales": 5521,
"municipality": "Reykjavík",
"houses": 49190,
"date": "2007"
},
{
"sales": 4444,
"municipality": "Reykjavík",
"houses": 48523,
"date": "2006"
},
{
"sales": 5724,
"municipality": "Reykjavík",
"houses": 47721,
"date": "2005"
},
{
"sales": 6261,
"municipality": "Reykjavík",
"houses": 47036,
"date": "2004"
},
{
"sales": 5500,
"municipality": "Reykjavík",
"houses": 46131,
"date": "2003"
},
{
"sales": 4613,
"municipality": "Reykjavík",
"houses": 45076,
"date": "2002"
},
{
"sales": 3751,
"municipality": "Reykjavík",
"houses": 44365,
"date": "2001"
},
{
"sales": 124,
"municipality": "Seltjarnarnes",
"houses": 1678,
"date": "2016"
},
{
"sales": 121,
"municipality": "Seltjarnarnes",
"houses": 1678,
"date": "2015"
},
{
"sales": 121,
"municipality": "Seltjarnarnes",
"houses": 1646,
"date": "2014"
},
{
"sales": 116,
"municipality": "Seltjarnarnes",
"houses": 1616,
"date": "2013"
},
{
"sales": 89,
"municipality": "Seltjarnarnes",
"houses": 1615,
"date": "2012"
},
{
"sales": 91,
"municipality": "Seltjarnarnes",
"houses": 1617,
"date": "2011"
},
{
"sales": 39,
"municipality": "Seltjarnarnes",
"houses": 1615,
"date": "2010"
},
{
"sales": 22,
"municipality": "Seltjarnarnes",
"houses": 1615,
"date": "2009"
},
{
"sales": 38,
"municipality": "Seltjarnarnes",
"houses": 1586,
"date": "2008"
},
{
"sales": 111,
"municipality": "Seltjarnarnes",
"houses": 1588,
"date": "2007"
},
{
"sales": 103,
"municipality": "Seltjarnarnes",
"houses": 1589,
"date": "2006"
},
{
"sales": 127,
"municipality": "Seltjarnarnes",
"houses": 1588,
"date": "2005"
},
{
"sales": 131,
"municipality": "Seltjarnarnes",
"houses": 1590,
"date": "2004"
},
{
"sales": 106,
"municipality": "Seltjarnarnes",
"houses": 1588,
"date": "2003"
},
{
"sales": 106,
"municipality": "Seltjarnarnes",
"houses": 1586,
"date": "2002"
},
{
"sales": 95,
"municipality": "Seltjarnarnes",
"houses": 1585,
"date": "2001"
},
{
"sales": 331,
"municipality": "Mosfellsbær",
"houses": 3053,
"date": "2016"
},
{
"sales": 345,
"municipality": "Mosfellsbær",
"houses": 3053,
"date": "2015"
},
{
"sales": 254,
"municipality": "Mosfellsbær",
"houses": 2999,
"date": "2014"
},
{
"sales": 206,
"municipality": "Mosfellsbær",
"houses": 2982,
"date": "2013"
},
{
"sales": 181,
"municipality": "Mosfellsbær",
"houses": 2956,
"date": "2012"
},
{
"sales": 179,
"municipality": "Mosfellsbær",
"houses": 2948,
"date": "2011"
},
{
"sales": 115,
"municipality": "Mosfellsbær",
"houses": 2940,
"date": "2010"
},
{
"sales": 113,
"municipality": "Mosfellsbær",
"houses": 2899,
"date": "2009"
},
{
"sales": 180,
"municipality": "Mosfellsbær",
"houses": 2817,
"date": "2008"
},
{
"sales": 477,
"municipality": "Mosfellsbær",
"houses": 2627,
"date": "2007"
},
{
"sales": 285,
"municipality": "Mosfellsbær",
"houses": 2478,
"date": "2006"
},
{
"sales": 440,
"municipality": "Mosfellsbær",
"houses": 2356,
"date": "2005"
},
{
"sales": 329,
"municipality": "Mosfellsbær",
"houses": 2205,
"date": "2004"
},
{
"sales": 286,
"municipality": "Mosfellsbær",
"houses": 2083,
"date": "2003"
},
{
"sales": 247,
"municipality": "Mosfellsbær",
"houses": 1977,
"date": "2002"
},
{
"sales": 206,
"municipality": "Mosfellsbær",
"houses": 1911,
"date": "2001"
},
{
"sales": 1103,
"municipality": "Kópavogur",
"houses": 12814,
"date": "2016"
},
{
"sales": 1285,
"municipality": "Kópavogur",
"houses": 12814,
"date": "2015"
},
{
"sales": 1153,
"municipality": "Kópavogur",
"houses": 12497,
"date": "2014"
},
{
"sales": 949,
"municipality": "Kópavogur",
"houses": 12221,
"date": "2013"
},
{
"sales": 877,
"municipality": "Kópavogur",
"houses": 11946,
"date": "2012"
},
{
"sales": 796,
"municipality": "Kópavogur",
"houses": 11865,
"date": "2011"
},
{
"sales": 510,
"municipality": "Kópavogur",
"houses": 11682,
"date": "2010"
},
{
"sales": 393,
"municipality": "Kópavogur",
"houses": 11563,
"date": "2009"
},
{
"sales": 529,
"municipality": "Kópavogur",
"houses": 11524,
"date": "2008"
},
{
"sales": 1611,
"municipality": "Kópavogur",
"houses": 11104,
"date": "2007"
},
{
"sales": 1170,
"municipality": "Kópavogur",
"houses": 10538,
"date": "2006"
},
{
"sales": 1394,
"municipality": "Kópavogur",
"houses": 9946,
"date": "2005"
},
{
"sales": 1374,
"municipality": "Kópavogur",
"houses": 9582,
"date": "2004"
},
{
"sales": 1196,
"municipality": "Kópavogur",
"houses": 9249,
"date": "2003"
},
{
"sales": 1070,
"municipality": "Kópavogur",
"houses": 9002,
"date": "2002"
},
{
"sales": 785,
"municipality": "Kópavogur",
"houses": 8770,
"date": "2001"
},
{
"sales": 974,
"municipality": "Hafnarfjörður",
"houses": 9951,
"date": "2016"
},
{
"sales": 1003,
"municipality": "Hafnarfjörður",
"houses": 9951,
"date": "2015"
},
{
"sales": 894,
"municipality": "Hafnarfjörður",
"houses": 9734,
"date": "2014"
},
{
"sales": 793,
"municipality": "Hafnarfjörður",
"houses": 9626,
"date": "2013"
},
{
"sales": 735,
"municipality": "Hafnarfjörður",
"houses": 9571,
"date": "2012"
},
{
"sales": 565,
"municipality": "Hafnarfjörður",
"houses": 9474,
"date": "2011"
},
{
"sales": 392,
"municipality": "Hafnarfjörður",
"houses": 9422,
"date": "2010"
},
{
"sales": 263,
"municipality": "Hafnarfjörður",
"houses": 9342,
"date": "2009"
},
{
"sales": 544,
"municipality": "Hafnarfjörður",
"houses": 9244,
"date": "2008"
},
{
"sales": 1467,
"municipality": "Hafnarfjörður",
"houses": 8644,
"date": "2007"
},
{
"sales": 1089,
"municipality": "Hafnarfjörður",
"houses": 8255,
"date": "2006"
},
{
"sales": 1398,
"municipality": "Hafnarfjörður",
"houses": 7739,
"date": "2005"
},
{
"sales": 1420,
"municipality": "Hafnarfjörður",
"houses": 7396,
"date": "2004"
},
{
"sales": 1021,
"municipality": "Hafnarfjörður",
"houses": 7128,
"date": "2003"
},
{
"sales": 906,
"municipality": "Hafnarfjörður",
"houses": 6847,
"date": "2002"
},
{
"sales": 738,
"municipality": "Hafnarfjörður",
"houses": 6583,
"date": "2001"
},
{
"sales": 488,
"municipality": "Garðabær",
"houses": 5163,
"date": "2016"
},
{
"sales": 556,
"municipality": "Garðabær",
"houses": 5163,
"date": "2015"
},
{
"sales": 370,
"municipality": "Garðabær",
"houses": 5012,
"date": "2014"
},
{
"sales": 354,
"municipality": "Garðabær",
"houses": 4936,
"date": "2013"
},
{
"sales": 297,
"municipality": "Garðabær",
"houses": 4842,
"date": "2012"
},
{
"sales": 300,
"municipality": "Garðabær",
"houses": 4035,
"date": "2011"
},
{
"sales": 220,
"municipality": "Garðabær",
"houses": 4014,
"date": "2010"
},
{
"sales": 185,
"municipality": "Garðabær",
"houses": 3981,
"date": "2009"
},
{
"sales": 206,
"municipality": "Garðabær",
"houses": 3915,
"date": "2008"
},
{
"sales": 579,
"municipality": "Garðabær",
"houses": 3633,
"date": "2007"
},
{
"sales": 336,
"municipality": "Garðabær",
"houses": 3440,
"date": "2006"
},
{
"sales": 352,
"municipality": "Garðabær",
"houses": 3107,
"date": "2005"
},
{
"sales": 442,
"municipality": "Garðabær",
"houses": 3007,
"date": "2004"
},
{
"sales": 270,
"municipality": "Garðabær",
"houses": 2804,
"date": "2003"
},
{
"sales": 277,
"municipality": "Garðabær",
"houses": 2750,
"date": "2002"
},
{
"sales": 243,
"municipality": "Garðabær",
"houses": 2661,
"date": "2001"
},
{
"sales": 577,
"municipality": "Akureyri",
"houses": 7630,
"date": "2016"
},
{
"sales": 669,
"municipality": "Akureyri",
"houses": 7630,
"date": "2015"
},
{
"sales": 641,
"municipality": "Akureyri",
"houses": 7578,
"date": "2014"
},
{
"sales": 551,
"municipality": "Akureyri",
"houses": 7483,
"date": "2013"
},
{
"sales": 450,
"municipality": "Akureyri",
"houses": 7447,
"date": "2012"
},
{
"sales": 403,
"municipality": "Akureyri",
"houses": 7414,
"date": "2011"
},
{
"sales": 294,
"municipality": "Akureyri",
"houses": 7341,
"date": "2010"
},
{
"sales": 258,
"municipality": "Akureyri",
"houses": 7313,
"date": "2009"
},
{
"sales": 345,
"municipality": "Akureyri",
"houses": 7233,
"date": "2008"
},
{
"sales": 721,
"municipality": "Akureyri",
"houses": 7024,
"date": "2007"
},
{
"sales": 613,
"municipality": "Akureyri",
"houses": 6870,
"date": "2006"
},
{
"sales": 947,
"municipality": "Akureyri",
"houses": 6685,
"date": "2005"
},
{
"sales": 449,
"municipality": "Akureyri",
"houses": 6488,
"date": "2004"
},
{
"sales": 471,
"municipality": "Árborgarsvæðið",
"houses": 5168,
"date": "2016"
},
{
"sales": 515,
"municipality": "Árborgarsvæðið",
"houses": 5168,
"date": "2015"
},
{
"sales": 383,
"municipality": "Árborgarsvæðið",
"houses": 5114,
"date": "2014"
},
{
"sales": 260,
"municipality": "Árborgarsvæðið",
"houses": 5061,
"date": "2013"
},
{
"sales": 229,
"municipality": "Árborgarsvæðið",
"houses": 5030,
"date": "2012"
},
{
"sales": 195,
"municipality": "Árborgarsvæðið",
"houses": 5012,
"date": "2011"
},
{
"sales": 128,
"municipality": "Árborgarsvæðið",
"houses": 4981,
"date": "2010"
},
{
"sales": 127,
"municipality": "Árborgarsvæðið",
"houses": 4971,
"date": "2009"
},
{
"sales": 330,
"municipality": "Árborgarsvæðið",
"houses": 4924,
"date": "2008"
},
{
"sales": 573,
"municipality": "Árborgarsvæðið",
"houses": 4733,
"date": "2007"
},
{
"sales": 513,
"municipality": "Árborgarsvæðið",
"houses": 4534,
"date": "2006"
},
{
"sales": 757,
"municipality": "Árborgarsvæðið",
"houses": 4088,
"date": "2005"
},
{
"sales": 58,
"municipality": "Árborgarsvæðið",
"houses": 3790,
"date": "2004"
},
{
"sales": 881,
"municipality": "Suðurnes",
"houses": 9766,
"date": "2016"
},
{
"sales": 806,
"municipality": "Suðurnes",
"houses": 9766,
"date": "2015"
},
{
"sales": 590,
"municipality": "Suðurnes",
"houses": 9758,
"date": "2014"
},
{
"sales": 407,
"municipality": "Suðurnes",
"houses": 9790,
"date": "2013"
},
{
"sales": 353,
"municipality": "Suðurnes",
"houses": 9771,
"date": "2012"
},
{
"sales": 217,
"municipality": "Suðurnes",
"houses": 9764,
"date": "2011"
},
{
"sales": 229,
"municipality": "Suðurnes",
"houses": 9754,
"date": "2010"
},
{
"sales": 251,
"municipality": "Suðurnes",
"houses": 9791,
"date": "2009"
}
]
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 12px sans-serif;
}
.axis path {
shape-rendering: crispEdges;
}
.axis path {
fill: none;
}
.axis line {
stroke: #aaa;
}
.y.axis line {
stroke-dasharray: 2 2;
}
.axis .tick text {
font: 12px sans-serif;
}
.x.axis path {
display: none;
}
.dot {
stroke : white;
stroke-width: 1.2px;
}
.line {
fill: none;
stroke: black;
stroke-width: 2px;
}
.fig rect {
fill: white;
stroke: #aaa;
}
</style>
<body>
<script src="//cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.16.0/polyfill.js"></script>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 25, right: 110, bottom: 30, left: 65},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.time.scale()
.range([5, width]);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.tickSize(-width)
.tickFormat(d3.format(",.0%"))
.orient("left");
var line = d3.svg.line()
.x(d => x(d.date))
.y(d => y(d.value));
var svg = d3.select("body").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]+")");
function byDate ( a, b ) {
return d3.ascending( a.date * 1, b.date * 1 );
}
d3.json("data.json", ( err, data ) => {
if (err) throw err;
data
.forEach(d => {
d.date = new Date(Date.parse(d.date))
d.value = d.sales / d.houses;
});
data.sort(byDate);
var pal = {
Reykjavík: '#5DA5DA',
Hafnarfjörður: '#FAA43A',
Seltjarnarnes: '#60BD68',
};
var timeseries = d3.nest()
.key(d => d.municipality)
.entries(data)
.filter(d => d.key in pal)
.map(d => {
return {
title: d.key,
color: pal[d.key] || 'black',
values: d.values
//.filter(d => d.date.getUTCFullYear() > 2007)
.sort(byDate),
};
});
x.domain(d3.extent(timeseries[0].values, d => d.date));
y.domain([
d3.min(timeseries, c => d3.min(c.values, v => v.value)),
d3.max(timeseries, c => d3.max(c.values, v => v.value))
]).nice();
svg.append("g")
.attr("class", "x axis")
.attr("transform", `translate(0,${height})`)
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.selectAll('.tick text')
.attr('x', -8)
svg.append("text")
.attr("transform", `translate(-50,${height / 2}) rotate(-90)`)
.attr("dy", ".71em")
.style("text-anchor", "middle")
.text("Hlutfall þinglýstra kaupsamninga af fjölda íbúða.");
var series = svg.selectAll(".series")
.data(timeseries)
.enter().append("g")
.attr("class", "series");
series.append("path")
.attr("class", "line")
.attr("d", d => line(d.values))
.style("stroke", d => d.color);
series.append('g')
.style("fill", d => d.color)
.selectAll(".dot")
.data(p => p.values).enter()
.append('path')
.attr("class", "dot")
.attr("transform", d => "translate("+[x(d.date), y(d.value)]+")")
.attr("d", d3.svg.symbol().size(32));
series.append("text")
.attr("transform", d => {
var last = d.values[d.values.length - 1]
return "translate("+[x(last.date), y(last.value)]+")"
})
.style('font', '12px sans-serif')
.attr("x", 10)
.attr("dy", ".35em")
.text(d => d.title);
function plot_mini ( title, pos, size, fn ) {
var _x = d3.time.scale()
.range([2, size[0] - 2])
.domain(x.domain());
var _y = d3.scale.linear()
.range([size[1] - 2, 2])
.domain([
d3.min(timeseries, c => d3.min(c.values, fn)),
d3.max(timeseries, c => d3.max(c.values, fn))
]).nice();
var line = d3.svg.line()
.x(d => _x(d.date))
.y(d => _y(fn(d)));
var fig = svg.append('g')
.attr('class', 'fig')
.attr('transform', d => 'translate('+pos+')');
fig.append("text")
.attr("transform", `translate(${size[0]/2},${size[1]+5})`)
.attr("dy", ".71em")
.style("text-anchor", "middle")
.text(title);
fig.append('rect')
.attr('width', size[0])
.attr('height', size[1]);
fig.selectAll('path')
.data(timeseries).enter()
.append('path')
.attr('class', 'line')
.attr('d', d => line(d.values))
.style('stroke', d => d.color);
}
plot_mini( "A. – Þinglýstir kaupsamningar",
[420, -6], [200, 120], v => v.sales );
plot_mini( "B. – Fjöldi íbúða",
[660, -6], [200, 120], v => v.houses );
});
</script>
Raw
test.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 12px sans-serif;
}
.axis path {
shape-rendering: crispEdges;
}
.axis path {
fill: none;
}
.axis line {
stroke: #aaa;
}
.y.axis line {
stroke-dasharray: 2 2;
}
.axis .tick text {
font: 12px sans-serif;
}
.x.axis path {
display: none;
}
.dot {
stroke : white;
stroke-width: 1.2px;
}
.line {
fill: none;
stroke: black;
stroke-width: 2px;
}
.fig rect {
fill: white;
stroke: #aaa;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 25, right: 110, bottom: 30, left: 65},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.time.scale()
.range([5, width]);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.tickSize(-width)
.tickFormat(d3.format(",.0%"))
.orient("left");
var line = d3.svg.line()
.x(function (d) { return ( x(d.date) ); })
.y(function (d) { return ( y(d.value) ); });
var svg = d3.select("body").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]+")");
function byDate ( a, b ) {
return d3.ascending( a.date * 1, b.date * 1 );
}
d3.json("data.json", function (err, data));
var svg = d3.select("body").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]+")");
function byDate ( a, b ) {
return d3.ascending( a.date * 1, b.date * 1 );
}
d3.json("data.json", ( err, data ) => {
if (err) throw err;
data
.forEach(function (d));
var svg = d3.select("body").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]+")");
function byDate ( a, b ) {
return d3.ascending( a.date * 1, b.date * 1 );
}
d3.json("data.json", ( err, data ) => {
if (err) throw err;
data
.forEach(d => {
d.date = new Date(Date.parse(d.date))
d.value = d.sales / d.houses;
});
data.sort(byDate);
var pal = {
Reykjavík: '#5DA5DA',
Hafnarfjörður: '#FAA43A',
Seltjarnarnes: '#60BD68',
};
var timeseries = d3.nest()
.key(function (d) { return ( d.municipality ); })
.entries(data)
.filter(function (d) { return ( d.key in pal ); })
.map(function (d))
.map(d => {
return {
title: d.key,
color: pal[d.key] || 'black',
values: d.values
//.filter(function (d) { return ( d.date.getUTCFullYear() > 2007 ); })
.sort(byDate),
};
});
x.domain(d3.extent(timeseries[0].values, function (d) { return ( d.date ); }));
y.domain([
d3.min(timeseries, function (c) { return ( d3.min(c.values, function (v) { return ( v.value ); }) ); }),
d3.max(timeseries, function (c) { return ( d3.max(c.values, function (v) { return ( v.value ); }) ); })
]).nice();
svg.append("g")
.attr("class", "x axis")
.attr("transform", 'translate(0,' + (height) + ')')
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.selectAll('.tick text')
.attr('x', -8)
svg.append("text")
.attr("transform", 'translate(-50,' + (height / 2) + ') rotate(-90)')
.attr("dy", ".71em")
.style("text-anchor", "middle")
.text("Hlutfall þinglýstra kaupsamninga af fjölda íbúða.");
var series = svg.selectAll(".series")
.data(timeseries)
.enter().append("g")
.attr("class", "series");
series.append("path")
.attr("class", "line")
.attr("d", function (d) { return ( line(d.values) ); })
.style("stroke", function (d) { return ( d.color ); });
series.append('g')
.style("fill", function (d) { return ( d.color ); })
.selectAll(".dot")
.data(function (p) { return ( p.values ); }).enter()
.append('path')
.attr("class", "dot")
.attr("transform", function (d) { return ( "translate("+[x(d.date), y(d.value)]+")" ); })
.attr("d", d3.svg.symbol().size(32));
series.append("text")
.attr("transform", function (d))
.attr("d", d3.svg.symbol().size(32));
series.append("text")
.attr("transform", d => {
var last = d.values[d.values.length - 1]
return "translate("+[x(last.date), y(last.value)]+")"
})
.style('font', '12px sans-serif')
.attr("x", 10)
.attr("dy", ".35em")
.text(function (d) { return ( d.title ); });
function plot_mini ( title, pos, size, fn ) {
var _x = d3.time.scale()
.range([2, size[0] - 2])
.domain(x.domain());
var _y = d3.scale.linear()
.range([size[1] - 2, 2])
.domain([
d3.min(timeseries, function (c) { return ( d3.min(c.values, fn) ); }),
d3.max(timeseries, function (c) { return ( d3.max(c.values, fn) ); })
]).nice();
var line = d3.svg.line()
.x(function (d) { return ( _x(d.date) ); })
.y(function (d) { return ( _y(fn(d)) ); });
var fig = svg.append('g')
.attr('class', 'fig')
.attr('transform', function (d) { return ( 'translate('+pos+')' ); });
fig.append("text")
.attr("transform", 'translate(' + (size[0]/2) + ',' + (size[1]+5) + ')')
.attr("dy", ".71em")
.style("text-anchor", "middle")
.text(title);
fig.append('rect')
.attr('width', size[0])
.attr('height', size[1]);
fig.selectAll('path')
.data(timeseries).enter()
.append('path')
.attr('class', 'line')
.attr('d', function (d) { return ( line(d.values) ); })
.style('stroke', function (d) { return ( d.color ); });
}
plot_mini( "A. – Þinglýstir kaupsamningar",
[420, -6], [200, 120], function (v) { return ( v.sales ); });
plot_mini( "B. – Fjöldi íbúða",
[660, -6], [200, 120], function (v) { return ( v.houses ); });
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment