Not much of an issue, did that as you can find the value 600960 below
With the call back show, and d3.select appending the p element to body was straight forward
There are wrong ways to pull the data inside the scope. Chief among them is the following. This returns individual objects. It creates multiple DOM elements as in d3.select() command.
d3.csv('cities.csv', (e, d)=>{
console.log(e) //output the objects one by one
console.log(d) //provides the counts of the object
})
Here is another rookie error. This will raise an async error, since await has to be inside the async call
const data = await d3.dsv(",", "cities.csv", (d) => {
return {
year: new Date(+d.x, 0, 1), // convert "Year" column to Date
make: d.label,
model: d.Populations,
};
});
The correct method is as below. This provides you the data in array format, with objects as elements.
d3.csv("/path/to/file.csv").then((data) => {
console.log(data); // [{"Hello": "world"}, …]
});
After resolving the data ingestion, populating the text on to the SVG and the DOM was straight forward.
Aim of the datavis is to achieve perception not just understanding. I personally tend to look at the numbers, even though the visualisation can provide better understanding. That lead me to try binding the data to table. Here is something that I found.
function makeTable(data){
var myTable = d3.select('body')
.append('div')
.attr('class','tbl')
.append('table')
.selectAll('tr')
.data(data)
.enter()
.append('tr')
myTable.append('td')
.text(d => d.Year)
// myTable.selectAll('tr')
// .data(data)
myTable.append('td')
.text(d => d.lynx_trapped)
}