OnlineDataVizSolution3

by Kate Mokhova

CSS

rect {
    stroke: #ddd;
}

text {
    text-anchor: middle;
}
#info text {
    text-anchor: start;
}

.flat>text {
    fill: #fff;
    font-size: 11px;
}

.flat:hover rect {
    box-shadow: inset 0 0 3px orange;    
}

#price {
    font-size: 20px;
    letter-spacing: 1.5px;
}

.small {
    fill: #ddd;
    font-size: 10px;
}

JavaScript

var margin = {top: 40, right: 30, bottom: 20, left: 30}

var width = 1700 - margin.left - margin.right
var height = 500 - margin.top - margin.bottom

var color = d3.scale.threshold()
    .domain([1, 2, 3])
    .range(['#D9D2E9', '#B4A7D6', '#8E7CC3', '#674EA7'])

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 + ")")

var flatWidth = 30
var flatHeight = 19
var buildingWidth = 290

// Ось игрек определяется через высоту одного "этажа"
var y = d3.scale.linear()
    .domain([0, 1])
    .range([0, -flatHeight])

d3.csv('http://d3-js.ru/data/Mirgorod-sales.csv', function (row) {
    // Данные о балансе могут быть не определены (undefined), считаем за 0
    if (row.balance == undefined) {
        row.balance = 0
    } else {
        // Большая часть значений разбирается однообразно — убираем запятые регулярным выражением и разбираем как число функцией Number
        row.balance = Number(row.balance.replace(/,/g, ''))
    }
    
    // Сохраним отформатированеую цену дома, её удобно выводить в подсказке
    row.original_price = row.price
    row.price = Number(row.price.replace(/,/g, ''))
    row.sale_price = Number(row.sale_price.replace(/,/g, ''))
    row.area = Number(row.area)
    row.num_of_rooms = Number(row.num_of_rooms.replace(/,/g, ''))
    row.floor = Number(row.floor)
    row.discount = Number(row.discount.replace(/,/g, ''))
    row.obtained_funds = Number(row.obtained_funds.replace(/,/g, ''))
    row.price_for_m2 = Number(row.price_for_m2.replace(/,/g, ''))
    
    row.building = row.apartment.slice(2, 7)
    
    return row
}, function (rows) {
    rows = rows.filter(function (row) {
        return row.apartment != ""
    })
    rows = d3.nest()
        .key(function (row) { return row.building })
        .key(function (row) { return row.floor })
        .entries(rows)
...