index.html

<script src="https://d3js.org/d3.v6.min.js"></script>

<button type="button" onclick="setMode('Party')">Party</button>
<button type="button" onclick="setMode('House')">House/Sen.</button>
<button type="button" onclick="setMode('Detail')">Detail</button>
<button type="button" onclick="swapView()">Comparison mode</button>
<select id="demo">
    <option value="0">Protestants</option>
    <option value="1">Catholics</option>
    <option value="2">Mormons</option>
    <option value="3">Orthodox Christians</option>
    <option value="4">Muslims</option>
    <option value="5">Hebrews</option>
    <option value="6">Hindus</option>
    <option value="7">Buddhists</option>
    <option value="8">Other Religions</option>
    <option value="9">Unknown/Refuse to answer</option>
    <option value="10">Unaffiliated/Nonreligious</option>
    <option value="11">White/Caucasians</option>
    <option value="12">Latino/Hispanics</option>
    <option value="13">Black/African Americans</option>
    <option value="14">Asian/Pacific Islanders</option>
    <option value="15">Native Americans</option>
    <option value="16">Men</option>
    <option value="17">Women</option>
</select>
<button type="button" onclick="addComp()">Add to comparison</button>
<button type="button" onclick="remComp()">Remove from comparison</button>
<button type="button" onclick="reset()">Remove all from comparison</button>
<svg id="vis"></svg>

