{"id":38095,"date":"2026-01-23T11:31:28","date_gmt":"2026-01-23T08:31:28","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/billboard-js-3-18-0-yay-aciklamalari-gruba-gore-normalizasyon-ve-gelismis-treemap-etiketleri-ile-veri-gorsellestirmede-yeni-ufuklar\/"},"modified":"2026-01-23T11:31:28","modified_gmt":"2026-01-23T08:31:28","slug":"billboard-js-3-18-0-yay-aciklamalari-gruba-gore-normalizasyon-ve-gelismis-treemap-etiketleri-ile-veri-gorsellestirmede-yeni-ufuklar","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/billboard-js-3-18-0-yay-aciklamalari-gruba-gore-normalizasyon-ve-gelismis-treemap-etiketleri-ile-veri-gorsellestirmede-yeni-ufuklar\/","title":{"rendered":"billboard.js 3.18.0: Yay A\u00e7\u0131klamalar\u0131, Gruba G\u00f6re Normalizasyon ve Geli\u015fmi\u015f Treemap Etiketleri ile Veri G\u00f6rselle\u015ftirmede Yeni Ufuklar"},"content":{"rendered":"<h2>billboard.js 3.18.0: Yay A\u00e7\u0131klamalar\u0131, Gruba G\u00f6re Normalizasyon ve Geli\u015fmi\u015f Treemap Etiketleri ile Veri G\u00f6rselle\u015ftirmede Yeni Ufuklar<\/h2>\n<p>billboard.js, D3.js tabanl\u0131, g\u00fc\u00e7l\u00fc ve esnek bir grafik k\u00fct\u00fcphanesi olarak modern web uygulamalar\u0131nda veri g\u00f6rselle\u015ftirmenin vazge\u00e7ilmez ara\u00e7lar\u0131ndan biridir. Geli\u015ftiricilere karma\u015f\u0131k verileri anla\u015f\u0131l\u0131r ve estetik grafiklere d\u00f6n\u00fc\u015ft\u00fcrme imkan\u0131 sunarken, D3.js&#8217;in g\u00fcc\u00fcn\u00fc basit ve sezgisel bir API ile birle\u015ftirir. S\u00fcrekli geli\u015fen yap\u0131s\u0131yla, 3.18.0 s\u00fcr\u00fcm\u00fc de kullan\u0131c\u0131 deneyimini ve g\u00f6rselle\u015ftirme yeteneklerini bir ad\u0131m \u00f6teye ta\u015f\u0131yan \u00f6nemli yeniliklerle kar\u015f\u0131m\u0131za \u00e7\u0131k\u0131yor. Bu s\u00fcr\u00fcm, \u00f6zellikle yay a\u00e7\u0131klamalar\u0131, gruba g\u00f6re normalizasyon ve geli\u015fmi\u015f treemap etiketleri gibi \u00f6zelliklerle veri analistleri ve geli\u015ftiriciler i\u00e7in daha zengin ve etkile\u015fimli grafikler olu\u015fturma imkan\u0131 sunuyor.<\/p>\n<h3>billboard.js&#8217;e Genel Bak\u0131\u015f ve 3.18.0 S\u00fcr\u00fcm\u00fcn\u00fcn \u00d6nemi<\/h3>\n<p>billboard.js, D3.js&#8217;in sundu\u011fu t\u00fcm esneklik ve performans\u0131, daha kolay kullan\u0131labilir bir aray\u00fczle birle\u015ftiren pop\u00fcler bir grafik k\u00fct\u00fcphanesidir. Geni\u015f grafik yelpazesi, performans odakl\u0131 yap\u0131s\u0131 ve aktif geli\u015ftirici toplulu\u011fu sayesinde, veri g\u00f6rselle\u015ftirme projelerinde s\u0131k\u00e7a tercih edilmektedir.<\/p>\n<h4>billboard.js Nedir?<\/h4>\n<p>billboard.js, C3.js&#8217;ten t\u00fcremi\u015f ve D3.js \u00fczerine in\u015fa edilmi\u015f bir grafik k\u00fct\u00fcphanesidir. Temel amac\u0131, D3.js&#8217;in \u00f6\u011frenme e\u011frisini basitle\u015ftirerek geli\u015ftiricilerin h\u0131zla etkile\u015fimli ve dinamik grafikler olu\u015fturmas\u0131n\u0131 sa\u011flamakt\u0131r. \u00c7izgi, \u00e7ubuk, pasta, da\u011f\u0131l\u0131m ve daha bir\u00e7ok grafik t\u00fcr\u00fcn\u00fc desteklerken, \u00f6zelle\u015ftirme konusunda da geni\u015f bir esneklik sunar.<\/p>\n<h4>Neden billboard.js?<\/h4>\n<p>billboard.js&#8217;i tercih etmenin ba\u015fl\u0131ca nedenleri aras\u0131nda, D3.js&#8217;in t\u00fcm g\u00fcc\u00fcn\u00fc miras almas\u0131, y\u00fcksek performansl\u0131 \u00e7izim yetene\u011fi, kolay API kullan\u0131m\u0131, geni\u015f taray\u0131c\u0131 deste\u011fi ve aktif topluluk deste\u011fi say\u0131labilir. Ayr\u0131ca, mod\u00fcler yap\u0131s\u0131 sayesinde sadece ihtiyac\u0131n\u0131z olan bile\u015fenleri y\u00fckleyerek uygulaman\u0131z\u0131n boyutunu optimize edebilirsiniz.<\/p>\n<h4>3.18.0 S\u00fcr\u00fcm\u00fcn\u00fcn Temel Odak Noktalar\u0131<\/h4>\n<p>billboard.js 3.18.0 s\u00fcr\u00fcm\u00fc, kullan\u0131c\u0131 geri bildirimlerini dikkate alarak ve modern veri g\u00f6rselle\u015ftirme ihtiya\u00e7lar\u0131na yan\u0131t vererek geli\u015ftirilmi\u015ftir. Bu s\u00fcr\u00fcm\u00fcn temel odak noktalar\u0131, grafiklere daha fazla ba\u011flam ve a\u00e7\u0131klama eklemeyi sa\u011flayan &#8220;yay a\u00e7\u0131klamalar\u0131&#8221;, farkl\u0131 gruplar aras\u0131ndaki oransal kar\u015f\u0131la\u015ft\u0131rmalar\u0131 kolayla\u015ft\u0131ran &#8220;gruba g\u00f6re normalizasyon&#8221; ve hiyerar\u015fik verilerin okunabilirli\u011fini art\u0131ran &#8220;geli\u015fmi\u015f treemap etiketleri&#8221;dir. Bu yenilikler, veri analistlerinin hikaye anlat\u0131m\u0131n\u0131 zenginle\u015ftirmesine ve kullan\u0131c\u0131lar\u0131n verileri daha derinlemesine anlamas\u0131na yard\u0131mc\u0131 olur.<\/p>\n<h3>Yay A\u00e7\u0131klamalar\u0131 (Arc Annotations): Grafiklere Yeni Bir Boyut<\/h3>\n<p>Pasta (pie) ve donut (halka) grafikleri, b\u00fct\u00fcn\u00fcn par\u00e7alar\u0131n\u0131 g\u00f6stermek i\u00e7in s\u0131kl\u0131kla kullan\u0131l\u0131r. Ancak bazen bu par\u00e7alar\u0131n her birine ek bilgi veya vurgu eklemek gerekebilir. billboard.js 3.18.0 ile gelen yay a\u00e7\u0131klamalar\u0131, tam da bu ihtiyaca y\u00f6nelik g\u00fc\u00e7l\u00fc bir \u00e7\u00f6z\u00fcmd\u00fcr.<\/p>\n<h4>Yay A\u00e7\u0131klamalar\u0131 Nedir?<\/h4>\n<p>Yay a\u00e7\u0131klamalar\u0131, pasta veya donut grafiklerindeki belirli dilimlere (yaylara) metin, \u00e7izgi veya ok gibi g\u00f6rsel \u00f6\u011feler eklemenizi sa\u011flayan bir \u00f6zelliktir. Bu sayede, grafi\u011fin belirli bir b\u00f6l\u00fcm\u00fcn\u00fc vurgulayabilir, ilgili veri noktas\u0131 hakk\u0131nda ek ba\u011flam sa\u011flayabilir veya \u00f6nemli bulgular\u0131 do\u011frudan grafi\u011fin \u00fczerinde belirtebilirsiniz. \u00d6rne\u011fin, en b\u00fcy\u00fck dilimi &#8220;En Y\u00fcksek Sat\u0131\u015f&#8221; olarak etiketleyebilir veya belirli bir dilimin neden \u00f6nemli oldu\u011funu a\u00e7\u0131klayan k\u0131sa bir not ekleyebilirsiniz.<\/p>\n<h4>Kullan\u0131m Senaryolar\u0131<\/h4>\n<p>*   <strong>Vurgulama:<\/strong> Grafikteki en b\u00fcy\u00fck, en k\u00fc\u00e7\u00fck veya belirli bir kritere uyan dilimleri g\u00f6rsel olarak \u00f6ne \u00e7\u0131karmak.<br \/>\n*   <strong>A\u00e7\u0131klama:<\/strong> Belirli bir dilimin ne anlama geldi\u011fini veya neden dikkat \u00e7ekici oldu\u011funu a\u00e7\u0131klayan k\u0131sa metinler eklemek.<br \/>\n*   <strong>Ba\u011flam Sa\u011flama:<\/strong> Veri noktalar\u0131yla ilgili tarih, olay veya ek istatistik gibi bilgileri do\u011frudan grafi\u011fe entegre etmek.<br \/>\n*   <strong>Kar\u015f\u0131la\u015ft\u0131rma:<\/strong> Benzer dilimler aras\u0131ndaki farklar\u0131 veya ili\u015fkileri a\u00e7\u0131klay\u0131c\u0131 notlarla belirtmek.<\/p>\n<h4>Uygulama ve Konfig\u00fcrasyon<\/h4>\n<p>Yay a\u00e7\u0131klamalar\u0131, <code>annotations.arcs<\/code> konfig\u00fcrasyon se\u00e7ene\u011fi arac\u0131l\u0131\u011f\u0131yla tan\u0131mlan\u0131r. Her bir a\u00e7\u0131klama, hedef dilimi, metin i\u00e7eri\u011fini, \u00e7izgi stilini ve konumunu belirten bir dizi nesne olarak yap\u0131land\u0131r\u0131l\u0131r.<\/p>\n<pre><code class=\"language-javascript\">\nvar chart = bb.generate({\n  data: {\n    columns: [\n      [\"Veri1\", 30, 120, 90, 40, 60],\n      [\"Veri2\", 150, 60, 20, 100, 80]\n    ],\n    type: \"donut\"\n  },\n  annotations: {\n    arcs: [\n      {\n        arc: {\n          id: \"Veri1_1\", \/\/ Hedeflenen veri dilimi (Veri1'in ilk de\u011feri)\n          angle: 0.5,   \/\/ A\u00e7\u0131klaman\u0131n dilim \u00fczerindeki a\u00e7\u0131s\u0131 (iste\u011fe ba\u011fl\u0131)\n          length: 10    \/\/ A\u00e7\u0131klama \u00e7izgisinin uzunlu\u011fu\n        },\n        text: {\n          content: \"\u00d6nemli De\u011fer!\",\n          position: { x: 0, y: -10 } \/\/ Metnin konumu\n        },\n        line: {\n          style: {\n            stroke: \"red\",\n            \"stroke-dasharray\": \"2 2\"\n          }\n        }\n      },\n      {\n        arc: {\n          id: \"Veri2_0\" \/\/ Hedeflenen veri dilimi (Veri2'nin ilk de\u011feri)\n        },\n        text: {\n          content: \"En Y\u00fcksek\",\n          position: { x: 20, y: 10 }\n        }\n      }\n    ]\n  },\n  donut: {\n    title: \"Sat\u0131\u015f Da\u011f\u0131l\u0131m\u0131\"\n  },\n  bindto: \"#chartArcAnnotations\"\n});\n<\/pre>\n<p><\/code><\/p>\n<p>Bu \u00f6rnekte, <code>Veri1<\/code>'in ilk dilimi \"\u00d6nemli De\u011fer!\" olarak, <code>Veri2<\/code>'nin ilk dilimi ise \"En Y\u00fcksek\" olarak etiketlenmi\u015ftir. <code>arc.id<\/code> ile hedef dilimi belirleyebilir, <code>text.content<\/code> ile a\u00e7\u0131klama metnini yazabilir ve <code>line<\/code> ile a\u00e7\u0131klama \u00e7izgisinin stilini \u00f6zelle\u015ftirebilirsiniz.<\/p>\n<h3>Gruba G\u00f6re Normalizasyon (Per-Group Normalization): Veri Kar\u015f\u0131la\u015ft\u0131rmalar\u0131nda Devrim<\/h3>\n<p>Farkl\u0131 kategorilere ayr\u0131lm\u0131\u015f verileri kar\u015f\u0131la\u015ft\u0131r\u0131rken, her grubun kendi i\u00e7indeki da\u011f\u0131l\u0131m\u0131n\u0131 y\u00fczdesel olarak g\u00f6rmek, mutlak de\u011ferlerden daha anlaml\u0131 olabilir. billboard.js 3.18.0, bu ihtiyaca y\u00f6nelik \"gruba g\u00f6re normalizasyon\" \u00f6zelli\u011fini sunuyor.<\/p>\n<h4>Gruba G\u00f6re Normalizasyon Nedir?<\/h4>\n<p>Gruba g\u00f6re normalizasyon, \u00e7ubuk veya alan grafiklerinde, tan\u0131mlanm\u0131\u015f her bir veri grubunun toplam\u0131n\u0131 %100'e e\u015fitleyerek, grubun i\u00e7indeki her bir veri noktas\u0131n\u0131n oransal katk\u0131s\u0131n\u0131 g\u00f6rselle\u015ftirmektir. Bu \u00f6zellik, farkl\u0131 b\u00fcy\u00fckl\u00fckteki gruplar aras\u0131nda, her bir grubun kendi i\u00e7indeki bile\u015fenlerinin oranlar\u0131n\u0131 kolayca kar\u015f\u0131la\u015ft\u0131rman\u0131z\u0131 sa\u011flar. \u00d6rne\u011fin, farkl\u0131 b\u00f6lgelerdeki sat\u0131\u015f kategorilerinin (\u00fcr\u00fcn A, \u00fcr\u00fcn B, \u00fcr\u00fcn C) toplam sat\u0131\u015flara oran\u0131n\u0131 g\u00f6rmek istedi\u011finizde, her b\u00f6lgeyi %100'e normalize ederek b\u00f6lgeler aras\u0131 kar\u015f\u0131la\u015ft\u0131rmay\u0131 basitle\u015ftirebilirsiniz.<\/p>\n<h4>Neden \u00d6nemli?<\/h4>\n<p>Bu \u00f6zellik, \u00f6zellikle mutlak de\u011ferlerin yan\u0131lt\u0131c\u0131 olabilece\u011fi durumlarda, oransal de\u011fi\u015fimleri ve da\u011f\u0131l\u0131mlar\u0131 net bir \u015fekilde ortaya koyar. B\u00fcy\u00fck bir grubun i\u00e7indeki k\u00fc\u00e7\u00fck bir de\u011fer, k\u00fc\u00e7\u00fck bir grubun i\u00e7indeki ayn\u0131 de\u011ferden oransal olarak \u00e7ok daha az \u00f6nemli olabilir. Gruba g\u00f6re normalizasyon, bu t\u00fcr n\u00fcanslar\u0131 yakalamak ve veri hikayenizi daha do\u011fru bir \u015fekilde anlatmak i\u00e7in kritik \u00f6neme sahiptir.<\/p>\n<h4>Uygulama ve Konfig\u00fcrasyon<\/h4>\n<p>Gruba g\u00f6re normalizasyon, <code>data.groups<\/code> ve <code>data.perGroupNormalization: true<\/code> se\u00e7enekleri ile etkinle\u015ftirilir.<\/p>\n<pre><code class=\"language-javascript\">\nvar chart = bb.generate({\n  data: {\n    columns: [\n      [\"Gelir\", 100, 200, 300, 400],\n      [\"Gider\", 50, 100, 150, 200],\n      [\"Kar\", 50, 100, 150, 200]\n    ],\n    type: \"bar\",\n    groups: [\n      [\"Gelir\", \"Gider\", \"Kar\"] \/\/ Bu s\u00fctunlar bir grup olu\u015fturur\n    ],\n    perGroupNormalization: true \/\/ Gruba g\u00f6re normalizasyonu etkinle\u015ftir\n  },\n  axis: {\n    y: {\n      tick: {\n        format: function(v) { return v + \"%\"; }\n      }\n    }\n  },\n  bindto: \"#chartPerGroupNormalization\"\n});\n<\/pre>\n<p><\/code><\/p>\n<p>Bu \u00f6rnekte, \"Gelir\", \"Gider\" ve \"Kar\" s\u00fctunlar\u0131 bir grup olarak tan\u0131mlanm\u0131\u015f ve <code>perGroupNormalization: true<\/code> ile bu grubun kendi i\u00e7inde %100'e normalize edilmesi sa\u011flanm\u0131\u015ft\u0131r. B\u00f6ylece, her bir kategorinin toplam i\u00e7indeki y\u00fczdesel pay\u0131n\u0131 g\u00f6rebilirsiniz.<\/p>\n<h3>Geli\u015fmi\u015f Treemap Etiketleri: Karma\u015f\u0131k Verileri Daha Anla\u015f\u0131l\u0131r K\u0131lmak<\/h3>\n<p>Treemap grafikleri, hiyerar\u015fik verileri dikd\u00f6rtgenlerin alanlar\u0131 arac\u0131l\u0131\u011f\u0131yla g\u00f6rselle\u015ftirmek i\u00e7in etkili bir y\u00f6ntemdir. Ancak, \u00e7ok say\u0131da veya k\u00fc\u00e7\u00fck \u00f6\u011feler i\u00e7eren treemap'lerde etiketlerin okunabilirli\u011fi genellikle bir sorun te\u015fkil ederdi. billboard.js 3.18.0, bu alanda \u00f6nemli iyile\u015ftirmeler sunuyor.<\/p>\n<h4>Treemap Grafikleri ve \u00d6nemi<\/h4>\n<p>Treemap'ler, bir b\u00fct\u00fcn\u00fcn par\u00e7alar\u0131n\u0131 ve bu par\u00e7alar\u0131n alt par\u00e7alar\u0131n\u0131 g\u00f6rselle\u015ftirmek i\u00e7in kullan\u0131l\u0131r. Her dikd\u00f6rtgenin alan\u0131, temsil etti\u011fi de\u011ferle orant\u0131l\u0131d\u0131r ve i\u00e7 i\u00e7e ge\u00e7mi\u015f dikd\u00f6rtgenler hiyerar\u015fiyi g\u00f6sterir. Bu grafikler, disk alan\u0131 kullan\u0131m\u0131, pazar pay\u0131 analizi veya \u015firket organizasyon yap\u0131lar\u0131 gibi hiyerar\u015fik verileri anlamak i\u00e7in idealdir.<\/p>\n<h4>3.18.0 \u00d6ncesi ve Sonras\u0131 Etiketleme<\/h4>\n<p>\u00d6nceki s\u00fcr\u00fcmlerde, treemap etiketleri genellikle statik bir \u015fekilde yerle\u015ftirilir ve \u00f6zellikle k\u00fc\u00e7\u00fck dikd\u00f6rtgenlerde etiket ta\u015fmas\u0131 veya okunaks\u0131zl\u0131k sorunlar\u0131 ya\u015fanabilirdi. Bu durum, grafi\u011fin genel anla\u015f\u0131l\u0131rl\u0131\u011f\u0131n\u0131 azaltabiliyordu. 3.18.0 s\u00fcr\u00fcm\u00fc ile birlikte, etiketlerin yerle\u015fimi, ta\u015fma y\u00f6netimi ve formatlama konusunda \u00e7ok daha fazla esneklik sunuluyor.<\/p>\n<h4>Yeni Etiketleme Se\u00e7enekleri<\/h4>\n<p>billboard.js 3.18.0, treemap etiketleri i\u00e7in a\u015fa\u011f\u0131daki yeni konfig\u00fcrasyon se\u00e7eneklerini sunar:<\/p>\n<p>*   <code>treemap.labels.format<\/code>: Etiket metninin nas\u0131l formatlanaca\u011f\u0131n\u0131 belirleyen bir fonksiyon.<br \/>\n*   <code>treemap.labels.overflow<\/code>: Etiketlerin ta\u015fma durumunda nas\u0131l davranaca\u011f\u0131n\u0131 kontrol eder (\u00f6rne\u011fin, gizle veya k\u0131rp).<br \/>\n*   <code>treemap.labels.padding<\/code>: Etiket ile dikd\u00f6rtgen kenarlar\u0131 aras\u0131ndaki bo\u015flu\u011fu ayarlar.<\/p>\n<p>Bu se\u00e7enekler sayesinde, etiketlerin her zaman okunabilir ve grafi\u011fin genel esteti\u011fini bozmayacak \u015fekilde g\u00f6r\u00fcnmesini sa\u011flayabilirsiniz.<\/p>\n<pre><code class=\"language-javascript\">\nvar chart = bb.generate({\n  data: {\n    columns: [\n      [\"Kategori A\", 100],\n      [\"Kategori B\", 200],\n      [\"Kategori C\", 50],\n      [\"Kategori A-1\", 30, \"Kategori A\"], \/\/ Alt kategori\n      [\"Kategori A-2\", 70, \"Kategori A\"],\n      [\"Kategori B-1\", 120, \"Kategori B\"],\n      [\"Kategori B-2\", 80, \"Kategori B\"]\n    ],\n    type: \"treemap\",\n    names: {\n      \"Kategori A-1\": \"A-1\",\n      \"Kategori A-2\": \"A-2\"\n    }\n  },\n  treemap: {\n    labels: {\n      format: function(value, ratio, id) {\n        return id + \" (\" + (ratio * 100).toFixed(1) + \"%)\";\n      },\n      overflow: \"hidden\", \/\/ Etiketler ta\u015farsa gizle\n      padding: {\n        top: 5,\n        left: 5\n      }\n    }\n  },\n  bindto: \"#chartTreemapLabels\"\n});\n<\/pre>\n<p><\/code><\/p>\n<p>Bu \u00f6rnekte, treemap etiketleri \u00f6zel bir formatla (isim ve y\u00fczde) g\u00f6sterilmekte, ta\u015fma durumunda gizlenmekte ve kenarlardan belirli bir bo\u015fluk b\u0131rak\u0131larak daha d\u00fczenli bir g\u00f6r\u00fcn\u00fcm sa\u011flanmaktad\u0131r.<\/p>\n<h3>Di\u011fer \u0130yile\u015ftirmeler ve Hata D\u00fczeltmeleri<\/h3>\n<p>billboard.js 3.18.0, sadece b\u00fcy\u00fck yeni \u00f6zelliklerle gelmiyor, ayn\u0131 zamanda k\u00fct\u00fcphanenin genel performans\u0131n\u0131, kararl\u0131l\u0131\u011f\u0131n\u0131 ve kullan\u0131labilirli\u011fini art\u0131ran bir\u00e7ok k\u00fc\u00e7\u00fck iyile\u015ftirme ve hata d\u00fczeltmesi de i\u00e7eriyor.<\/p>\n<h4>Performans Optimizasyonlar\u0131<\/h4>\n<p>Geli\u015ftiriciler, \u00f6zellikle b\u00fcy\u00fck veri k\u00fcmeleriyle \u00e7al\u0131\u015f\u0131rken grafiklerin daha h\u0131zl\u0131 \u00e7izilmesini ve daha ak\u0131c\u0131 etkile\u015fim sa\u011flamas\u0131n\u0131 hedeflemi\u015ftir. Bu s\u00fcr\u00fcmdeki performans optimizasyonlar\u0131, daha karma\u015f\u0131k grafiklerin bile sorunsuz bir \u015fekilde y\u00fcklenmesini ve kullan\u0131c\u0131 deneyiminin iyile\u015fmesini sa\u011flar.<\/p>\n<h4>API Geli\u015ftirmeleri<\/h4>\n<p>K\u00fct\u00fcphanenin API'sinde yap\u0131lan k\u00fc\u00e7\u00fck dokunu\u015flar ve eklemeler, geli\u015ftiricilerin belirli senaryolarda daha esnek \u00e7\u00f6z\u00fcmler \u00fcretmesine olanak tan\u0131r. Bu, genellikle yeni konfig\u00fcrasyon se\u00e7enekleri veya mevcut metotlar\u0131n geni\u015fletilmesi \u015feklinde ortaya \u00e7\u0131kar.<\/p>\n<h4>G\u00fcvenilirlik ve Kararl\u0131l\u0131k<\/h4>\n<p>Her yeni s\u00fcr\u00fcmde oldu\u011fu gibi, 3.18.0 da tespit edilen hatalar\u0131n giderilmesine ve k\u00fct\u00fcphanenin genel kararl\u0131l\u0131\u011f\u0131n\u0131n art\u0131r\u0131lmas\u0131na odaklanm\u0131\u015ft\u0131r. Bu, geli\u015ftiricilerin billboard.js'i projelerinde daha g\u00fcvenle kullanabilece\u011fi anlam\u0131na gelir.<\/p>\n<h3>billboard.js 3.18.0'\u0131 Kullanmaya Ba\u015flama<\/h3>\n<p>billboard.js'i projelerinize entegre etmek olduk\u00e7a kolayd\u0131r. \u0130ster bir paket y\u00f6neticisi arac\u0131l\u0131\u011f\u0131yla ister do\u011frudan CDN \u00fczerinden k\u00fct\u00fcphaneyi dahil edebilirsiniz.<\/p>\n<h4>Kurulum<\/h4>\n<p><strong>NPM ile:<\/strong><br \/>\nE\u011fer bir Node.js projesi \u00fczerinde \u00e7al\u0131\u015f\u0131yorsan\u0131z, billboard.js'i npm veya yarn ile kolayca kurabilirsiniz:<\/p>\n<pre><code class=\"language-bash\">\nnpm install billboard.js d3\n# veya\nyarn add billboard.js d3\n<\/pre>\n<p><\/code><\/p>\n<p><strong>CDN ile:<\/strong><br \/>\nH\u0131zl\u0131 bir ba\u015flang\u0131\u00e7 i\u00e7in, HTML dosyan\u0131za a\u015fa\u011f\u0131daki CDN ba\u011flant\u0131lar\u0131n\u0131 ekleyebilirsiniz:<\/p>\n<pre><code class=\"language-html\">\n<link href=\"https:\/\/unpkg.com\/billboard.js\/dist\/billboard.min.css\" rel=\"stylesheet\">\n<script src=\"https:\/\/unpkg.com\/d3@5.16.0\/dist\/d3.min.js\"><\/script>\n<script src=\"https:\/\/unpkg.com\/billboard.js\/dist\/billboard.min.js\"><\/script>\n<\/pre>\n<p><\/code><\/p>\n<h4>Temel Kullan\u0131m Ad\u0131mlar\u0131<\/h4>\n<p>1.  <strong>HTML Yap\u0131s\u0131:<\/strong> Grafi\u011fin \u00e7izilece\u011fi bir <code>div<\/code> elementi olu\u015fturun.<\/p>\n<pre><code class=\"language-html\">\n    <div id=\"myChart\"><\/div>\n    <\/pre>\n<p><\/code><br \/>\n2.  <strong>JavaScript Kodu:<\/strong> billboard.js'i ba\u015flat\u0131n ve veri ile konfig\u00fcrasyonunuzu sa\u011flay\u0131n.<\/p>\n<pre><code class=\"language-javascript\">\n    var chart = bb.generate({\n      data: {\n        columns: [\n          [\"data1\", 30, 200, 100, 400, 150, 250],\n          [\"data2\", 50, 20, 10, 40, 15, 25]\n        ],\n        type: \"line\"\n      },\n      bindto: \"#myChart\"\n    });\n    <\/pre>\n<p><\/code><\/p>\n<h4>Ge\u00e7i\u015f Notlar\u0131<\/h4>\n<p>E\u011fer billboard.js'in \u00f6nceki bir s\u00fcr\u00fcm\u00fcnden 3.18.0'a ge\u00e7i\u015f yap\u0131yorsan\u0131z, genellikle b\u00fcy\u00fck bir k\u0131r\u0131lma de\u011fi\u015fikli\u011fi beklemezsiniz. Ancak, her zaman resmi dok\u00fcmantasyondaki \"Release Notes\" b\u00f6l\u00fcm\u00fcn\u00fc kontrol etmeniz \u00f6nerilir. Yeni eklenen \u00f6zellikler, mevcut konfig\u00fcrasyonlar\u0131n\u0131zla \u00e7ak\u0131\u015fmayacak \u015fekilde tasarlanm\u0131\u015ft\u0131r.<\/p>\n<h3>Sonu\u00e7<\/h3>\n<p>billboard.js 3.18.0 s\u00fcr\u00fcm\u00fc, veri g\u00f6rselle\u015ftirme yeteneklerini zenginle\u015ftiren ve geli\u015ftiricilere daha fazla esneklik sunan \u00f6nemli yeniliklerle dolu. Yay a\u00e7\u0131klamalar\u0131, pasta ve donut grafiklerine daha fazla ba\u011flam ekleyerek hikaye anlat\u0131m\u0131n\u0131 g\u00fc\u00e7lendirirken; gruba g\u00f6re normalizasyon, farkl\u0131 b\u00fcy\u00fckl\u00fckteki gruplar aras\u0131ndaki oransal kar\u015f\u0131la\u015ft\u0131rmalar\u0131 basitle\u015ftiriyor. Geli\u015fmi\u015f treemap etiketleri ise hiyerar\u015fik verilerin okunabilirli\u011fini art\u0131rarak karma\u015f\u0131k bilgilerin daha anla\u015f\u0131l\u0131r olmas\u0131n\u0131 sa\u011fl\u0131yor. Bu \u00f6zellikler, billboard.js'i modern web uygulamalar\u0131 i\u00e7in daha da cazip bir se\u00e7enek haline getiriyor ve veri analistlerinin ve geli\u015ftiricilerin daha etkili, bilgilendirici ve estetik grafikler olu\u015fturmas\u0131na olanak tan\u0131yor. Veri g\u00f6rselle\u015ftirme projelerinizde bu yeni yetenekleri ke\u015ffetmek, kullan\u0131c\u0131lar\u0131n\u0131za daha zengin bir deneyim sunman\u0131z\u0131 sa\u011flayacakt\u0131r.<\/p>\n<h3>SSS (S\u0131k Sorulan Sorular)<\/h3>\n<h4>S: billboard.js 3.18.0'\u0131 kullanmak i\u00e7in D3.js bilmek gerekli mi?<\/h4>\n<p>C: Hay\u0131r, billboard.js'i kullanmak i\u00e7in derinlemesine D3.js bilgisine sahip olman\u0131z gerekmez. billboard.js, D3.js'in karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 soyutlayarak size basit bir API sunar. Ancak, D3.js'e a\u015fina olmak, daha geli\u015fmi\u015f \u00f6zelle\u015ftirmeler yaparken faydal\u0131 olabilir.<\/p>\n<h4>S: Yay a\u00e7\u0131klamalar\u0131 (Arc Annotations) hangi grafik t\u00fcrlerinde kullan\u0131labilir?<\/h4>\n<p>C: Yay a\u00e7\u0131klamalar\u0131, ad\u0131ndan da anla\u015f\u0131laca\u011f\u0131 gibi, yay tabanl\u0131 grafik t\u00fcrleri olan pasta (pie) ve donut (halka) grafiklerinde kullan\u0131lmak \u00fczere tasarlanm\u0131\u015ft\u0131r.<\/p>\n<h4>S: Gruba g\u00f6re normalizasyon (Per-Group Normalization) hangi senaryolarda en faydal\u0131d\u0131r?<\/h4>\n<p>C: Gruba g\u00f6re normalizasyon, \u00f6zellikle farkl\u0131 toplam de\u011ferlere sahip gruplar aras\u0131nda oransal da\u011f\u0131l\u0131mlar\u0131 kar\u015f\u0131la\u015ft\u0131rmak istedi\u011finizde \u00e7ok faydal\u0131d\u0131r. \u00d6rne\u011fin, farkl\u0131 b\u00f6lgelerdeki \u00fcr\u00fcn kategorilerinin toplam sat\u0131\u015flara oran\u0131n\u0131 g\u00f6rmek veya farkl\u0131 demografik gruplardaki anket yan\u0131tlar\u0131n\u0131n y\u00fczdesel da\u011f\u0131l\u0131m\u0131n\u0131 analiz etmek gibi senaryolarda idealdir.<\/p>\n<h4>S: Treemap etiketleri tamamen \u00f6zelle\u015ftirilebilir mi?<\/h4>\n<p>C: Evet, billboard.js 3.18.0 ile treemap etiketleri b\u00fcy\u00fck \u00f6l\u00e7\u00fcde \u00f6zelle\u015ftirilebilir. <code>treemap.labels.format<\/code> se\u00e7ene\u011fi ile etiket metninin i\u00e7eri\u011fini ve bi\u00e7imini tamamen kontrol edebilir, <code>overflow<\/code> ve <code>padding<\/code> se\u00e7enekleriyle de etiketlerin g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc ve yerle\u015fimini ayarlayabilirsiniz.<\/p>\n<h4>S: billboard.js di\u011fer charting k\u00fct\u00fcphanelerine g\u00f6re ne gibi avantajlar sunar?<\/h4>\n<p>C: billboard.js, D3.js'in g\u00fcc\u00fcn\u00fc basit bir API ile birle\u015ftirmesi, y\u00fcksek performans, geni\u015f grafik yelpazesi, mod\u00fcler yap\u0131, aktif topluluk deste\u011fi ve taray\u0131c\u0131 uyumlulu\u011fu gibi avantajlar sunar. \u00d6zellikle D3.js'in esnekli\u011finden faydalanmak isteyen ancak karma\u015f\u0131k kod yazmak istemeyen geli\u015ftiriciler i\u00e7in idealdir.<\/p>\n","protected":false},"excerpt":{"rendered":"C: Hay\u0131r, billboard.js&#8217;i kullanmak i\u00e7in derinlemesine D3.js bilgisine sahip olman\u0131z gerekmez. billboard.js, D3.js&#8217;in karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 soyutlayarak siz&#8230;","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-38095","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>billboard.js 3.18.0: Yay A\u00e7\u0131klamalar\u0131, Gruba G\u00f6re Normalizasyon ve Geli\u015fmi\u015f Treemap Etiketleri ile Veri G\u00f6rselle\u015ftirmede Yeni Ufuklar - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/billboard-js-3-18-0-yay-aciklamalari-gruba-gore-normalizasyon-ve-gelismis-treemap-etiketleri-ile-veri-gorsellestirmede-yeni-ufuklar\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"billboard.js 3.18.0: Yay A\u00e7\u0131klamalar\u0131, Gruba G\u00f6re Normalizasyon ve Geli\u015fmi\u015f Treemap Etiketleri ile Veri G\u00f6rselle\u015ftirmede Yeni Ufuklar\" \/>\n<meta property=\"og:description\" content=\"C: Hay\u0131r, billboard.js&#039;i kullanmak i\u00e7in derinlemesine D3.js bilgisine sahip olman\u0131z gerekmez. billboard.js, D3.js&#039;in karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 soyutlayarak siz...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/billboard-js-3-18-0-yay-aciklamalari-gruba-gore-normalizasyon-ve-gelismis-treemap-etiketleri-ile-veri-gorsellestirmede-yeni-ufuklar\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-23T08:31:28+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/billboard-js-3-18-0-yay-aciklamalari-gruba-gore-normalizasyon-ve-gelismis-treemap-etiketleri-ile-veri-gorsellestirmede-yeni-ufuklar\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/billboard-js-3-18-0-yay-aciklamalari-gruba-gore-normalizasyon-ve-gelismis-treemap-etiketleri-ile-veri-gorsellestirmede-yeni-ufuklar\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"billboard.js 3.18.0: Yay A\u00e7\u0131klamalar\u0131, Gruba G\u00f6re Normalizasyon ve Geli\u015fmi\u015f Treemap Etiketleri ile Veri G\u00f6rselle\u015ftirmede Yeni Ufuklar\",\"datePublished\":\"2026-01-23T08:31:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/billboard-js-3-18-0-yay-aciklamalari-gruba-gore-normalizasyon-ve-gelismis-treemap-etiketleri-ile-veri-gorsellestirmede-yeni-ufuklar\/\"},\"wordCount\":2210,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/billboard-js-3-18-0-yay-aciklamalari-gruba-gore-normalizasyon-ve-gelismis-treemap-etiketleri-ile-veri-gorsellestirmede-yeni-ufuklar\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/billboard-js-3-18-0-yay-aciklamalari-gruba-gore-normalizasyon-ve-gelismis-treemap-etiketleri-ile-veri-gorsellestirmede-yeni-ufuklar\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/billboard-js-3-18-0-yay-aciklamalari-gruba-gore-normalizasyon-ve-gelismis-treemap-etiketleri-ile-veri-gorsellestirmede-yeni-ufuklar\/\",\"name\":\"billboard.js 3.18.0: Yay A\u00e7\u0131klamalar\u0131, Gruba G\u00f6re Normalizasyon ve Geli\u015fmi\u015f Treemap Etiketleri ile Veri G\u00f6rselle\u015ftirmede Yeni Ufuklar - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-01-23T08:31:28+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/billboard-js-3-18-0-yay-aciklamalari-gruba-gore-normalizasyon-ve-gelismis-treemap-etiketleri-ile-veri-gorsellestirmede-yeni-ufuklar\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/billboard-js-3-18-0-yay-aciklamalari-gruba-gore-normalizasyon-ve-gelismis-treemap-etiketleri-ile-veri-gorsellestirmede-yeni-ufuklar\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/billboard-js-3-18-0-yay-aciklamalari-gruba-gore-normalizasyon-ve-gelismis-treemap-etiketleri-ile-veri-gorsellestirmede-yeni-ufuklar\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"billboard.js 3.18.0: Yay A\u00e7\u0131klamalar\u0131, Gruba G\u00f6re Normalizasyon ve Geli\u015fmi\u015f Treemap Etiketleri ile Veri G\u00f6rselle\u015ftirmede Yeni Ufuklar\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"billboard.js 3.18.0: Yay A\u00e7\u0131klamalar\u0131, Gruba G\u00f6re Normalizasyon ve Geli\u015fmi\u015f Treemap Etiketleri ile Veri G\u00f6rselle\u015ftirmede Yeni Ufuklar - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/billboard-js-3-18-0-yay-aciklamalari-gruba-gore-normalizasyon-ve-gelismis-treemap-etiketleri-ile-veri-gorsellestirmede-yeni-ufuklar\/","og_locale":"tr_TR","og_type":"article","og_title":"billboard.js 3.18.0: Yay A\u00e7\u0131klamalar\u0131, Gruba G\u00f6re Normalizasyon ve Geli\u015fmi\u015f Treemap Etiketleri ile Veri G\u00f6rselle\u015ftirmede Yeni Ufuklar","og_description":"C: Hay\u0131r, billboard.js'i kullanmak i\u00e7in derinlemesine D3.js bilgisine sahip olman\u0131z gerekmez. billboard.js, D3.js'in karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 soyutlayarak siz...","og_url":"https:\/\/fatihsoysal.com\/blog\/billboard-js-3-18-0-yay-aciklamalari-gruba-gore-normalizasyon-ve-gelismis-treemap-etiketleri-ile-veri-gorsellestirmede-yeni-ufuklar\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-01-23T08:31:28+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"12 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/billboard-js-3-18-0-yay-aciklamalari-gruba-gore-normalizasyon-ve-gelismis-treemap-etiketleri-ile-veri-gorsellestirmede-yeni-ufuklar\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/billboard-js-3-18-0-yay-aciklamalari-gruba-gore-normalizasyon-ve-gelismis-treemap-etiketleri-ile-veri-gorsellestirmede-yeni-ufuklar\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"billboard.js 3.18.0: Yay A\u00e7\u0131klamalar\u0131, Gruba G\u00f6re Normalizasyon ve Geli\u015fmi\u015f Treemap Etiketleri ile Veri G\u00f6rselle\u015ftirmede Yeni Ufuklar","datePublished":"2026-01-23T08:31:28+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/billboard-js-3-18-0-yay-aciklamalari-gruba-gore-normalizasyon-ve-gelismis-treemap-etiketleri-ile-veri-gorsellestirmede-yeni-ufuklar\/"},"wordCount":2210,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/billboard-js-3-18-0-yay-aciklamalari-gruba-gore-normalizasyon-ve-gelismis-treemap-etiketleri-ile-veri-gorsellestirmede-yeni-ufuklar\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/billboard-js-3-18-0-yay-aciklamalari-gruba-gore-normalizasyon-ve-gelismis-treemap-etiketleri-ile-veri-gorsellestirmede-yeni-ufuklar\/","url":"https:\/\/fatihsoysal.com\/blog\/billboard-js-3-18-0-yay-aciklamalari-gruba-gore-normalizasyon-ve-gelismis-treemap-etiketleri-ile-veri-gorsellestirmede-yeni-ufuklar\/","name":"billboard.js 3.18.0: Yay A\u00e7\u0131klamalar\u0131, Gruba G\u00f6re Normalizasyon ve Geli\u015fmi\u015f Treemap Etiketleri ile Veri G\u00f6rselle\u015ftirmede Yeni Ufuklar - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-01-23T08:31:28+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/billboard-js-3-18-0-yay-aciklamalari-gruba-gore-normalizasyon-ve-gelismis-treemap-etiketleri-ile-veri-gorsellestirmede-yeni-ufuklar\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/billboard-js-3-18-0-yay-aciklamalari-gruba-gore-normalizasyon-ve-gelismis-treemap-etiketleri-ile-veri-gorsellestirmede-yeni-ufuklar\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/billboard-js-3-18-0-yay-aciklamalari-gruba-gore-normalizasyon-ve-gelismis-treemap-etiketleri-ile-veri-gorsellestirmede-yeni-ufuklar\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"billboard.js 3.18.0: Yay A\u00e7\u0131klamalar\u0131, Gruba G\u00f6re Normalizasyon ve Geli\u015fmi\u015f Treemap Etiketleri ile Veri G\u00f6rselle\u015ftirmede Yeni Ufuklar"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/38095","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=38095"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/38095\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=38095"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=38095"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=38095"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}