Hi guys I have finally finished first data visualisation challenge that works but only in browser. When I place code into CodePen it stops on second test and say I do not have g group with id but I do. Can someone help me with this issue?
Here is code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<style>
.container {
background: #fed120;
}
div.tooltip {
position: absolute;
text-align: center;
padding: 20px;
font: 12px sans-serif;
line-height: 1;
font-weight: bold;
padding: 5px;
background: rgba(0, 0, 0, 0.8);
color: rgb(171, 171, 171);
border-radius: 2px;
}
div.tooltip span {
color: #fed120;
}
</style>
<title>Document</title>
</head>
<body>
<div class="container">
<h1 id="title">CHART</h1>
<div class="mainHolder"></div>
</div>
<script src="https://d3js.org/d3.v4.js"></script>
<script>
d3.json(
"https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json",
function(resData) {
const dataArray = resData;
// console.log(dataArray);
console.log(resData);
const data = dataArray.data;
const w = 600;
const h = (w * 4) / 5;
const margin = { top: 20, right: 20, bottom: 40, left: 60 };
const chartWidth = w - margin.right - margin.left;
const chartHeight = h - margin.top - margin.bottom;
const barWidth = chartWidth / data.length;
console.log(barWidth);
// const value_X = d => d[0];
// const value_Y = d => d[1];
const maxDate = new Date(dataArray.to_date);
const minDate = new Date(dataArray.from_date);
// 1. --------------------- add SCALES
const xScale = d3
.scaleLinear()
.range([0, chartWidth])
.domain([minDate, maxDate]);
const yScale = d3
.scaleLinear()
.range([0, chartHeight])
.domain([d3.max(data, value_Y), 0]);
// console.log(yScale.domain());
// 2. --------------------- add AXIS
const xAxis = d3
.axisBottom()
.scale(xScale)
.tickFormat(d3.timeFormat("%Y"))
.ticks(10);
const yAxis = d3
.axisLeft()
.scale(yScale)
.ticks(20);
// 3. --------------------- create MAIN HOLDER SVG
const svg = d3
.select(".mainHolder")
.append("svg")
.attr("width", w)
.attr("height", h);
// 4. --------------------- append inner group (chart) for chart inside of svg
const chart = svg
.append("g")
.attr("width", chartWidth)
.attr("height", chartHeight)
.attr("transform", `translate(${margin.left},${margin.top})`);
// 5. --------------------- append axis onto inner group (chart)
chart.append("g").call(yAxis);
chart
.append("g")
.call(xAxis)
.attr("id", "x-axis")
.attr("class", "tick")
.attr("transform", `translate(0, ${chartHeight})`);
// 6. --------------------- Tooltip
var toolTip = d3
.select("body")
.append("div")
.attr("class", "tooltip")
.style("opacity", 0);
// add basic BAR style
const bar = chart
.selectAll("rect")
.data(data)
.enter()
.append("rect")
.style("fill", function(d, i) {
return i % 2 ? "#e14588" : "#ef81ed";
})
.attr("id", "bar")
.attr("width", barWidth)
.attr("height", d => chartHeight - yScale(d[1]))
.attr("x", (d, i) => barWidth * i)
.attr("y", d => yScale(d[1]))
.on("mouseover", function(d) {
d3.select(this).style("fill", "#fed120");
toolTip
.transition()
.duration(200)
.style("opacity", 0.9);
toolTip
.html(
`US-GDP (bn)<br>
<span>${d[0]}</span><br>
<span>$${d[1]}</span>`
)
.style("left", d3.event.pageX + "px")
.style("top", d3.event.pageY - 60 + "px");
})
.on("mouseout", function(d, i) {
const oldFill = i % 2 ? "#e14588" : "#ef81ed";
d3.select(this).style("fill", oldFill);
toolTip
.transition()
.duration(500)
.style("opacity", 0);
});
}
);
</script>
</body>
</html>
Thanks upfront for any suggestion
Stan