Chapter 4

College and Noncollege

Significance Tests

sigData = FileAttachment("chapter4_sigtests.csv").csv({ typed: true })

sigsDrug = sigData.filter(
  ({ drug }) => drug === select
)

significance = sigsDrug.filter(({ time }) => time === radio[0].time)
significance

Significance Legend in Graph

sigLegend1 = html`<style>
    caption {
      font-size: 9px;
    }

    table {
      margin-bottom: 0.5rem;
    }

    .small td {
        font-size: 9px;
        color: #000066;
    }

</style>
<table class="small" style="width: 250px; ">
  <caption style="color: #000066;"> <b><u>2023 Trends</b></u> </caption>
  <tr>
    <td>College Students</td>
    <td>1-Year Change</td>
    <td>${significance[0]?.oneyrchange}</td>
    <td>${significance[0]?.sig_oneyr}</td>
  </tr>
  <tr>
    <td> </td>
    <td>5-Year Change</td>
    <td>${significance[0]?.fiveyrchange}</td>
    <td>${significance[0]?.sig_fiveyr}</td>
  </tr>
  <tr style="background-color: white;">
    <td></td>
    <td>10-Year Change</td>
    <td>${significance[0]?.tenyrchange}</td>
    <td>${significance[0]?.sig_tenyr}</td>
  </tr>
    <tr>
    <td>Noncollege Young Adults</td>
    <td>1-Year Change</td>
    <td>${significance[1]?.oneyrchange}</td>
    <td>${significance[1]?.sig_oneyr}</td>
  </tr>
  <tr>
    <td> </td>
    <td>5-Year Change</td>
    <td>${significance[1]?.fiveyrchange}</td>
    <td>${significance[1]?.sig_fiveyr}</td>
  </tr>
  <tr style="background-color: white;">
    <td></td>
    <td>10-Year Change</td>
    <td>${significance[1]?.tenyrchange}</td>
    <td>${significance[1]?.sig_tenyr}</td>
  </tr>
</table>`


sigLegend2 = html`<style>
    caption {
      font-size: 9px;
    }

    table {
      margin-bottom: 0.5rem;
    }

   .small td {
        font-size: 9px;
        color: #000066;
    }

</style>
<table class="small" style="width: 250px; ">
  <caption style="color: #000066;"> <b><u>2023 Trends</b></u> </caption>
  <tr>
    <td>College Men</td>
    <td>1-Year Change</td>
    <td>${significance[2]?.oneyrchange}</td>
    <td>${significance[2]?.sig_oneyr}</td>
  </tr>
  <tr>
    <td> </td>
    <td>5-Year Change</td>
    <td>${significance[2]?.fiveyrchange}</td>
    <td>${significance[2]?.sig_fiveyr}</td>
  </tr>
  <tr style="background-color: white;">
    <td></td>
    <td>10-Year Change</td>
    <td>${significance[2]?.tenyrchange}</td>
    <td>${significance[2]?.sig_tenyr}</td>
  </tr>
  <tr>
    <td>College Women</td>
    <td>1-Year Change</td>
    <td>${significance[3]?.oneyrchange}</td>
    <td>${significance[3]?.sig_oneyr}</td>
  </tr>
  <tr>
    <td></td>
    <td>5-Year Change</td>
    <td>${significance[3]?.fiveyrchange}</td>
    <td>${significance[3]?.sig_fiveyr}</td>
  </tr>
  <tr>
    <td></td>
    <td>10-Year Change</td>
    <td>${significance[3]?.tenyrchange}</td>
    <td>${significance[3]?.sig_tenyr}</td>
  </tr>
</table>`

legendPlace = {if (collegedata[0]?.drug == "Cigarettes" && collegedata[0]?.time == "30 Day"){
  return "top: 60px; right: 10px;";
} else if (collegedata[0]?.drug == "Any Drug Other Than Cannabis" && collegedata[0]?.time == "30 Day"){
  return "bottom: 65px; right: 70px;";
} else {
  return "bottom: 65px; right: 50px;";
}
}

Combined Sig Plot with Legend

combosexPlot = html`
<div style="position: relative;">
  ${sexplot}
  <div style="position: absolute; ${legendPlace} border: solid 1px black;">
    ${sigLegend2}
  </div>
</div>`

combocollegePlot = html`
<div style="position: relative;">
  ${collegeplot}
  <div style="position: absolute; ${legendPlace} border: solid 1px black;">
    ${sigLegend1}
  </div>
</div>`

rawdata = FileAttachment("final_graph4_data.csv").csv({ typed: true })

alphabetical = rawdata.sort((a, b) => {
  if (a.drug && b.drug) {
    return a.drug.localeCompare(b.drug);
  } else {
    return 0; // Preserve the order if 'name' is missing
  }
});

parser = d3.timeParse("%Y")

format = d3.format(".4")

data = {
  const subset = alphabetical.map(
    ({ year, drug, estimate, time, sex, college }) => ({
      year: parser(year),
      year2: format(year),
      estimate: +estimate,
      drug: drug,
      time: time,
      sex: sex,
      college: college
    })
  );

  const filtered = subset.filter(thing => 
  thing.drug?.toLocaleLowerCase() === select?.toLocaleLowerCase()
);

  return filtered;
}

Citations

citation1 = html`<div style="max-width: 750px;"><p style="font-size: small;">Suggested citation: Patrick, M. E., Miech, R. A., Johnston, L. D., & O’Malley, P. M. (2024). Monitoring the Future Panel Study annual report: National data on substance use among adults ages 19 to 65, 1976-2023. Monitoring the Future Monograph Series. Ann Arbor: Institute for Social Research, The University of Michigan.</p></div>`

