Hugging Face's logo

Spaces:
anonymous111110987654321
/
us-tariff-dashboard
Running

App Files Community
us-tariff-dashboard / index.html
anonymous111110987654321's picture
anonymous111110987654321
Add 3 files
aa7c3d1 verified
raw
history blame contribute delete
21.9 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>US Tariff Dashboard</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <script>
 tailwind.config = {
 theme: {
 extend: {
 colors: {
 primary: '#1a365d',
 secondary: '#2c5282',
 accent: '#4299e1',
 }
 }
 }
 }
 </script>
 <style>
 .data-table {
 max-height: 500px;
 overflow-y: auto;
 }
 .data-table::-webkit-scrollbar {
 width: 8px;
 }
 .data-table::-webkit-scrollbar-track {
 background: #f1f1f1;
 }
 .data-table::-webkit-scrollbar-thumb {
 background: #888;
 border-radius: 4px;
 }
 .data-table::-webkit-scrollbar-thumb:hover {
 background: #555;
 }
 .chart-container {
 height: 300px;
 }
 </style>
</head>
<body class="bg-gray-100">
 <div class="container mx-auto px-4 py-8">
 <header class="mb-8">
 <h1 class="text-3xl font-bold text-primary">US Tariff Dashboard</h1>
 <p class="text-gray-600">Comprehensive overview of tariff rates, import values, and revenue by country</p>
 <div class="mt-4 bg-blue-100 border-l-4 border-blue-500 text-blue-700 p-4" role="alert">
 <p class="font-bold">Note</p>
 <p>This dashboard displays simulated data for demonstration purposes. Actual tariff data can be obtained from the U.S. International Trade Commission.</p>
 </div>
 </header>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
 <!-- Summary Cards -->
 <div class="bg-white rounded-lg shadow p-6">
 <div class="flex items-center">
 <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-4">
 <i class="fas fa-globe-americas text-xl"></i>
 </div>
 <div>
 <p class="text-gray-500">Total Trading Partners</p>
 <h3 class="text-2xl font-bold">142</h3>
 </div>
 </div>
 </div>
<div class="bg-white rounded-lg shadow p-6">
 <div class="flex items-center">
 <div class="p-3 rounded-full bg-green-100 text-green-600 mr-4">
 <i class="fas fa-boxes text-xl"></i>
 </div>
 <div>
 <p class="text-gray-500">Total Imports (2023)</p>
 <h3 class="text-2xl font-bold">$3.4T</h3>
 </div>
 </div>
 </div>
<div class="bg-white rounded-lg shadow p-6">
 <div class="flex items-center">
 <div class="p-3 rounded-full bg-purple-100 text-purple-600 mr-4">
 <i class="fas fa-money-bill-wave text-xl"></i>
 </div>
 <div>
 <p class="text-gray-500">Total Tariff Revenue</p>
 <h3 class="text-2xl font-bold">$85.2B</h3>
 </div>
 </div>
 </div>
 </div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
 <!-- Charts -->
 <div class="bg-white rounded-lg shadow p-6 col-span-2">
 <h2 class="text-xl font-semibold mb-4 text-primary">Top Import Sources by Value</h2>
 <div class="chart-container">
 <canvas id="importsChart"></canvas>
 </div>
 </div>
<div class="bg-white rounded-lg shadow p-6">
 <h2 class="text-xl font-semibold mb-4 text-primary">Tariff Revenue by Region</h2>
 <div class="chart-container">
 <canvas id="revenueChart"></canvas>
 </div>
 </div>
 </div>
