House Carto (538)

Ref: 538.

These are the House districts where MAGA nutjob GOP folks are running for a seat in Congress.

runonce = {
  document.querySelector(".quarto-color-scheme-toggle").style.display = 'none';
}

viewof toggle = Inputs.button("Toggle Light/Dark Mode")

color_mode = {
  toggle;
  window.quartoToggleColorScheme()
  return localStorage["quarto-color-scheme"]
}

{
  const svg = d3.create("svg").attr("width", 700).attr("height", 525);

  const base_map = svg.append("g");

  base_map
    .append("g")
    .attr("class", "state-outline")
    .selectAll("path")
    .data(house_carto.outlines)
    .enter()
    .append("path")
    .attr("d", (t) => t.d)
    .attr("transform", (t) =>
      "translate(".concat(t.translate[0], ", ").concat(t.translate[1], ")")
    )
    .lower();

  const tiles = svg.append("g");

  const scale = 5;

  tiles
    .append("g")
    .attr("class", "map")
    .attr(
      "transform",
      "scale("
        .concat(scale, ")translate(")
        .concat(24 * scale, ",")
        .concat(10 * scale, ")")
    );

  tiles
    .append("g")
    .attr("class", "districts")
    .selectAll("path")
    .data(house_carto.districts)
    .enter()
    .append("path")
    .attr("class", (e) => {
      if (future_states.includes(e.state)) {
        return color_mode + " district unfinished-district"
      } else {
        if (["Yes", "Declined to answer"].includes(stance[e.race])) {
          return color_mode + " maga-nutjob-district"
        } else {
          return color_mode + " district"
        }
      }
    })
    .attr("d", (t) =>
      "M".concat(t.points.map((t) => t.join(" ")).join("L"), "Z")
    )
    .append("title")
    .text((t) => t.race);

  const labels = svg.append("g");

  labels
    .selectAll("g.labels")
    .data(["bg", "fg"])
    .enter()
    .append("g")
    .attr("class", (t) => color_mode + " labels " + t)
    .selectAll("text")
    .data(house_carto.labels)
    .enter()
    .append("text")
    .attr("transform", (t, e) =>
      "translate(".concat(t.x, ", ").concat(t.y, ")")
    )
    .text((t, e) => t.state);

  return svg.node();
}

Chance GOP Wins Seat

{
  const svg = d3.create("svg").attr("width", 700).attr("height", 525);

  const base_map = svg.append("g");

  base_map
    .append("g")
    .attr("class", "state-outline-02")
    .selectAll("path-02")
    .data(house_carto.outlines)
    .enter()
    .append("path")
    .attr("fill", "white")
    .attr("d", (t) => t.d)
    .attr("transform", (t) =>
      "translate(".concat(t.translate[0], ", ").concat(t.translate[1], ")")
    )
    .lower();

  const tiles = svg.append("g");

  const scale = 5;

  tiles
    .append("g")
    .attr("class", "map")
    .attr(
      "transform",
      "scale("
        .concat(scale, ")translate(")
        .concat(24 * scale, ",")
        .concat(10 * scale, ")")
    );

  tiles
    .append("g")
    .attr("class", "districts")
    .selectAll("path")
    .data(house_carto.districts)
    .enter()
    .append("path")
    .attr("stroke-width", 0.5)
    .attr("stroke", "#c3c3c3")
    .attr("fill", "purple")
    .attr("fill-opacity", e => win_prob[e.race]/100)
    .attr("d", (t) =>
      "M".concat(t.points.map((t) => t.join(" ")).join("L"), "Z")
    )
    .append("title")
    .text((t) => win_prob[t.race]/100);

  const labels = svg.append("g");

  labels
    .selectAll("g.labels")
    .data(["bg", "fg"])
    .enter()
    .append("g")
    .attr("class", (t) => color_mode + " labels " + t)
    .selectAll("text")
    .data(house_carto.labels)
    .enter()
    .append("text")
    .attr("transform", (t, e) =>
      "translate(".concat(t.x, ", ").concat(t.y, ")")
    )
    .text((t, e) => t.state);

  return svg.node();
}

house_carto = FileAttachment("house_carto.json").json()

css = html`<style>
.district {
  stroke-width: 0.5;
  stroke: #fff;
  fill: #d3d3d3
}

.maga-nutjob-district {
  stroke-width: 0.5;
  stroke: #fff;
  fill: #980b65
}

.unfinished-district {
  stroke-width: 0.5;
  stroke: #fff;
  fill: white
}

.district.alternate {
  stroke-width: 0.5;
  stroke: #d3d3d3;
  fill: #fff
}

.maga-nutjob-district.alternate {
  stroke-width: 0.5;
  stroke: #d3d3d3;
  fill: #980b65
}

.unfinished-district.alternate {
  stroke-width: 0.5;
  stroke: #fff;
  fill: white
}


g.labels {
  pointer-events: none
}

g.labels text {
  font-family: "Comic Code Ligatures", monospace;
  font-size: 15px
}

g.labels.bg.alternate text {
  stroke-width: 4;
  stroke: #222;
  fill: #222
}

g.labels.fg.alternate text {
  stroke: none;
  fill: #fff
}

g.labels.bg text {
  stroke-width: 4;
  stroke: #fff;
  fill: #fff
}

g.labels.fg text {
  stroke: none;
  fill: #222
}
</style>`