Email Comments 11-11 - Githubissues

Chicago.js

properties.area_num_1 is coming from the geojson.

You can console.log(communities.features[0]) or upload your geojson onto https://geojson.io/ to take a look.

In addition to geo data, a geojson can include additional data about each shape (counties in this case). In the dataset in class demo, there was probably an id datafield that we are able to join with the CSV. In this case, area_num_1 in the geojson seemed to be a matching key to the Community_Area_Number field in the CSV.

2. Bubble_plot.js

It looks like you are using the v4 version of the code; make sure that the d3 graph gallery code you're using is the v6 version. Other than that, you might have to switch out event.X and event.Y to event.pageX and event.pageY

If you're interested, you can read the difference between pageX and X on MDN.

3. Final.js

Method 1: Hardcoding (makes function less reusable outside of this project)

This line assigns an array of indexes for data with no NaN values to I https://github.com/seolub/CAPP30239_FA22/blob/93ad55875089280423ef0d74217332174b31d458/final.js#L63-L68

Later in the code, we are joining the data to I and not data. https://github.com/seolub/CAPP30239_FA22/blob/93ad55875089280423ef0d74217332174b31d458/final.js#L152-L157

Hence, in line 154, we see .attr("cx", i => xScale(X[i])) instead of .attr("cx", d => xScale(d.X)) or .attr("cx", d => xScale(d.LifeExpectancy))

To hardcode this, the solution is .attr('fill', function (i) {return color_1(data[i].INCOMEPC)});

Method 2: Modify the function

You can either modify the function to make the BeeswarmChart take an argument that defines the values that should determine color, following the pattern on lines 63-68.

Additional Suggestion

In final.js, you have the BeeswarmChart function outside of the d3.csv('data/final_data.csv').then(data => {...}) function. Right now you are loading the same final_data.csv three times when once is enough.

I would suggest creating functions for each chart type. Without further abstracting the code, it can be as simple as just wrapping the code in the different files as a function, and removing the unnecessary d3.csv('data/final_data.csv').then(data => {...}).

Once you do that, you'll be able to reference each function within the only data promise/fetch, like this:


Promise.all([
  //load two datasets
  d3.csv("data/Final_data.csv"),
  d3.json("data/Boundaries - Community Areas (current).geojson"),
]).then(([data, chi]) => {

/// ColorScale is defined once, and passed to the different chart types
  const color = d3
  .scaleQuantile()
  .domain(d3.extent(data, (d) => d.INCOMEPC))
  .range(d3.schemeBlues[9]);

/// Each js file as a function
  drawBubbleChart(data, color);
  drawMap(data, chi, color);
  drawBeeswarmCharts(data, color);

})

seolub / CAPP30239_FA22