2b:null 2c:["$","title",null,{"children":"Marzanna 2nd bar | disinformation | Observable"}] 31:T1f08,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": 31 }, { "Country": "Γιώργος Οικονόμου", "Value": 21 }, { "Country": "Γιάννης Αλαφούζος", "Value": 5 }, { "Country": "Γιώργος Προκοπίου", "Value": 5 }, { "Country": "Νικόλας Μαρτίνος", "Value": 3 }, { "Country": "Ανδρέας Μαρτίνος", "Value": 1 }, { "Country": "Σπύρος Πολέμης", "Value": 1 }, { "Country": "Νικόλας Τσάκος", "Value": 1 } ]; let dataTonoi = [ { "Country": "Διαμαντής Διαμαντίδης", "Value": 4925229 }, { "Country": "Γιώργος Οικονόμου", "Value": 3149158 }, { "Country": "Γιάννης Αλαφούζος", "Value": 789211 }, { "Country": "Γιώργος Προκοπίου", "Value": 764002 }, { "Country": "Νικόλας Μαρτίνος", "Value": 430787 }, { "Country": "Ανδρέας Μαρτίνος", "Value": 163417 }, { "Country": "Σπύρος Πολέμης", "Value": 149992 }, { "Country": "Νικόλας Τσάκος", "Value": 105365 }, ]; 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 === 'Dromolologia' ? 10 : valueField === 'Tonoi' ? 1 : undefined, min: valueField === 'Dromolologia' ? 0 : valueField === 'Tonoi' ? 0 : undefined, max: valueField === 'Dromolologia' ? 40 : valueField === 'Tonoi' ? 5 : 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":1732127886007.452,"size":10385}] 2f:{"id":"1e43720b66fc00ce","slug":null,"title":"Marzanna 2nd bar","thumbnail":"03d8cf47ed35aa4921d4dc15684335767295d117c1d29aa2d62f8eb0f0916bcf","access_level":"public","create_time":"$D2024-11-20T18:37:13.705Z","update_time":"$D2024-11-26T14:17:29.092Z","view_time":null,"first_public_time":"$D2024-11-26T13:18:10.078Z","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":29,"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 2nd bar","cells":[{"id":0,"value":"# Marzanna 2nd bar","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"