Skumulowany wykres słupkowy D3, przy czym każdy stos ma inny kolor ustawiony przez różne grupy,

Nov 24 2020

Problem

Próbuję uzyskać skumulowany wykres słupkowy w D3 (v5), aby mieć indywidualnie kolorowy pasek dla różnych grup (co mogę zrobić, ryc. 1), z każdym stosem w innym kolorze (w zależności od ryc. 2).

Nie mogę znaleźć sposobu, aby uzyskać kolorystykę stosu (tj. Chcę, aby różne odcienie koloru grupy różniły się w zależności od wysokości stosu) przykład na ryc. 3 (z wyjątkiem tego, że chciałbym, aby różne grupy miały różne kolory, tj. Nie powtarzały się tak jak są tutaj).

W podanych przeze mnie przykładach kodu są dwa zestawy danych. Prosty zestaw ułatwiający zabawę z danymi:

Animal,Group,A,B,C,D
Dog,Domestic,10,10,20,5
Cat,Domestic,20,5,10,10
Mouse,Pest,75,5,35,0 
Lion,Africa,5,5,30,25
Elephant,Africa,15,15,20,20
Whale,Marine,35,20,10,45
Shark,Marine,45,55,0, 60
Fish,Marine,20, 5,30,10

I większy zestaw , którego faktycznie próbuję użyć. Oto bl.ocks.orgkod, który próbuję rozwinąć:

// set the dimensions and margins of the graph
const margin = {
    top: 90,
    right: 20,
    bottom: 30,
    left: 40
  },
  width = 960 - margin.left - margin.right,
  height = 960 - margin.top - margin.bottom;

const svg = d3.select("#my_dataviz")
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform",
    "translate(" + margin.left + "," + margin.top + ")");

const y = d3.scaleBand()
  .range([0, height])
  .padding(0.1);
const x = d3.scaleLinear()
  .range([0, width]);
const z = d3.scaleOrdinal()
  .range(["none", "lightsteelblue", "steelblue", "darksteelblue"]);

d3.csv("https://gist.githubusercontent.com/JimMaltby/844ca313589e488b249b86ead0d621a9/raw/f328ad6291ffd3c9767a2dbdba5ce8ade59a5dfa/TimeBarDummyFormat.csv", d3.autoType, (d, i, columns) => {
      var i = 3;
      var t = 0;
      for (; i < columns.length; ++i)
        t += d[columns[i]] = +d[columns[i]];
      d.total = t;
      return d;
    }

  ).then(function(data) {
    const keys = data.columns.slice(3); // takes the column names, ignoring the first 3 items = ["EarlyMin","EarlyAll", "LateAll", "LateMax"]

    // List of groups = species here = value of the first column called group -> I show them on the X axis
    const Groups = d3.map(data, d => d.Group);
    y.domain(data.map(d => d.Ser));
    x.domain([2000, d3.max(data, d => d.total)]).nice();
    z.domain(keys);

    svg.append("g")
      .selectAll("g")
      .data(d3.stack().keys(keys)(data))
      .enter().append("g")
      .attr("fill", d => z(d.key)) //Color is assigned here because you want everyone for the series to be the same color
      .selectAll("rect")
      .data(d => d)
      .enter()
      .append("rect")
      .attr("y", d => y(d.data.Ser))
      .attr("x", d => x(d[0]))
      .attr("height", y.bandwidth())
      .attr("width", d => x(d[1]) - x(d[0]));

    svg.append("g")
      .attr("transform", "translate(0,0)")
      .call(d3.axisTop(x));

    svg.append("g")
      .call(d3.axisLeft(y));
  });

.bar {
  fill: rgb(70, 131, 180);
}

<script src="https://d3js.org/d3.v5.min.js"></script>
<div id="my_dataviz"></div>

JSFiddle: https://jsfiddle.net/yq7bkvdL/

Co próbowałem

Czuję, że po prostu brakuje mi czegoś prostego, ale jestem kodowym noobem, a moje kodowanie jest dość prymitywne, więc nie mogę tego rozgryźć.

Myślę, że albo umieszczam wypełnienie attrw złym miejscu. Albo to, że nie rozumiem, jak wybrać klucz w zagnieżdżonych / hierarchicznych danych d3.stack.

Próbowałem różnych rzeczy, wszystkie bez powodzenia:

1. Tablica kolorów Próbowałem napisać funkcję tworzącą tablicę kolorów, wykonując iterację (z forEach) wartościami / nazwami „klucza” i „Grupy” i łącząc je w celu utworzenia tablicy, której mogę użyć z d3 Skala (porządkowa), aby wybrać właściwy kolor. Na przykład z pierwszym zestawem danych utworzyłoby tablicę, ColoursID [DomesticA, DomesticB, DomesticC, DomesticD,PestA, PestB...]która następnie dopasowuje się do kolorów wColourS ["grey", "lightgreen", "green", "darkgreen", "yellow", ...]