<script>
    console.log(d3);

    if (sessionStorage.getItem("Mode") != "Party" && sessionStorage.getItem("Mode") != "House" && sessionStorage.getItem("Mode") != "Detail") {
        sessionStorage.setItem("Mode", "Party");
    }

    if (sessionStorage.getItem("View") != "Over" && sessionStorage.getItem("View") != "Compare") {
        sessionStorage.setItem("View", "Over");
    }

    if (!Array.isArray(JSON.parse(sessionStorage.getItem("CompareList")))) {
        var compare = [];
        sessionStorage.setItem("CompareList", JSON.stringify(compare));
    }

    function reset() {
        var compare = [];
        sessionStorage.setItem("CompareList", JSON.stringify(compare));
        location.reload();
    }

    function setMode(mode) {
        sessionStorage.setItem("Mode", mode);
        location.reload();
    }

    function swapView() {
        if (sessionStorage.getItem("View") == "Over") {
            sessionStorage.setItem("View", "Compare");
        } else {
            sessionStorage.setItem("View", "Over");
        }
        location.reload();
    }

    var wid = 1400;
    var hgt;

    if (sessionStorage.getItem("View") == "Over") {
        hgt = 3600;
    } else {
        hgt = 720;
    }

    function addComp() {
        var demo = document.getElementById("demo").value;
        var c = [];
        c = JSON.parse(sessionStorage.getItem("CompareList"));

        if (demo != c[c.indexOf(demo)]) {
            c.push(demo);
            sessionStorage.setItem("CompareList", JSON.stringify(c));
            location.reload();
        }
    }

    function remComp() {
        var demo = document.getElementById("demo").value;
        var c = [];
        var a = JSON.parse(sessionStorage.getItem("CompareList"));

        for (i = 0; i < a.length; i++) { c.push(a[i]) }
        var ind = c.indexOf(demo)

        if (demo == c[ind]) {
            c.splice(ind, 1);
            sessionStorage.setItem("CompareList", JSON.stringify(c));
            location.reload();
        }
    }

    /*
    Arrays store info in the following positions:
    0 - #/% Protestant              11 - #/% White                      16 - #/% Men
    1 - #/% Catholic                12 - #/% Latino/Hispanic            17 - #/% Women
    2 - #/% Mormon                  13 - #/% Black
    3 - #/% Orthodox Christian      14 - #/% Asian/Pacific Islander
    4 - #/% Muslim                  15 - #/% Native American
    5 - #/% Jewish
    6 - #/% Hindu
    7 - #/% Budhist
    8 - #/% Other
    9 - #/% Dont know
    10 - #/% Unaffiliated

    Population: %
    Democrat/Republican Senate: # out of 100
    Democrat/Republican House: # out of 435
    Democrats: 283 total seats, 237 house 46 senate
    Republicans: 249 total seats, 197 house 52 senate
    Colors: Hexadecimal codes
    */
    var titles = ["Protestants", "Catholics", "Mormons", "Orthodox Christians", "Muslims", "Hebrews", "Hindus", "Buddhists", "Other Religions", "Unknown/Refuse to answer", "Unaffiliated/Nonreligious",
        "White/Caucasians", "Latino/Hispanics", "Black/African Americans", "Asian/Pacific Islanders", "Native Americans",
        "Men", "Women"]
    var popltn = [48, 21, 2, 1, 1, 2, 1, 1, 2, 1, 23,
        60.1, 18.5, 13.4, 6.1, 1.3,
        49.2, 50.8];
    var demhou = [97, 87, 1, 3, 3, 24, 3, 1, 2, 14, 0,
        129, 37, 53, 16, 2,
        147, 90];
    var demsen = [20, 12, 1, 0, 0, 8, 0, 1, 0, 4, 1,
        39, 2, 2, 3, 0,
        29, 17];
    var rpbhou = [136, 54, 5, 2, 0, 2, 0, 0, 0, 0, 0,
        184, 9, 1, 1, 2,
        182, 15];
    var rpbsen = [40, 10, 3, 0, 0, 0, 0, 0, 0, 0, 0,
        48, 3, 1, 0, 0,
        44, 8];
    var colors = ["#332288", "#117733", "#44AA99", "#8EFF22", "#88CCEE", "#DDCC77", "#CC6677", "#AA4499", "#882255", "#191919", "#AAAAAA",
        "#D4D4D4", "#FFB000", "#FE6100", "#DC267F", "#57FF42",
        "#0AC3FF", "#EF0087"]

    var svg = d3.select('#vis')
        .attr('width', wid)
        .attr('height', hgt);

    function makeCirc(x, y, r, c) {
        svg.append('circle')
            .attr('cx', x)
            .attr('cy', y)
            .attr('r', 10 * Math.log(r + 1))
            .attr('fill', colors[c])
            .attr('stroke', 'black')
            .attr('stroke-width', 2);
    }

    function makeRect(x, y, w, h, c) {
        svg.append('rect')
            .attr('x', x)
            .attr('y', y - h)
            .attr('width', w)
            .attr('height', h)
            .attr('stroke', 'black')
            .attr('stroke-width', 2)
            .attr('fill', colors[c]);
    }

    function createVisA(i) {
        svg.append("text")
            .attr("x", wid / 2)
            .attr("y", (200 * i) + 50)
            .text("Representation of " + titles[i] + " in:")
            .style("text-anchor", "middle");
        svg.append("text")
            .attr("x", wid / 2)
            .attr("y", (200 * i) + 180)
            .text("Population")
            .style("text-anchor", "middle");
        makeCirc(wid / 2, (200 * i) + 100, popltn[i], i);
        if (sessionStorage.getItem("Mode") == "Party") {
            makeCirc(wid / 2 + 120, (200 * i) + 100, (rpbhou[i] + rpbsen[i]) / 2.83, i);
            makeCirc(wid / 2 - 120, (200 * i) + 100, (demhou[i] + demsen[i]) / 2.49, i);
            svg.append("text")
                .attr("x", wid / 2 + 120)
                .attr("y", (200 * i) + 160)
                .text("Republicans")
                .style("text-anchor", "middle");
            svg.append("text")
                .attr("x", wid / 2 - 120)
                .attr("y", (200 * i) + 160)
                .text("Democrats")
                .style("text-anchor", "middle");
        } else if (sessionStorage.getItem("Mode") == "House") {
            makeCirc(wid / 2 + 120, (200 * i) + 100, (rpbhou[i] + demhou[i]) / 4.34, i);
            makeCirc(wid / 2 - 120, (200 * i) + 100, (rpbsen[i] + demsen[i]) / .98, i);
            svg.append("text")
                .attr("x", wid / 2 + 120)
                .attr("y", (200 * i) + 160)
                .text("House of Rep.")
                .style("text-anchor", "middle");
            svg.append("text")
                .attr("x", wid / 2 - 120)
                .attr("y", (200 * i) + 160)
                .text("Senate")
                .style("text-anchor", "middle");
        } else if (sessionStorage.getItem("Mode") == "Detail") {
            makeCirc(wid / 2 + 120, (200 * i) + 100, rpbsen[i] / .52, i);
            makeCirc(wid / 2 + 240, (200 * i) + 100, rpbhou[i] / 1.97, i);
            makeCirc(wid / 2 - 120, (200 * i) + 100, demsen[i] / .46, i);
            makeCirc(wid / 2 - 240, (200 * i) + 100, demhou[i] / 2.37, i);
            svg.append("text")
                .attr("x", wid / 2 + 120)
                .attr("y", (200 * i) + 160)
                .text("Republican Senate")
                .style("text-anchor", "middle");
            svg.append("text")
                .attr("x", wid / 2 + 240)
                .attr("y", (200 * i) + 180)
                .text("Republican House")
                .style("text-anchor", "middle");
            svg.append("text")
                .attr("x", wid / 2 - 120)
                .attr("y", (200 * i) + 160)
                .text("Democrat Senate")
                .style("text-anchor", "middle");
            svg.append("text")
                .attr("x", wid / 2 - 240)
                .attr("y", (200 * i) + 180)
                .text("Democrat House")
                .style("text-anchor", "middle");
        }
    }

    if (sessionStorage.getItem("View") == "Over") {
        for (i = 0; i < popltn.length; i++) {
            createVisA(i);
        }
    } else if (sessionStorage.getItem("View") == "Compare") {
        var x1 = 150, x2 = 1100, y1 = 20, y2 = 670, barmargin = 5, groupmargin = 50, groupnum = 2;
        if (sessionStorage.getItem("Mode") == "Detail") { groupnum = 4; }

        var c = JSON.parse(sessionStorage.getItem("CompareList"));

        var grpwid = ((x2 - x1) - ((groupnum + 1) * groupmargin)) / groupnum;
        var barwid = (grpwid - ((c.length + 1) * barmargin)) / c.length;

        var curx = x1 + groupmargin;

        if (sessionStorage.getItem("Mode") == "Party") {
            svg.append("text")
                .attr("x", x1 + groupmargin + (grpwid / 2))
                .attr("y", y2 + 20)
                .text("Democrats")
                .style("text-anchor", "middle");
            svg.append("text")
                .attr("x", x1 + (2 * groupmargin) + (3 * (grpwid / 2)))
                .attr("y", y2 + 20)
                .text("Republicans")
                .style("text-anchor", "middle");
        } else if (sessionStorage.getItem("Mode") == "House") {
            svg.append("text")
                .attr("x", x1 + groupmargin + (grpwid / 2))
                .attr("y", y2 + 20)
                .text("Senate")
                .style("text-anchor", "middle");
            svg.append("text")
                .attr("x", x1 + (2 * groupmargin) + (3 * (grpwid / 2)))
                .attr("y", y2 + 20)
                .text("House of Rep.")
                .style("text-anchor", "middle");
        } else if (sessionStorage.getItem("Mode") == "Detail") {
            svg.append("text")
                .attr("x", x1 + groupmargin + (grpwid / 2))
                .attr("y", y2 + 20)
                .text("House")
                .style("text-anchor", "middle");
            svg.append("text")
                .attr("x", x1 + (2 * groupmargin) + (3 * (grpwid / 2)))
                .attr("y", y2 + 20)
                .text("Senate")
                .style("text-anchor", "middle");
            svg.append("text")
                .attr("x", x1 + (3 * groupmargin) + (5 * (grpwid / 2)))
                .attr("y", y2 + 20)
                .text("House")
                .style("text-anchor", "middle");
            svg.append("text")
                .attr("x", x1 + (4 * groupmargin) + (7 * (grpwid / 2)))
                .attr("y", y2 + 20)
                .text("Senate")
                .style("text-anchor", "middle");

            svg.append("text")
                .attr("x", x1 + (1.5 * groupmargin) + grpwid)
                .attr("y", y2 + 40)
                .text("Democrat")
                .style("text-anchor", "middle");
            svg.append("text")
                .attr("x", x1 + (3.5 * groupmargin) + (grpwid * 3))
                .attr("y", y2 + 40)
                .text("Republican")
                .style("text-anchor", "middle");
        }

        function scaleR(rep, pop) {
            var y = rep - pop;
            y /= pop;
            y += 1;
            y /= 2;
            y *= y2 - y1;
            return y;
        }

        for (i = 0; i < c.length; i++) {
            svg.append("text")
                .attr("x", 1175)
                .attr("y", (40 * i) + 50)
                .text(titles[c[i]]);
            makeCirc(1145, (40 * i) + 45, 3, c[i]);


            if (sessionStorage.getItem("Mode") == "Party") {
                var dy = scaleR((demhou[c[i]] + demsen[c[i]]) / 2.49, popltn[c[i]]);
                var ry = scaleR((rpbhou[c[i]] + rpbsen[c[i]]) / 2.83, popltn[c[i]]);

                makeRect(curx, y2, barwid, dy, c[i]);
                makeRect(curx + grpwid + groupmargin, y2, barwid, ry, c[i]);

                curx += barwid + barmargin;
            } else if (sessionStorage.getItem("Mode") == "House") {
                var hy = scaleR((demhou[c[i]] + rpbhou[c[i]]) / 4.34, popltn[c[i]]);
                var sy = scaleR((demsen[c[i]] + rpbsen[c[i]]) / .98, popltn[c[i]]);

                makeRect(curx, y2, barwid, hy, c[i]);
                makeRect(curx + grpwid + groupmargin, y2, barwid, sy, c[i]);

                curx += barwid + barmargin;
            } else if (sessionStorage.getItem("Mode") == "Detail") {
                var dhy = scaleR(demhou[c[i]] / 2.37, popltn[c[i]]);
                var dsy = scaleR(demsen[c[i]] / .46, popltn[c[i]]);
                var rhy = scaleR(rpbhou[c[i]] / 1.97, popltn[c[i]]);
                var rsy = scaleR(rpbsen[c[i]] / .52, popltn[c[i]]);

                makeRect(curx, y2, barwid, dhy, c[i]);
                makeRect(curx + grpwid + groupmargin, y2, barwid, dsy, c[i]);
                makeRect(curx + (2 * (grpwid + groupmargin)), y2, barwid, rhy, c[i]);
                makeRect(curx + (3 * (grpwid + groupmargin)), y2, barwid, rsy, c[i]);

                curx += barwid + barmargin;
            }
        }

        var path = "M" + (x1) + " " + ((y1 + y2) / 2)
            + " L" + (x2) + " " + ((y1 + y2) / 2);
        svg.append('path')
            .attr('d', path)
            .attr('stroke', 'black')
            .attr('fill', 'none')
            .attr('stroke-width', 2);
        var path = "M" + (x1) + " " + (y1)
            + " L" + (x1) + " " + (y2)
            + " L" + (x2) + " " + (y2);
        svg.append('path')
            .attr('d', path)
            .attr('stroke', 'black')
            .attr('fill', 'none')
            .attr('stroke-width', 2);

        svg.append("text")
            .attr("x", x1 - 85)
            .attr("y", (y1 + y2 + 8) / 2)
            .text("Population");
        svg.append("text")
            .attr("x", x1 - 55)
            .attr("y", y1 + 4)
            .text("+100%");
        svg.append("text")
            .attr("x", x1 - 55)
            .attr("y", y2 + 4)
            .text("-100%");

        svg.append("text")
            .attr("x", -(y1 + y2) / 2)
            .attr("y", 25)
            .attr("transform", "rotate(-90)")
            .style("text-anchor", "middle")
            .text("Relative difference to population")
            .style("font-size", "24px");
    }
</script>