Email Comments 12-2

[sandywij]

Layout

I needed to make some changes in both the css and html because you have multiple groupped charts. https://gist.github.com/sandywij/9b24dc4e438d7b16d3a2ab5099aa9247

You would also need to change all your tooltips from const tooltip = d3.select("CHARTID").append("div").attr("class", "svg-tooltip"); to const tooltip = d3.select("body").append("div").attr("class", "svg-tooltip"); otherwise your tooltip will show up at odd places with the new layout code.

Dropdown Menu

https://d3-graph-gallery.com/graph/line_select.html has a good demo, with the explanations in comments

[sandywij]

Chicago cropped off

Adding .fitSize([width, height], communities) to this snippet

https://github.com/seolub/CAPP30239_FA22/blob/1f73ad147716878090c8e62959417aab3e2bc091/chicago.js#L30-L36

will make sure that the map won't be cut off.

[sandywij]

Tooltip

The easiest way for you to do this without a full rewrite is to use the logical Or operator || on line 61 https://github.com/seolub/CAPP30239_FA22/blob/461d42866a3c5a869083bff2bfde8243a1b96079/bubble_plot.js#L61 to .html(`${d.COMMUNITY_AREA_NAME} <br> ${d.LifeExpectancy || d.value} `),

Dropdown

• Move this section to line 134

https://github.com/seolub/CAPP30239_FA22/blob/5c7a338c12c5d545a7a3831bb08c9f7bde5307c8/bubble_plot.js#L126-L132

• Change allGroup to var allGroup = ["LifeExpectancy", "ACT_GRADE11", "Unemployment", "HOMICIDE"] so that it matches the key names.

• If you to have a different name on the dropdown, and have it map to different values, you can always create an array of object so, var allGroup = [{optionText: 'Homocide rate', optionValue: 'HOMICIDE'} ....] and reference d.optionText and d.optionValue here:

https://github.com/seolub/CAPP30239_FA22/blob/461d42866a3c5a869083bff2bfde8243a1b96079/bubble_plot.js#L96-L103

• Update your Update Function to this:

  function update(selectedGroup) {
    // Give these new data to update line

    var dataFilter = data.map(function (d) {
      return {
        COMMUNITY_AREA_NAME: d.COMMUNITY_AREA_NAME,
        INCOMEPC: +d.INCOMEPC,
        value: +d[selectedGroup],
        Population: +d.Population,
      };
    });

    y.domain([
      d3.min(dataFilter, (d) => d.value),
      d3.max(dataFilter, (d) => d.value),
    ])
      .nice()
      .range([height, 0]);

// Update Y Axis
    d3.select("#bubbleYAxis").call(d3.axisLeft(y));

    d3.selectAll(".bubbles")
      .data(dataFilter)
      .join("circle")
      .transition()
      .duration(1000)
      .attr("cx", function (d) {
        return x(d.INCOMEPC);
      })
      .attr("cy", function (d) {
        return y(d.value);
      })
      .attr("r", function (d) {
        return z(d.Population) / 2;
      })
      .style("fill", function (d) {
        return myColor(d.INCOMEPC);
      });
  }

• Add an id to your YAxis https://github.com/seolub/CAPP30239_FA22/blob/461d42866a3c5a869083bff2bfde8243a1b96079/bubble_plot.js#L35-L36 like this: svg.append("g").attr("id", "bubbleYAxis").call(d3.axisLeft(y));