Spaces:

rajkhanke
/

Dashboard

Running

App Files Files Community

rajkhanke commited on Feb 8, 2025

Commit

b0da134

verified ·

1 Parent(s): 3c0dc67

Update index.html

Browse files

Files changed (1) hide show

index.html +483 -18

index.html CHANGED Viewed

@@ -1,19 +1,484 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Enhanced Interactive D3.js Dashboard</title>
+  <!-- Load D3.js -->
+  <script src="https://d3js.org/d3.v7.min.js"></script>
+  <style>
+    /* General Page Styling */
+    body {
+      background: #f0f0f0;
+      font-family: 'Segoe UI', sans-serif;
+      margin: 0;
+      padding: 20px;
+    }
+    .container {
+      max-width: 1300px;
+      margin: auto;
+    }
+    /* Upload Section */
+    .upload-container {
+      background: #fff;
+      padding: 40px;
+      border-radius: 10px;
+      box-shadow: 0 5px 15px rgba(0,0,0,0.15);
+      text-align: center;
+      margin-bottom: 30px;
+      transition: transform 0.3s;
+    }
+    .upload-container:hover {
+      transform: scale(1.02);
+    }
+    .upload-container input[type="file"] {
+      margin-top: 20px;
+      padding: 12px 20px;
+      border: none;
+      background: #3498db;
+      color: #fff;
+      border-radius: 5px;
+      font-size: 16px;
+      cursor: pointer;
+      transition: background 0.3s;
+    }
+    .upload-container input[type="file"]:hover {
+      background: #2980b9;
+    }
+    /* Headings */
+    h1,h2, h3 {
+      text-align: center;
+      margin-top: 20px;
+      color: #333;
+    }
+    /* Top Cards Styling */
+    .card-container {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      margin-bottom: 20px;
+    }
+    .card {
+      flex: 1 1 calc(33% - 20px);
+      margin: 10px;
+      padding: 20px;
+      border-radius: 10px;
+      text-align: center;
+      color: #fff;
+      box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+      transition: transform 0.3s;
+      cursor: pointer;
+    }
+    .card:hover {
+      transform: scale(1.05);
+    }
+    /* Chart Containers */
+    .chart-container {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-around;
+      margin: 20px 10px;
+      background: #fff;
+      border-radius: 10px;
+      padding: 15px;
+      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+    }
+    .chart-box {
+      margin: 10px;
+    }
+    /* Circular Cards (Enlarged) */
+    .circular-card {
+      width: 200px;
+      height: 200px;
+      border-radius: 50%;
+      background: linear-gradient(135deg, #ff416c, #ff4b2b);
+      color: #fff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 18px;
+      font-weight: bold;
+      margin: 10px;
+      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+      transition: transform 0.3s;
+      text-align: center;
+      padding: 10px;
+    }
+    .circular-card:hover {
+      transform: rotate(10deg) scale(1.1);
+    }
+    /* Line Chart Container */
+    .line-chart {
+      background: #fff;
+      border-radius: 10px;
+      padding: 15px;
+      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+      margin: 20px 10px;
+      position: relative;
+    }
+    /* Tooltip for Charts */
+    .tooltip {
+      position: absolute;
+      text-align: center;
+      padding: 6px;
+      font: 12px sans-serif;
+      background: lightsteelblue;
+      border: 0;
+      border-radius: 4px;
+      pointer-events: none;
+      opacity: 0;
+      transition: opacity 0.3s;
+    }
+  </style>
+</head>
+<body>
+<div class="container">
+  <!-- File Upload UI -->
+  <div class="upload-container" id="uploadContainer">
+    <h2>Upload Your JSON File</h2>
+    <p>Please select a JSON file with your dashboard data.</p>
+    <input type="file" id="fileInput" accept=".json">
+  </div>
+  <!-- Dashboard (hidden until file is loaded) -->
+  <div id="dashboard" style="display: none;">
+    <!-- Top Cards -->
+    <h1>Visualization Dashboard</h1>
+    <div class="card-container" id="cards"></div>
+    <!-- Charts: Histogram and Pie Chart Side-by-Side -->
+    <h2>Charts</h2>
+    <div class="chart-container">
+      <div class="chart-box" id="histogramContainer">
+        <h3>Histogram of Similarity Scores</h3>
+        <svg id="histogram"></svg>
+      </div>
+      <div class="chart-box" id="pieChartContainer">
+        <h3>Matches Distribution Pie Chart</h3>
+        <svg id="pieChart"></svg>
+      </div>
+    </div>
+    <!-- Interactive Line Chart -->
+    <h3>Interactive Line Chart of Similarity Scores</h3>
+    <div id="lineChart" class="line-chart"></div>
+    <!-- Circular Cards for Similarity Statistics -->
+    <h2>Similarity Statistics</h2>
+    <div class="card-container" id="circularCards" style="justify-content: center;"></div>
+  </div>
+</div>
+<!-- Tooltip (used by both histogram and line chart) -->
+<div id="tooltip" class="tooltip"></div>
+<script>
+  // Listen for file input changes and parse JSON
+  document.getElementById('fileInput').addEventListener('change', function(event) {
+    const file = event.target.files[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = function(e) {
+      let jsonData;
+      try {
+        jsonData = JSON.parse(e.target.result);
+      } catch(err) {
+        alert("Invalid JSON file!");
+        return;
+      }
+      // Hide the upload container and display the dashboard
+      document.getElementById('uploadContainer').style.display = 'none';
+      document.getElementById('dashboard').style.display = 'block';
+      updateDashboard(jsonData);
+    }
+    reader.readAsText(file);
+  });
+  function updateDashboard(data) {
+    // Clear previous content
+    d3.select("#cards").html("");
+    d3.select("#histogram").html("");
+    d3.select("#pieChart").html("");
+    d3.select("#lineChart").html("");
+    d3.select("#circularCards").html("");
+    // ---- Top Cards (Key Metrics) ----
+    const cardData = [
+      { label: "Total Records", value: data.total_rows, bg: "linear-gradient(135deg, #6a11cb, #2575fc)" },
+      { label: "Exact Matches", value: data.total_exact_match, bg: "linear-gradient(135deg, #ff416c, #ff4b2b)" },
+      { label: "Partial Matches", value: data.total_partial_match, bg: "linear-gradient(135deg, #1abc9c, #16a085)" },
+      { label: "Unmatched", value: data.total_unmatched, bg: "linear-gradient(135deg, #f39c12, #d35400)" },
+      { label: "Edited", value: data.total_no_review_needed, bg: "linear-gradient(135deg, #3498db, #2980b9)" },
+      { label: "Not Edited", value: data.total_needs_review, bg: "linear-gradient(135deg, #9b59b6, #8e44ad)" }
+    ];
+    d3.select("#cards")
+      .selectAll(".card")
+      .data(cardData)
+      .enter()
+      .append("div")
+        .attr("class", "card")
+        .style("background", d => d.bg)
+        .html(d => `<h3>${d.label}</h3><p>${d.value}</p>`);
+    // ---- Histogram of Similarity Scores ----
+    const histogramWidth = 500, histogramHeight = 350,
+          margin = {top: 20, right: 20, bottom: 50, left: 50};
+    const svgHist = d3.select("#histogram")
+                      .attr("width", histogramWidth)
+                      .attr("height", histogramHeight)
+                      .append("g");
+    // Define a gradient for a 3D effect on bars
+    const defs = svgHist.append("defs");
+    const gradient = defs.append("linearGradient")
+        .attr("id", "barGradient")
+        .attr("x1", "0%")
+        .attr("y1", "0%")
+        .attr("x2", "0%")
+        .attr("y2", "100%");
+    gradient.append("stop")
+        .attr("offset", "0%")
+        .attr("stop-color", "#3498db")
+        .attr("stop-opacity", 1);
+    gradient.append("stop")
+        .attr("offset", "100%")
+        .attr("stop-color", "#2980b9")
+        .attr("stop-opacity", 1);
+    const scores = data.similarity_scores;
+    const x = d3.scaleLinear()
+                .domain([0, 100])
+                .range([margin.left, histogramWidth - margin.right]);
+    const bins = d3.bin()
+                   .domain(x.domain())
+                   .thresholds(x.ticks(20))
+                   (scores);
+    const y = d3.scaleLinear()
+                .domain([0, d3.max(bins, d => d.length)])
+                .nice()
+                .range([histogramHeight - margin.bottom, margin.top]);
+    // Create groups for each bin and add interactivity (no static count labels)
+    const bar = svgHist.selectAll(".bar")
+                       .data(bins)
+                       .enter().append("g")
+                       .attr("class", "bar")
+                       .attr("transform", d => `translate(${x(d.x0)}, ${y(0)})`)
+                       .on("mouseover", function(event, d) {
+                          d3.select(this).select("rect")
+                            .transition().duration(200)
+                            .attr("fill", "#1abc9c");
+                          d3.select("#tooltip")
+                            .style("opacity", 1)
+                            .html(`Range: ${d.x0.toFixed(2)} - ${d.x1.toFixed(2)}<br>Count: ${d.length}`)
+                            .style("left", (event.pageX + 10) + "px")
+                            .style("top", (event.pageY - 30) + "px");
+                       })
+                       .on("mouseout", function(event, d) {
+                          d3.select(this).select("rect")
+                            .transition().duration(200)
+                            .attr("fill", "url(#barGradient)");
+                          d3.select("#tooltip").style("opacity", 0);
+                       });
+    bar.append("rect")
+       .attr("x", 1)
+       .attr("width", d => Math.max(0, x(d.x1) - x(d.x0) - 1))
+       .attr("height", 0)
+       .attr("fill", "url(#barGradient)")
+     .transition()
+       .duration(1000)
+       .attr("height", d => histogramHeight - margin.bottom - y(d.length))
+       .attr("transform", d => `translate(0, ${y(d.length) - y(0)})`);
+    // Add x-axis
+    const xAxis = d3.axisBottom(x);
+    svgHist.append("g")
+           .attr("transform", `translate(0, ${histogramHeight - margin.bottom})`)
+           .call(xAxis);
+    // x-axis label
+    svgHist.append("text")
+           .attr("class", "x label")
+           .attr("text-anchor", "middle")
+           .attr("x", histogramWidth / 2)
+           .attr("y", histogramHeight - 10)
+           .text("Similarity Score (0-100)");
+    // Add y-axis
+    const yAxis = d3.axisLeft(y);
+    svgHist.append("g")
+           .attr("transform", `translate(${margin.left},0)`)
+           .call(yAxis);
+    // y-axis label
+    svgHist.append("text")
+           .attr("class", "y label")
+           .attr("text-anchor", "middle")
+           .attr("transform", "rotate(-90)")
+           .attr("x", -histogramHeight / 2)
+           .attr("y", 15)
+           .text("Frequency");
+    // ---- Interactive Pie Chart for Matches Distribution ----
+    const pieWidth = 500, pieHeight = 350;
+    const radius = Math.min(pieWidth, pieHeight) / 2 - 20;
+    const svgPie = d3.select("#pieChart")
+                     .attr("width", pieWidth)
+                     .attr("height", pieHeight)
+                     .append("g")
+                     .attr("transform", `translate(${pieWidth/2}, ${pieHeight/2})`);
+    // Prepare pie chart data: Exact, Partial, and Unmatched
+    const pieData = [
+      { category: "Exact Matches", value: data.total_exact_match },
+      { category: "Partial Matches", value: data.total_partial_match },
+      { category: "Unmatched", value: data.total_unmatched }
+    ];
+    const totalMatches = d3.sum(pieData, d => d.value);
+    const color = d3.scaleOrdinal()
+                    .domain(pieData.map(d => d.category))
+                    .range(["#ff4b2b", "#16a085", "#d35400"]);
+    const pie = d3.pie()
+                  .sort(null)
+                  .value(d => d.value);
+    const arc = d3.arc()
+                  .innerRadius(0)
+                  .outerRadius(radius);
+    const arcHover = d3.arc()
+                       .innerRadius(0)
+                       .outerRadius(radius + 10);
+    const arcs = svgPie.selectAll(".arc")
+                       .data(pie(pieData))
+                       .enter()
+                       .append("g")
+                       .attr("class", "arc");
+    arcs.append("path")
+        .attr("d", arc)
+        .attr("fill", d => color(d.data.category))
+        .on("mouseover", function(event, d) {
+          d3.select(this)
+            .transition().duration(200)
+            .attr("d", arcHover);
+        })
+        .on("mouseout", function(event, d) {
+          d3.select(this)
+            .transition().duration(200)
+            .attr("d", arc);
+        });
+    // Add combined labels: category and percentage in each slice
+    arcs.append("text")
+        .attr("transform", d => `translate(${arc.centroid(d)})`)
+        .attr("dy", "0.35em")
+        .attr("text-anchor", "middle")
+        .style("fill", "#fff")
+        .style("font-size", "14px")
+        .text(d => {
+          let percent = ((d.data.value / totalMatches) * 100).toFixed(0);
+          return `${d.data.category}: ${percent}%`;
+        });
+    // ---- Interactive Line Chart of Similarity Scores ----
+    const lineChartWidth = 1000, lineChartHeight = 400;
+    const svgLine = d3.select("#lineChart")
+                      .append("svg")
+                      .attr("width", lineChartWidth)
+                      .attr("height", lineChartHeight);
+    const xLine = d3.scaleLinear()
+                    .domain([0, scores.length - 1])
+                    .range([margin.left, lineChartWidth - margin.right]);
+    const yLine = d3.scaleLinear()
+                    .domain([0, 100])
+                    .range([lineChartHeight - margin.bottom, margin.top]);
+    const line = d3.line()
+                   .x((d, i) => xLine(i))
+                   .y(d => yLine(d))
+                   .curve(d3.curveCatmullRom.alpha(0.5));
+    // Draw the line
+    svgLine.append("path")
+           .datum(scores)
+           .attr("fill", "none")
+           .attr("stroke", "#27ae60")
+           .attr("stroke-width", 3)
+           .attr("d", line);
+    // Draw interactive circles at data points
+    svgLine.selectAll("circle")
+           .data(scores)
+           .enter()
+           .append("circle")
+           .attr("cx", (d, i) => xLine(i))
+           .attr("cy", d => yLine(d))
+           .attr("r", 4)
+           .attr("fill", "#27ae60")
+           .on("mouseover", function(event, d) {
+              d3.select(this)
+                .transition().duration(200)
+                .attr("r", 7);
+              d3.select("#tooltip")
+                .style("opacity", 1)
+                .html(`Similarity: ${d.toFixed(2)}`)
+                .style("left", (event.pageX + 10) + "px")
+                .style("top", (event.pageY - 20) + "px");
+           })
+           .on("mouseout", function() {
+              d3.select(this)
+                .transition().duration(200)
+                .attr("r", 4);
+              d3.select("#tooltip").style("opacity", 0);
+           });
+    // Add x-axis for line chart
+    const xAxisLine = d3.axisBottom(xLine);
+    svgLine.append("g")
+           .attr("transform", `translate(0, ${lineChartHeight - margin.bottom})`)
+           .call(xAxisLine);
+    // x-axis label for line chart
+    svgLine.append("text")
+           .attr("class", "x label")
+           .attr("text-anchor", "middle")
+           .attr("x", lineChartWidth / 2)
+           .attr("y", lineChartHeight - 10)
+           .text("Index");
+    // Add y-axis for line chart
+    const yAxisLine = d3.axisLeft(yLine);
+    svgLine.append("g")
+           .attr("transform", `translate(${margin.left},0)`)
+           .call(yAxisLine);
+    // y-axis label for line chart
+    svgLine.append("text")
+           .attr("class", "y label")
+           .attr("text-anchor", "middle")
+           .attr("transform", "rotate(-90)")
+           .attr("x", -lineChartHeight / 2)
+           .attr("y", 15)
+           .text("Similarity Score");
+    // ---- Circular Cards for Similarity Statistics (Rounded to 2 Decimals) ----
+    const circularData = [
+      { label: "Avg Similarity", value: data.average_similarity },
+      { label: "Min Similarity", value: data.min_similarity },
+      { label: "Max Similarity", value: data.max_similarity }
+    ];
+    d3.select("#circularCards")
+      .selectAll(".circular-card")
+      .data(circularData)
+      .enter()
+      .append("div")
+      .attr("class", "circular-card")
+      .html(d => `<div><div>${d.label}</div><div>${(+d.value).toFixed(2)}</div></div>`);
+  }
+</script>
+</body>
 </html>