ozcanzaferayan/_screenshot.png

## _screenshot.png

      
    Raw
  

              _screenshot.png
            
          
## index.html
<html>
  <head>
    <script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
  </head>
  <body>
    <svg width="500" height="300"></svg>

    <script type="text/javascript">
     // Grafik için örnek veri
     // Ay bazında adet tüketim bilgisi
      const aylar = [
        { ay: "Ocak", adet: 50 },
        { ay: "Şubat", adet: 100 },
        { ay: "Mart", adet: 80 },
        { ay: "Nisan", adet: 60 },
        { ay: "Mayıs", adet: 90 },
      ];
      // SVG width height değerleri
      const width = 500;
      const height = 300;

      // xScale ve yScale değerleri belirlenen parametre cinsinden x ve y konum bilgisini veriyor.

      // xScale sayesinde her ay bilgisi için bar dikdörtgeninin sol alt konumu belirtilir
      // Örn: xScale('Ocak') = 0 iken xScale('Şubat') = 102.0408163265306'dır.
      const xScale = d3
        .scaleBand()                    // Bar etiketi ekseni için kullanılır. (Örn: ocak, şubat,) https://github.com/d3/d3-scale#scaleBand
        .domain(aylar.map(d => d.ay))   // Ay adına göre domain oluşturulur
        .range([0, width])              // 0 - 500 arası bir range belirtilir
        .paddingInner(0.1);             // Bar'lar arasında, bar'ın genişliğinin yüzde 10'u oranında (10px) boşluk bırakır


      // yScale sayesinde her ay bilgisi için yüzdelik cinsten bar uzunluğu belirtilir.
      // Örn: yScale(0) = 500 iken yScale(100) = 0'dır.
      // Not: Ekrandaki y ekseni koordinat sisteminin aksine yukarından aşağıya doğru ilerlediği için,
      //   daha sonra bu değeri height'tan çıkararak bar uzunluğunu bulacağız.
      const yScale = d3
        .scaleLinear()                            // Sayısal veriler için kullanılır https://github.com/d3/d3-scale#scaleLinear
        .domain([0, d3.max(aylar, d => d.adet)])  // Dizideki maksimum ve minimum değerler için bir domain oluşturur
        .range([height, 0]);                      // 0 - 300 arası bir range belirtilir

      d3.select("svg")                                 // svg DOM elemanı seçilir
        .selectAll()                                   // svg içerisindeki tüm children DOM'lar seçilir
        .data(aylar)                                   // Üzerinde işlem yapılacak obje dizisi belirtilir.
        .enter()                                       // Her bir data için bir DOM üretilmesini sağlar. .map() fonksiyonu gibi düşünün.
        .append("rect")                                // Dikdörtgen SVG bileşeni eklenir.
        .attr('fill', '#34a1f0')                       // Rengi maviye boyanır.
        .attr("x", d => xScale(d.ay))                  // Dikdörtgenin sol alt kısmı koordinatı.
        .attr("y", d => yScale(d.adet))                // Dikdörtgenin alt kısmı koordinatı.
        .attr("width", xScale.bandwidth())             // Dikdörtgenin genişliği.
        .attr("height", d => height - yScale(d.adet)); // Dikdörtgenin uzunluğu. Ekrandaki y ekseni, koordinat sistemine ters olduğu için height'tan çıkarılarak hesaplanır.
    </script>
  </body>
</html>
	<html>
	<head>
	<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
	</head>
	<body>
	<svg width="500" height="300"></svg>

	<script type="text/javascript">
	// Grafik için örnek veri
	// Ay bazında adet tüketim bilgisi
	const aylar = [
	{ ay: "Ocak", adet: 50 },
	{ ay: "Şubat", adet: 100 },
	{ ay: "Mart", adet: 80 },
	{ ay: "Nisan", adet: 60 },
	{ ay: "Mayıs", adet: 90 },
	];
	// SVG width height değerleri
	const width = 500;
	const height = 300;

	// xScale ve yScale değerleri belirlenen parametre cinsinden x ve y konum bilgisini veriyor.

	// xScale sayesinde her ay bilgisi için bar dikdörtgeninin sol alt konumu belirtilir
	// Örn: xScale('Ocak') = 0 iken xScale('Şubat') = 102.0408163265306'dır.
	const xScale = d3
	.scaleBand() // Bar etiketi ekseni için kullanılır. (Örn: ocak, şubat,) https://github.com/d3/d3-scale#scaleBand
	.domain(aylar.map(d => d.ay)) // Ay adına göre domain oluşturulur
	.range([0, width]) // 0 - 500 arası bir range belirtilir
	.paddingInner(0.1); // Bar'lar arasında, bar'ın genişliğinin yüzde 10'u oranında (10px) boşluk bırakır


	// yScale sayesinde her ay bilgisi için yüzdelik cinsten bar uzunluğu belirtilir.
	// Örn: yScale(0) = 500 iken yScale(100) = 0'dır.
	// Not: Ekrandaki y ekseni koordinat sisteminin aksine yukarından aşağıya doğru ilerlediği için,
	// daha sonra bu değeri height'tan çıkararak bar uzunluğunu bulacağız.
	const yScale = d3
	.scaleLinear() // Sayısal veriler için kullanılır https://github.com/d3/d3-scale#scaleLinear
	.domain([0, d3.max(aylar, d => d.adet)]) // Dizideki maksimum ve minimum değerler için bir domain oluşturur
	.range([height, 0]); // 0 - 300 arası bir range belirtilir

	d3.select("svg") // svg DOM elemanı seçilir
	.selectAll() // svg içerisindeki tüm children DOM'lar seçilir
	.data(aylar) // Üzerinde işlem yapılacak obje dizisi belirtilir.
	.enter() // Her bir data için bir DOM üretilmesini sağlar. .map() fonksiyonu gibi düşünün.
	.append("rect") // Dikdörtgen SVG bileşeni eklenir.
	.attr('fill', '#34a1f0') // Rengi maviye boyanır.
	.attr("x", d => xScale(d.ay)) // Dikdörtgenin sol alt kısmı koordinatı.
	.attr("y", d => yScale(d.adet)) // Dikdörtgenin alt kısmı koordinatı.
	.attr("width", xScale.bandwidth()) // Dikdörtgenin genişliği.
	.attr("height", d => height - yScale(d.adet)); // Dikdörtgenin uzunluğu. Ekrandaki y ekseni, koordinat sistemine ters olduğu için height'tan çıkarılarak hesaplanır.
	</script>
	</body>
	</html>