DC.js - wykres punktowy

Wykres punktowy to rodzaj diagramu matematycznego. Jest reprezentowany za pomocą współrzędnych kartezjańskich do wyświetlania wartości dla zwykle dwóch zmiennych dla zestawu danych. Dane są wyświetlane jako zbiór punktów, a punkty mogą być pokolorowane. W tym rozdziale szczegółowo opisano wykres punktowy.

Metody wykresu punktowego

Zanim przejdziemy do rysowania wykresu punktowego, powinniśmy zrozumieć dc.scatterPlotklasa i jej metody. Dc.scatterPlot używa mixinów, aby uzyskać podstawową funkcjonalność rysowania wykresu. Mixin używany przez dc.scatterPlot jest podany poniżej -

dc.coordinateGridMixin

Pełny diagram klas dc.scatterPlot jest następujący -

Dc.scatterPlot pobiera wszystkie metody z wyżej określonych mixinów. Posiada własne metody rysowania wykresu punktowego, które wyjaśniono w następujący sposób.

customSymbol ([symbol])

Ta metoda służy do pobierania lub ustawiania generatora symboli.

emptySize ([rozmiar])

Ta metoda służy do ustawiania lub pobierania promienia symboli, gdy grupa jest pusta.

wykluczoneColor ([kolor])

Ta metoda służy do pobierania lub ustawiania koloru symboli wykluczonych z filtru wykresu.

wykluczoneOpacity ([krycie])

Ta metoda służy do pobierania lub ustawiania krycia dla symboli wykluczonych z filtru wykresu.

wykluczoneSize ([rozmiar])

Służy do ustawiania lub pobierania rozmiaru symboli wykluczonych z filtru wykresu.

highlightedSize ([rozmiar])

Służy do ustawiania lub pobierania promienia dla podświetlonych symboli.

symbol ([typ])

Służy do pobierania lub ustawiania typu symbolu używanego dla każdego punktu.

Narysuj wykres punktowy

Narysujmy wykres punktowy w DC. W tym przykładzie weźmy zbiór danych o nazwie ashowell1.csvplik. Przykładowy plik danych jest następujący -

"height","weight","age","male"
151.765,47.8256065,63,1
139.7,36.4858065,63,0
136.525,31.864838,65,0
156.845,53.0419145,41,1
145.415,41.276872,51,0
163.83,62.992589,35,1
149.225,38.2434755,32,0
168.91,55.4799715,27,1
147.955,34.869885,19,0
165.1,54.487739,54,1
154.305,49.89512,47,0

...............
...............

Powyższy przykładowy plik zawiera wiele rekordów. Możemy pobrać plik, klikając poniższy link i zapisując go w naszej lokalizacji DC.

howell1.csv

Teraz wykonajmy kolejne kroki, aby narysować wykres punktowy w DC.

Krok 1: Zdefiniuj zmienną

Zdefiniujmy zmienną, jak pokazano poniżej -

var chart = dc.scatterPlot('#scatter');

Tutaj funkcja scatterplot () jest odwzorowywana za pomocą id scatter.

Krok 2: Przeczytaj dane

Odczytaj dane z pliku howell1.csv, jak pokazano poniżej -

d3.csv("data/howell1.csv", function(errors, people) {
   var mycrossfilter = crossfilter(people);
}

Jeśli nie ma danych, zwraca błąd. Później przypisz dane do filtra krzyżowego.

Krok 3: pobierz rekordy

Pobierzmy rekordy za pomocą kodu podanego poniżej -

people.forEach(function(x) {
   if(x.male == 1) {
      x.gender = "Male";
   } else {
      x.gender = "Female";
   }
});

Tutaj sprawdziliśmy płeć.

Krok 4: Ustaw wymiar

Możesz ustawić wymiar za pomocą kodowania podanego poniżej -

var hwDimension = mycrossfilter.dimension(function(data) { 
   return [Math.floor(data.height), Math.floor(data.weight)];
});

Po przypisaniu wymiaru pogrupuj płeć za pomocą kodu podanego poniżej -

var hwGroup = hwDimension.group().reduceCount();

Krok 5: Wygeneruj wykres

Teraz wygeneruj mapę cieplną, używając kodu podanego poniżej -

chart
   .width(800)
   .height(600)
   .x(d3.scale.linear().domain([0,180]))
   .y(d3.scale.linear().domain([0,100]))
   .brushOn(false)
   .xAxisLabel("Height")
   .yAxisLabel("Weight")
   .symbolSize(8)
   .clipPadding(10)
   .dimension(hwDimension)
   .group(hwGroup);

Tutaj,

Przypisaliśmy szerokość wykresu na 800, a wysokość na 600.
Zastosowano funkcję d3.scale.linear () zarówno dla osi X, jak i Y.
Włączono wartość brushOn jako fałsz.
Następnie przypisz etykietę osi X jako wysokość i etykietę osi Y jako wagę.
Ustaw rozmiar symbolu na osiem i wartość wypełnienia na 10.
Na koniec pogrupuj dane i wyrenderuj wykres.

Krok 6: Przykład roboczy

Pełna lista kodów jest następująca. Utwórz stronę internetowąscatter.html i dodaj do niego następujące zmiany.

<html>
   <head>
   <title>Scatter plot Sample</title>
   <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css">
   <link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>

   <script src = "js/d3.js"></script>
   <script src = "js/crossfilter.js"></script>
   <script src = "js/dc.js"></script>
   </head>
   
   <body>
      <div>
         <div id = "scatter"></div>
      </div>

      <script language = "javascript">
         var chart = dc.scatterPlot('#scatter');

         d3.csv("data/howell1.csv", function(errors, people) {
            var mycrossfilter = crossfilter(people);

            people.forEach(function(x) {
               if(x.male == 1) {
                  x.gender = "Male";
               } else {
                  x.gender = "Female";
               }
            });

            var hwDimension = mycrossfilter.dimension(function(data) { 
               return [Math.floor(data.height), Math.floor(data.weight)];
            });
            var hwGroup = hwDimension.group().reduceCount();

            chart
               .width(800)
               .height(600)
               .x(d3.scale.linear().domain([0,180]))
               .y(d3.scale.linear().domain([0,100]))
               .brushOn(false)
               .xAxisLabel("Height")
               .yAxisLabel("Weight")
               .symbolSize(8)
               .clipPadding(10)
               .dimension(hwDimension)
               .group(hwGroup);

            chart.render();
         });
      </script>
   </body>
</html>

Teraz poproś przeglądarkę, a zobaczymy następującą odpowiedź.