Rect not appearing in d3

I am doing the first data visualisation project for the certification and i don’t understand why its not appearing as rectangles if you look in the source of the page you can see 275 rectangles but none of the appear I have tried many things like setting width background color and all but none of them work the tests are passing but i have no clue where the rectangles have gone!

Codepen link:

JS Code:


let xAxisG = d3.select(".holder").append("g").attr("id", "x-axis");

let yAxisG = d3.select(".holder").append("g").attr("id", "y-axis");

xAxisG.append("div").attr("class", "tick");
xAxisG.append("div").attr("class", "tick");
yAxisG.append("div").attr("class", "tick");
yAxisG.append("div").attr("class", "tick");

let dataset = [
  ["1947-01-01", 243.1],
  ["1947-04-01", 246.3],
  ["1947-07-01", 250.1],
  ["1947-10-01", 260.3],
  ["1948-01-01", 266.2],
  ["1948-04-01", 272.9],
  ["1948-07-01", 279.5],
  ["1948-10-01", 280.7],
  ["1949-01-01", 275.4],
  ["1949-04-01", 271.7],
  ["1949-07-01", 273.3],
  ["1949-10-01", 271],
  ["1950-01-01", 281.2],
  ["1950-04-01", 290.7],
  ["1950-07-01", 308.5],
  ["1950-10-01", 320.3],
  ["1951-01-01", 336.4],
  ["1951-04-01", 344.5],
  ["1951-07-01", 351.8],
  ["1951-10-01", 356.6],
  ["1952-01-01", 360.2],
  ["1952-04-01", 361.4],
  ["1952-07-01", 368.1],
  ["1952-10-01", 381.2],
  ["1953-01-01", 388.5],
  ["1953-04-01", 392.3],
  ["1953-07-01", 391.7],
  ["1953-10-01", 386.5],
  ["1954-01-01", 385.9],
  ["1954-04-01", 386.7],
  ["1954-07-01", 391.6],
  ["1954-10-01", 400.3],
  ["1955-01-01", 413.8],
  ["1955-04-01", 422.2],
  ["1955-07-01", 430.9],
  ["1955-10-01", 437.8],
  ["1956-01-01", 440.5],
  ["1956-04-01", 446.8],
  ["1956-07-01", 452],
  ["1956-10-01", 461.3],
  ["1957-01-01", 470.6],
  ["1957-04-01", 472.8],
  ["1957-07-01", 480.3],
  ["1957-10-01", 475.7],
  ["1958-01-01", 468.4],
  ["1958-04-01", 472.8],
  ["1958-07-01", 486.7],
  ["1958-10-01", 500.4],
  ["1959-01-01", 511.1],
  ["1959-04-01", 524.2],
  ["1959-07-01", 525.2],
  ["1959-10-01", 529.3],
  ["1960-01-01", 543.3],
  ["1960-04-01", 542.7],
  ["1960-07-01", 546],
  ["1960-10-01", 541.1],
  ["1961-01-01", 545.9],
  ["1961-04-01", 557.4],
  ["1961-07-01", 568.2],
  ["1961-10-01", 581.6],
  ["1962-01-01", 595.2],
  ["1962-04-01", 602.6],
  ["1962-07-01", 609.6],
  ["1962-10-01", 613.1],
  ["1963-01-01", 622.7],
  ["1963-04-01", 631.8],
  ["1963-07-01", 645],
  ["1963-10-01", 654.8],
  ["1964-01-01", 671.1],
  ["1964-04-01", 680.8],
  ["1964-07-01", 692.8],
  ["1964-10-01", 698.4],
  ["1965-01-01", 719.2],
  ["1965-04-01", 732.4],
  ["1965-07-01", 750.2],
  ["1965-10-01", 773.1],
  ["1966-01-01", 797.3],
  ["1966-04-01", 807.2],
  ["1966-07-01", 820.8],
  ["1966-10-01", 834.9],
  ["1967-01-01", 846],
  ["1967-04-01", 851.1],
  ["1967-07-01", 866.6],
  ["1967-10-01", 883.2],
  ["1968-01-01", 911.1],
  ["1968-04-01", 936.3],
  ["1968-07-01", 952.3],
  ["1968-10-01", 970.1],
  ["1969-01-01", 995.4],
  ["1969-04-01", 1011.4],
  ["1969-07-01", 1032],
  ["1969-10-01", 1040.7],
  ["1970-01-01", 1053.5],
  ["1970-04-01", 1070.1],
  ["1970-07-01", 1088.5],
  ["1970-10-01", 1091.5],
  ["1971-01-01", 1137.8],
  ["1971-04-01", 1159.4],
  ["1971-07-01", 1180.3],
  ["1971-10-01", 1193.6],
  ["1972-01-01", 1233.8],
  ["1972-04-01", 1270.1],
  ["1972-07-01", 1293.8],
  ["1972-10-01", 1332],
  ["1973-01-01", 1380.7],
  ["1973-04-01", 1417.6],
  ["1973-07-01", 1436.8],
  ["1973-10-01", 1479.1],
  ["1974-01-01", 1494.7],
  ["1974-04-01", 1534.2],
  ["1974-07-01", 1563.4],
  ["1974-10-01", 1603],
  ["1975-01-01", 1619.6],
  ["1975-04-01", 1656.4],
  ["1975-07-01", 1713.8],
  ["1975-10-01", 1765.9],
  ["1976-01-01", 1824.5],
  ["1976-04-01", 1856.9],
  ["1976-07-01", 1890.5],
  ["1976-10-01", 1938.4],
  ["1977-01-01", 1992.5],
  ["1977-04-01", 2060.2],
  ["1977-07-01", 2122.4],
  ["1977-10-01", 2168.7],
  ["1978-01-01", 2208.7],
  ["1978-04-01", 2336.6],
  ["1978-07-01", 2398.9],
  ["1978-10-01", 2482.2],
  ["1979-01-01", 2531.6],
  ["1979-04-01", 2595.9],
  ["1979-07-01", 2670.4],
  ["1979-10-01", 2730.7],
  ["1980-01-01", 2796.5],
  ["1980-04-01", 2799.9],
  ["1980-07-01", 2860],
  ["1980-10-01", 2993.5],
  ["1981-01-01", 3131.8],
  ["1981-04-01", 3167.3],
  ["1981-07-01", 3261.2],
  ["1981-10-01", 3283.5],
  ["1982-01-01", 3273.8],
  ["1982-04-01", 3331.3],
  ["1982-07-01", 3367.1],
  ["1982-10-01", 3407.8],
  ["1983-01-01", 3480.3],
  ["1983-04-01", 3583.8],
  ["1983-07-01", 3692.3],
  ["1983-10-01", 3796.1],
  ["1984-01-01", 3912.8],
  ["1984-04-01", 4015],
  ["1984-07-01", 4087.4],
  ["1984-10-01", 4147.6],
  ["1985-01-01", 4237],
  ["1985-04-01", 4302.3],
  ["1985-07-01", 4394.6],
  ["1985-10-01", 4453.1],
  ["1986-01-01", 4516.3],
  ["1986-04-01", 4555.2],
  ["1986-07-01", 4619.6],
  ["1986-10-01", 4669.4],
  ["1987-01-01", 4736.2],
  ["1987-04-01", 4821.5],
  ["1987-07-01", 4900.5],
  ["1987-10-01", 5022.7],
  ["1988-01-01", 5090.6],
  ["1988-04-01", 5207.7],
  ["1988-07-01", 5299.5],
  ["1988-10-01", 5412.7],
  ["1989-01-01", 5527.4],
  ["1989-04-01", 5628.4],
  ["1989-07-01", 5711.6],
  ["1989-10-01", 5763.4],
  ["1990-01-01", 5890.8],
  ["1990-04-01", 5974.7],
  ["1990-07-01", 6029.5],
  ["1990-10-01", 6023.3],
  ["1991-01-01", 6054.9],
  ["1991-04-01", 6143.6],
  ["1991-07-01", 6218.4],
  ["1991-10-01", 6279.3],
  ["1992-01-01", 6380.8],
  ["1992-04-01", 6492.3],
  ["1992-07-01", 6586.5],
  ["1992-10-01", 6697.6],
  ["1993-01-01", 6748.2],
  ["1993-04-01", 6829.6],
  ["1993-07-01", 6904.2],
  ["1993-10-01", 7032.8],
  ["1994-01-01", 7136.3],
  ["1994-04-01", 7269.8],
  ["1994-07-01", 7352.3],
  ["1994-10-01", 7476.7],
  ["1995-01-01", 7545.3],
  ["1995-04-01", 7604.9],
  ["1995-07-01", 7706.5],
  ["1995-10-01", 7799.5],
  ["1996-01-01", 7893.1],
  ["1996-04-01", 8061.5],
  ["1996-07-01", 8159],
  ["1996-10-01", 8287.1],
  ["1997-01-01", 8402.1],
  ["1997-04-01", 8551.9],
  ["1997-07-01", 8691.8],
  ["1997-10-01", 8788.3],
  ["1998-01-01", 8889.7],
  ["1998-04-01", 8994.7],
  ["1998-07-01", 9146.5],
  ["1998-10-01", 9325.7],
  ["1999-01-01", 9447.1],
  ["1999-04-01", 9557],
  ["1999-07-01", 9712.3],
  ["1999-10-01", 9926.1],
  ["2000-01-01", 10031],
  ["2000-04-01", 10278.3],
  ["2000-07-01", 10357.4],
  ["2000-10-01", 10472.3],
  ["2001-01-01", 10508.1],
  ["2001-04-01", 10638.4],
  ["2001-07-01", 10639.5],
  ["2001-10-01", 10701.3],
  ["2002-01-01", 10834.4],
  ["2002-04-01", 10934.8],
  ["2002-07-01", 11037.1],
  ["2002-10-01", 11103.8],
  ["2003-01-01", 11230.1],
  ["2003-04-01", 11370.7],
  ["2003-07-01", 11625.1],
  ["2003-10-01", 11816.8],
  ["2004-01-01", 11988.4],
  ["2004-04-01", 12181.4],
  ["2004-07-01", 12367.7],
  ["2004-10-01", 12562.2],
  ["2005-01-01", 12813.7],
  ["2005-04-01", 12974.1],
  ["2005-07-01", 13205.4],
  ["2005-10-01", 13381.6],
  ["2006-01-01", 13648.9],
  ["2006-04-01", 13799.8],
  ["2006-07-01", 13908.5],
  ["2006-10-01", 14066.4],
  ["2007-01-01", 14233.2],
  ["2007-04-01", 14422.3],
  ["2007-07-01", 14569.7],
  ["2007-10-01", 14685.3],
  ["2008-01-01", 14668.4],
  ["2008-04-01", 14813],
  ["2008-07-01", 14843],
  ["2008-10-01", 14549.9],
  ["2009-01-01", 14383.9],
  ["2009-04-01", 14340.4],
  ["2009-07-01", 14384.1],
  ["2009-10-01", 14566.5],
  ["2010-01-01", 14681.1],
  ["2010-04-01", 14888.6],
  ["2010-07-01", 15057.7],
  ["2010-10-01", 15230.2],
  ["2011-01-01", 15238.4],
  ["2011-04-01", 15460.9],
  ["2011-07-01", 15587.1],
  ["2011-10-01", 15785.3],
  ["2012-01-01", 15973.9],
  ["2012-04-01", 16121.9],
  ["2012-07-01", 16227.9],
  ["2012-10-01", 16297.3],
  ["2013-01-01", 16440.7],
  ["2013-04-01", 16526.8],
  ["2013-07-01", 16727.5],
  ["2013-10-01", 16957.6],
  ["2014-01-01", 16984.3],
  ["2014-04-01", 17270],
  ["2014-07-01", 17522.1],
  ["2014-10-01", 17615.9],
  ["2015-01-01", 17649.3],
  ["2015-04-01", 17913.7],
  ["2015-07-01", 18064.7]
];

d3.select(".content")
  .selectAll("rect")
  .data(dataset)
  .enter()
  .append("rect")
  .attr("class", "bar")
  .attr("data-date", (d, i) => {
    return d[0];
  })
  .attr("data-gdp", (d, i) => {
    return d[1];
  })
  .attr("x", (d, i) => {
    return i * 30;
  })
  .attr("height", (d, i) => {
    return d[1] + "px";
  })
  .attr("background-color", "black");
console.log(dataset[0][0]);
console.log("Finished Running!");

Any help is much appreciated!!!

are you trying to do like in these challenges? https://www.freecodecamp.org/learn/data-visualization/data-visualization-with-d3/dynamically-set-the-coordinates-for-each-bar

rect is not an html element, you need to use svg if you want to do the same

1 Like

Thank you! Solved that now