<div class="bg-white rounded-lg shadow overflow-hidden mb-8">
 <div class="p-6 border-b border-gray-200">
 <h2 class="text-xl font-semibold text-primary">Detailed Tariff Data by Country</h2>
 <p class="text-gray-600">Scroll to view all data. Click on headers to sort.</p>
 </div>
 <div class="p-4">
 <div class="relative">
 <input type="text" placeholder="Search countries..." class="w-full lg:w-1/3 mb-4 px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-accent">
 </div>
 <div class="data-table">
 <table class="min-w-full divide-y divide-gray-200">
 <thead class="bg-gray-50">
 <tr>
 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100">
 <div class="flex items-center">
 Country
 <i class="fas fa-sort ml-2 text-gray-400"></i>
 </div>
 </th>
 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100">
 <div class="flex items-center">
 Avg Tariff Rate (%)
 <i class="fas fa-sort ml-2 text-gray-400"></i>
 </div>
 </th>
 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100">
 <div class="flex items-center">
 Import Value ($B)
 <i class="fas fa-sort ml-2 text-gray-400"></i>
 </div>
 </th>
 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100">
 <div class="flex items-center">
 Tariff Revenue ($B)
 <i class="fas fa-sort ml-2 text-gray-400"></i>
 </div>
 </th>
 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100">
 <div class="flex items-center">
 Top Product
 <i class="fas fa-sort ml-2 text-gray-400"></i>
 </div>
 </th>
 </tr>
 </thead>
 <tbody class="bg-white divide-y divide-gray-200" id="tariffData">
 <!-- Data will be inserted here by JavaScript -->
 </tbody>
 </table>
 </div>
 </div>
 </div>
<div class="bg-white rounded-lg shadow p-6 mb-8">
 <h2 class="text-xl font-semibold mb-4 text-primary">Key Insights</h2>
 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
 <div>
 <h3 class="font-medium text-lg mb-2">Highest Average Tariff Rates</h3>
 <ul class="space-y-2">
 <li class="flex items-start">
 <span class="inline-block bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full mr-2">1</span>
 <div>
 <span class="font-medium">North Korea</span> - 35.0%
 <p class="text-sm text-gray-600">Primarily due to comprehensive trade restrictions</p>
 </div>
 </li>
 <li class="flex items-start">
 <span class="inline-block bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full mr-2">2</span>
 <div>
 <span class="font-medium">Cuba</span> - 28.5%
 <p class="text-sm text-gray-600">Result of long-standing trade embargo policies</p>
 </div>
 </li>
 <li class="flex items-start">
 <span class="inline-block bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full mr-2">3</span>
 <div>
 <span class="font-medium">Russia</span> - 22.7%
 <p class="text-sm text-gray-600">Increased tariffs following 2022 sanctions</p>
 </div>
 </li>
 </ul>
 </div>
 <div>
 <h3 class="font-medium text-lg mb-2">Largest Sources of Tariff Revenue</h3>
 <ul class="space-y-2">
 <li class="flex items-start">
 <span class="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full mr-2">1</span>
 <div>
 <span class="font-medium">China</span> - $32.8B
 <p class="text-sm text-gray-600">Section 301 tariffs account for majority of revenue</p>
 </div>
 </li>
 <li class="flex items-start">
 <span class="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full mr-2">2</span>
 <div>
 <span class="font-medium">European Union</span> - $12.4B
 <p class="text-sm text-gray-600">Primarily from steel, aluminum, and agricultural products</p>
 </div>
 </li>
 <li class="flex items-start">
 <span class="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full mr-2">3</span>
 <div>
 <span class="font-medium">Mexico</span> - $8.2B
 <p class="text-sm text-gray-600">Automotive and agricultural imports dominate</p>
 </div>
 </li>
 </ul>
 </div>
 </div>
 </div>
