Skip to content

Commit 33d6ad8

Browse files
andrewsullyandrewsully
committed
Added page 4 graph (and added screenshots of both)
1 parent 9702319 commit 33d6ad8

27 files changed

+144
-0
lines changed

‎.idea/.gitignore

+5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/RWH.iml

+12
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/modules.xml

+8
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/vcs.xml

+6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎drafts/Page 3 - Volume of Coverage/Screen Shot 2023-11-17 at 12.17.13 PM.png

564 KB
Loading

‎drafts/Page 4 - Coverage sentiment (overall)/.DS_Store

6 KB
Binary file not shown.

‎drafts/Page 4 - Coverage sentiment (overall)/Screen Shot 2023-11-17 at 12.40.49 PM.png

260 KB
Loading

‎drafts/Page 4 - Coverage sentiment (overall)/data/.DS_Store

6 KB
Binary file not shown.

‎drafts/Page 4 - Coverage sentiment (overall)/data/data.json

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
[
2+
{"name": "Biden", "avg_sentiment": ".62", "photo": "data/headshots/biden.png", "party": "D"},
3+
{"name": "Trump", "avg_sentiment": ".54", "photo": "data/headshots/trump.png", "party": "R"},
4+
{"name": "Ramaswamy", "avg_sentiment": ".32", "photo": "data/headshots/ramaswamy.png", "party": "R"},
5+
{"name": "Haley", "avg_sentiment": ".21", "photo": "data/headshots/haley.png", "party": "R"},
6+
{"name": "Williamson", "avg_sentiment": ".51", "photo": "data/headshots/williamson.png", "party": "D"}
7+
]
8+

‎drafts/Page 4 - Coverage sentiment (overall)/data/headshots/biden.png

41.7 KB
Loading

‎drafts/Page 4 - Coverage sentiment (overall)/data/headshots/binkley.png

45.8 KB
Loading

‎drafts/Page 4 - Coverage sentiment (overall)/data/headshots/burgum.png

42.5 KB
Loading

‎drafts/Page 4 - Coverage sentiment (overall)/data/headshots/christie.png

44.4 KB
Loading

‎drafts/Page 4 - Coverage sentiment (overall)/data/headshots/desantis.png

41.3 KB
Loading

‎drafts/Page 4 - Coverage sentiment (overall)/data/headshots/haley.png

53 KB
Loading

‎drafts/Page 4 - Coverage sentiment (overall)/data/headshots/hutchinson.png

42.1 KB
Loading

‎drafts/Page 4 - Coverage sentiment (overall)/data/headshots/kennedy-jr.png

43.9 KB
Loading

‎drafts/Page 4 - Coverage sentiment (overall)/data/headshots/phillips.png

45.1 KB
Loading

‎drafts/Page 4 - Coverage sentiment (overall)/data/headshots/ramaswamy.png

46.7 KB
Loading

‎drafts/Page 4 - Coverage sentiment (overall)/data/headshots/stein.png

44.9 KB
Loading

‎drafts/Page 4 - Coverage sentiment (overall)/data/headshots/trump.png

47.8 KB
Loading

‎drafts/Page 4 - Coverage sentiment (overall)/data/headshots/uygur.png

52.5 KB
Loading

‎drafts/Page 4 - Coverage sentiment (overall)/data/headshots/west.png

49.7 KB
Loading

‎drafts/Page 4 - Coverage sentiment (overall)/data/headshots/williamson.png

60.8 KB
Loading

‎drafts/Page 4 - Coverage sentiment (overall)/index.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Presidential Candidates Bar Chart</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div id="chart"></div>
11+
<script src="https://d3js.org/d3.v6.min.js"></script>
12+
<script src="script.js"></script>
13+
</body>
14+
</html>

‎drafts/Page 4 - Coverage sentiment (overall)/script.js

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
// Load data from your JSON file
2+
d3.json("data/data.json").then(data => {
3+
4+
// Sort data based on avg_sentiment
5+
data.sort((a, b) => d3.descending(+a.avg_sentiment, +b.avg_sentiment));
6+
7+
// Set dimensions and margins for the chart
8+
const margin = { top: 30, right: 30, bottom: 40, left: 260 }, // Increased left margin
9+
width = 960 - margin.left - margin.right,
10+
height = 500 - margin.top - margin.bottom;
11+
12+
// Append SVG object to the chart div
13+
const svg = d3.select("#chart")
14+
.append("svg")
15+
.attr("width", width + margin.left + margin.right)
16+
.attr("height", height + margin.top + margin.bottom)
17+
.append("g")
18+
.attr("transform", `translate(${margin.left},${margin.top})`);
19+
20+
// Create X axis
21+
const x = d3.scaleLinear()
22+
.domain([0, 1]) // Define the range of average sentiment
23+
.range([0, width]);
24+
svg.append("g")
25+
.attr("transform", `translate(0,${height})`)
26+
.call(d3.axisBottom(x).ticks(5));
27+
28+
// Create Y axis
29+
const y = d3.scaleBand()
30+
.range([0, height])
31+
.domain(data.map(d => d.name))
32+
.padding(.1);
33+
svg.append("g")
34+
.call(d3.axisLeft(y).tickSize(0))
35+
.selectAll(".tick text")
36+
.attr("x", -y.bandwidth() * 1.2) // Move the label further to the left
37+
.style("text-anchor", "end")
38+
.style("font-size", "16px");
39+
40+
// Add bars
41+
svg.selectAll("myRect")
42+
.data(data)
43+
.enter()
44+
.append("rect")
45+
.attr("x", x(0))
46+
.attr("y", d => y(d.name))
47+
.attr("width", d => x(d.avg_sentiment))
48+
.attr("height", y.bandwidth())
49+
.attr("fill", d => d.party === "R" ? "#c93235" : "#1475b7");
50+
51+
// Add bar extensions to reach the circles
52+
svg.selectAll("barExtensions")
53+
.data(data)
54+
.enter()
55+
.append("rect")
56+
.attr("x", x(0) - y.bandwidth()/2) // Start at the middle of the circle
57+
.attr("y", d => y(d.name))
58+
.attr("width", y.bandwidth()) // Width to cover the distance to the middle of the circle
59+
.attr("height", y.bandwidth())
60+
.attr("fill", d => d.party === "R" ? "#c93235" : "#1475b7");
61+
// Add background circles
62+
svg.selectAll("backgroundCircles")
63+
.data(data)
64+
.enter()
65+
.append("circle")
66+
.attr("cx", x(0) - y.bandwidth() / 2)
67+
.attr("cy", d => y(d.name) + y.bandwidth() / 2)
68+
.attr("r", y.bandwidth() / 2)
69+
.attr("fill", "white")
70+
.attr("stroke", d => d.party === "R" ? "#c93235" : "#1475b7")
71+
.attr("stroke-width", 3);
72+
// Add images
73+
svg.selectAll("candidateImages")
74+
.data(data)
75+
.enter()
76+
.append("image")
77+
.attr("xlink:href", d => d.photo)
78+
.attr("x", x(0) - y.bandwidth()) // Position the image to the left of 0 on the y-axis
79+
.attr("y", d => y(d.name))
80+
.attr("height", y.bandwidth())
81+
.attr("width", y.bandwidth())
82+
.attr("clip-path", "circle()"); // Clip image to a circle
83+
});

‎drafts/Page 4 - Coverage sentiment (overall)/style.css

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
}
4+
5+
svg {
6+
display: block;
7+
margin: auto;
8+
}

0 commit comments

Comments
 (0)