Sunburst Chart Oluşturma için JavaScript Kullanımı

JavaScript kullanarak sunburst chart oluşturma yöntemleri ve adımları Sitede bulunan detaylı rehber ile kolayca sunburst chart yapımını öğrenin İleri veri görselleştirme için ideal!

Sunburst chart, bir veri görselleştirme aracıdır ve verileri hiyerarşik bir yapıda sunar. Bu makalede, web uygulamalarında sunburst chart oluşturmak için JavaScript kullanımı anlatılacaktır. JavaScript ile sunburst chart oluşturmak için D3.js ve ECharts gibi kütüphaneler kullanılabilir.

D3.js kullanarak sunburst chart oluşturmak için önce veri setimiz hazırlanmalıdır. Veri setimiz bir JSON dosyası veya bir JS nesnesi olabilir. Chart oluşturmak için SVG elementi kullanılabilir.

ECharts kullanarak sunburst chart oluşturmak için ise kütüphanenin indirilip projeye eklenmesi gerekmektedir. Chart oluşturmak için HTML elementleri kullanılabilir. JavaScript kullanarak sunburst chart oluşturmak oldukça kolay ve veri görselleştirmelerinde oldukça etkilidir.

Sunburst Chart Nedir?

Sunburst chart, verileri hiyerarşik bir yapıda sunan bir veri görselleştirme aracıdır. Bu grafik, büyük bir daireyi ve çok sayıda küçük daireyi içeren bir halka şeklinde tasarlanmıştır. Sunburst chart, bir veri kümesindeki farklı hiyerarşik seviyeleri temsil eden kesimleri gösteren etkili bir yoldur.

Bir sunburst chart'ı anlamak için, onu bir ağaç yapısına benzetebiliriz. En üst seviye, merkez dairede yer alırken, diğer seviyeler dış halkalardaki küçük dairelerde yer almaktadır. Bu, bir veri kümesindeki farklı kategorileri ve alt kategorileri temsil edebilir. Böylece, birden çok veri setini bir görselleştirme aracı içinde göstermek için kullanılabilir.

JavaScript Kullanarak Sunburst Oluşturma

Sunburst chart oluşturmak için JavaScript kullanabiliriz ve bu amaçla D3.js ve ECharts gibi veri görselleştirme kütüphaneleri kullanmak oldukça yaygındır. D3.js özellikle çok sayıda veri setini yönetmek için tasarlanmıştır ve oldukça esnek bir yapıya sahiptir. ECharts ise daha çok birden fazla grafik türünü aynı zamanda yönetmek istediğimiz durumlarda tercih edilmektedir.

JavaScript ile sunburst chart oluşturmanın avantajlarından biri de verilerimizdeki değişiklikleri anlık olarak takip edebilme imkanıdır. Bu sayede verilerimizdeki değişiklikleri gerekli manipülasyonlarla hızlıca sunburst chartımızda da görebiliriz.

D3.js kullanarak bir sunburst chart oluşturmak için önce veri setimizi hazırlamalıyız. Bu veri seti genellikle bir JSON dosyası veya bir JS nesnesi şeklinde olabilir. Verimizi hazırladıktan sonra, chart oluşturmak için SVG elementini kullanabiliriz. Bu element içinde dairesel şekiller oluşturup, verilerimizi grafik üzerinde görselleştirebiliriz.

ECharts kullanarak sunburst chart oluşturmak için önce kütüphanenin indirilip projemize eklenmesi gerekiyor. Chart oluşturmak içinse HTML elementlerini kullanabiliriz. Bu sayede chartımızın tasarımını daha kolay ve hızlı bir şekilde yapabiliriz.

JavaScript kullanarak sunburst chart oluşturmak oldukça etkili bir yöntemdir. Eğer web uygulamalarında verileri etkili bir şekilde görselleştirmeniz gerekiyorsa, bu yöntemlerden birini tercih edebilir ve sunburst chartlarınızı kolayca oluşturabilirsiniz.

D3.js Kullanarak Sunburst Oluşturma

