Sort Data by colors

Sort Data by colors

by Dhivya Solomon

HTML

<div id="all-lk-seats">

</div>

CSS

.wl-seats {
    width: 11px;
    height: 11px;
    float: left;
    margin: 2px;
    background-color: #c7c7c7;
}

JavaScript

/* https://stackoverflow.com/questions/39506725/javascript-sort-array-of-objects-by-a-property-based-on-a-special-order/39506825 */

/* https://api.myjson.com/bins/pfawu */
var dataUrl = "https://api.myjson.com/bins/pfawu"
d3.json(dataUrl, function(data){
		console.log("data", data);
    
    var sortOrder = {"#F39849": 0, "#E94927": 1, "#538296": 2, "#CCCCCC": 3};

var sortedData = data.sort(function (p1, p2) {
  console.log("p1", p1);
  console.log("p2", p2);
   return sortOrder[p1.colors] - sortOrder[p2.colors];
});



console.log(JSON.stringify(sortedData));

var selectWonLeadSeatChart = d3.select('#all-lk-seats')

selectWonLeadSeatChart.selectAll(".wl-seats")
    .data(sortedData).enter().append("div")
    .attr("class", "constituency wl-seats")
    .style("background-color", function(d){
        // console.log(d);
        
        return d.colors;
        // return colorCodesList[d.leadingParty];
    })
    .attr("data-pccode", function(d){
        // console.log(d.properties.PC_CODE);
        return d.pcno;
    })
    .attr("data-statecode", function(d){
        // console.log(d.properties.PC_CODE);
        return d.stateCode;
        
    })

});