D3.js bar chart, bars extending from top to bottom, instead of bottom to top

Question

Barchart image

D3.js bar chart, bars extending from top to bottom, instead of bottom to top.

I am not sure what attributes i should be changing to correct this. I have posted my code and an image of the resulting chart.

...

const marketCataRender = marketCataData => {

    const marketCataSVG = d3.select('.marketCataChart').append('svg')

    marketCataSVG.attr('class', 'marketCataSVG')
        .attr('height', marketCataHeight)
        .attr('width', marketCataWidth);

    // x y values
    const xValue = d => d.loc_start_str;
    const yValue = d => d.total_matched;

    // x y scales
    const xScale = d3.scaleBand()
        .domain(marketCataData.map(xValue))
        .range(\[0, innerWidth\]);

    const yScale = d3.scaleLinear()
        .domain(d3.extent(marketCataData, yValue))
        .range(\[innerHeight, 0\])
        .nice();

    // x y axis
    const xAxis = d3.axisBottom(xScale)
    const yAxis = d3.axisLeft(yScale)

    // set chart group to make it easier to transform
    const g = marketCataSVG.append('g')
        .attr('transform', `translate(${margin.left}, ${margin.top})`);

    // x y axis groups
    const xAxisG = g.append('g')
        .call(xAxis)
        .attr('transform', `translate(0, ${innerHeight})`)
        .selectAll('text')
            .style('text-anchor', 'end')
            .attr('transform', `rotate(-90)`)
            .attr('x', -7)
            
            
    const yAxisG = g.append('g')
        .call(yAxis)

    // Apply bar chart rectangle to chart
    const marketCataRect = g.selectAll('rect')
        marketCataRect.data(marketCataData)
        .enter().append('rect')
            .attr('x', d => xScale(xValue(d)))
            .attr('height', d => yScale(yValue(d)))
            .attr('width', xScale.bandwidth());
}][1]

...

Answer 1

You haven't declared the Y coordinates for your rectangles. You need to scale the y coordinate of your rectangles.

 const marketCataRect = g.selectAll('rect')
    marketCataRect.data(marketCataData)
    .enter().append('rect')
        .attr('x', d => xScale(d.loc_start_str) )

        .attr('y', d => yScale(d.total_matched) ) // set y 
        .attr('height', d => marketCataHeight - yScale(d.total_matched))   // find height by subtracting y value from height of the chart. 

        .attr('width', xScale.bandwidth());

example here: https://bl.ocks.org/d3noob/8952219

Answer 2

Try to always provide a Minimal, Complete, and Verifiable example. https://stackoverflow.com/help/mcve

I tried to do this by taking your code and adding dummy data etc. and then modifying it

The result is this (Demo here- https://codepen.io/Alexander9111/pen/gObEZym ):

HTML:

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

Javascript:

const marketCataHeight = 800;
const marketCataWidth = 2000;
const innerWidth = 1500;
const innerHeight = 500;

const margin = {
  top: 30,
  left: 30,
  bottom: 30,
  right: 30
};

const marketCataRender = marketCataData => {

    const marketCataSVG = d3.select('.marketCataChart').append('svg')

    marketCataSVG.attr('class', 'marketCataSVG')
        .attr('height', marketCataHeight)
        .attr('width', marketCataWidth);

    // x y values
    const xValue = d => d.loc_start_str;
    const yValue = d => d.total_matched;

    // x y scales
    const xScale = d3.scaleBand();
        xScale.domain(marketCataData.map(xValue))
        .range([0, innerWidth]);

    const yScale = d3.scaleLinear();
        yScale.domain(d3.extent(marketCataData, yValue))
        .range([innerHeight, 0])
        .nice();

    // x y axis
    //const xAxis = d3.axisBottom(xScale)
    const xAxis = d3.axisTop(xScale) //change to axisTop
    const yAxis = d3.axisLeft(yScale)

    // set chart group to make it easier to transform
    const g = marketCataSVG.append('g')
        .attr('transform', `translate(${margin.left}, ${margin.top})`);

    // x y axis groups
    const xAxisG = g.append('g')
        .call(xAxis)
        .attr('class', 'x-axis')
        .attr('transform', `translate(0, ${0})`) // no longer need to translate by innerHeight as the x-axis is on the top
        .selectAll('text')
            .style('text-anchor', 'middle')
            .attr('transform', `rotate(-0)`) //-90
            .attr('x', -7)


    const yAxisG = g.append('g')
        .call(yAxis)
        .attr('class', 'y-axis');

    // Apply bar chart rectangle to chart
    const marketCataRect = g.selectAll('rect');
        marketCataRect.data(marketCataData)
        .enter().append('rect')
            .attr('x', d => xScale(xValue(d)))
            .attr('height', d => yScale(yValue(d)))
            .attr('width', xScale.bandwidth());

    //Optional - add chart border:
        g.append('rect')
            .attr('x', 0)
            .attr('y', 0)
            .attr('width', innerWidth)
            .attr('height', innerHeight)
            .attr('stroke', 'black')
            .attr('stroke-width', '1px')
            .attr('fill', 'none')
            .attr('class', 'chart-boarder');
};

const marketCataData = [
  {loc_start_str: "example0", total_matched: 0},
  {loc_start_str: "example1", total_matched: 100},
  {loc_start_str: "example2", total_matched: 200},
  {loc_start_str: "example3", total_matched: 300},
  {loc_start_str: "example4", total_matched: 400}, 
]

marketCataRender(marketCataData);

Most important lines were: const xAxis = d3.axisTop(xScale) and const xAxisG.attr('transform', `translate(0, ${0})`)