D3.js kullanarak sunburst chart oluşturmak oldukça kolaydır. Ancak bu işlem öncelikle veri setinin hazırlanması ile başlar. Veri setimiz bir JS nesnesi veya JSON dosyası şeklinde olabilir. D3.js’in sunburst chart oluşturmak için özel yöntemleri bulunmaktadır. Bu yöntemleri kullanarak sadece birkaç satır kod yazarak sunburst chart oluşturabiliriz.

Aşağıdaki örnek kodda JavaScript nesnemizi "d3.hierarchy" ile birleştirip "d3.partition" fonksiyonunu kullanarak hiyerarşik bir yapı oluşturuyoruz. Ardından "d3.arc" fonksiyonunu kullanarak iç içe geçmiş halkalar oluşturuyoruz. Son adımda SVG elementi kullanarak halkaları ekrana çizdiriyoruz.

Kod

Kod
var width = 750; var height = 600; var radius = Math.min(width, height) / 2;var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");var partition = d3.partition() .size([2 * Math.PI, radius]);var arc = d3.arc() .startAngle(function(d) { return d.x0; }) .endAngle(function(d) { return d.x1; }) .padAngle(0.01) .padRadius(radius / 3) .innerRadius(function(d) { return d.y0; }) .outerRadius(function(d) { return d.y1 - 1; });d3.json("data.json", function(error, data) { if (error) throw error; var root = d3.hierarchy(data) .sum(function(d) { return d.size; }) .sort(function(a, b) { return b.value - a.value; }); var g = svg.selectAll("g") .data(partition(root).descendants()) .enter().append("g"); g.append("path") .attr("d", arc) .style("fill", function(d) { return d.data.color; }) .on("click", click); g.append("text") .attr("transform", function(d) { return "rotate(" + computeTextRotation(d) + ")"; }) .attr("x", function(d) { return radius / 3 * d.depth; }) .attr("dx", "6") // margin .attr("dy", ".35em") // vertical-align .text(function(d) { return d.data.name; });});function click(d) { // fade out all text elements text.transition().attr("opacity", 0); path.transition() .duration(750) .attrTween("d", arcTween(d)) .each("end", function(e, i) { // check if the animated element's data e lies within the visible angle span given in d if (e.x >= d.x && e.x < (d.x + d.dx)) { // get a selection of the associated text element var arcText = d3.select(this.parentNode).select("text"); // fade in the text element and recalculate positions arcText.transition().duration(750) .attr("opacity", 1) .attr("transform", function() { return "rotate(" + computeTextRotation(e) + ")" }) .attr("x", function(d) { return radius / 3 * d.depth; }); } });}function arcTween(d) { var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]), yd = d3.interpolate(y.domain(), [d.y, 1]), yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]); return function(d, i) { return i ? function(t) { return arc(d); } : function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); return arc(d); }; };}function computeTextRotation(d) { var angle = (d.x0 + d.x1) / Math.PI * 90; return (angle < 180) ? angle - 90 : angle + 90;}

