Data Visualization with

Hi,

Im working on the data visualization project 1; Bar chart. Im using the codepen IDE as suggested in the exercise.

My code is compiling and data is being fetched (i can view it in the console) and there are no errors but my code isn’t being rendered.

My code so far:

function App() {
const [gdp, setGdpData] = React.useState();
React.useEffect(() => {
async function fetchData() {
const response = await fetch(“https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json
);
const data = await response.json();
console.log(data);
setGdpData(data);
}
fetchData();
}, );

return (

) }

function barChart({data, height, width, widthOfBar}) {
React.useEffect(() => {
createBarChart();
}, [data]);

const createBarChart = () => {
const gdp = data.map((dataPoint) => dataPoint[1]);
const year = data.map((year) => year[0]);

const gdpMax = d3.max(gdp);
const yScale = d3.scaleLinear().domain([0, gdpMax]).range([0, height]);
d3.select('svg').selectAll("rect").data(gdp).enter().append("rect");
d3.select('svg').selectAll("rect").data(gdp).style("fill", "#9595ff")
  .attr("x", (d, i) => i*widthOfBar)
  .attr("y", (d) => height -yScale(d + gdpMax * 0.1))
  .attr("height", (d,i) => yScale(d + gdpMax * 0.1))
  .attr("width", widthOfBar);

};
return (
<>
svg width={width} height={height}>
<
);
}
const root = ReactDOM.createRoot(document.getElementById(“app”));
root.render();

In the App component, you need to render the barChart component and pass the necessary props to it. Currently, you have an empty return statement. In the barChart component, you need to wrap the SVG element in <svg> tags. Currently, you have an empty opening < tag.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.