Plot.plot({
  title: "Blog Posts by Publication Year",
  marginLeft: 100,
  marginRight: 100,
  height: 400,
  x: {
    tickRotate: -30,
    tickFormat: "",
    label: null
  },
  y: {
    grid: true,
    label: null
  },
  style: {
    fontSize: 11,
  },
  marks: [
    Plot.ruleY([0]),
    Plot.rectY(posts_by_year, {
      x: "key",
      y: "doc_count",
      interval: 1, 
      href: d => `https://rogue-scholar.org/search?q=&f=publication_date:${d.key}&sort=oldest`,
      target: "_blank",
      fill: "#ff725c",
    }),
    Plot.text(posts_by_year, {
      text: d => `${d.doc_count}`,
      x: "label",
      y: "doc_count",
      dx: -10,
      dy: -6,
      textAnchor: "start",
    })
  ],
})

Plot.plot({
  title: "Blog Posts by Language",
  marginLeft: 150,
  marginRight: 60,
  height: 360,
  x: { axis: null },
  y: { label: null },
  style: {
    fontSize: 14,
  },
  marks: [
    Plot.barX(posts_by_language, {
      x: "doc_count",
      y: "label",
      href: d => `https://rogue-scholar.org/search?q=&f=language:${d.key}&sort=newest`,
      target: "_blank",
      sort: { y: "x", reverse: true, limit: 5 },
      fill: "label",
    }),

    Plot.text(posts_by_language, {
      text: d => `${(d.doc_count / post_count).toLocaleString(undefined, {
        style: "percent", 
        maximumSignificantDigits: 2
      })}`,
      y: "label",
      x: "doc_count",
      textAnchor: "start",
      dx: 5,
    })
  ]
})

Plot.plot({
  title: "Blog Posts by OECD Fields of Science and Technology",
  marginLeft: 540,
  marginRight: 60,
  height: 800,
  x: { axis: null },
  y: { label: null },
  style: {
    fontSize: 11,
  },
  marks: [
    Plot.barX(posts_by_category, {
      x: "cat_count",
      y: "label",
      href: d => `https://rogue-scholar.org/search?q=&f=subject:${d.category}&sort=newest`,
      target: "_blank",
      fill: "parent",
    }),
    Plot.text(posts_by_category, {
      text: d => `${(d.cat_count / post_count).toLocaleString(undefined, {
        style: "percent", 
        maximumSignificantDigits: 2
      })}`,
      y: "label",
      x: "cat_count",
      textAnchor: "start",
      dx: 5,
    })

  ]
})

Plot.plot({
  title: "Blog Posts by Blogging Platform",
  marginLeft: 150,
  marginRight: 60,
  height: 360,
  x: { axis: null },
  y: { label: null },
  style: {
    fontSize: 14,
  },
  marks: [
    Plot.barX(posts_by_generator, {
      x: "gen_count",
      y: "generator",
      href: d => `https://rogue-scholar.org/search?q=platform:${d.generator}&sort=newest`,
      target: "_blank",
      sort: { y: "x", reverse: true, limit: 9 },
      fill: "generator",
    }),

    Plot.text(posts_by_generator, {
      text: d => `${(d.gen_count / post_count).toLocaleString(undefined, {
        style: "percent", 
        maximumSignificantDigits: 2
      })}`,
      y: "generator",
      x: "gen_count",
      textAnchor: "start",
      dx: 5,
    })
  ]
})