Public
Edited
Jan 4, 2023
1 fork
dogZip = FileAttachment("Actor2_REF.zip").zip()
fileNames = dogZip.filenames
n_articles_data_orig = d3.csvParse(await readMe, function(d) {
return {
MonthYear: parser(d.SQLDATE),
NumArticles: d.NumArticles,
Period: d.Period,
Actor1Code: d.Actor1Code,
Actor1CountryCode: d.Actor1CountryCode,
EventRootCode: d.EventRootCode
};
});
n_articles_data_roll = d3.rollup(n_articles_data_orig, v => d3.sum(v, d => d.NumArticles), d => d.MonthYear)
n_articles_data_roll_actor = d3.rollup(n_articles_data_orig, v => v.length, d => d.Actor1Code)
n_articles_data_roll_country = d3.rollup(n_articles_data_orig, v => v.length, d => d.Actor1CountryCode)
n_articles_data_roll_eventrootcode = d3.rollup(n_articles_data_orig, v => v.length, d => d.Actor1CountryCode, g => g.EventRootCode)
function unroll(rollup, keys, label = "value", p = {}) {
return Array.from(rollup, ([key, value]) =>
value instanceof Map
? unroll(value, keys.slice(1), label, Object.assign({}, { ...p, [keys[0]]: key } ))
: Object.assign({}, { ...p, [keys[0]]: key, [label] : value })
).flat();
}
n_articles_data = unroll(n_articles_data_roll, "MonthYear", "NumArticles")
n_articles_data_actor1 = unroll(n_articles_data_roll_actor, "Actor1Code", "frequency")
n_articles_data_country1 = unroll(n_articles_data_roll_country, "Actor1CountryCode", "frequency")
n_articles_data_eventrootcode = unroll(n_articles_data_roll_eventrootcode, "Actor1CountryCode", "frequency")
n_articles_data_actor1_sorted = n_articles_data_actor1.sort(function (a, b, c) {
var n_articles_data_actor1_sorted = a.A - b.frequency
return n_articles_data_actor1_sorted
});
n_articles_data_country1_sorted = n_articles_data_country1.sort(function (a, b) {
var n_articles_data_country1_sorted = b.frequency - a.frequency
return n_articles_data_country1_sorted
});
filter_null = (arry) => {
var results = arry.filter(obj => obj.A != "");
return results
};
filter_null(n_articles_data_actor1_sorted)
n_articles_data_actor1_filtered = filter_null(n_articles_data_country1_sorted)
n_articles_data_eventrootcode_filtered = filter_null(n_articles_data_eventrootcode)
n_articles_data_actor1_sorted_chart = filter_null(n_articles_data_actor1_sorted).slice(0,20)
n_articles_data_country1_sorted_chart = filter_null(n_articles_data_country1_sorted).slice(0,20)
countrydata = n_articles_data_actor1_filtered.filter(d => !cameoRC.has(d.A))
countrydata_eventrootcode = n_articles_data_eventrootcode_filtered.filter(d => !cameoRC.has(d.A))
geoCountryData = countrydata.map(d => Object({...d, 'id': cameoCC_id_2[d.A]}))
geoCountryData_eventrootcode = countrydata_eventrootcode.map(d => Object({...d, 'id': cameoCC_id_2[d.A]}))
selected_event_codes
geoCountryData_selected = {
let combined_array = [];
let results = [];
for (let i = 0; i <= selected_event_codes.length; i++) {
results = geoCountryData_eventrootcode.filter(obj => obj.c == selected_event_codes[i])
combined_array = combined_array.concat(results);
return combined_array;
}}
world = await (await fetch('https://vega.github.io/vega-datasets/data/world-110m.json')).json()
function searchCheckbox(
data, // An array of possible selectable options
options
) {
options = {
value: [],
optionsCheckboxes: undefined, // use this if you want to pass specific options to the checkboxes or the search
optionsSearch: {
filter: fullSearchFilter // searches in the whole word
},
...options
};
data = Array.from(data);
// options.value = options.value === undefined ? [] : options.value;
let checkboxes = Inputs.checkbox(data, options.optionsCheckboxes || options);
const search = Inputs.search(data, options.optionsSearch || options);
const btnAll = html`<button>All</button>`;
const btnNone = html`<button>None</button>`;
let selected = new Map(Array.from(options.value).map((d) => [d, true]));
function selectedToArray() {
return Array.from(selected.entries())
.filter(([k, v]) => v)
.map(([k, v]) => k);
}
function changeSome(sel, changeTo) {
for (let o of sel) selected.set(o, changeTo);
}
function selectedFromArray(sel) {
changeSome(data, false);
changeSome(sel, true);
}
let output = html`<output>`;
const component = html`${
options.label ? `<label>${options.label}</label><br>` : ""
}${search}
${btnAll}
${btnNone}
${output}
${checkboxes}`;
// Update the display whenever the value changes
Object.defineProperty(component, "value", {
get() {
return selectedToArray();
},
set(v) {
selectedFromArray(v);
}
});
btnAll.addEventListener("click", () => {
changeSome(search.value, true);
checkboxes.value = selectedToArray();
component.dispatchEvent(new Event("input", { bubbles: true }));
});
btnNone.addEventListener("click", () => {
changeSome(search.value, false);
checkboxes.value = selectedToArray();
component.dispatchEvent(new Event("input", { bubbles: true }));
});
component.value = selectedToArray();
search.addEventListener("input", (evt) => {
// Hide all the checkboxes that aren't in the searchbox result
for (let check of checkboxes.querySelectorAll("input")) {
if (search.value.includes(data[+check.value])) {
check.parentElement.style.display = "inline-block";
} else {
check.parentElement.style.display = "none";
}
}
// We don't really need to update when value when searching
// component.dispatchEvent(new Event("input", { bubbles: true }));
});
checkboxes.addEventListener("input", (evt) => {
// avoids duplicated events
evt.stopPropagation();
component.value = checkboxes.value;
component.dispatchEvent(new Event("input", { bubbles: true }));
});
return component;
}
function termFilter(term) {
return new RegExp(`(?:^.*|[^\\p{L}-])${escapeRegExp(term)}`, "iu");
}
function escapeRegExp(text) {
return text.replace(/[\\^$.*+?()[\]{}|]/g, "\\$&");
}
// https://github.com/observablehq/inputs/blob/main/src/search.js
function fullSearchFilter(query) {
const filters = `${query}`
.split(/\s+/g)
.filter((t) => t)
.map(termFilter);
return (d) => {
if (d == null) return false;
if (typeof d === "object") {
out: for (const filter of filters) {
for (const value of valuesof(d)) {
if (filter.test(value)) {
continue out;
}
}
return false;
}
} else {
for (const filter of filters) {
if (!filter.test(d)) {
return false;
}
}
}
return true;
};
}
function* valuesof(d) {
for (const key in d) {
yield d[key];
}
}
embed = require("vega-embed@5")
import {toc} from "@harrystevens/toc"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
