Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@easterlymould
easterlymould authored Apr 29, 2024
1 parent 999275d commit 5700791
Show file tree
Hide file tree
Showing 3 changed files with 62 additions and 30 deletions.
5 changes: 3 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<h1>Breaking the Ranks: Uncovering the Shadow of Violence and Sexual Misconduct in the British Military</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae rhoncus lacus. Quisque luctus, felis in placerat facilisis, sem erat lobortis eros, quis suscipit lorem orci quis odio. Sed nec lorem sapien. Sed imperdiet risus vitae aliquet mollis. Sed eu lorem dapibus, bibendum dolor a, vestibulum sem. Praesent eleifend urna ut tortor congue fermentum. Aliquam sollicitudin, enim dictum accumsan lacinia, elit tortor tempus ligula, et congue est augue sit amet elit. Suspendisse non magna ex. Proin sed consequat elit. Donec tristique ut eros quis viverra. Donec eleifend volutpat nisl, nec viverra purus tempus vel. Morbi interdum pharetra mauris congue eleifend. Quisque scelerisque pretium ex, in fermentum est elementum tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; In accumsan, nisl a hendrerit aliquet, quam justo efficitur magna, id consequat purus leo pharetra augue. Cras tellus augue, laoreet euismod cursus ac, commodo consectetur justo.</p>
<div id="vizContainer">
<h3>Violent and sex crime charges are increasingly common in court martial cases</h3>
<h3><span style="color: #fa4d56">Violent</span> and <span style="color: #002d9c">sex offence</span> charges are increasingly common in court martial cases</h3>
<div id="my_dataviz1"></div>
<p>Source: <a href="https://www.gov.uk/government/publications/court-martial-results-from-the-military-court-centres">Court Martial results from the Military Court Service (2010-2023)</a>, Ministry of Defence</p>
<div id="buttonContainer">
Expand All @@ -27,7 +27,7 @@ <h3>Violent and sex crime charges are increasingly common in court martial cases
Praesent at quam vel sem posuere porta. Curabitur ut orci lobortis, ultricies quam a, lacinia velit. Nunc nulla massa, pulvinar eget libero in, sodales facilisis nisi. Morbi eget interdum turpis. Donec maximus erat id nisi posuere, a feugiat arcu posuere. Suspendisse eleifend est leo. Proin sed felis felis. Quisque finibus massa et sodales fermentum. Proin sodales sem quis neque cursus consectetur. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur non enim sit amet tellus pharetra feugiat. Aenean at lacinia turpis. Nam et felis sit amet diam hendrerit convallis non a risus. Phasellus mollis consectetur ante. Aenean laoreet lectus in iaculis dignissim.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae rhoncus lacus. Quisque luctus, felis in placerat facilisis, sem erat lobortis eros, quis suscipit lorem orci quis odio. Sed nec lorem sapien. Sed imperdiet risus vitae aliquet mollis. Sed eu lorem dapibus, bibendum dolor a, vestibulum sem. Praesent eleifend urna ut tortor congue fermentum. Aliquam sollicitudin, enim dictum accumsan lacinia, elit tortor tempus ligula, et congue est augue sit amet elit. Suspendisse non magna ex. Proin sed consequat elit. Donec tristique ut eros quis viverra. Donec eleifend volutpat nisl, nec viverra purus tempus vel. Morbi interdum pharetra mauris congue eleifend. Quisque scelerisque pretium ex, in fermentum est elementum tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; In accumsan, nisl a hendrerit aliquet, quam justo efficitur magna, id consequat purus leo pharetra augue. Cras tellus augue, laoreet euismod cursus ac, commodo consectetur justo.</p>
<div id="vizContainer2">
<h3>Conviction rates for <span style="color: #1f77b4">violent offences</span> and <span style="color: #ff7f0e">sex offences</span> have dropped since 2010</h3>
<h3>Conviction rates on <span style="color: #fa4d56">violent</span> and <span style="color: #002d9c">sex offence charges</span> have dropped since their peak in 2011</h3>
<div id="my_dataviz2"></div>
<p>Source: <a href="https://www.gov.uk/government/publications/court-martial-results-from-the-military-court-centres">Court Martial results from the Military Court Service (2010-2023)</a>, Ministry of Defence</p>
</div>
Expand All @@ -40,3 +40,4 @@ <h3>Conviction rates for <span style="color: #1f77b4">violent offences</span> an
<script src="linegraph.js"></script>
</body>
</html>
<!-- "", "" -->
70 changes: 46 additions & 24 deletions linegraph.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,12 @@

var containerWidth = document.getElementById('my_dataviz1').getBoundingClientRect().width;

var softColours = [
"#fa4d56", "#002d9c", "#7c1158","#6929c4"

];


var margin = { top: 10, right: 30, bottom: 30, left: 60 },
width = containerWidth - margin.left - margin.right,
height = (width / 800) * 500;
Expand All @@ -21,26 +27,26 @@ var svg = d3.select("#my_dataviz1")

// Info display setup
var infoDisplay = svg.append("g")
.attr("transform", "translate(" + (width - 260) + ",20)");
.attr("transform", "translate(" + (width - 270) + ",30)");

infoDisplay.append("rect")
.attr("width", 250)
.attr("height", 80)
.attr("width", 240)
.attr("height", 90)
.attr("fill", "white")
.attr("stroke-width", 2)
.attr("stroke-width", 3)
.style("opacity", 0.9);

