Skip to content

Commit

Permalink
Merge pull request #139 from code4policy/show-selected-quotes
Browse files Browse the repository at this point in the history 
created a drop down menu with selected quotes
  • Loading branch information
@OscarBoochever
OscarBoochever authored Jan 12, 2024
2 parents 242132c + 224adab commit 18982b1
Show file tree
Hide file tree
Showing 7 changed files with 178 additions and 925 deletions.
9 changes: 6 additions & 3 deletions styles/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -255,6 +255,7 @@ h1 {
/* Topics Dropdown */
#topics-dropdown {
width: 200px; /* Adjust the width as needed */
margin: 60px;
}

/* Set margins for headers, paragraphs, lists, and list items */
Expand Down Expand Up @@ -296,6 +297,11 @@ ul, li {
color: grey; /* Adjust color as needed */
}

/* CSV Table */
#csvTable {
width: 1500px;
margin: 60px;
}

/* Our Team responsive text sizing and spacing */
.team-member {
Expand All @@ -319,6 +325,3 @@ ul, li {
margin-bottom: 3px;
text-align: left;
}



25 changes: 13 additions & 12 deletions twitter/Topic-histogram.csv
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
Row Labels,Fox News,NYT,Reddit,X.com discussion
Protect gun rights,0.13970588235294118,0,0.6206896551724138,0.08333333333333333
Democrats are the problem,0.19852941176470587,0.045454545454545456,0,0.1388888888888889
This is because of trans/woke ideology,0.058823529411764705,0,0,0.5277777777777778
It's a societal decline problem,0.19117647058823528,0,0.034482758620689655,0
This is because of mental health,0.13970588235294118,0.09090909090909091,0.10344827586206896,0.05555555555555555
Need stricter gun control,0.03676470588235294,0.5,0.1724137931034483,0
Be tough on crime,0.051470588235294115,0.045454545454545456,0.034482758620689655,0.08333333333333333
remove,0.051470588235294115,0.045454545454545456,0.034482758620689655,0.08333333333333333
This is a sign of moral and religious decay,0.058823529411764705,0,0,0.027777777777777776
This is because of social media,0.058823529411764705,0,0,0
Republicans are the problem,0.014705882352941176,0.2727272727272727,0,0
Row Labels,Fox News,NYT,Reddit,X.com discussion
Democrats are the problem,0.22,0.02,0.00,0.16
Protect gun rights,0.13,0.01,0.50,0.14
It's a societal decline problem,0.21,0.01,0.02,0.02
Need stricter gun control,0.02,0.51,0.21,0.02
Other - policy discussion,0.09,0.06,0.10,0.02
This is because of trans/woke ideology,0.04,0.00,0.00,0.49
This is because of mental health,0.07,0.04,0.06,0.05
Gun control laws don't work,0.06,0.01,0.04,0.02
Protect schools,0.07,0.01,0.00,0.00
Parents are the problem,0.05,0.11,0.00,0.00
Republicans are the problem,0.01,0.21,0.00,0.00
Be tough on crime,0.04,0.01,0.08,0.07
65 changes: 17 additions & 48 deletions twitter/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,10 @@
<html>
<head>
<title>Perspectives</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="../styles/styles.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900&display=swap" rel="stylesheet">

<!-- Logo -->
<link rel="icon" href="../gun_hub_logo.ico" type="image/x-icon">


<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

Expand Down Expand Up @@ -55,9 +51,7 @@
</header>

<h1>Key Themes (Synthesized Perspectives)</h1>
<p> Placeholder for text analysis on <a href="https://www.nytimes.com/2024/01/04/us/perry-iowa-school-shooting.html#commentsContainer" target="_blank"> NYT</a> and <a href="https://www.foxnews.com/us/police-investigating-active-shooter-scene-high-school-perry-iowa" target="_blank">Fox News</a> article comments</p>



<h2> What comments are people leaving on multiple platforms? </h2>

<p> We looked at multiple sources to ensure diversity: <p/>
Expand All @@ -72,51 +66,18 @@ <h2> What comments are people leaving on multiple platforms? </h2>
</ul>



<h4> Graph representing the percentage of comments (excl. "other" category) falling into each of the main topics, by source </h4>

<div id="chart"></div>
<script src="script.js"></script>




<br>
<br>

<h1>Unfiltered Perspectives</h1>

<h2>View main topics and select comments</h2>

<select id="topics-dropdown">
<option value="other">Other</option>
<option value="democratsProblem">Democrats are the problem</option>
<option value="societalDecline">It's a societal decline problem</option>
<option value="otherPolicy">Other - policy</option>
<option value="mentalHealth">This is because of mental health</option>
<option value="gunRights">Protect gun rights</option>
<option value="transWokeIdeology">This is because of trans/woke ideology</option>
<option value="socialMedia">This is because of social media</option>
<option value="moralDecay">This is a sign of moral and religious decay</option>
<option value="remove">remove</option>
<option value="toughOnCrime">Be tough on crime</option>
<option value="stricterGunControl">Need stricter gun control</option>
<option value="gunLawsDontWork">Gun control laws don't work</option>
<option value="bullying">This is because of bullying</option>
<option value="republicansProblem">Republicans are the problem</option>
<option value="miscQuestions">Miscellaneous questions</option>
<option value="parentsProblem">Parents are the problem</option>
<option value="policyOther">Policy - other</option>
<option value="violenceProblem">Violence is the problem</option>
<option value="stateSpendsMuch">The state spends too much</option>
<option value="rareEvent">This is a rare event</option>
<option value="notEnoughData">We don't have enough data</option>
<option value="bigGovProblem">Big government is the problem</option>
<option value="tragedy">This is a tragedy</option>
<option value="protectSchools">Protect schools</option>
</select>




<h2>Relevant Tweets</h2>
<p> Click "Read replies" below to get a sense of citizens' moods and opinions following the Governor's first online comments after the Perry shooting <p/>
<!-- Updated code with Twitter embed link -->
Expand All @@ -125,10 +86,18 @@ <h2>Relevant Tweets</h2>
<p> <i> Tip: for additional perspectives, try searching key phrases like "Perry shooting" or browse comments on Governor Reynolds' other posts regarding the shooting</i> </p>

<br>

<h2>Article Comments</h2>
<p> After systematically synthesizing themes from comments on articles written by both "<a href="https://www.nytimes.com/2024/01/04/us/perry-iowa-school-shooting.html#commentsContainer" target="_blank">liberal</a>" and "<a href="https://www.foxnews.com/us/police-investigating-active-shooter-scene-high-school-perry-iowa" target="_blank">conservative</a>" media outlets, we pulled out a few unfiltered quotes that highlight themes we examined. These represent popular sentiment in plain, sometimes strong, language. <p/>
<p/> Placeholder for the quote highlights <p/>

<h2>View main topics and select comments</h2>
<p> After systematically synthesizing themes from comments on articles written by liberal and conservative media outlets, as well as social media, we pulled out a few unfiltered quotes that highlight themes we examined. These represent popular sentiment in plain, sometimes strong, language. <p/>
<select id="topics-dropdown">
<option value="" disabled selected>Choose topic</option>
</select>
<p> Scroll below to read selected comments: </p>

<!-- Placeholder for the bullet point list of comments -->
<div id="commentsListContainer">
<ul id="commentsList"></ul>
</div>

<br>
</body>
</html>
53 changes: 52 additions & 1 deletion twitter/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,4 +96,55 @@ d3.csv('Topic-histogram.csv').then(function(data) {
.text(function(d) { return d; });


});
});

