Abundnce10
Reputation: 2210
D3.js - Data From CSV Not Displaying, Static Data Will
When I use static data (the first dataset variable, identified as ATTEMPT #1 in the comments) the bar chart will display properly on the page. However, when I read data in from the CSV file (commenting out first dataset variable and remove the commented out code that follows) nothing will display on the page. And I don't get any errors in the console.
Here's the inspection of ATTEMPT #1 in the console, so you can see the two dataset variables are of a similar format:
$ dataset.length;
51
$ dataset[0];
[5, "WA"]
Here's the inspection of ATTEMPT #2 in the console:
$ dataset.length;
50
$ dataset[0];
[35.6, "Alabama"]
Here is the /index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3: An HTML div tooltip</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
rect:hover {
fill: orange;
}
#tooltip {
position: absolute;
width: 200px;
height: auto;
padding: 10px;
background-color: white;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
pointer-events: none;
}
#tooltip.hidden {
display: none;
}
#tooltip p {
margin: 0;
font-family: sans-serif;
font-size: 16px;
line-height: 20px;
}
</style>
</head>
<body>
<div id="tooltip" class="hidden">
<p><strong id="tool_header">State</strong> State</p>
<p><span id="value">100</span> Per Inc Per Capita (000)</p>
</div>
<script type="text/javascript">
//Width and height
var w = 600;
var h = 250;
// ATTEMPT #1 - Displays correctly
var dataset = [ [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"]];
/* ATTEMPT #2 - Won't display anything
var dataset = [];
// Save state info object into dataset array
d3.csv("2012_PersonalIncomePerCapitaByState.csv", function(d) {
// Store state and income (in 1,000's)
for (var i = 0; i < d.length; i++) {
dataset.push([Math.round( parseInt( d[i].Income ) / 100 ) / 10, d[i].State]);
}
});
*/
var xScale = d3.scale.ordinal()
.domain(d3.range(dataset.length))
.rangeRoundBands([0, w], 0.05);
var yScale = d3.scale.linear()
.domain([d3.min(dataset, function(d) { return d[0]; }) / 1.2, d3.max(dataset, function(d) { return d[0]; }) * 1.05])
.range([0, h]);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Create bars
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
return xScale(i);
})
.attr("y", function(d) {
return h - yScale(d[0]);
})
.attr("width", xScale.rangeBand())
.attr("height", function(d) {
return yScale(d[0]);
})
.attr("fill", function(d) {
return "rgb(0, 0, " + (d[0] * 10) + ")";
})
.on("mouseover", function(d) {
//Get this bar's x/y values, then augment for the tooltip
var xPosition = parseFloat(d3.select(this).attr("x")) + xScale.rangeBand() / 2;
var yPosition = parseFloat(d3.select(this).attr("y")) / 2 + h / 2;
//Update the tooltip position and value
d3.select("#tooltip")
.style("left", xPosition + "px")
.style("top", yPosition + "px")
.select("#value")
.text(d[0]);
d3.select("#tooltip")
.select("#tool_header")
.text(d[1]);
//Show the tooltip
d3.select("#tooltip").classed("hidden", false);
})
.on("mouseout", function() {
//Hide the tooltip
d3.select("#tooltip").classed("hidden", true);
})
.on("click", function() {
sortBars();
});
//Define sort order flag
var sortOrder = false;
//Define sort function
var sortBars = function() {
//Flip value of sortOrder
sortOrder = !sortOrder;
svg.selectAll("rect")
.sort(function(a, b) {
if (sortOrder) {
return d3.ascending(a, b);
} else {
return d3.descending(a, b);
}
})
.transition()
.delay(function(d, i) {
return i * 50;
})
.duration(1000)
.attr("x", function(d, i) {
return xScale(i);
});
};
</script>
</body>
</html>
Here's the 2012_PersonalIncomePerCapitaByState.csv file:
State,Income
Alabama,35625
Alaska,46778
Arizona,35979
Arkansas,34723
California,44980
Colorado,45135
Connecticut,58908
Delaware,41940
Florida,40344
Georgia,36869
Hawaii,44024
Idaho,33749
Illinois,44815
Indiana,36902
Iowa,42126
Kansas,41835
Kentucky,35041
Louisiana,39413
Maine,39481
Maryland,51971
Massachusetts,54687
Michigan,37497
Minnesota,46227
Mississippi,33073
Missouri,39049
Montana,37370
Nebraska,43143
Nevada,37361
New Hampshire,47058
New Jersey,53628
New Mexico,35079
New York,52095
North Carolina,37049
North Dakota,51893
Ohio,39289
Oklahoma,39006
Oregon,38786
Pennsylvania,43616
Rhode Island,44990
South Carolina,34266
South Dakota,43659
Tennessee,37678
Texas,41471
Utah,34601
Vermont,42994
Virginia,47082
Washington,45413
West Virginia,34477
Wisconsin,40537
Wyoming,48670
Can you help me figure out why I can't get the values from the CSV file to display? Thanks in advance!
Upvotes: 0
Views: 1496
Answers (1)
Abundnce10
Reputation: 2210
Answering my own question (based on Lars Kotthoff's advice): move all code into the callback of the d3.csv() function.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3: An HTML div tooltip</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
rect:hover {
fill: orange;
}
#tooltip {
position: absolute;
width: 200px;
height: auto;
padding: 10px;
background-color: white;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
pointer-events: none;
}
#tooltip.hidden {
display: none;
}
#tooltip p {
margin: 0;
font-family: sans-serif;
font-size: 16px;
line-height: 20px;
}
</style>
</head>
<body>
<div id="tooltip" class="hidden">
<p><strong id="tool_header">State</strong> State</p>
<p><span id="value">100</span> Per Inc Per Capita (000)</p>
</div>
<script type="text/javascript">
//Width and height
var w = 600;
var h = 250;
// ATTEMPT #1 - Displays correctly
//var dataset = [ [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"], [5, "WA"], [6, "OR"], [3, "CA"]];
//ATTEMPT #2 - Won't display anything
var dataset = [];
// Save state info object into dataset array
d3.csv("2012_PersonalIncomePerCapitaByState.csv", function(d) {
// Store state and income (in 1,000's)
for (var i = 0; i < d.length; i++) {
dataset.push([Math.round( parseInt( d[i].Income ) / 100 ) / 10, d[i].State]);
}
var xScale = d3.scale.ordinal()
.domain(d3.range(dataset.length))
.rangeRoundBands([0, w], 0.05);
var yScale = d3.scale.linear()
.domain([d3.min(dataset, function(d) { return d[0]; }) / 1.2, d3.max(dataset, function(d) { return d[0]; }) * 1.05])
.range([0, h]);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Create bars
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
return xScale(i);
})
.attr("y", function(d) {
return h - yScale(d[0]);
})
.attr("width", xScale.rangeBand())
.attr("height", function(d) {
return yScale(d[0]);
})
.attr("fill", function(d) {
return "rgb(0, 0, " + (d[0] * 10) + ")";
})
.on("mouseover", function(d) {
//Get this bar's x/y values, then augment for the tooltip
var xPosition = parseFloat(d3.select(this).attr("x")) + xScale.rangeBand() / 2;
var yPosition = parseFloat(d3.select(this).attr("y")) / 2 + h / 2;
//Update the tooltip position and value
d3.select("#tooltip")
.style("left", xPosition + "px")
.style("top", yPosition + "px")
.select("#value")
.text(d[0]);
d3.select("#tooltip")
.select("#tool_header")
.text(d[1]);
//Show the tooltip
d3.select("#tooltip").classed("hidden", false);
})
.on("mouseout", function() {
//Hide the tooltip
d3.select("#tooltip").classed("hidden", true);
})
.on("click", function() {
sortBars();
});
//Define sort order flag
var sortOrder = false;
//Define sort function
var sortBars = function() {
//Flip value of sortOrder
sortOrder = !sortOrder;
svg.selectAll("rect")
.sort(function(a, b) {
if (sortOrder) {
return d3.ascending(a, b);
} else {
return d3.descending(a, b);
}
})
.transition()
.delay(function(d, i) {
return i * 50;
})
.duration(1000)
.attr("x", function(d, i) {
return xScale(i);
});
};
});
</script>
</body>
</html>
Upvotes: 0
Related Questions
- D3.csv not loading the csv file
- Trouble loading CSV data in D3
- Rendering D3 data from CSV
- unable to load csv to d3
- D3.js not recognizing floats from CSV
- Using D3 to read csv returns html instead of csv data
- How to use CSV data in d3
- D3 with CSV data
- data is undefined after importing from a csv file with d3
- D3 bar chart not parsing csv