var infoBoxFontSize = width / 40;
var infoBoxFontSize = width / 45;
var infoText = infoDisplay.append("text")
.attr("x", 10)
.attr("y", 20)
.attr("y", 30)
.style("text-anchor", "start")
.style("font-size", infoBoxFontSize + "px");

// Prepare category data
const highlightCategories = ["Violent charges", "Sex offence charges", "Military misdemeanours", "Theft charges"];
const categoryTexts = {
"Violent charges": "Violent charges saw a considerable growth, featuring in 35% of all court martial cases in 2010 to 62% in 2023",
"Violent charges": "Violent charges saw a considerable growth, featuring in 35% of all court martial cases in 2010 and 62% in 2023",
"Sex offence charges": "Sex offences saw the biggest change, going from one in 20 cases in 2010 to one in three in 2023",
"Military misdemeanours": "Military misdemeanour charges have been trending downwards since 2010",
"Theft charges": "Theft charges remained similarly common between 2010 and 2023"
Expand Down Expand Up @@ -89,35 +95,35 @@ const categoryTexts = {
.style("font-size", yAxisFontSize + "px")
.text("Proportion of court martial cases featuring this charge (%)");

var color = d3.scaleOrdinal()
.domain(data.map(d => d.category))
.range(d3.schemeCategory10);
var colour = d3.scaleOrdinal()
.domain(highlightCategories)
.range(softColours);

let currentCategoryIndex = -1;

function highlightNextCategory() {
currentCategoryIndex = (currentCategoryIndex + 1) % highlightCategories.length;
updateVisualization();
updateVisualisation();
}

function highlightLastCategory() {
currentCategoryIndex = (currentCategoryIndex - 1 + highlightCategories.length) % highlightCategories.length;
updateVisualization();
updateVisualisation();
}

function updateVisualization() {
function updateVisualisation() {
const currentCategory = highlightCategories[currentCategoryIndex];
const categoryColor = color(currentCategory); // Get the color for the current category
// Update line styles and colors
const categoryColour = colour(currentCategory);

// Update line styles and colours
svg.selectAll(".line").remove();
svg.selectAll(".line")
.data(sumstat)
.enter()
.append("path")
.attr("class", "line")
.attr("fill", "none")
.attr("stroke", d => d[0] === currentCategory ? categoryColor : "grey")
.attr("stroke", d => d[0] === currentCategory ? categoryColour : "grey")
.attr("stroke-width", d => d[0] === currentCategory ? 3 : 1)
.attr("d", d => d3.line()
.x(d => x(d.year))
Expand All @@ -127,13 +133,13 @@ const categoryTexts = {
// Update text information display
updateInfoDisplay(categoryTexts[currentCategory]);

// Change the rectangle's fill color to match the line color
infoDisplay.select("rect").attr("stroke", categoryColor);
// Change the rectangle's fill colour to match the line colour
infoDisplay.select("rect").attr("stroke", categoryColour);
}


function updateInfoDisplay(text) {
infoText.selectAll("*").remove(); // Clear previous text
infoText.selectAll("*").remove();

const rectHeight = 80;
const x = 10;
Expand Down Expand Up @@ -165,8 +171,8 @@ const categoryTexts = {
// Add link for where i found bbox guide
var bbox = infoText.node().getBBox();
var textHeight = bbox.height;
var startY = (rectHeight - textHeight) / 2 + bbox.y; // Calculate the center position
var startY = (rectHeight - textHeight) / 2 + bbox.y;

// Adjust the text group position to center it vertically
infoText.attr("transform", "translate(0," + (startY - bbox.y) + ")");
}
Expand Down Expand Up @@ -207,7 +213,19 @@ function setupBasicLineGraph() {
var y = d3.scaleLinear()
.domain([0, 100])
.range([height, 0]);
var color = d3.scaleOrdinal(d3.schemeCategory10);
var colour = d3.scaleOrdinal(d3.schemeCategory10);

var yAxisFontSize = width / 50;

svg.append("text")
.attr("class", "y label2")
.attr("text-anchor", "end")
.attr("y", 4)
.attr("dy", "-3em")
.attr("transform", "rotate(-90)")
.style("font-size", yAxisFontSize + "px")
.text("Conviction rate for those facing violent and sex offence charges (%)");


d3.csv("long_format_conviction_rates.csv").then(function(data) {
console.log("Data loaded successfully:", data);
Expand All @@ -233,12 +251,16 @@ function setupBasicLineGraph() {
.selectAll("text")
.style("font-size", axisFontSize);

var colour = d3.scaleOrdinal()
.domain(highlightCategories)
.range(softColours);

sumstat.forEach(function(values, key) {
svg.append("path")
.datum(values)
.attr("class", "line")
.attr("fill", "none")
.attr("stroke", color(key))
.attr("stroke", colour(key))
.attr("stroke-width", 3)
.attr("d", d3.line()
.x(d => x(d.year))
Expand Down
17 changes: 13 additions & 4 deletions stylesheet.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,16 +28,25 @@ span {
#vizContainer {
float: left;
width: 50%;
min-width: 50em;
margin-right: 10px;
min-width: 55em;
margin-right: 10px;
margin-left: -5px;
margin-top:0px;
}

#vizContainer, #vizContainer2 h3 {
#vizContainer h3 {
margin-top: 10px;
margin-left: 50px;
}

#vizContainer2 h3 {
margin-bottom: 10px;
margin-top: 10px;
margin-bottom: 0;
margin-left: 10px;
float:right;
}


#vizContainer, #vizContainer2 {
font-size: 13px;
margin-bottom: 20px;
Expand Down

0 comments on commit 5700791

Please sign in to comment.