2b:null 2c:["$","title",null,{"children":"Marzanna | disinformation | Observable"}] 31:T20e1,barChartSimple = { const wrapper = html`

Η εθνικότητα των συμφερόντων των τάνκερ που έχουν μεταφέρει ρωσικό πετρέλαιο από τον αγωγό CPC

Ο πίνακας παρουσιάζει την εθνικότητα των συμφερόντων των τάνκερ που έχουν μεταφέρει ρωσικό πετρέλαιο από τον αγωγό CPC μετά την εισβολή της Ρωσίας στην Ουκρανία (1.3.2022 - 9.11.2024).

Πατήστε τα κουμπιά του πίνακα, για να δείτε την κατάταξη των χωρών ανά αριθμό δρομολογίων και όγκο φορτίων.

Πηγή: Kpler, Equasis

Διαχείριση δεδομένων: Σωτήρης Σιδέρης / Reporters United

`; const container = wrapper.querySelector('#container'); // Custom formatter for numbers using dot as thousands separator const dotFormatter = (value) => { return new Intl.NumberFormat('de-DE').format(value); }; let dataDromolologia = [ { "Country": "Ελλάδα", "Value": 68 }, { "Country": "Τουρκία", "Value": 24 }, { "Country": "Ηνωμένα Αραβικά Εμιράτα", "Value": 19 }, { "Country": "Βιετνάμ", "Value": 8 }, { "Country": "Κίνα", "Value": 8 }, { "Country": "Σεϋχέλλες", "Value": 4 }, { "Country": "Σιγκαπούρη", "Value": 3 }, { "Country": "Νορβηγία", "Value": 2 }, { "Country": "Ινδία", "Value": 2 }, { "Country": "Κροατία", "Value": 1 }, { "Country": "Αντίγκουα και Μπαρμπούντα", "Value": 1 }, { "Country": "Νήσοι Μάρσαλ", "Value": 1 }, { "Country": "Μονακό", "Value": 1 }, { "Country": "Κύπρος", "Value": 1 }, { "Country": "Γερμανία", "Value": 1 } ]; let dataTonoi = [ { "Country": "Ελλάδα", "Value": 10477161 }, { "Country": "Τουρκία", "Value": 3593778 }, { "Country": "Ηνωμένα Αραβικά Εμιράτα", "Value": 2952934 }, { "Country": "Βιετνάμ", "Value": 1270685 }, { "Country": "Κίνα", "Value": 960090 }, { "Country": "Σεϋχέλλες", "Value": 635506 }, { "Country": "Σιγκαπούρη", "Value": 499404 }, { "Country": "Νορβηγία", "Value": 318116 }, { "Country": "Ινδία", "Value": 316181 }, { "Country": "Κροατία", "Value": 166188 }, { "Country": "Αντίγκουα και Μπαρμπούντα", "Value": 159186 }, { "Country": "Νήσοι Μάρσαλ", "Value": 159081 }, { "Country": "Μονακό", "Value": 157286 }, { "Country": "Κύπρος", "Value": 146356 }, { "Country": "Γερμανία", "Value": 115896 } ]; const addRankings = (data) => { const sortedData = [...data].sort((a, b) => b.Value - a.Value); sortedData.forEach((item, index) => { item.Rank = index + 1; item.CountryWithRank = `${item.Rank}. ${item.Country}`; }); return sortedData; }; const renderBarChart = (data, valueField, xAxisTitle) => { const rankedData = addRankings(data); container.innerHTML = ''; // Clear the container // Adjusting formatter based on valueField const xAxisOptions = { title: { text: xAxisTitle, style: { fontFamily: 'Helvetica', fontSize: 12, fill: 'grey', } }, label: { formatter: (value) => dotFormatter(value) }, // Set tick interval to 2 for the tonnage in millions tickInterval: valueField === 'Tonoi' ? 2 : undefined, min: valueField === 'Tonoi' ? 0 : undefined, max: valueField === 'Tonoi' ? 12 : undefined, nice: true }; const barChart = new G2Plot.Bar(container, { data: rankedData.map(d => ({ ...d, Value: valueField === 'Tonoi' ? d.Value / 1000000 : d.Value })), xField: 'Value', yField: 'CountryWithRank', seriesField: 'Country', legend: false, xAxis: xAxisOptions, color: '#3937b5', yAxis: { label: { style: { fontWeight: 'bold', color: 'black', fontSize: 14 }, formatter: (text) => text } }, tooltip: { showMarkers: false, customContent: (title, items) => { if (!items || items.length === 0) return ''; // Corrected this line const datum = items[0].data; const originalValue = (valueField === 'Tonoi') ? datum.Value * 1000000 : datum.Value; const formattedValue = dotFormatter(originalValue); const suffix = (valueField === 'Dromolologia' && originalValue === 1) ? 'δρομολόγιο' : (valueField === 'Dromolologia' ? 'δρομολόγια' : 'μετρικοί τόνοι'); return `

${datum.Country}: ${formattedValue} ${suffix}

`; }, domStyles: { 'g2-tooltip': { backgroundColor: 'white', border: '1px solid #ccc', fontFamily: 'Helvetica', color: 'black' }, } } }); barChart.render(); }; const highlightButton = (buttonId) => { document.getElementById('dromolologiaButton').style.backgroundColor = 'white'; document.getElementById('dromolologiaButton').style.color = 'black'; document.getElementById('tonoiButton').style.backgroundColor = 'white'; document.getElementById('tonoiButton').style.color = 'black'; const activeButton = document.getElementById(buttonId); activeButton.style.backgroundColor = '#3937b5'; // Dark blue when active activeButton.style.color = 'white'; }; // Initial render requestAnimationFrame(() => { document.getElementById('dromolologiaButton').addEventListener('click', () => { renderBarChart(dataDromolologia, 'Dromolologia', 'Δρομολόγια'); highlightButton('dromolologiaButton'); }); document.getElementById('tonoiButton').addEventListener('click', () => { renderBarChart(dataTonoi, 'Tonoi', 'Εκατομμύρια μετρικοί τόνοι (DWT)'); highlightButton('tonoiButton'); }); renderBarChart(dataDromolologia, 'Dromolologia', 'Δρομολόγια'); // Default view highlightButton('dromolologiaButton'); }); return wrapper; } 32:[{"id":"437f8f006d2786f2838032d202a1f48b2ca11be3d1f212b5f69b1e5fa8636776d32f62285b72547a7418c24a7541983ddd8abf6c18b8b7a26462c6f060874df6","href":"https://static.observableusercontent.com/files/437f8f006d2786f2838032d202a1f48b2ca11be3d1f212b5f69b1e5fa8636776d32f62285b72547a7418c24a7541983ddd8abf6c18b8b7a26462c6f060874df6","name":"RU_logo_nogr-300x130.png","type":"image/png","lastModified":1731960206149.205,"size":10385}] 2f:{"id":"cff2863cd8869911","slug":null,"title":"Marzanna","thumbnail":"7c22bb0ab77731eeaff13e289c47de1a641a885e72ee74892e017f416d6f8223","access_level":"public","create_time":"$D2024-11-18T20:02:09.093Z","update_time":"$D2024-11-26T14:17:17.634Z","view_time":null,"first_public_time":"$D2024-11-26T13:16:20.309Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"f1917a480c8ae104","login":"disinformation","name":"disinformation","avatar_url":"https://avatars-next.observableusercontent.com/32ad793086710e3a48a95d008b1b29d2d5265ea131a9e9964bf681a46c8efc47","tier":"starter_2024"},"version":168,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7a8b7016eff54587","login":"sotiris-sideris2","name":"Sotiris Sideris","avatar_url":"https://avatars-next.observableusercontent.com/d022ab7d03c5e216c59823276d3928f49021e6076a1f9baba00816ea03965c2f","tier":null}],"members":[{"type":"team","id":"f1917a480c8ae104","login":"disinformation","name":"disinformation","avatar_url":"https://avatars-next.observableusercontent.com/32ad793086710e3a48a95d008b1b29d2d5265ea131a9e9964bf681a46c8efc47","tier":"starter_2024","role":"editor"},{"type":"individual","id":"7a8b7016eff54587","login":"sotiris-sideris2","name":"Sotiris Sideris","avatar_url":"https://avatars-next.observableusercontent.com/d022ab7d03c5e216c59823276d3928f49021e6076a1f9baba00816ea03965c2f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Marzanna","cells":[{"id":0,"value":"# Marzanna","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"G2 = require(\"@antv/g2@4.0.2\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"G2Plot = require('https://cdn.jsdelivr.net/npm/@antv/g2plot@2.4.23/dist/g2plot.min.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"RUImageCredit = FileAttachment(\"RU_logo_nogr-300x130.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"