var width = 750; var height = 600; var radius = Math.min(width, height) / 2;var svg = d3.select("body").append("svg")     .attr("width", width)     .attr("height", height)   .append("g")     .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");var partition = d3.partition()     .size([2 * Math.PI, radius]);var arc = d3.arc()     .startAngle(function(d) { return d.x0; })     .endAngle(function(d) { return d.x1; })     .padAngle(0.01)     .padRadius(radius / 3)     .innerRadius(function(d) { return d.y0; })     .outerRadius(function(d) { return d.y1 - 1; });d3.json("data.json", function(error, data) {   if (error) throw error;   var root = d3.hierarchy(data)       .sum(function(d) { return d.size; })       .sort(function(a, b) { return b.value - a.value; });   var g = svg.selectAll("g")       .data(partition(root).descendants())       .enter().append("g");   g.append("path")       .attr("d", arc)       .style("fill", function(d) { return d.data.color; })       .on("click", click);   g.append("text")       .attr("transform", function(d) { return "rotate(" + computeTextRotation(d) + ")"; })       .attr("x", function(d) { return radius / 3 * d.depth; })       .attr("dx", "6") // margin       .attr("dy", ".35em") // vertical-align       .text(function(d) { return d.data.name; });});function click(d) {  // fade out all text elements  text.transition().attr("opacity", 0);  path.transition()      .duration(750)      .attrTween("d", arcTween(d))      .each("end", function(e, i) {          // check if the animated element's data e lies within the visible angle span given in d          if (e.x >= d.x && e.x < (d.x + d.dx)) {              // get a selection of the associated text element              var arcText = d3.select(this.parentNode).select("text");              // fade in the text element and recalculate positions              arcText.transition().duration(750)                  .attr("opacity", 1)                  .attr("transform", function() { return "rotate(" + computeTextRotation(e) + ")" })                  .attr("x", function(d) { return radius / 3 * d.depth; });          }      });}function arcTween(d) {  var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),      yd = d3.interpolate(y.domain(), [d.y, 1]),      yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);  return function(d, i) {    return i        ? function(t) { return arc(d); }        : function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); return arc(d); };  };}function computeTextRotation(d) {    var angle = (d.x0 + d.x1) / Math.PI * 90;    return (angle < 180) ? angle - 90 : angle + 90;}

Veri Hazırlama

JavaScript ile sunburst chart oluşturmak için ilk adım, veri setimizi hazırlamaktır. Bu veri seti, bir JSON dosyası veya bir JavaScript nesnesi şeklinde olabilir. Öncelikle, veri setimizin hiyerarşik yapısına karar vermemiz gerekiyor. Sunburst chart, verileri hiyerarşik bir yapıda gösterdiğinden, veri setimiz de bu şekilde düzenlenmelidir. Veri setimizi hazırlamak için ayrıca ağaç yapısını kullanabiliriz.

Bazı durumlarda, veri setimiz çok büyük olabilir. Bu nedenle herhangi bir performans sorunuyla karşılaşmamak için veri setimizi düzenli bir formatta tutmamız önemlidir. Bu noktada, bir kompakt JSON formatı olan JSONP formatını kullanabiliriz.

Veri hazırlama aşamasında, veri setimizin dili JS nesnesi olacaksa, aşağıdaki kodu kullanabiliriz:

