JSFiddle - React, Tailwind, and code Playground

by Simon Raper

CSS

rect, polygon {
    fill: #4679BD
}
rect.window {
    fill: white
}
rect.door {
    stroke: white
}

JavaScript

//Define the data
demog = [{
    "num_tvs": 6,
        "num_devices": 3,
        "vod_platform": "netflix",
        "household_members": [40, 33, 8, 12]
}, {
    "num_tvs": 3,
        "num_devices": 3,
        "vod_platform": "netflix",
        "household_members": [40, 22]
}, {
    "num_tvs": 1,
        "num_devices": 3,
        "vod_platform": "netflix",
        "household_members": [24]
}, {
    "num_tvs": 4,
        "num_devices": 3,
        "vod_platform": "netflix",
        "household_members": [22, 18, 8]
}, {
    "num_tvs": 3,
        "num_devices": 3,
        "vod_platform": "netflix",
        "household_members": [40, 33, 8, 12]
}, {
    "num_tvs": 3,
        "num_devices": 3,
        "vod_platform": "netflix",
        "household_members": [40, 33, 8, 12, 12]
}, {
    "num_tvs": 1,
        "num_devices": 3,
        "vod_platform": "netflix",
        "household_members": [22, 24]
}, {
    "num_tvs": 4,
        "num_devices": 3,
        "vod_platform": "netflix",
        "household_members": [30, 33, 8, 5, 5]
}, {
    "num_tvs": 6,
        "num_devices": 3,
        "vod_platform": "netflix",
        "household_members": [40, 33, 40, 8, 5]
}, {
    "num_tvs": 3,
        "num_devices": 3,
        "vod_platform": "netflix",
        "household_members": [44, 33, 5, 6]
}];

//Set up the svg
var w = 1000,
    h = 500;

var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h)
    .on("click", update);

//Bind the households to the demographic data
var households = svg.selectAll("households").data(demog);

//Append the household groups
household_groups = households.enter()
    .append("svg:g")
    .attr("class", "household_group")
    .attr("transform", function (d, i) {
    return (i < 5) ? "translate(" + x_pos(i) + ",0)" : "translate(" + x_pos(i) + ",100)"
});

//Add the buildings
household_groups.append("svg:rect")
    .attr("class", "building")
    .attr("x", function (d) {
    return d.household_members.length * 11 + 10
})
...