citation2 = html`<div style="max-width: 750px;"><p style="font-size: small;">Suggested citation: Patrick, M. E., Miech, R. A., Johnston, L. D., & O’Malley, P. M. (2024). Monitoring the Future Panel Study annual report: National data on substance use among adults ages 19 to 65, 1976-2023. Monitoring the Future Monograph Series. Ann Arbor: Institute for Social Research, The University of Michigan.</p></div>`

Download Data Button

import {PersistInput} from "@john-guerra/persist-input@latest"

viewof select = PersistInput("drug",
Inputs.select(
  rawdata.map((d) => d.drug),
  {
    value: "Alcohol",
    width: 175,
    unique: true
  }
))

viewof radio = {
  const values = d3.group(data, (d) => d.time);
  return Inputs.radio(values, {
    key: values.has("12 Month")
      ? "12 Month"
      : values.keys().next().value
  });
}

 sexdata = radio.filter(d => d.sex != ".")

 collegedata = radio.filter(d => d.college != ".")

html`<div> ${sexplot} </div>`

html`<div> ${collegeplot} </div>`

import {addTooltips} from "@mkfreeman/plot-tooltip"

formatter = d3.timeFormat("%Y")

color1 = d3.scaleOrdinal(
  ["College Students", "Noncollege Young Adults", "WHITE"],
  ["#59bbeb", "#6ac4a1", "#cca438"]
)

symbol1 = d3.scaleOrdinal(
  ["College Students", "Noncollege Young Adults"],
  ["circle", "square"]
)

collegeplot = addTooltips(
  Plot.plot({
    ariaLabel: "Adult and Young Adult Substance Use Line Charts",
    ariaDescription:
      "Drug Prevalence Chart showing estimates of use over time (1975 to 2022) in 19-30 and 35-50 year olds filtered by drug name and reporting interval. Currently showing ${radio[0].drug}",
    width: 900,
    height: 700,
    marginBottom: 50,
    style: {
      overflow: "visible",
      fontSize: 12
    },
      symbol: {
      domain: new Set(collegedata.map((d) => d.college)),
      range: [...new Set(collegedata.map((d) => d.college))].map(symbol1),
      legend: true,
      swatchSize: 23
    },
      color: {
      domain: new Set(collegedata.map((d) => d.college)),
      range: [...new Set(collegedata.map((d) => d.college))].map(color1),
    },
    y: {
      label: "Percentage (%)",
      labelAnchor: "center"
    },
    x: {
      type: "time",
      label: "Years",
      anchor: "bottom",
      labelAnchor: "center",
      domain: [new Date("1987-01-01"), new Date("2024-01-01")]
    },
    marks: [
      Plot.ruleY([0]),
      Plot.dot(radio, {
        x: "year",
        y: "estimate",
        r: 4,
        fill: "college",
        symbol: "college",
        title: (d) => `${d.college} \n ${formatter(d.year)}: ${d.estimate}%`
      }),
      Plot.line(radio, {
        x: "year",
        y: "estimate",
        z: (d) => // This creates the line breaks
          [
            d.college,
            d.Flag
          ].join(),
        stroke: "college"})
        ]
  }),
  { fill: "college" }
)

color2 = d3.scaleOrdinal(
  ["MEN", "WOMEN"],
  ["#59bbeb", "#6ac4a1"]
)

symbol2 = d3.scaleOrdinal(
  ["MEN", "WOMEN"],
  ["circle", "square"]
)


sexplot = addTooltips(
  Plot.plot({
    ariaLabel: "Adult and Young Adult Substance Use Line Charts",
    ariaDescription:
      "Drug Prevalence Chart showing estimates of use over time (1975 to 2022) in 19-30 and 35-50 year olds filtered by drug name and reporting interval. Currently showing ${radio[0].drug}",
    width: 900,
    height: 700,
    marginBottom: 50,
    style: {
      overflow: "visible",
      fontSize: 12
    },
      symbol: {
      domain: new Set(sexdata.map((d) => d.sex)),
      range: [...new Set(sexdata.map((d) => d.sex))].map(symbol2),
      legend: true,
      swatchSize: 23
    },
      color: {
      domain: new Set(sexdata.map((d) => d.sex)),
      range: [...new Set(sexdata.map((d) => d.sex))].map(color2),
    },
    y: {
      label: "Percentage (%)",
      labelAnchor: "center"
    },
    x: {
      type: "time",
      label: "Years",
      anchor: "bottom",
      labelAnchor: "center",
      domain: [new Date("1987-01-01"), new Date("2024-01-01")]
    },
    marks: [
      Plot.ruleY([0]),
      Plot.dot(sexdata, {
        x: "year",
        y: "estimate",
        r: 4,
        fill: "sex",
        symbol: "sex",
        title: (d) => `${d.sex} \n ${formatter(d.year)}: ${d.estimate}%`
      }),
      Plot.line(sexdata, {
        x: "year",
        y: "estimate",
        z: (d) => // This creates the line breaks
          [
            d.sex,
            d.Flag
          ].join(),
        stroke: "sex"})
        ]
  }),
  { fill: "sex" }
)

downloadButton = (data, filename) => {
  
  let downloadData;
  downloadData = new Blob([d3.csvFormat(data)], { type: "text/csv" });
  const size = (downloadData.size / 1024).toFixed(0);
  const button = DOM.download(
    downloadData,
    filename,
    `Download ${filename} Dataset (~${size} KB)`
  );
  return button;
}

name = `${radio[0].drug} - ${radio[0].time}`

data2 = radio.map(d => ({...d, year: d.year2}))

data3 = data2.map(({year2, ...keep}) => keep)

downloadData1 = downloadButton(data3, name)
downloadData2 = downloadButton(data3, name)