Poniżej znajduje się próba zrobienia tego, a także różne inne eksploracje zakomentowane.

  // List of groups = species here = value of the first column called group -> I show them on the X axis
  const stack = d3.stack().keys(stackKeys)(data);

//const Groups = d3.map(data, d => d.Group);
//const ColourID = d3.map(data, d => d.Group && d.key);
//  const stackID = stack.data // //stack[3].key = "D" // [2][6].data.Group  = "Marine"
// const Test1 = Object.entries(stack).forEach(d => d.key);
        
const stackB = stack.forEach(function(d,i,j){
                                                //var a =  Object.keys(d)//= list of 3rd Level keys "0,..7,key,index"
                                                //var a =  Object.keys(d).forEach((key) => key) "undefined"
                                                //var   a = d.key //= "D" for all
                        d.forEach(function(d,i){
                                            //var a =  d.keys // = "function keys{} ([native code])"
                          //var a =  Object.keys(d)
                          //var a =  Object.keys(d) //= list of 2nd Level keys "0,1,data"
                                                    var  b = data[i]["Group"]   
                                    d.forEach(function(d){
                                                    //var a = [d]["key"] // = "undefined"
                          //var a = Object.keys(d).forEach((key) => d[key]) // = "undefined"
                              var a = Object.keys(d) //= ""
                           //   var a =  d.keys //= "undefined"
                                data[i]["colourID"] = b + " a" + "-b " + a //d.key
                                                                })  
                        })    
               });
  
  console.log(stack)

      svg.append("g")
        .selectAll("g")
        .data(stack)
        .enter().append("g")   
        //.attr("fill", d => z(d.data.Group) ) //Color is assigned here because you want everyone for the series to be the same color
        .selectAll("rect")
        .data(d => d)
        .enter().append("rect")
        .attr("fill", d => colourZ(d.data.colourID)) //Color is assigned here because you want each Group to be a different colour **how do you vary the blocks?**
        .attr("y", d => y(d.data.Animal) )      //uses the Column of data Animal to seperate bars
        .attr("x", d=> x(d[0]) )                //
        .attr("height", y.bandwidth() )         //
        .attr("width", d=> x(d[1]) - x(d[0]));  //

Kod VizHub: https://vizhub.com/JimMaltby/373f1dbb42ad453787dc0055dee7db81?file=index.js

2. Utwórz drugą skalę kolorów:

Skorzystałem z porady tutaj ( d3.js - dodawanie różnych kolorów do jednego słupka na skumulowanym wykresie słupkowym ), dodając funkcję if, aby wybrać inną skalę kolorów, dodając ten kod:

//-----------------------------BARS------------------------------//

      // append the rectangles for the bar chart
      svg.append("g")
        .selectAll("g")
        .data(stack)
        .enter().append("g")      

            //Color is assigned here because you want everyone for the series to be the same color
        .selectAll("rect")
        .data(d => d)
        .enter().append("rect")
        .attr("fill", d => 
              d.data.Group == "Infrastructure" 
              ? z2(d.key) 
              : z(d.key))
        //.attr("class", "bar")
        .attr("y", d => y(d.data.Ser) )         //Vert2Hor **x to y** **x(d.data.Ser) to y(d.data.Ser)**
        .attr("x", d=> x(d[0]) )                //Vert2Hor **y to x** **y(d[1]) to x(d[0])**
        .attr("height", y.bandwidth() )         //Vert2Hor **"width" to "height"**  **x.bandwidth to y.bandwidth** 
        .attr("width", d=> x(d[1]) - x(d[0]));  //Vert2Hor **"height" to "width"**  **y(d[0]) - y(d[1]) to x(d[1]) - x(d[0])**

Kod VizHub

3. Duża funkcja JEŻELI w wypełnieniu.

Jeśli to jest rozwiązanie, byłbym wdzięczny za porady dotyczące pliku. sprawiając, że to zadziała, a następnie b. mieć bardziej efektywny sposób robienia tego

