JSFiddle - React, Tailwind, and code Playground

by Simon Raper

CSS

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

JavaScript

//Define the data
var 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,
        "sky": 1,
        "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",
        "sky": 1,
        "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,
        "sky": 1,
        "vod_platform": "netflix",
        "household_members": [44, 33, 5, 6]
}, {
    "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,
        "sky": 1,
        "vod_platform": "netflix",
        "household_members": [22, 18, 8]
}, {
    "num_tvs": 3,
        "num_devices": 3,
        "vod_platform": "netflix",
        "household_members": [40, 33, 8, 12]
}, {
...