|
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
|
|
<meta charset="utf-8">
|
|
<meta name="robots" content="noindex">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
|
|
|
|
<link rel="shortcut icon" href="static/favicon.ico">
|
|
|
|
|
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
|
|
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
|
|
<link rel="stylesheet" href="static/themestr.css">
|
|
|
|
<title>SocioFillmore Prototype</title>
|
|
|
|
|
|
|
|
<script src="https://cdn.plot.ly/plotly-2.0.0.min.js"></script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<div class="container">
|
|
<div class="jumbotron bg-primary">
|
|
<h1 class="display-2">SocioFillmore</h1>
|
|
<div class="d-inline-flex">
|
|
<h3 class="p-2 bg-secondary"><i class="fas fa-database"></i> Dataset Exploration Tool</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="bg-light text-dark p-3 mt-3 mb-5">
|
|
<p class="fs-4">
|
|
This part of the tool allows for exploring several existing datasets that showcase of using
|
|
frame semantic annotations for analyzing perspectives on socially relevant events.
|
|
Three of the datasets consist of Italian news reports (two datasets on femicide reports, and one
|
|
on migration-related news) and one consists of reports of traffic crashes in Dutch local media.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="bg-dark text-light p-3 mt-3">
|
|
<h4>Global Settings</h4>
|
|
<div class="mt-3">
|
|
<h5>Active Dataset</h5>
|
|
<ul class="nav bg-light nav-tabs" id="dataset-switch">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="femicides-olv" href="#">Femicides/OLV 🇮🇹</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="femicides-rai" href="#">Femicides/RAI 🇮🇹<i
|
|
class="fa-solid fa-lock"></i></a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="migration-pavia" href="#">Migration/OdP 🇮🇹</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="crashes-thecrashes" href="#">Crashes/TheCrashes 🇳🇱</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="alert alert-info mt-4" role="alert" id="dataset-info">
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pwd-prompt">
|
|
<div class="bg-dark text-white m-3 p-3">
|
|
<div class="alert alert-info my-2" role="alert" id="dataset-danger">
|
|
For copyright reasons, this dataset is password-protected. If you would like to get access, get
|
|
in touch with us at
|
|
<code>g [dot] f [dot] minnema [at] rug [dot] nl</code>
|
|
</div>
|
|
<p>Please enter the password:</p>
|
|
<div class="input-group">
|
|
<input type="password" name="password" id="password-input" class="form-control">
|
|
<div class="input-group-append">
|
|
<a id="pwd-submit" class="btn btn-sm btn-primary mt-1">OK</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pwd-protected">
|
|
<div class="bg-dark text-light p-3 mt-3">
|
|
<h5>Frames of Interest</h5>
|
|
<div class="p-3 m-3 border border-secondary">
|
|
<div class="alert alert-info mt-1 mb-4" role="alert" id="dataset-frame-info"></div>
|
|
<h6>Clusters</h6>
|
|
<select class="form-control form-control-sm mb-3" id="frame-clusters">
|
|
</select>
|
|
<h6>Selected Frames</h6>
|
|
<div class="btn-group flex-wrap" id="frame-list"></div>
|
|
<div>
|
|
<small>(click on a frame to remove it)</small>
|
|
</div>
|
|
</div>
|
|
<div class="p-3 m-3 border border-secondary">
|
|
<h6>Add Frames</h6>
|
|
<div class="input-group mb-1">
|
|
<input type="text" class="form-control" id="add-frame-input" placeholder="Add a frame..."
|
|
aria-label="Add frame">
|
|
<div class="input-group-append">
|
|
<button class="btn btn-primary text-dark" id="add-frame-button"
|
|
type="button">OK</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="filter-options">
|
|
<div class="bg-light p-3 mt-3">
|
|
<h5>Document Selection</h5>
|
|
<p><small class="event-doc-count"></small></p>
|
|
<div class="bg-light p-3 m-3 border border-secondary">
|
|
<h6>Selected Filters</h6>
|
|
<div class="btn-group flex-wrap" id="doc-filter-list"></div>
|
|
<p>
|
|
<small>(any selected filters will appear above / click a filter to remove it /
|
|
remove all filters to select all documents)</small>
|
|
</p>
|
|
</div>
|
|
|
|
<div id="doc-filters" class="bg-light p-3 m-3 border border-secondary">
|
|
<h6>Choose Filters</h6>
|
|
|
|
<div>
|
|
<small>Days After Event</small>
|
|
<div class="input-group">
|
|
<select class="ev-filter form-control form-control-sm" id="doc-filter-days-after"
|
|
aria-label="Select an attribute">
|
|
</select>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-sm btn-primary" id="doc-filter-days-after-btn"
|
|
type="button">
|
|
Add
|
|
filter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<small>News Source - Provider</small>
|
|
<div class="input-group">
|
|
<select class="ev-filter form-control form-control-sm" id="doc-filter-provider"
|
|
aria-label="Select an attribute">
|
|
</select>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-sm btn-primary" id="doc-filter-provider-btn"
|
|
type="button">
|
|
Add
|
|
filter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div>
|
|
<small>News Source - Political Stance (cf. <a
|
|
href="https://journals.sagepub.com/doi/10.1177/1940161219892768">Fletcher et al.
|
|
2019</a>)</small>
|
|
<div class="input-group">
|
|
<select class="ev-filter form-control form-control-sm" id="doc-filter-politics-tc"
|
|
aria-label="Select an attribute">
|
|
</select>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-sm btn-primary" id="doc-filter-politics-tc-btn"
|
|
type="button">
|
|
Add
|
|
filter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<small>News Source - Political Stance (Serena's list)</small>
|
|
<div class="input-group">
|
|
<select class="ev-filter form-control form-control-sm" id="doc-filter-politics-sc"
|
|
aria-label="Select an attribute">
|
|
</select>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-sm btn-primary" id="doc-filter-politics-sc-btn"
|
|
type="button">
|
|
Add
|
|
filter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<small>News Source - Religious Status (Serena's list)</small>
|
|
<div class="input-group">
|
|
<select class="ev-filter form-control form-control-sm" id="doc-filter-religion-sc"
|
|
aria-label="Select an attribute">
|
|
</select>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-sm btn-primary" id="doc-filter-religion-sc-btn"
|
|
type="button">
|
|
Add
|
|
filter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<small>News Source - Political Stance (aggregate)</small>
|
|
<div class="input-group">
|
|
<select class="ev-filter form-control form-control-sm" id="doc-filter-politics-agg"
|
|
aria-label="Select an attribute">
|
|
</select>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-sm btn-primary" id="doc-filter-politics-agg-btn"
|
|
type="button">
|
|
Add
|
|
filter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<small>News Source - Type</small>
|
|
<div class="input-group">
|
|
<select class="ev-filter form-control form-control-sm" id="doc-filter-type"
|
|
aria-label="Select an attribute">
|
|
</select>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-sm btn-primary" id="doc-filter-type-btn" type="button">
|
|
Add
|
|
filter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<small>News Source - Geographical Scope</small>
|
|
<div class="input-group">
|
|
<select class="ev-filter form-control form-control-sm" id="doc-filter-area"
|
|
aria-label="Select an attribute">
|
|
</select>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-sm btn-primary" id="doc-filter-area-btn" type="button">
|
|
Add
|
|
filter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<small>News Source - Country (NL/BE) </small>
|
|
<div class="input-group">
|
|
<select class="ev-filter form-control form-control-sm" id="doc-filter-country"
|
|
aria-label="Select an attribute">
|
|
</select>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-sm btn-primary" id="doc-filter-country-btn"
|
|
type="button">Add
|
|
filter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<small>News Source - Province (NL/BE) </small>
|
|
<div class="input-group">
|
|
<select class="ev-filter form-control form-control-sm" id="doc-filter-province"
|
|
aria-label="Select an attribute">
|
|
</select>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-sm btn-primary" id="doc-filter-province-btn"
|
|
type="button">Add
|
|
filter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<small>News Source - Content Type </small>
|
|
<div class="input-group">
|
|
<select class="ev-filter form-control form-control-sm" id="doc-filter-content-type"
|
|
aria-label="Select an attribute">
|
|
</select>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-sm btn-primary" id="doc-filter-content-type-btn"
|
|
type="button">Add
|
|
filter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<small>News Source - Medium Type </small>
|
|
<div class="input-group">
|
|
<select class="ev-filter form-control form-control-sm" id="doc-filter-medium-type"
|
|
aria-label="Select an attribute">
|
|
</select>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-sm btn-primary" id="doc-filter-medium-type-btn"
|
|
type="button">Add
|
|
filter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<small>News Source - Owning Media Company </small>
|
|
<div class="input-group">
|
|
<select class="ev-filter form-control form-control-sm" id="doc-filter-owner"
|
|
aria-label="Select an attribute">
|
|
</select>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-sm btn-primary" id="doc-filter-owner-btn"
|
|
type="button">Add
|
|
filter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="bg-light p-3 mt-3">
|
|
<h5>Event Selection</h5>
|
|
<p><small class="event-doc-count"></small></p>
|
|
<div class="bg-light p-3 m-3 border border-secondary">
|
|
<h6>Selected Filters</h6>
|
|
<div class="btn-group flex-wrap" id="event-filter-list"></div>
|
|
<p>
|
|
<small>(any selected filters will appear above / click a filter to remove it /
|
|
remove all filters to select all events)</small>
|
|
</p>
|
|
</div>
|
|
|
|
<div id="ev-filters" class="bg-light p-3 m-3 border border-secondary">
|
|
<h6>Choose Filters</h6>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div>
|
|
<small>Location: Italian Region</small>
|
|
<div class="input-group">
|
|
<select class="ev-filter form-control form-control-sm" id="ev-filter-region"
|
|
aria-label="Select an attribute">
|
|
</select>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-sm btn-primary" id="ev-filter-region-btn"
|
|
type="button">Add
|
|
filter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<small>Location: Semantic Location</small>
|
|
<div class="input-group">
|
|
<select class="ev-filter form-control form-control-sm" id="ev-filter-semloc"
|
|
aria-label="Select an attribute">
|
|
</select>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-sm btn-primary" id="ev-filter-semloc-btn"
|
|
type="button">Add
|
|
filter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<small>Victim: Age</small>
|
|
<div class="input-group">
|
|
<select class="ev-filter form-control form-control-sm" id="ev-filter-vict-age"
|
|
aria-label="Select an attribute">
|
|
</select>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-sm btn-primary" id="ev-filter-vict-age-btn"
|
|
type="button">
|
|
Add
|
|
filter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<small>Victim: Nationality</small>
|
|
<div class="input-group">
|
|
<select class="ev-filter form-control form-control-sm" id="ev-filter-vict-nat"
|
|
aria-label="Select an attribute">
|
|
</select>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-sm btn-primary" id="ev-filter-vict-nat-btn"
|
|
type="button">
|
|
Add
|
|
filter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<small>Attacker: Nationality</small>
|
|
<div class="input-group">
|
|
<select class="ev-filter form-control form-control-sm" id="ev-filter-att-nat"
|
|
aria-label="Select an attribute">
|
|
</select>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-sm btn-primary" id="ev-filter-att-nat-btn"
|
|
type="button">
|
|
Add
|
|
filter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<small>Victim: Occupation</small>
|
|
<div class="input-group">
|
|
<select class="ev-filter form-control form-control-sm" id="ev-filter-vict-occ"
|
|
aria-label="Select an attribute">
|
|
</select>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-sm btn-primary" id="ev-filter-att-nat-btn"
|
|
type="button">
|
|
Add
|
|
filter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<small>Attacker: Occupation</small>
|
|
<div class="input-group">
|
|
<select class="ev-filter form-control form-control-sm" id="ev-filter-att-occ"
|
|
aria-label="Select an attribute">
|
|
</select>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-sm btn-primary" id="ev-filter-att-nat-btn"
|
|
type="button">
|
|
Add
|
|
filter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div>
|
|
<small>Outcomes: People Injured (total)</small>
|
|
<div class="input-group">
|
|
<select class="ev-filter form-control form-control-sm" id="ev-filter-injured-total"
|
|
aria-label="Select an attribute">
|
|
</select>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-sm btn-primary" id="ev-filter-injured-total-btn"
|
|
type="button">
|
|
Add
|
|
filter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<small>Outcomes: Children Injured</small>
|
|
<div class="input-group">
|
|
<select class="ev-filter form-control form-control-sm" id="ev-filter-injured-child"
|
|
aria-label="Select an attribute">
|
|
</select>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-sm btn-primary" id="ev-filter-injured-child-btn"
|
|
type="button">
|
|
Add
|
|
filter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<small>Outcomes: Pedestrians Injured</small>
|
|
<div class="input-group">
|
|
<select class="ev-filter form-control form-control-sm"
|
|
id="ev-filter-injured-pedestrian" aria-label="Select an attribute">
|
|
</select>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-sm btn-primary" id="ev-filter-injured-pedestrian-btn"
|
|
type="button">
|
|
Add
|
|
filter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<small>Outcomes: Cyclists Injured</small>
|
|
<div class="input-group">
|
|
<select class="ev-filter form-control form-control-sm"
|
|
id="ev-filter-injured-cyclist" aria-label="Select an attribute">
|
|
</select>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-sm btn-primary" id="ev-filter-injured-cyclist-btn"
|
|
type="button">
|
|
Add
|
|
filter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<small>Outcomes: Cyclists or Pedestrians Injured</small>
|
|
<div class="input-group">
|
|
<select class="ev-filter form-control form-control-sm"
|
|
id="ev-filter-injured-cyclistpedestrian" aria-label="Select an attribute">
|
|
</select>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-sm btn-primary"
|
|
id="ev-filter-injured-cyclistpedestrian-btn" type="button">
|
|
Add
|
|
filter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<small>Outcomes: People-in-Vehicles Injured</small>
|
|
<div class="input-group">
|
|
<select class="ev-filter form-control form-control-sm"
|
|
id="ev-filter-injured-vehicle" aria-label="Select an attribute">
|
|
</select>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-sm btn-primary" id="ev-filter-injured-vehicle-btn"
|
|
type="button">
|
|
Add
|
|
filter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<small>Outcomes: People Dead (total)</small>
|
|
<div class="input-group">
|
|
<select class="ev-filter form-control form-control-sm" id="ev-filter-dead-total"
|
|
aria-label="Select an attribute">
|
|
</select>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-sm btn-primary" id="ev-filter-dead-total-btn"
|
|
type="button">
|
|
Add
|
|
filter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<small>Outcomes: Children Dead</small>
|
|
<div class="input-group">
|
|
<select class="ev-filter form-control form-control-sm" id="ev-filter-dead-child"
|
|
aria-label="Select an attribute">
|
|
</select>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-sm btn-primary" id="ev-filter-dead-child-btn"
|
|
type="button">
|
|
Add
|
|
filter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<small>Outcomes: Pedestrians Dead</small>
|
|
<div class="input-group">
|
|
<select class="ev-filter form-control form-control-sm"
|
|
id="ev-filter-dead-pedestrian" aria-label="Select an attribute">
|
|
</select>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-sm btn-primary" id="ev-filter-dead-pedestrian-btn"
|
|
type="button">
|
|
Add
|
|
filter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<small>Outcomes: Cyclists Dead</small>
|
|
<div class="input-group">
|
|
<select class="ev-filter form-control form-control-sm" id="ev-filter-dead-cyclist"
|
|
aria-label="Select an attribute">
|
|
</select>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-sm btn-primary" id="ev-filter-dead-cyclist-btn"
|
|
type="button">
|
|
Add
|
|
filter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<small>Outcomes: Cyclists or Pedestrians Dead</small>
|
|
<div class="input-group">
|
|
<select class="ev-filter form-control form-control-sm"
|
|
id="ev-filter-dead-cyclistpedestrian" aria-label="Select an attribute">
|
|
</select>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-sm btn-primary" id="ev-filter-dead-cyclistpedestrian-btn"
|
|
type="button">
|
|
Add
|
|
filter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<small>Outcomes: People-in-Vehicles Dead</small>
|
|
<div class="input-group">
|
|
<select class="ev-filter form-control form-control-sm" id="ev-filter-dead-vehicle"
|
|
aria-label="Select an attribute">
|
|
</select>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-sm btn-primary" id="ev-filter-dead-vehicle-btn"
|
|
type="button">
|
|
Add
|
|
filter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<small>Outcomes: People Injured or Dead (total)</small>
|
|
<div class="input-group">
|
|
<select class="ev-filter form-control form-control-sm"
|
|
id="ev-filter-deadinjured-total" aria-label="Select an attribute">
|
|
</select>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-sm btn-primary" id="ev-filter-deadinjured-total-btn"
|
|
type="button">
|
|
Add
|
|
filter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<small>Outcomes: Children Injured or Dead</small>
|
|
<div class="input-group">
|
|
<select class="ev-filter form-control form-control-sm"
|
|
id="ev-filter-deadinjured-child" aria-label="Select an attribute">
|
|
</select>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-sm btn-primary" id="ev-filter-deadinjured-child-btn"
|
|
type="button">
|
|
Add
|
|
filter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<small>Outcomes: Pedestrians Injured or Dead</small>
|
|
<div class="input-group">
|
|
<select class="ev-filter form-control form-control-sm"
|
|
id="ev-filter-deadinjured-pedestrian" aria-label="Select an attribute">
|
|
</select>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-sm btn-primary" id="ev-filter-deadinjured-pedestrian-btn"
|
|
type="button">
|
|
Add
|
|
filter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<small>Outcomes: Cyclists Injured or Dead</small>
|
|
<div class="input-group">
|
|
<select class="ev-filter form-control form-control-sm"
|
|
id="ev-filter-deadinjured-cyclist" aria-label="Select an attribute">
|
|
</select>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-sm btn-primary" id="ev-filter-deadinjured-cyclist-btn"
|
|
type="button">
|
|
Add
|
|
filter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<small>Outcomes: Cyclists or Pedestrians Injured or Dead</small>
|
|
<div class="input-group">
|
|
<select class="ev-filter form-control form-control-sm"
|
|
id="ev-filter-deadinjured-cyclistpedestrian" aria-label="Select an attribute">
|
|
</select>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-sm btn-primary"
|
|
id="ev-filter-deadinjured-cyclistpedestrian-btn" type="button">
|
|
Add
|
|
filter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<small>Outcomes: People-in-Vehicles Injured or Dead</small>
|
|
<div class="input-group">
|
|
<select class="ev-filter form-control form-control-sm"
|
|
id="ev-filter-deadinjured-vehicle" aria-label="Select an attribute">
|
|
</select>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-sm btn-primary" id="ev-filter-deadinjured-vehicle-btn"
|
|
type="button">
|
|
Add
|
|
filter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<small>Two-sided & Outcome-Imbalanced</small>
|
|
<div class="input-group">
|
|
<select class="ev-filter form-control form-control-sm" id="ev-filter-imbalanced"
|
|
aria-label="Select an attribute">
|
|
</select>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-sm btn-primary" id="ev-filter-imbalanced" type="button">
|
|
Add
|
|
filter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pwd-protected bg-light p-3 mt-3">
|
|
<h5>Global Statistics</h5>
|
|
<div class="p-3 mb-3 border border-secondary">
|
|
<div>
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="radio" name="stat-num-type" id="stats-relative"
|
|
value="relative" checked>
|
|
<label class="form-check-label" for="stats-relative">Relative numbers</label>
|
|
</div>
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="radio" name="stat-num-type" id="stats-absolute"
|
|
value="absolute">
|
|
<label class="form-check-label" for="stats-relative">Absolute numbers</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-3 mb-3 border border-secondary">
|
|
<small>For all frames:</small>
|
|
<br>
|
|
<div class="btn-group flex-wrap">
|
|
<button class="btn btn-outline-primary text-dark mr-2 mt-2" id="frame-frequencies">Semantic
|
|
Frames</button>
|
|
<button class="btn btn-outline-primary text-dark mr-2 mt-2" id="frame-tgt-frequencies">Frames &
|
|
Targets</button>
|
|
<button class="btn btn-outline-primary text-dark mr-2 mt-2" id="frame-syncat-frequencies">Frames
|
|
& Categories
|
|
</button>
|
|
<button class="btn btn-outline-primary text-dark mr-2 mt-2" id="frame-cx-frequencies">Frames &
|
|
Constructions
|
|
</button>
|
|
<button class="btn btn-outline-primary text-dark mr-2 mt-2" id="frame-root-frequencies">Frames &
|
|
Root Status
|
|
</button>
|
|
<button class="btn btn-outline-primary text-dark mr-2 mt-2"
|
|
id="frame-cx-root-frequencies">Frames,
|
|
Constructions & Root Status
|
|
</button>
|
|
|
|
</div>
|
|
<br>
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="checkbox" name="stat-num-type" id="count-only-headlines"
|
|
value="relative">
|
|
<label class="form-check-label" for="stats-relative">Only count headlines</label>
|
|
</div>
|
|
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="checkbox" name="stat-num-type" id="plot-over-days-post"
|
|
value="relative">
|
|
<label class="form-check-label" for="stats-relative">Plot by days post event</label>
|
|
</div>
|
|
<div>
|
|
<div class="input-group mb-1">
|
|
<input type="text" class="form-control" id="time-window"
|
|
placeholder="Specify time window (default=10)" aria-label="Add frame">
|
|
</div>
|
|
</div>
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="checkbox" name="stat-num-type" id="plot-by-year"
|
|
value="relative">
|
|
<label class="form-check-label" for="stats-relative">Plot by publication year</label>
|
|
</div>
|
|
</div>
|
|
<div class="p-3 border border-secondary">
|
|
<small>For specific frame & construction:</small>
|
|
<div>
|
|
<select class="form-control form-control-sm" id="frame-freq-select" aria-label="Choose a frame">
|
|
</select>
|
|
<select class="form-control form-control-sm" id="construction-freq-select"
|
|
aria-label="Choose a construction">
|
|
</select>
|
|
</div>
|
|
<br>
|
|
<div class="btn-group flex-wrap">
|
|
<button class="btn btn-outline-primary text-dark mr-2 mt-2" id="role-frequencies">Roles Present
|
|
</button>
|
|
<button class="btn btn-outline-primary text-dark mr-2 mt-2" id="role-exp-frequencies">Role
|
|
Expressions
|
|
</button>
|
|
<button class="btn btn-outline-primary text-dark mr-2 mt-2"
|
|
id="role-pl-exp-frequencies">Participant-Like Role
|
|
Expressions
|
|
</button>
|
|
<button class="btn btn-outline-primary text-dark mr-2 mt-2" id="role-exp-depth-frequencies">Role
|
|
Dependency
|
|
Depths
|
|
</button>
|
|
<button class="btn btn-outline-danger mr-2 mt-2" id="constr-table-btn">Constructions Table
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="modal fade" id="frame-freq-modal" tabindex="-1" role="dialog"
|
|
aria-labelledby="frame-freq-modal-label" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="frame-freq-modal-label">Frequencies</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
|
|
<div id="frame-freq-relevant-plotly"></div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="modal fade" id="table-modal" tabindex="-1" role="dialog" aria-labelledby="frame-modal-label"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog modal-lg" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="table-modal-label">Frame frequencies</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="table-responsive">
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">#</th>
|
|
<th score="col">Model</th>
|
|
<th score="col">Frame</th>
|
|
<th scope="col">Filters</th>
|
|
<th scope="col">Nonverbal</th>
|
|
<th scope="col">Verbal:Active</th>
|
|
<th scope="col">Verbal:Ps./Un.</th>
|
|
<th scope="col">Verbal:Reflexive</th>
|
|
<th scope="col">Other</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="table-modal-rows"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="pwd-protected bg-light p-3 mt-3">
|
|
<h5>Analyze Text</h5>
|
|
<h6>Analyze Specific Documents</h6>
|
|
<p><small>Use this option to look at specific articles. The list of available articles depends on
|
|
the
|
|
filters
|
|
you selected.</small></p>
|
|
<div class="input-group">
|
|
<select class="form-control" id="document-list" aria-label="Choose document">
|
|
</select>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-primary btn-sm" id="analyze-doc-button" type="button">Analyze
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<hr />
|
|
<h6>Sample Frames & Constructions</h6>
|
|
<p><small>Use this option to find randomly sampled sentences for specific frame-construction
|
|
combinations. Samples are taken only from the filtered set of events and documents.</small></p>
|
|
<div class="input-group">
|
|
<select class="form-control" id="frame-sample-list" aria-label="Choose a frame">
|
|
</select>
|
|
<select class="form-control" id="construction-sample-list" aria-label="Choose a construction">
|
|
</select>
|
|
<select class="form-control" id="role-sample-list" aria-label="Choose a role">
|
|
</select>
|
|
<select class="form-control" id="dep-sample-list" aria-label="Choose a dependency">
|
|
</select>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-primary btn-sm" id="sample-frame-button" type="button">Analyze
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pwd-protected bg-light p-3 mt-3">
|
|
<h5>Results</h5>
|
|
<div id="frames-out">
|
|
<p><small>(Text analysis results will appear here)</small></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<script src="https://code.jquery.com/jquery-3.5.0.min.js"
|
|
integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
|
|
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
|
|
crossorigin="anonymous"></script>
|
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
|
|
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
|
|
crossorigin="anonymous"></script>
|
|
|
|
<script src="https://kit.fontawesome.com/9ba3f3de18.js" crossorigin="anonymous"></script>
|
|
|
|
|
|
<script src="static/app.js"></script>
|
|
|
|
</body> |