Tutaj znowu wygląda na to, że z trudem wybieram „klucz” tablicy danych „stosu”. Zauważysz, że próbowałem tutaj na różne sposoby wybrać klucz w kodzie, ale bez powodzenia :(.

        .attr("fill", function(d,i, j) {        
            if (d.data.Group === "Domestic") {
                if (d.key === "A") { return "none"}
                    else if (d.key === "B") { return "lightblue"}
                    else if (d.key === "C") { return "blue"}
                else if (d.key === "D") { return "darkblue"}
                else  { return "forestgreen"}
            }
            else if (d.data.Group === "Pest") {
                if (d.key === "A") { return "yellow"}
                    else if (d.key === "B") { return "lightorange"}
                    else if (d.key === "C") { return "orange"}
                else if (d.key === "D") { return "darkorange"}
                else  { return "Brown"} //"yellow", "lightorange", "orange", ""
            }
            else if (d.data.Group === "Africa") {
                if (Object.keys(root.data) === 1) { return "grey"}
                    else if (d.key === "B") { return "lightred"}
                    else if (d.key === "C") { return "red"}
                else if (d.key === "D") { return "darkred"}
                else  { return "pink"}
            }
            else if (d.data.Group == "Marine") {
                if (stackKeys == "A") { return "lightgrey"}
                    else if (stackKeys[d] == "B") { return "lightblue"}
                    else if (stackKeys[i] == "C") { return "blue"}
                else if (stackKeys[3] == "D") { return "darkblue"}
                else  { return "steelblue"}
            }
            else { return "black" }             
                ;})

Kod w Viz Hub

Odpowiedzi

RubenHelsloot Nov 25 2020 at 05:51

Jeśli chcesz nieco zmienić kolory pasków, jeśli paski mają mniejszą długość, możesz użyć fill-opacityi zachować fillto samo! W ten sposób kolory są mniej wyraźne i jaśniejsze, jeśli wartość jest jaśniejsza.

Po prostu utwórz nową skalę opacityz zakresem [0.3, 1]. Wybrałem 0,3, ponieważ krycie 0 oznacza, że pasek jest niewidoczny, a na ogół tego nie chcesz. Dodałem osobną wartość, d.heightaby oznaczyć całą widoczną wysokość paska, która jest oddzielona od początku (ale równoważna d.Min + d.All + d.Max). Teraz po prostu zastosuj atrybut do każdego słupka i gotowe.

Możesz ustawić zakres na [0, 1]i nie używać d3.extentdla domeny - prawdopodobnie doprowadzi to do podobnych wyników, chociaż istnieją pewne różnice, które można zauważyć za pomocą eksperymentu myślowego.

W tej chwili fill-opacityatrybut jest ustawiony na każdym słupku. Tak więc słupki w tym samym stosie mają tę samą fill-opacitywartość. Pamiętaj jednak, że jest to całkowicie opcjonalne i możesz również zastosować różne wartości.

// set the dimensions and margins of the graph
const margin = {
    top: 90,
    right: 20,
    bottom: 30,
    left: 40
  },
  width = 960 - margin.left - margin.right,
  height = 960 - margin.top - margin.bottom;

const svg = d3.select("#my_dataviz")
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform",
    "translate(" + margin.left + "," + margin.top + ")");

const y = d3.scaleBand()
  .range([0, height])
  .padding(0.1);
const x = d3.scaleLinear()
  .range([0, width]);
const z = d3.scaleOrdinal()
  .range(["none", "lightsteelblue", "steelblue", "darksteelblue"]);
const opacity = d3.scaleLinear()
  .range([0.3, 1]);

d3.csv("https://gist.githubusercontent.com/JimMaltby/844ca313589e488b249b86ead0d621a9/raw/f328ad6291ffd3c9767a2dbdba5ce8ade59a5dfa/TimeBarDummyFormat.csv", d3.autoType, (d, i, columns) => {
      var i = 3;
      var t = 0;
      for (; i < columns.length; ++i)
        t += d[columns[i]] = +d[columns[i]];
      d.total = t;
      d.height = d.total - d.Start;
      return d;
    }

  ).then(function(data) {
    const keys = data.columns.slice(3); // takes the column names, ignoring the first 3 items = ["EarlyMin","EarlyAll", "LateAll", "LateMax"]

    // List of groups = species here = value of the first column called group -> I show them on the X axis
    const Groups = d3.map(data, d => d.Group);
    y.domain(data.map(d => d.Ser));
    x.domain([2000, d3.max(data, d => d.total)]).nice();
    z.domain(keys);
    opacity.domain(d3.extent(data, d => d.height));
    console.log(opacity.domain());

    svg.append("g")
      .selectAll("g")
      .data(d3.stack().keys(keys)(data))
      .enter().append("g")
      .attr("fill", d => z(d.key))
      .selectAll("rect")
      .data(d => d)
      .enter()
      .append("rect")
      .attr("y", d => y(d.data.Ser))
      .attr("x", d => x(d[0]))
      .attr("height", y.bandwidth())
      .attr("width", d => x(d[1]) - x(d[0]))
      .attr("fill-opacity", d => opacity(d.data.height));

    svg.append("g")
      .attr("transform", "translate(0,0)")
      .call(d3.axisTop(x));

    svg.append("g")
      .call(d3.axisLeft(y));
  });

.bar {
  fill: rgb(70, 131, 180);
}

<script src="https://d3js.org/d3.v5.min.js"></script>
<div id="my_dataviz"></div>

Edycja : wiedząc, że chcesz pokolorować paski według grup, użyłbym tej samej logiki, ale dokonałem kilku poprawek:

Po pierwsze, przestawiłem się zna radzenie sobie z fill-opacity(nadal używam do akcentowania różnych grup) i używam nowej skali porządkowej groupdla kolorów. Kluczem do tej skali jest po prostu wcześniej istniejąca dziedzina d.Group.