search

seolub / CAPP30239_FA22

0 stars 0 forks source link

Nov-09 OH #2

Open sandywij opened 2 years ago

sandywij commented 2 years ago

filter beewarm with zeros for ACT grade attainment (final.js)

https://github.com/seolub/CAPP30239_FA22/blob/dd86cbdfdd1ea5924884b98df820d4b66a954207/final.js#L11-L16

replace with

  chart2 = BeeswarmChart(
    data.filter((d) => d.ACT_GRADE11 > 0),
    {
      x: (d) => Number(d.ACT_GRADE11), //when zero
      xLabel: "ACT_GRADE11 (Percentile) →",
      title: (d) => d.Community_Area_Number,
      width: 600,
    }
  );

References: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

sandywij commented 2 years ago

explore bubble issues (bubble_plot.js) - currently not plotted. Check also domain issues

https://github.com/seolub/CAPP30239_FA22/blob/dd86cbdfdd1ea5924884b98df820d4b66a954207/bubble_plot.js#L18

Should be

d3.csv("data/final_data.csv").then((data) => {

without the then method, not all of the data has been loaded, so some functions like d3.max can't run properly

sandywij commented 2 years ago

work with geojson data (chicago.js): how to map, how to access data

Code Snippet

``` const height = 600, width = 600; const svg = d3 .select("#chart") .append("svg") .attr("viewBox", [0, 0, width, height]); Promise.all([ //load two datasets d3.csv("data/Final_data.csv"), d3.json("data/Boundaries - Community Areas (current).geojson"), ]).then(([data, chi]) => { const dataById = {}; for (let d of data) { d.INCOMEPC = +d.INCOMEPC; //convert in integer //making a lookup table from the array (unemployment data) dataById[d["Community_Area_Number"]] = d; } const counties = chi; // linear color scale const color = d3 .scaleLinear() .domain(d3.extent(data, (d) => d.INCOMEPC)) .range(["white", "red"]); // Chicago specific projection let projection = d3 .geoAlbers() .center([0, 41.83]) .rotate([87.65, 0]) .parallels([40, 45]) .scale(70000) .translate([width / 2, height / 2]); let geoGenerator = d3.geoPath().projection(projection); svg .append("g") .selectAll("path") .data(counties.features) .join("path") .attr("d", geoGenerator) .attr("fill", (d) => { return dataById[d.properties.area_num_1]?.INCOMEPC ? color(+dataById[d.properties.area_num_1].INCOMEPC) : "blue"; }) .attr("stroke", "black"); }); ```

Resource: d3indepth.com/geographic/

d3 Colors Scales and how to choose

https://observablehq.com/@d3/quantile-quantize-and-threshold-scales