Skip to content

D3/React for utdanning.no og sammenlign.utdanning.no's arbeidsmarkedsstatistikk.

Notifications You must be signed in to change notification settings

utdanningno/utd-arbeidsmarked_visualisering

Repository files navigation

Labour market data visualization tools

This module contains the dataviz tool to generate working market bar/tree charts for the utdanning.no website.

Developed for utdanning.no by Lapidus interactive in 2019.

Components

There's a component for each context. Under the hood they use similar components to render the visualizations. The individual contexts provide a little bit more control in case we need to add more UI elements or built-in disaggregations.

<Context2 /> Yrkesbeskrivelser

Visualization suitable for wide display as visualization within the collapsible section on ~500 web pages.

import { Context2 } from "job-market-visuals"

const MyComponent = () => {
  return (
    <div>
      <Context2
        id="y_sykepleier"
        direction="uno_id2styrk08"
        limit={8}
      />
    </div>
  )
}

You can freely disaggregate data by using the disaggregateBy and disaggregateLabels props.

Props

Name Type default
id String y_sykepleier
direction String uno_id2styrk08
layout bars/tree bars
limit Number 8
disaggregateBy Array of Strings
disaggregateLabels Array of Strings
colors Object
missingDataText String Missing data
moreLabel String
tooltipContent Function
toooltipStyles Object
tooltipCaretStyles Object

<Context 3/> Minified version within a column in product comparison service

<Context 3/> is optimized for use on sammenlign.utdanning.no.

import { Context3 } from "job-market-visuals"

const MyComponent = () => {
  return (
    <div>
      <Context3
        id="y_sykepleier"
        direction="uno_id2styrk08"
        limit={8}
      />
    </div>
  )
}

Props

You can freely disaggregate data by using the disaggregateBy and disaggregateLabels props.

Name Type default
id String y_sykepleier
direction String uno_id2styrk08
layout bars/tree bars
limit Number 8
disaggregateBy Array of Strings
disaggregateLabels Array of Strings
colors Object
missingDataText String Missing data
moreLabel String
tooltipContent Function
toooltipStyles Object
tooltipCaretStyles Object

Hooks

useData

The useData hook can be used to load relevant data from the API endpoint. To use it, just include an id and a direction.

import { useData } from "job-market-visuals"

const MyComponent = () => {

  const data = useData("y_sykepleier", "uno_id2styrk08")

  return (
    <div>{"..."}</div>
  )
}

Layouts

To determine the layout (bars/tree), you can pass a layout prop with a string of either bars or tree to the visualizaiton component.

<Context2
  id="u_bioingeniorfag"
  limit={8}
  layout="tree"
/>

Disaggregations

In order for the chart to show a disaggregated view of the data, you have to pass an array of strings to identify which keys to use for disaggregation.

Here is an example of the gender disaggregated chart:

<Context2
  id="u_bioingeniorfag"
  limit={8}
  disaggregatedBy={["antall_kvinner", "antall_menn", "antall_ukjent_kjonn"]}
  disaggregateLabels={["kvinner", "menn", "ukjent kjonn"]}
/>

Here is an example of the sector disaggregated chart:

<Context2
  id="u_bioingeniorfag"
  limit={8}
  disaggregatedBy={["antall_offentlig", "antall_privat", "antall_ukjent_sektor"]}
  disaggregateLabels={["Offentlig", "Privat", "Ukjent sektor"]}
/>

Here is an example of the age disaggregations:

<Context2
  id="u_bioingeniorfag"
  limit={8}
  disaggregatedBy={["antall_40", "over_40"]}
  disaggregateLabels={["under 40 år", "over 40 år"]}
/>

Here is an example of the experience disaggregations:

Note: The field name antall_710 is misleading, actually means education competed 4-10 years ago.

<Context2
  id="u_bioingeniorfag"
  limit={8}
  disaggregatedBy={["antall_13", "antall_710", "other_experience"]}
  disaggregateLabels={["Fullført utdanning for 1-3 år siden", "Fullført utdanning for 4-10 år siden", "alle"]}
/>

*Note: Don't forget to pass disaggregateLabels in order to provide a user-friendly string to display in the tooltips. By default the basic amount of labeled as "personer".

Colors

In order to determine the look of the visualization, you can pass a set of colors to the visualization component. Here are all the options:

<Context2
  id="u_bioingeniorfag"
  limit={8}
  colors={{
    text: "#333",
    textTree: "#333",
    primary: "#ff9800",
    disaggregations: ["#ffcc80", "#f57c00", "#ddd"],
    notWorking: "#ff5722",
    unemployed: "#f44336",
    inEducation: "#ff9800",
    selfEmployed: "#ff9800",
    other: "#9e9e9e",
  }}
/>

About

D3/React for utdanning.no og sammenlign.utdanning.no's arbeidsmarkedsstatistikk.

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published