Harmonized Learning Outcomes - Harmonized Learning Outcomes (HLO) database

Plot = import("https://esm.sh/@observablehq/plot@0.6.13")
d = transpose(data)

distinct_cutoff = 10

disc_types = ['string', 'boolean']
disc_vars = vars.filter(d => disc_types.includes(d.type) && d.statistics.numDistinct <= distinct_cutoff).map(d => [d.label, d.name])
disc_opts = new Map([['', null]].concat(disc_vars))

cont_types = ['integer', 'float', 'date', 'datetime', 'time']
cont_vars = vars.filter(d => cont_types.includes(d.type) && d.statistics.numDistinct > distinct_cutoff).map(d => [d.label, d.name])
cont_opts = new Map(cont_vars)

d = Array(2023) [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, …]

distinct_cutoff = 10

disc_types = Array(2) ["string", "boolean"]

disc_vars = Array(5) [Array(2), Array(2), Array(2), Array(2), Array(2)]

disc_opts = Map(6) {"" => null, "Subject (math, reading, science)" => "subject", "Schooling level (primary or secondary)" => "level", "The source test for learning data" => "sourcetest", "Region" => "region", "Income group" => "incomegroup"}

cont_types = Array(5) ["integer", "float", "date", "datetime", "time"]

cont_vars = Array(7) [Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2)]

cont_opts = Map(7) {"Year" => "year", "Harmonized Learning Outcome (HLO)" => "hlo", "HLO standard error" => "hlo_se", "Harmonized Learning Outcome (HLO) - male" => "hlo_m", "HLO standard error - male" => "hlo_m_se", "Harmonized Learning Outcome (HLO) - female" => "hlo_f", "HLO standard error - female" => "hlo_f_se"}

viewof x_var = Inputs.select(cont_opts, {value: Array.from(cont_opts.values())[0], label: "X axis"})
viewof y_var = Inputs.select(cont_opts, {value: Array.from(cont_opts.values())[1], label: "Y axis"})
viewof color_var = Inputs.select(disc_opts, {value: Array.from(disc_opts.values())[1], label: "Color"})

default_color = d3.schemeCategory10[0]
plt_color = color_var || default_color

all_vars = cont_vars.concat(disc_vars)
channels = Object.fromEntries(all_vars.map(k => [k[1], k[1]]))

viewof scatter = Plot.plot({
  style: { fontFamily: "var(--sans-serif)" },
  inset: 8,
   grid: true,
      x: { tickFormat: "" },
  color: { legend: true },
  marks: [
    Plot.dot(d, {
      x: x_var,
      y: y_var,
      stroke: plt_color,
      tip: true,
      channels: channels
    }),
  ]
})

viewof x_hist = Plot.plot({
  style: { fontFamily: "var(--sans-serif)" },
  width: 640/2,
      x: { tickFormat: "" },
      y: { grid: true },
  marks: [
    Plot.rectY(d, Plot.binX({y: "count"}, {x: x_var, fill: plt_color})),
    Plot.ruleY([0])
  ]
})

viewof y_hist = Plot.plot({
  style: { fontFamily: "var(--sans-serif)" },
  width: 640/2,
      y: { grid: true },
  marks: [
    Plot.rectY(d, Plot.binX({y: "count"}, {x: y_var, fill: plt_color})),
    Plot.ruleY([0])
  ]
})

html`<div style="display: flex; flex-wrap: wrap; align-items: flex-end;">
 <div style="flex-basis: 25%"> ${viewof y_hist} </div>
 <div style="flex-basis: 50%"> ${viewof scatter} </div>
 <div style="flex-basis: 25%"> ${viewof x_hist} </div>
</div>`

all_vars = Array(12) [Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2)]

channels = Object {year: "year", hlo: "hlo", hlo_se: "hlo_se", hlo_m: "hlo_m", hlo_m_se: "hlo_m_se", hlo_f: "hlo_f", hlo_f_se: "hlo_f_se", subject: "subject", level: "level", sourcetest: "sourcetest", region: "region", incomegroup: "incomegroup"}

import {interval} from '@mootari/range-slider' // two ended slider

viewof map_var = Inputs.select(cont_opts, {value: Array.from(cont_opts.values())[1], label: "Measure"})
viewof years = interval([d3.min(data.year), d3.max(data.year)], {step: 1, label: "Years"})
viewof bins = Inputs.range([2, 10], {value: 5, step: 1, label: "Bins"})

OJS Runtime Error (line 3, column 16)

interval is not defined

OJS Runtime Error (line 3, column 16)

interval is not defined

world = FileAttachment("countries-110m.json").json()
countries = topojson.feature(world, world.objects.countries)
//land = topojson.feature(world, world.objects.land)

slim3 = FileAttachment("slim-3.json").json()
codes = new Map(slim3.map(d => [d["country-code"], d["alpha-3"]]))

td = transpose(data)
tdf = td.filter(d => d.year >= years[0] && d.year <= years[1])
dg = d3.rollup(tdf, v => d3.mean(v, d => d[map_var]), d => d.code)

viewof map = Plot.plot({
  style: { fontFamily: "var(--sans-serif)" },
  projection: "equal-earth",
  marks: [
    Plot.sphere(),
    Plot.graticule(),
    Plot.geo(countries, Plot.centroid({
      stroke: "black",
      strokeWidth: 0.5,
      fill: d => dg.get(codes.get(d.id)),
      tip: true,
      channels: {country: d => d.properties.name}
    })),
  ],
  color: {
    type: "quantile",
    n: bins,
    scheme: "blues", 
    unknown: "#ddd",
    legend: true, 
    label: "Mean " + map_var,
    tickFormat: d => Math.round(d)
  }
})

html`<div style="display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center;">
 <div style="flex-basis: 50%"> ${viewof map} </div>
</div>`

td = Array(2023) [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, …]

OJS Runtime Error

interval is not defined

OJS Runtime Error

interval is not defined

OJS Runtime Error

interval is not defined

OJS Runtime Error

interval is not defined

OJS Runtime Error

interval is not defined