3c:null 3d:["$","title",null,{"children":"Economic InEquality in South Afrida | Thomas Burleson | Observable"}] 43:T10ff,table = (data, options) => { options = Object.assign({}, defaultOptions, options); const { sortable, rank, paged } = options; let sortKey = undefined; let sortDirection = true; let page = 0; if (sortable && rank) { throw new Error("A table can either be ranked or sortable, but not both"); } let columns = Object.keys(data[0]).map((key) => { const opts = options.columns[key] || {}; return { key: key, type: opts.type || typeof data[0][key], options: opts }; }); function bake() { if (sortKey) { data = data.slice().sort((a, b) => { let as = a[sortKey]; let bs = b[sortKey]; // make this sort stable if (as == bs) return JSON.stringify(a).localeCompare(JSON.stringify(b)); let res = as > bs ? 1 : as < bs ? -1 : 0; if (sortDirection) res = -res; return res; }); } let offset = page * paged; let rows = data.slice(offset, offset + (paged || data.length)); let pages = paged ? Math.ceil(data.length / paged) : 1; return html`

${ options.header === false ? `` : html` ${rank ? html`` : ""} ${columns.map((c) => { return th(c, sortKey, sortDirection, sortable); })} ` } ${rows.map( (row, i) => html` ${rank ? html`` : ""} ${columns.map((c) => { let displayValue = (c.options.formatter || identity)( row[c.key], i, row ); if ( displayValue instanceof window.HTMLElement && displayValue.tagName == "TD" ) { return displayValue; } return html``; })} ` )}


${offset + i + 1}	${displayValue}

${ pages > 1 ? html`` : "" }

`; } let dom = bake(); function rerender() { dom.firstChild.remove(); dom.appendChild(bake().firstChild); } dom.addEventListener("click", (e) => { if (e.target.tagName === "TH" && sortable) { if (sortKey == e.target.dataset.key) { sortDirection = !sortDirection; } sortKey = e.target.dataset.key; rerender(); } if (e.target.tagName === "BUTTON") { if (e.target.dataset.action) { switch (e.target.dataset.action) { case "next": page++, rerender(); break; case "previous": page--, rerender(); break; } } else if (e.target.dataset.page) { (page = parseInt(e.target.dataset.page)), rerender(); } } }); return dom; }44:[{"id":"ddee132a230fedefe1ad7b16b18e53433f77337f117bd03953708f11cd4a2564e29634a9b77740fd9bf17594cc40324556f52e4ff22b209465f87e1f0e91d23a","href":"https://static.observableusercontent.com/files/ddee132a230fedefe1ad7b16b18e53433f77337f117bd03953708f11cd4a2564e29634a9b77740fd9bf17594cc40324556f52e4ff22b209465f87e1f0e91d23a","name":"WID_data_ZA.csv","type":"text/csv","lastModified":1697903782664.342,"size":21403805}] 41:{"id":"90d57ae25c1acd79","slug":null,"title":"Economic InEquality in South Afrida","thumbnail":"c8ec11a8a03fc9419a0c83dee523cfb56c463aefd3d7b8c2649cf75904a47db8","access_level":"public","create_time":"$D2023-10-21T15:55:16.945Z","update_time":"$D2024-02-11T15:14:20.396Z","view_time":null,"first_public_time":"$D2023-10-21T15:55:16.945Z","has_unpublished_edits":null,"fork":{"id":"988dc6795f06f62a","slug":"plot-dual-axis","title":"Plot: Dual axis chart","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"1325278fc6c18073","login":"mindspace","name":"Thomas Burleson","avatar_url":"https://avatars-next.observableusercontent.com/7046fb752cc344d406d098208e9509886c98a6d8d8e0b3c52b88a1cc42ade407","tier":"starter_2024","bio":"Web FE Architect (Angular, React, NextJS) with passion of visualizations, performance, and UX. Thomas is an architecture, technical lead, code, and mentor for enterprise FE developers and teams."},"version":368,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f98840efa0f3030c","login":"mindspace","name":"Thomas Burleson","avatar_url":"https://avatars-next.observableusercontent.com/7046fb752cc344d406d098208e9509886c98a6d8d8e0b3c52b88a1cc42ade407","tier":null,"bio":"Web FE Architect (Angular, React, NextJS) with passion of visualizations, performance, and UX. Thomas is an architecture, technical lead, code, and mentor for enterprise FE developers and teams."}],"members":[{"type":"individual","id":"f98840efa0f3030c","login":"mindspace","name":"Thomas Burleson","avatar_url":"https://avatars-next.observableusercontent.com/7046fb752cc344d406d098208e9509886c98a6d8d8e0b3c52b88a1cc42ade407","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Economic InEquality in South Afrida","cells":[{"id":190,"value":"# Economic InEquality in South Afrida\n\nLet's explore the evolution of economic inequality in South Africa. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":268,"value":"We can load data from the [World Inequality Database](https://wid.world/country/south-africa/). ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":272,"value":"## Now let's get the yearly income based on population. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":169,"value":"WID = d3\n .dsvFormat(\";\")\n .parse(await FileAttachment(\"WID_data_ZA.csv\").text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"We use the following fields:","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":237,"value":"Filters = {\n const PreTax = \"sptincj992\"; // @see 'variable' column\n const Top10 = \"p99p100\"; // @see 'percentile' column\n const Bottom50 = \"p0p50\"; // @see 'percentile' column\n return { PreTax, Top10, Bottom50 };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"We only publish 3 columns of data (year, group, share) sorted by year","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":333,"value":"{\n let data = Incomes.map(({ year, percentile, value }) => ({\n year,\n group: percentile,\n share: value\n }));\n let view = table(data, {\n sortable: true,\n paged: Math.ceil(Incomes.length / 10),\n columns: {\n year: {\n formatter(val, i) {\n return html`${val}`;\n }\n }\n }\n });\n\n return view;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"/**\n * Only publish 3 columns of data (year, percentile, value) sorted by year\n */\nIncomes = WID.filter((row) => {\n const perc = row.percentile;\n return (\n row.variable === Filters.PreTax &&\n (perc === Filters.Top10 || perc === Filters.Bottom50)\n );\n})\n .map(({ year, percentile, value }) => {\n const row = { year, percentile, value: Math.floor(value * 1000) / 10 };\n // Rename line 'Labels'\n row.percentile = row.percentile === \"p0p50\" ? \"Bottom 50%\" : \"Top 1%\";\n row.date = new Date(row.year, 0, 1); // convert to Date for auto-formatting in plot\n\n return row;\n })\n .sort((a, b) => a.date - b.date)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":292,"value":"#### Comparison of National Income (South Africa)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":278,"value":"{\n let startDate = new Date(startYear, 0, 1);\n let IncomeRange = Incomes.filter((r) => r.date > startDate);\n\n let plot = Plot.plot({\n style: \"overflow: visible\",\n y: { grid: true, label: \"Share of National Income (%)\" },\n marks: [\n Plot.ruleY([0]),\n Plot.lineY(IncomeRange, { x: \"date\", y: \"value\", stroke: \"percentile\" }),\n Plot.text(\n IncomeRange,\n Plot.selectLast({\n x: \"date\",\n y: \"value\",\n z: \"percentile\",\n text: \"percentile\",\n textAnchor: \"start\",\n dx: 3\n })\n )\n ]\n });\n\n return plot;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"viewof startYear = Inputs.range(\n [Incomes[0].year, Incomes[Incomes.length - 1].year],\n {\n value: 1,\n step: 1,\n label: \"Start Year\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":322,"value":"th = (c, sortKey, sortDirection, sortable) => {\n let {\n options: { title }\n } = c;\n let sortIndicator = sortKey && sortDirection ? \"↑\" : \"↓\";\n let arrow = html`${sortIndicator}`;\n let displayedTitle = title !== undefined ? title : c.key;\n return c.type === \"number\"\n ? html`\n ${arrow}${displayedTitle}\n `\n : html`\n ${displayedTitle}${arrow}\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"defaultOptions = ({ columns: {}, style: \"normal\", paged: 25 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"identity = (i) => i","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"tipAmount = 20","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"$43","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W44","stdlib":"1"}} 42:"$41:body"