<div class="bg-white rounded-lg shadow p-6">
 <h2 class="text-xl font-semibold mb-4 text-primary">Data Methodology</h2>
 <div class="prose max-w-none">
 <p>This dashboard presents simulated data to demonstrate how real US tariff information could be displayed. Actual tariff data includes:</p>
 <ul class="list-disc pl-5 space-y-1">
 <li>Most Favored Nation (MFN) tariff rates applied to WTO members</li>
 <li>Preferential tariff rates under free trade agreements (NAFTA/USMCA, CAFTA-DR, etc.)</li>
 <li>Special tariff programs (GSP, AGOA, etc.)</li>
 <li>Section 301, 232, and other special tariffs</li>
 </ul>
 <p class="mt-4">For official data, please consult:</p>
 <div class="flex flex-wrap gap-2 mt-2">
 <a href="https://dataweb.usitc.gov/" class="px-3 py-1 bg-gray-100 rounded-full text-sm hover:bg-gray-200">USITC DataWeb</a>
 <a href="https://www.cbp.gov/trade" class="px-3 py-1 bg-gray-100 rounded-full text-sm hover:bg-gray-200">CBP Trade</a>
 <a href="https://ustr.gov/issue-areas/enforcement/section-301-investigations" class="px-3 py-1 bg-gray-100 rounded-full text-sm hover:bg-gray-200">USTR Section 301</a>
 </div>
 </div>
 </div>
 </div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 <script>
 // Sample data - in a real application, this would come from an API
 const tariffData = [
 { country: "China", tariffRate: 19.3, importValue: 536.8, revenue: 32.8, topProduct: "Electronics" },
 { country: "Mexico", tariffRate: 2.5, importValue: 324.2, revenue: 8.2, topProduct: "Vehicles" },
 { country: "Canada", tariffRate: 1.9, importValue: 356.2, revenue: 6.7, topProduct: "Mineral Fuels" },
 { country: "Japan", tariffRate: 3.2, importValue: 148.1, revenue: 4.7, topProduct: "Machinery" },
 { country: "Germany", tariffRate: 4.1, importValue: 146.2, revenue: 5.9, topProduct: "Pharmaceuticals" },
 { country: "South Korea", tariffRate: 3.8, importValue: 98.6, revenue: 3.7, topProduct: "Semiconductors" },
 { country: "United Kingdom", tariffRate: 3.5, importValue: 77.2, revenue: 2.7, topProduct: "Aerospace" },
 { country: "India", tariffRate: 6.2, importValue: 87.5, revenue: 5.4, topProduct: "Textiles" },
 { country: "France", tariffRate: 4.3, importValue: 62.3, revenue: 2.6, topProduct: "Wine & Spirits" },
 { country: "Vietnam", tariffRate: 8.7, importValue: 105.4, revenue: 9.1, topProduct: "Footwear" },
 { country: "Italy", tariffRate: 3.9, importValue: 58.7, revenue: 2.2, topProduct: "Fashion" },
 { country: "Taiwan", tariffRate: 4.5, importValue: 78.9, revenue: 3.5, topProduct: "Computer Chips" },
 { country: "Brazil", tariffRate: 5.1, importValue: 42.3, revenue: 2.1, topProduct: "Coffee" },
 { country: "Russia", tariffRate: 22.7, importValue: 15.8, revenue: 3.5, topProduct: "Oil" },
 { country: "Thailand", tariffRate: 7.3, importValue: 48.6, revenue: 3.5, topProduct: "Rubber" },
 { country: "Malaysia", tariffRate: 6.8, importValue: 52.3, revenue: 3.5, topProduct: "Palm Oil" },
 { country: "Switzerland", tariffRate: 3.1, importValue: 45.2, revenue: 1.4, topProduct: "Watches" },
 { country: "Ireland", tariffRate: 2.8, importValue: 68.5, revenue: 1.9, topProduct: "Medical Devices" },
 { country: "Australia", tariffRate: 2.3, importValue: 32.7, revenue: 0.7, topProduct: "Beef" },
 { country: "Israel", tariffRate: 4.2, importValue: 28.4, revenue: 1.1, topProduct: "Diamonds" }
 ];
 // Populate the table
 const tableBody = document.getElementById('tariffData');