// Function to generate HTML list from CSV data based on selected topic
function generateListFromCSV(csvFile) {
d3.csv(csvFile).then(function(data) {
populateDropdown(data);

// Function to update the comments list based on the dropdown selection
function updateCommentsList(selectedTopic) {
if (!selectedTopic) {
document.getElementById("commentsList").style.display = "none";
return;
}

// Filter data based on the selected topic
let filteredData = data.filter(row => row.Topic2 === selectedTopic);

// Generate list items for each comment
let listItemsHtml = filteredData.map(row => `<li>${row.Comment}</li>`).join('');

let list = document.getElementById("commentsList");
list.innerHTML = listItemsHtml;
list.style.display = "block"; // Show the list
}

// Listen for changes in the dropdown and update the comments list
document.getElementById("topics-dropdown").addEventListener("change", function() {
updateCommentsList(this.value);
});

// Initially hide the list
document.getElementById("commentsList").style.display = "none";
});
}

// Function to populate dropdown with unique topics
function populateDropdown(data) {
let dropdown = document.getElementById("topics-dropdown");
let uniqueTopics = new Set(data.map(row => row.Topic2)); // Assuming 'Topic2' is the correct column name

uniqueTopics.forEach(topic => {
if (topic) { // Check if topic is not empty or undefined
let option = document.createElement("option");
option.value = topic;
option.textContent = topic;
dropdown.appendChild(option);
}
});
}

// Call the function to prepare the dropdown and the comments list
generateListFromCSV('selected_comments_2.csv');
Loading

0 comments on commit 18982b1

Please sign in to comment.