D3 Examples - bar Percent

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"></script>
  <script src="//d3js.org/d3-scale-chromatic.v0.3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .y-Axis path.domain {
    display: none;
}
    .y-Axis text {
      transform: translate(rotate(90deg));
    }
  </style>
</head>
​
<body>
  <div id="chart"></div>
  <script>
    console.clear();
    
    d3.csv("data.csv", function(data) {
    init("#chart", data, "CategoryA", "CNT")
})
​
d3.csv("data.csv", function(data) {
    init("#chart", data, "CategoryB", "CNT")
    init("#chart", data, "CategoryC", "CNT")
})
​
function init(chartId, data, col1, col2) {
    // set the dimensions and margins of the graph
    var margin = {
            top: 20,
            right: 20,
            bottom: 30,
            left: 20
        },
        width = window.innerWidth * 0.998 - margin.left - margin.right,
        height = window.innerHeight * 0.3 - margin.top - margin.bottom;
​
    var colorScale = d3.scaleOrdinal(d3["schemeSet2"])
​
    // set the ranges
    var x = d3.scaleLinear()
        .range([0, width]);
    var y = d3.scaleBand()
        .range([height, 0])
        .padding(0.1);
​
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("#chart").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .style("border", "1px solid")
        .style("background-color", "#F0F0F0")
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
​
    // Scale the range of the data in the domains
​
    tobeCount = col1;
    tobeCountVal = col2;
​
    var ndx = crossfilter(data);
    var dim = ndx.dimension(function(d) {
        return d[tobeCount]
    });
    var grp = dim.group().reduceSum(function(d) {
        return d[tobeCountVal]
    })
    var sum = d3.sum(data, function(d) {
        return d[tobeCountVal]
    });
​
    var percVal = grp.top(Infinity);
​
    percVal.forEach(function(d, i) {
        temp = 0;
        if (i == 0)
            temp = percVal[i].value
        else {
            temp = percVal[i].value
            for (j = 0; j < i; j++) {
                temp += percVal[j].value
            }
        }
​
        d.Perc = (percVal[i].value) / sum * 100;
    });
​
    x.domain([0, 100]);
    y.domain([tobeCount]);
​
    svg.append("text")
        .text(tobeCount)
        .attr("y", 0)
        .attr("x", width / 2)
        .attr("text-anchor", "middle")
        .attr("font-size", 16)
        .attr("font-weight", "bolder")
        .attr("font-family", "monospace")
​
    svg.append("rect")
        .attr("class", "bar")
        .attr("x", 0)
        .attr("width", x(100))
        .attr("y", function(d) {
            return y(tobeCount);
        })
        .attr("height", y.bandwidth())
        .style("fill", "transparent")
        .style("stroke", "black");
​
    svg.selectAll(".line")
        .data(percVal)
        .enter().append("line") // attach a line
        .attr("x1", function(d) {
            return x(d["Perc"])
        }) // x position of the first end of the line
        .attr("y1", function(d) {
            return y(tobeCount)
        }) // y position of the first end of the line
        .attr("x2", function(d) {
            return x(d["Perc"])
        }) // x position of the second end of the line
        .attr("y2", function(d) {
            return y(tobeCount) + y.bandwidth()
        }) // y position of the second end of the line
        .style("stroke-width", 4)
        .style("stroke", function(d) {
            return colorScale(d.key)
        })
        .append("svg:title").text(function(d) {
            return d.key + " : " + d3.format(".2f")(d.Perc) + "%"
        });
​
    var nodes = svg.selectAll(".textInCircle")
        .data(percVal)
​
    var nodesEnter = nodes.enter().append("g").attr("transform", function(d) {
        return "translate(" + x(d["Perc"]) + "," + y.bandwidth() * 0.6 + ")"
    });
​
    var circle = nodesEnter.append("circle")
        .attr("r", margin.top)
        .attr("fill", function(d) {
            return colorScale(d.key)
        })
        .append("svg:title").text(function(d) {
            return d.key + " : " + d3.format(".2f")(d.Perc) + "%"
        });
​
    var fontSize = 12
​
    nodesEnter.append("text")
        .attr("dy", function(d) {
            return fontSize / 3
        })
        .attr("text-anchor", "middle")
        .attr("pointer-events", "none")
        .attr("font-size", fontSize)
        .attr("font-weight", "bolder")
        .attr("fill", "white")
        .text(function(d) {
            return d3.format(".0f")(d.Perc) + "%"
        });
​
    // add the x Axis
    svg.append("g")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x));
​
    // add the y Axis
    //   svg.append("g")
    //          .attr("class","y-Axis")
    //       .call(d3.axisLeft(y));
​
}
  </script>
</body>
​
    