tariffData.forEach(item => {
 const row = document.createElement('tr');
 row.className = 'hover:bg-gray-50';
 row.innerHTML = `
 <td class="px-6 py-4 whitespace-nowrap">
 <div class="flex items-center">
 <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
 <i class="fas fa-flag text-blue-600"></i>
 </div>
 <div class="ml-4">
 <div class="text-sm font-medium text-gray-900">${item.country}</div>
 </div>
 </div>
 </td>
 <td class="px-6 py-4 whitespace-nowrap">
 <div class="text-sm text-gray-900">${item.tariffRate.toFixed(1)}%</div>
 </td>
 <td class="px-6 py-4 whitespace-nowrap">
 <div class="text-sm text-gray-900">$${item.importValue.toFixed(1)}</div>
 </td>
 <td class="px-6 py-4 whitespace-nowrap">
 <div class="text-sm text-gray-900">$${item.revenue.toFixed(1)}</div>
 </td>
 <td class="px-6 py-4 whitespace-nowrap">
 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
 ${item.topProduct}
 </span>
 </td>
 `;
 tableBody.appendChild(row);
 });
 // Create charts
 const importsCtx = document.getElementById('importsChart').getContext('2d');
 const importsChart = new Chart(importsCtx, {
 type: 'bar',
 data: {
 labels: tariffData.slice(0, 10).map(item => item.country),
 datasets: [{
 label: 'Import Value ($B)',
 data: tariffData.slice(0, 10).map(item => item.importValue),
 backgroundColor: 'rgba(54, 162, 235, 0.7)',
 borderColor: 'rgba(54, 162, 235, 1)',
 borderWidth: 1
 }]
 },
 options: {
 responsive: true,
 maintainAspectRatio: false,
 scales: {
 y: {
 beginAtZero: true,
 title: {
 display: true,
 text: 'Billions of USD'
 }
 }
 }
 }
 });
 const revenueCtx = document.getElementById('revenueChart').getContext('2d');
 const revenueChart = new Chart(revenueCtx, {
 type: 'doughnut',
 data: {
 labels: ['Asia', 'North America', 'Europe', 'South America', 'Africa', 'Oceania'],
 datasets: [{
 data: [62, 15, 12, 6, 3, 2],
 backgroundColor: [
 'rgba(255, 99, 132, 0.7)',
 'rgba(54, 162, 235, 0.7)',
 'rgba(255, 206, 86, 0.7)',
 'rgba(75, 192, 192, 0.7)',
 'rgba(153, 102, 255, 0.7)',
 'rgba(255, 159, 64, 0.7)'
 ],
 borderWidth: 1
 }]
 },
 options: {
 responsive: true,
 maintainAspectRatio: false,
 plugins: {
 legend: {
 position: 'right',
 },
 tooltip: {
 callbacks: {
 label: function(context) {
 return `${context.label}: $${context.raw}B (${Math.round(context.raw/85.2*100)}%)`;
 }
 }
 }
 }
 }
 });
 // Simple search functionality
 const searchInput = document.querySelector('input[type="text"]');
 searchInput.addEventListener('input', (e) => {
 const searchTerm = e.target.value.toLowerCase();
 const rows = tableBody.querySelectorAll('tr');
rows.forEach(row => {
 const countryName = row.querySelector('td:first-child div div').textContent.toLowerCase();
 if (countryName.includes(searchTerm)) {
 row.style.display = '';
 } else {
 row.style.display = 'none';
 }
 });
 });
 // Simple sorting functionality
 const headers = document.querySelectorAll('th');
 headers.forEach((header, index) => {
 header.addEventListener('click', () => {
 sortTable(index);
 });
 });
 function sortTable(columnIndex) {
 const rows = Array.from(tableBody.querySelectorAll('tr'));
rows.sort((a, b) => {
 const aValue = a.querySelectorAll('td')[columnIndex].textContent;
 const bValue = b.querySelectorAll('td')[columnIndex].textContent;
// Handle numeric values
 if (columnIndex === 1 || columnIndex === 2 || columnIndex === 3) {
 const aNum = parseFloat(aValue.replace(/[^0-9.-]/g, ''));
 const bNum = parseFloat(bValue.replace(/[^0-9.-]/g, ''));
 return aNum - bNum;
 }
// Handle text values
 return aValue.localeCompare(bValue);
 });
// Clear and re-add sorted rows
 tableBody.innerHTML = '';
 rows.forEach(row => tableBody.appendChild(row));
 }
 </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=anonymous111110987654321/us-tariff-dashboard" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>