var dataset = {  "name": "flare",  "children": [      {          "name": "analytics",          "children": [              {                  "name": "cluster",                  "children": [                      {"name": "AgglomerativeCluster", "size": 3938},                      {"name": "CommunityStructure", "size": 3812},                      {"name": "HierarchicalCluster", "size": 6714},                      {"name": "MergeEdge", "size": 743}                  ]              }              // more children...          ]      }      // more children...  ]};

Veri setimizin dili JSON dosyası olacaksa, JSON dosyamız aşağıdaki gibi olabilir:

{  "name": "flare",  "children": [      {          "name": "analytics",          "children": [              {                  "name": "cluster",                  "children": [                      {"name": "AgglomerativeCluster", "size": 3938},                      {"name": "CommunityStructure", "size": 3812},                      {"name": "HierarchicalCluster", "size": 6714},                      {"name": "MergeEdge", "size": 743}                  ]              }              // more children...          ]      }      // more children...  ]}

Veri hazırlama aşamasında yapmamız gereken son işlem, bunu bir sunburst chart ile görselleştirmektir. Ancak bu aşamaya geçmeden önce veri setimizi gözden geçirmek ve eksik veya hatalı verileri düzeltmek önemlidir.

Chart Oluşturma

Sunburst chart oluşturmak için SVG elementi de kullanılabilir. SVG, vector grafiği için bir dosya formatı olarak kullanılır ve web sayfalarında çözülme sorunları yaşanmadan kullanılabilir. SVG elementinin kullanımı ile grafiklerin görüntülenmesi daha yüksek kalitede olacak ve sayfa yüklenme süresi de daha hızlı olacaktır.

Chart oluşturmak için öncelikle SVG elementini HTML sayfamıza eklememiz gerekiyor. Daha sonrasında ise D3.js veya ECharts gibi kütüphaneler yardımıyla sunburst chart'ı çizdirebiliriz. SVG elementinin kullanımı ile chart'ın boyutu ve renkleri de kolaylıkla değiştirilebilir. Ayrıca her veri noktası için farklı renkler kullanarak da chart'ın daha dikkat çekici olmasını sağlayabiliriz.

ECharts Kullanarak Sunburst Oluşturma

ECharts kullanarak sunburst chart oluşturmak oldukça kolaydır. İlk olarak projenize ECharts kütüphanesini eklemeniz gerekiyor. Kütüphaneyi indirip projenize dahil ettiğinizde, kullanmaya başlayabilirsiniz.

Chart oluşturmak için, öncelikle bir HTML elementi oluşturmalısınız. Bu element, chart'ın gösterileceği alandır. Örneğin, bir div elementi kullanabilirsiniz.

Kod Örneği:
<div id="myChart"></div>

Ardından JavaScript kodunu yazarak chart'ı oluşturabilirsiniz. ECharts kütüphanesi, kullanımı oldukça sade ve kolay olan bir API sunar.

Chart'ı oluşturmak için, aşağıdaki kod örneğini kullanabilirsiniz:

Kod Örneği:
// Chart için gerekli verileri hazırlayınvar chartData = { name: 'Ana Dallar', children: [ { name: 'A şubesi', value: 100 }, { name: 'B şubesi', value: 200 }, { name: 'C şubesi', value: 150 }, { name: 'D şubesi', value: 80 } ]};// Chart'ı oluşturunvar myChart = echarts.init(document.getElementById('myChart'));myChart.setOption({ series: { type: 'sunburst', data: [chartData], radius: [0, '90%'], label: { rotate: 'radial' } }});

Kod Örneği:

// Chart için gerekli verileri hazırlayınvar chartData = {    name: 'Ana Dallar',    children: [        {            name: 'A şubesi',            value: 100        },        {            name: 'B şubesi',            value: 200        },        {            name: 'C şubesi',            value: 150        },        {            name: 'D şubesi',            value: 80        }    ]};// Chart'ı oluşturunvar myChart = echarts.init(document.getElementById('myChart'));myChart.setOption({    series: {        type: 'sunburst',        data: [chartData],        radius: [0, '90%'],        label: {            rotate: 'radial'        }    }});

Bu örnek kodu kullanarak, ECharts kullanarak sunburst chart oluşturabilir ve web uygulamanızda kullanabilirsiniz.

Chart Oluşturma

JavaScript kullanarak sunburst chart oluşturmak için HTML elementi kullanabiliriz. ECharts kütüphanesiyle oluşturduğumuz sunburst chart’ın container’ı, yani HTML elementi, bir div elementidir. Bu element, chart’a ait boyutları da belirler. D3.js’de ise sunburst chart’ın container’ı SVG elementidir. SVG elementleri koordinat sistemi kullanarak çizim yaparlar. Bu nedenle, SVG elementinin boyutları chart’ın büyüklüğünü etkiler. SVG elementi, HTML sayfasında bir SVG tagi kullanılarak oluşturulur.

Conclusion

Sonuç olarak, sunburst chart oluşturmak oldukça etkili bir yöntemdir. JavaScript kullanarak sunburst chart oluşturmak kolay ve hızlı bir şekilde yapılabiliyor. Hem D3.js hem de ECharts gibi kütüphaneler kullanılarak verilerimizi görselleştirmek mümkün. Bu sayede verilerimizi daha anlaşılır hale getirebiliriz.

JavaScript'in esnekliği ve gücünü kullanarak sunburst chart oluşturma konusunda daha da gelişmeler yaşanabilir. Bu yöntemin web uygulamalarındaki kullanımı giderek yaygınlaşıyor. Özellikle hem görsel hem de fonksiyonel olarak etkili bir sunburst chart oluşturmak isteyenler için JavaScript kullanımı oldukça çözüm sağlayıcıdır.