Public
Edited
Dec 1, 2022
data = d3.csvParse(await FileAttachment("before.csv").text(), function(d) {
return {
GLOBALEVENTID: d.GLOBALEVENTID,
SQLDATE: d.SQLDATE,
Actor1Code: d.Actor1Code,
Actor1Name: d.Actor1Name,
Actor1CountryCode: d.Actor1CountryCode,
Actor1Type1Code: d.Actor1Type1Code,
Actor2Code: d.Actor2Code,
Actor2Name: d.Actor2Name,
Actor2CountryCode: d.Actor2CountryCode,
Actor2Type1Code: d.Actor2Type1Code,
Actor2CountryCode: d.Actor2CountryCode,
Actor2Type1Code: d.Actor2Type1Code,
IsRootEvent: d.IsRootEvent,
EventCode: d.EventCode,
EventBaseCode: d.EventBaseCode,
EventRootCode: d.EventRootCode,
QuadClass: d.QuadClass,
GoldsteinScale: d.GoldsteinScale,
NumMentions: d.NumMentions,
NumArticles: d.NumArticles,
AvgTone: d.AvgTone,
Actor1Geo_FullName: d.Actor1Geo_FullName,
Actor2Geo_FullName: d.Actor2Geo_FullName,
ActionGeo_FullName: d.ActionGeo_FullName,
SOURCEURL: d.SOURCEURL,
Period: d.Period
};
});
dogZip = FileAttachment("AK_before_after_merged_filtered.zip").zip()
fileNames = dogZip.filenames
readMe = dogZip.file("AK_before_after_merged_filtered.csv").text()
parser = d3.timeParse("%Y%m%d")
parser2 = d3.timeParse("%Y%m")
data2 = d3.csvParse(await readMe, function(d) {
return {
GLOBALEVENTID: d.GLOBALEVENTID,
SQLDATE2: parser(d.SQLDATE),
Actor1Code: d.Actor1Code,
Actor1Name: d.Actor1Name,
Actor1CountryCode: d.Actor1CountryCode,
Actor1Type1Code: d.Actor1Type1Code,
Actor2Code: d.Actor2Code,
Actor2Name: d.Actor2Name,
Actor2CountryCode: d.Actor2CountryCode,
Actor2Type1Code: d.Actor2Type1Code,
Actor2CountryCode: d.Actor2CountryCode,
Actor2Type1Code: d.Actor2Type1Code,
IsRootEvent: d.IsRootEvent,
EventCode: d.EventCode,
EventBaseCode: d.EventBaseCode,
EventRootCode: d.EventRootCode,
QuadClass: d.QuadClass,
GoldsteinScale: d.GoldsteinScale,
NumMentions: d.NumMentions,
NumArticles: d.NumArticles,
AvgTone: d.AvgTone,
Actor1Geo_FullName: d.Actor1Geo_FullName,
Actor2Geo_FullName: d.Actor2Geo_FullName,
ActionGeo_FullName: d.ActionGeo_FullName,
SOURCEURL: d.SOURCEURL,
Period: d.Period
};
});
data2.length
chart_data = d3.csvParse(await readMe, function(d) {
return {
MonthYear: parser(d.SQLDATE),
Column: d.Actor1CountryCode,
Period: d.Period
};
});
convert = (arry) => {
const res = {};
arry.forEach((obj) => {
const key = `${obj.MonthYear}${obj.Column}${obj.Period}`;
if (!res[key]) {
res[key] = { ...obj, count: 0 };
};
res[key].count += 1;
});
return Object.values(res);
};
count_data = convert(chart_data)
add_new_obj = (arry) => {
const res = {};
arry.forEach((obj) => {
const key = `${obj.MonthYear}${obj.Column}${obj.Period}${obj.count}`;
res[key] = { ...obj, n_count: 0 };
});
return Object.values(res);
};
add_new_obj2 = (arry) => {
const res = {};
arry.forEach((obj) => {
const key = `${obj.MonthYear}${obj.Column}${obj.Period}${obj.count}`;
if (obj.Period = "before") {
res[key] = { ...obj, n_count:n_before, norm_count: obj.count/n_before };
};
if (obj.Period = "after") {
res[key] = { ...obj, n_count: n_after, norm_count: obj.count/n_after };
};
});
return Object.values(res);
};
add_new_obj(count_data)
add_new_obj2(count_data).length
norm_data = add_new_obj2(count_data)
norm_data
norm_data_test=norm_data.filter((d,i) => i % 25 ==0);
norm_data.sort(function (a, b) {
return a.norm_count - b.norm_count;
});
norm_data
filter_null = (arry) => {
var results = arry.filter(obj => obj.Column != "");
return results
};
filter_null(norm_data)
sortedData = z.sortByCol('norm_count', 'des', filter_null(norm_data))
sortedData_top100 = sortedData.slice(0,100)
filter_before = (arry) => {
var results = arry.filter(obj => {
return obj.MonthYear < incident_monthyear
});
return results
};
filter_after = (arry) => {
const results = arry.filter(obj => {
return obj.MonthYear > incident_monthyear
});
return results
};
before = filter_before(sortedData)
before_top100 = before.slice(0,100)
after = filter_after(sortedData)
after_top100 = after.slice(0,100)
viewof simpleBar_before = vl.markBar({size: 30}) // Make a bar chart
.data(before)
.encode(
vl.x({"timeUnit": "yearmonth"}).fieldT("MonthYear"),
vl.y().fieldQ("norm_count"),
vl.color().fieldN("Column"),
vl.tooltip([vl.fieldT("MonthYear"),vl.fieldN("Column")])
)
.width(900)
.height(500)
.render()
viewof simpleBar_after = vl.markBar({size: 30}) // Make a bar chart
.data(after) // Using the normalized data - top 100 sorted on norm_count
.encode(
vl.x({"timeUnit": "yearmonth"}).fieldT("MonthYear"),
vl.y().fieldQ("norm_count"),
vl.color().fieldN("Column"),
vl.tooltip([vl.fieldT("MonthYear"),vl.fieldN("Column")])
)
.width(900)
.height(500)
.render()
viewof simpleBar = vl.markBar({size: 30}) // Make a bar chart
.data(sortedData) // Using the normalized data
.encode(
vl.x({"timeUnit": "yearmonth"}).fieldT("MonthYear"),
vl.y().fieldQ("norm_count"),
vl.color().fieldN("Column"),
vl.tooltip([vl.fieldT("MonthYear"),vl.fieldN("Column")])
)
.width(900)
.height(500)
.render()
viewof before_top100_chart = vl.markBar({size: 30}) // Make a bar chart
.data(before_top100) // Using the normalized data - top 100 sorted on norm_count
.encode(
vl.x({"timeUnit": "yearmonth"}).fieldT("MonthYear"),
vl.y().fieldQ("norm_count"),
vl.color().fieldN("Column"),
vl.tooltip([vl.fieldT("MonthYear"),vl.fieldN("Column")])
)
.width(900)
.height(500)
.render()
viewof after_top100_chart = vl.markBar({size: 30}) // Make a bar chart
.data(after_top100) // Using the normalized data - top 100 sorted on norm_count
.encode(
vl.x({"timeUnit": "yearmonth"}).fieldT("MonthYear"),
vl.y().fieldQ("norm_count"),
vl.color().fieldN("Column"),
vl.tooltip([vl.fieldT("MonthYear"),vl.fieldN("Column")])
)
.width(900)
.height(500)
.render()
viewof simpleBar_top100 = vl.markBar({size: 30}) // Make a bar chart
.data(sortedData_top100) // Using the normalized data - top 100 sorted on norm_count
.encode(
vl.x({"timeUnit": "yearmonth"}).fieldT("MonthYear"),
vl.y().fieldQ("norm_count"),
vl.color().fieldN("Column"),
vl.tooltip([vl.fieldT("MonthYear"),vl.fieldN("Column")])
)
.width(900)
.height(500)
.render()
viewof before_top100_chart_date = vl.markBar({size: 5}) // Make a bar chart
.data(before_top100) // Using the normalized data - top 100 sorted on norm_count
.encode(
vl.x({"timeUnit": "yearmonthdate"}).fieldT("MonthYear").axis({"labelAngle":"-90", "tickCount":"date"}),
vl.y().fieldQ("norm_count"),
vl.color().fieldN("Column"),
vl.tooltip([vl.fieldT("MonthYear"),vl.fieldN("Column")])
)
.width(900)
.height(500)
.render()
viewof after_top100_chart_date = vl.markBar({size: 5}) // Make a bar chart
.data(after_top100) // Using the normalized data - top 100 sorted on norm_count
.encode(
vl.x({"timeUnit": "yearmonthdate"}).fieldT("MonthYear").axis({"labelAngle":"-90", "tickCount":"date"}),
vl.y().fieldQ("norm_count"),
vl.color().fieldN("Column"),
vl.tooltip([vl.fieldT("MonthYear"),vl.fieldN("Column")])
)
.width(900)
.height(500)
.render()
viewof simpleBar_top100_date = vl.markBar({size: 5}) // Make a bar chart
.data(sortedData_top100) // Using the normalized data - top 100 sorted on norm_count
.encode(
vl.x({"timeUnit": "yearmonthdate"}).fieldT("MonthYear").axis({"labelAngle":"-90", "tickCount":"date"}),
vl.y().fieldQ("norm_count"),
vl.color().fieldN("Column"),
vl.tooltip([vl.fieldT("MonthYear"),vl.fieldN("Column")])
)
.width(900)
.height(500)
.render()
test = sortedData.slice(0,10)
filter_before_1 = (arry) => {
var results = arry.filter(obj => {
return (obj.MonthYear < incident_monthyeardate && obj.MonthYear > incident_monthyeardate_1monthbefore)
});
return results
};
filter_after_1 = (arry) => {
var results = arry.filter(obj => {
return (obj.MonthYear > incident_monthyeardate && obj.MonthYear < incident_monthyeardate_1monthafter)
});
return results
};
before_1month = filter_before_1(sortedData)
before_1month_top100 = before_1month.slice(0,100)
after_1month = filter_after_1(sortedData)
after_1month_top100 =after_1month.slice(0,100)
viewof simpleBar_top100_date_1month_before = vl.markBar({size: 10}) // Make a bar chart
.data(before_1month_top100)
.encode(
vl.x({"timeUnit": "yearmonthdate"}).fieldT("MonthYear").axis({"labelAngle":"-90", "tickCount":"date"}),
vl.y().fieldQ("norm_count"),
vl.color().fieldN("Column"),
vl.tooltip([vl.fieldT("MonthYear"),vl.fieldN("Column")])
)
.width(900)
.height(500)
.render()
viewof simpleBar_top100_date_1month_after = vl.markBar({size: 10}) // Make a bar chart
.data(after_1month_top100)
.encode(
vl.x({"timeUnit": "yearmonthdate"}).fieldT("MonthYear").axis({"labelAngle":"-90", "tickCount":"date"}),
vl.y().fieldQ("norm_count"),
vl.color().fieldN("Column"),
vl.tooltip([vl.fieldT("MonthYear"),vl.fieldN("Column")])
)
.width(900)
.height(500)
.render()
combined = {
const simpleBar_top100_date_1month_before = vl.markBar({size: 10}) // Make a bar chart
.data(before_1month_top100)
.encode(
vl.x({"timeUnit": "yearmonthdate"}).fieldT("MonthYear").axis({"labelAngle":"-90", "tickCount":"date"}),
vl.y().fieldQ("norm_count"),
vl.color().fieldN("Column"),
vl.tooltip([vl.fieldT("MonthYear"),vl.fieldN("Column")])
)
.width(400)
.height(500)
const simpleBar_top100_date_1month_after = vl.markBar({size: 10}) // Make a bar chart
.data(after_1month_top100)
.encode(
vl.x({"timeUnit": "yearmonthdate"}).fieldT("MonthYear").axis({"labelAngle":"-90", "tickCount":"date"}),
vl.y().fieldQ("norm_count"),
vl.color().fieldN("Column"),
vl.tooltip([vl.fieldT("MonthYear"),vl.fieldN("Column")])
)
.width(400)
.height(500)
return vl.hconcat(simpleBar_top100_date_1month_before, simpleBar_top100_date_1month_after)
.config({"view": {"stroke":"transparent"}})
.render()
}
import {GroupedBarChart} from "@d3/grouped-bar-chart"
d3 = require("d3@6")
import { vl } from "@vega/vega-lite-api"
z = require('https://bundle.run/zebras@0.0.11')
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.
