impact graph v1

assets/css/impact.css

@@ -0,0 +1,26 @@
+.slider {
+    width: 90%;
+    height: 25px;
+    background: #000080;
+    outline: none;
+    opacity: 0.7;
+    transition: opacity .2s;
+}
+
+.slider::-webkit-slider-thumb {
+    width: 30px;
+    height: 25px;
+    background: #FF0000;
+    cursor: pointer;
+    -webkit-appearance: none;
+    appearance: none;
+}
+
+.slider::-moz-range-thumb {
+    width: 30px;
+    height: 25px;
+    background: #FF0000;
+    cursor: pointer;
+}
+
+

assets/scripts/bubble.js

@@ -35,12 +35,12 @@ function updateChart(continent) {
 // Function to draw the bubble chart
 function drawBubbleChart(dataArray) {
     // Set up the SVG container
-    const width = 800;
-    const height = 600;
+    const bubbleChartWidth = 800;  // Renamed from width to bubbleChartWidth
+    const bubbleChartHeight = 600; // Renamed from height to bubbleChartHeight
     d3.select('#type_event_continent').selectAll('*').remove(); // Clear previous chart
     const svg = d3.select('#type_event_continent').append('svg')
-        .attr('width', width)
-        .attr('height', height);
+        .attr('width', bubbleChartWidth)
+        .attr('height', bubbleChartHeight);
 
     // Set up the simulation with forces to make bubbles collide
     const scale = d3.scaleSqrt()
@@ -49,14 +49,14 @@ function drawBubbleChart(dataArray) {
 
     const simulation = d3.forceSimulation(dataArray)
         .force('charge', d3.forceManyBody().strength(15))
-        .force('center', d3.forceCenter(width / 2, height / 2))
+        .force('center', d3.forceCenter(bubbleChartWidth / 2, bubbleChartHeight / 2))
         .force('collision', d3.forceCollide().radius(d => scale(d.value) + 2));
 
     // Draw the bubbles
     const node = svg.selectAll('g')
         .data(dataArray)
         .enter().append('g')
-        .attr('transform', `translate(${width / 2}, ${height / 2})`); // Center the bubbles
+        .attr('transform', `translate(${bubbleChartWidth / 2}, ${bubbleChartHeight / 2})`); // Center the bubbles
 
     node.append('circle')
         .attr('r', d => scale(d.value))
@@ -129,3 +129,4 @@ buttons_bubble.on('click', function() {
     updateChart(value);
 });
 
+

assets/scripts/distribution.js

@@ -0,0 +1,98 @@
+// Define the colors for different event types
+const eventColors = {
+    'Positive': 'green',
+    'Negative': 'red',
+    'Mixed': 'yellow'
+};
+
+// Load the CSV file
+d3.csv('data/modified_data.csv').then(function(data) {
+    // Filter out invalid data and future years
+    data = data.filter(d => {
+        const year = parseInt(d.Year);
+        return year && year <=  2023 && year >= 700;
+    });
+
+    // Get the minimum and maximum years from the data
+    const years = data.map(d => parseInt(d.Year));
+    const minYear = d3.min(years);
+    const maxYear = 2023;
+
+    // Set the slider's min and max values based on the data range
+    const slider = document.getElementById('yearRangeSlider');
+    slider.min = minYear;
+    slider.max = maxYear;
+    slider.value = maxYear;
+    document.getElementById('rangeDisplay').innerText = `${maxYear - 100} - ${maxYear}`;
+
+    // Aggregate data by year and count the occurrences of each type
+    const countsByYear = d3.rollups(data, v => v.length, d => d.Year, d => d.Outcome);
+
+    // Transform the data into a structure suitable for visualization
+    const yearData = countsByYear.map(([year, outcomes]) => {
+        const yearObj = { year: parseInt(year) };
+        outcomes.forEach(([outcome, count]) => {
+            yearObj[outcome] = count;
+        });
+        return yearObj;
+    });
+
+    // Sort data by year to ensure correct plotting
+    yearData.sort((a, b) => a.year - b.year);
+
+    // Set up the SVG
+    const svg = d3.select("#impact_analysis").attr("width", 600).attr("height", 400);
+    const margin = { top: 20, right: 20, bottom: 30, left: 40 };
+    const width = +svg.attr("width") - margin.left - margin.right;
+    const height = +svg.attr("height") - margin.top - margin.bottom;
+    const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
+
+    // Define the scales
+    let x = d3.scaleLinear().domain([maxYear - 100, maxYear]).range([0, width]);
+    let y = d3.scaleLinear().domain([0, d3.max(yearData, d => Math.max(d.Positive || 0, d.Negative || 0, d.Mixed || 0))]).range([height, 0]);
+
+    // Draw axes
+    const xAxis = g.append("g").attr("transform", `translate(0,${height})`).call(d3.axisBottom(x).tickFormat(d3.format("d")));
+    const yAxis = g.append("g").call(d3.axisLeft(y));
+
+    // Function to draw lines
+    function drawLines(data) {
+        const lineGenerator = d3.line()
+            .x(d => x(d.year))
+            .y(d => y(d.value))
+            .curve(d3.curveMonotoneX);
+
+        Object.keys(eventColors).forEach(type => {
+            const filteredData = data.map(d => ({ year: d.year, value: d[type] || 0 }));
+            g.selectAll(`.line-${type}`)
+                .data([filteredData])
+                .join(
+                    enter => enter.append("path")
+                        .attr("class", `line-${type}`)
+                        .attr("d", lineGenerator)
+                        .attr("stroke", eventColors[type])
+                        .attr("fill", "none"),
+                    update => update.attr("d", lineGenerator),
+                    exit => exit.remove()
+                );
+        });
+    }
+
+    // Initial draw
+    drawLines(yearData);
+
+    // Slider event listener
+    slider.addEventListener('input', function() {
+        const maxYear = +this.value;
+        const minYear = maxYear - 100;
+        x.domain([minYear, maxYear]);
+        xAxis.call(d3.axisBottom(x).tickFormat(d3.format("d")));
+        const filteredData = yearData.filter(d => d.year >= minYear && d.year <= maxYear);
+        drawLines(filteredData);
+        document.getElementById('rangeDisplay').innerText = `${minYear} - ${maxYear}`;
+    });
+}).catch(function(error) {
+    console.error("Error loading or processing data:", error);
+});
+
+

assets/scripts/mosaic.js

@@ -15,8 +15,8 @@ const PACKING_TEXT = {
     // Add relevant text descriptions here
 };
 
-const width = 700;
-const height = 800;
+const packingWidth = 700;  // Renamed from width to packingWidth
+const packingHeight = 800; // Renamed from height to packingHeight
 
 d3.csv('data/modified_data.csv').then(function(data) {
     const filteredData = data.filter(d => d.Sentiment !== "Ongoing");
@@ -43,7 +43,7 @@ function groupData(data) {
 
 function initPacking(root) {
     const pack = d3.pack()
-        .size([width, height])
+        .size([packingWidth, packingHeight])  // Use packingWidth and packingHeight
         .padding(CIRCLE_PADDING);
 
     const nodes = pack(root).descendants();
@@ -59,9 +59,9 @@ function initPacking(root) {
 
     const svg = d3.select(`#${PACKING_ELEMENT_ID}`)
         .append("svg")
-        .attr("width", width)
-        .attr("height", height)
-        .attr("viewBox", `${-width / 2} ${-height / 2} ${width} ${height}`)
+        .attr("width", packingWidth)
+        .attr("height", packingHeight)
+        .attr("viewBox", `${-packingWidth / 2} ${-packingHeight / 2} ${packingWidth} ${packingHeight}`)  // Adjusted viewBox
         .style("display", "block")
         .style("background", "none")
         .style("cursor", "pointer")
@@ -92,7 +92,7 @@ function initPacking(root) {
 
     let view;
     const zoomTo = (v) => {
-        const k = width / v[2];
+        const k = packingWidth / v[2];
 
         view = v;
 
@@ -128,20 +128,3 @@ function initPacking(root) {
             .on("end", function(d) { if (d.parent !== focus) this.style.display = "none"; });
     }
 }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-