d3 horizontal bar chart single series

Question

I've got a horizontal bar chart that works against an array series. However I want to modify this to look more akin to the picture here - where there is just 1 item rounded border with the percentage value off to the side.

When I remove the array to just 1 - it takes up 100% of the area.

current code

https://jsfiddle.net/csa1w2fm/

<html>
    <head>
        <title>multibar d3</title>
        <script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
        <style>
            
        </style>
    </head>
    <body>



    <script>
 
        
        d3.select("body")
            .selectAll('svg')
            .remove();

        var data = [{"label": "Toblerone", "value": 10}, {"label": "Mars Bar", "value": 30}];

        var w = parseInt(900, 10),
            h = parseInt(800, 10);


        var color = d3.scaleOrdinal().range(['#046395', '#d62828', '#f77f00', '#fcbf49', '#eae2b7']);


        data.forEach(function(d) {
            d.total = +d.value;
        });


        var margin = {top: 20, right: 5, bottom: 30, left: 20};

        var width = w - margin.left - margin.right;
        var height = h - margin.top - margin.bottom;


        var x = d3.scaleLinear()
                  .range([0, width]);
        var y = d3.scaleBand()
                  .range([height, 0])
                  .padding(0.1);

        x.domain([0, d3.max(data, function(d) { return d.value; })]);
        y.domain(data.map(function(d) { return d.total; }));

        var svg = d3.select("body")
            .append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr('class', 'barchart')
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        var bars = svg.append('g').attr('class', 'bars');

        bars.selectAll(".bar")
            .data(data)
            .enter().append("rect")
            .attr("class", "bar")
            .attr('fill', function(d, i) {
                return color(i);
            })
            .attr("width", function(d) { return x(d.total); })
            .attr("y", function(d) { return y(d.value); })
            .attr("height", y.bandwidth());

        bars.selectAll(".label")
            .data(data)
            .enter().append("text")
            .attr("class", "label")
            .attr('text-anchor', function(d) {
              return d.total <= 20 ? 'start' : 'end';
            })
            .attr("x", function(d) {
              return d.total <= 20 ? x(d.total) + 20 : x(d.total) - 20;
            })
            .attr("y", function(d) {
              return y(d.value) + y.bandwidth() / 2;
            })
            .attr("dy", 5)
            .text(function(d) {
              return d.label;
            });

        bars.append("g")
            .attr("transform", "translate(0," + height + ")")
            .call(d3.axisBottom(x));

        bars.append("g")
            .call(d3.axisLeft(y));



    </script>



    </body>
</html>

new progress by fixing the domain

<html>
    <head>
        <title>multibar d3</title>
        <script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
        <style>
            
        </style>
    </head>
    <body>



    <script>
 
        
        d3.select("body")
            .selectAll('svg')
            .remove();

        var data = [{"label": "Toblerone", "value": 70}];

        var w = parseInt(280, 10),
            h = parseInt(80, 10);


        var color = d3.scaleOrdinal().range(['#046395', '#d62828', '#f77f00', '#fcbf49', '#eae2b7']);


        data.forEach(function(d) {
            d.total = +d.value;
        });


        var margin = {top: 20, right: 10, bottom: 20, left: 20};

        var width = w - margin.left - margin.right;
        var height = h - margin.top - margin.bottom;

    
        var x = d3.scaleLinear()
                  .range([0, width]);
        var y = d3.scaleBand()
                  .range([height, 0])
                  .padding(0.1);

        x.domain([0, 100])
        y.domain(data.map(function(d) { return d.total; }));

        var svg = d3.select("body")
            .append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr('class', 'barchart')
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        var bars = svg.append('g').attr('class', 'bars');

        bars.selectAll(".bar")
            .data(data)
            .enter().append("rect")
            .attr("class", "bar")
            .attr('fill', function(d, i) {
                return color(i);
            })
            .attr("width", function(d) { return x(d.total); })
            .attr("y", function(d) { return y(d.value); })
            .attr("height", y.bandwidth());

        bars.selectAll(".label")
            .data(data)
            .enter().append("text")
            .attr("class", "label")
            .attr('text-anchor', function(d) {
              return d.total <= 20 ? 'start' : 'end';
            })
            .attr("x", function(d) {
              return d.total <= 20 ? x(d.total) + 20 : x(d.total) - 20;
            })
            .attr("y", function(d) {
              return y(d.value) + y.bandwidth() / 2;
            })
            .attr("dy", 5)
            .text(function(d) {
              return d.label;
            });

        bars.append("g")
            .attr("transform", "translate(0," + height + ")")
            .call(d3.axisBottom(x));

        bars.append("g")
            .call(d3.axisLeft(y));



    </script>



    </body>
</html>

score 1 · Answer 1 · answered Jul 28 '23 at 06:20

1

Currently, your x scale domain take min and max value of your array.

Just changes the x scale domain to x.domain([0, 100]);.

So that the span of the scale goes from 0 to 100 alongside it's range

answered Jul 28 '23 at 06:20

pernifloss

446
9

What do we do to style it similar - round the edges and add the border? https://jsfiddle.net/q120g9ex/ – The Old County Jul 28 '23 at 06:40
https://jsfiddle.net/cjd3s6r7/31/ here are first steps to stylize, I added background bar with white stroke, blue color on SVG, rounding on rects. – pernifloss Jul 28 '23 at 12:19
ok great - but the right of the bar chart edge - is straight, not rounded - https://stackoverflow.com/questions/12115691/svg-d3-js-rounded-corners-on-one-side-of-a-rectangle -- I guess it would be rounded at 100% – The Old County Jul 28 '23 at 12:25
https://stackoverflow.com/questions/34923888/rounded-corner-only-on-one-side-of-svg-rect – pernifloss Jul 28 '23 at 12:27

d3 horizontal bar chart single series

1 Answers1