The Book I’m reading sets height from the object calling count from an object in an array
[
{
"name": "HTML",
"count": 21
},
{
"name": "CSS",
"count": 17
},
{
"name": "Responsive Web Design",
"count": 17
}
]
The assignment I’m trying to complete needs to set the height from an array in an array, where the original code references count as the 2nd entry in the object, I need to change it to gdp which is the 2nd entry in an array of arrays. Specifically, these 2 lines where it returns datum.count… I should return datum[1]?
datum.[1]? I’m not clear on how to access it?
"data": [
[
"1947-01-01",
243.1
],
[
"1947-04-01",
246.3
],
[
"1947-07-01",
250.1
],
[
"1947-10-01",
260.3
]
]
BarChart: Data Visualization with D3 Challenges at freeCodeCamp.com
javaScript.js
d3.json('https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json').then(function (data) {
// console.log(data);
// console.log(data.data);
data = data.data;
console.log(data);
//once data is retrieved...
// // section 5 Using AJAX data to create SVG elements
d3.select('svg').selectAll('rect') //select rectangles within svg (even if none exist)
.data(data) //attach data to the rectangles
.enter() //find the data elements that are not attached to rectangles
.append('rect'); //append rectangles for each data not attached to a rectangle
// // section 6 Adjusting the height and the width of the bars
var yScale = d3.scaleLinear(); //create a linear scale
yScale.range([HEIGHT, 0]); //set its visual range to 600 -> 0 (remember bottom of svg is 600px down from top)
var yMin = d3.min(data, function (datum, index) { //get the minimum y data value...
return datum.count; //by looking at the count property of each datum
});
var yMax = d3.max(data, function (datum, index) { //get the maximum y data value...
return datum.count; //by looking at the count property of each datum
});
yScale.domain([yMin - 1, yMax]); //set the domain of yScale from yMin and yMax
});
