Rajamanickam Thangavel
Reputation: 165
d3.js bubble chart is not working Firefox browser (Error: classes is not defined)
I have created simple d3.js bubble chart with heat colors(asp.net page), while opening firefox browser is not working. i got error classes is not defined. In body D3.js is referenced. please let me how to resolve the issue.
Note: The same page is working in Chrome/IE/Safari browser. Only firefox is not working.
source code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.d3-tip {
line-height: 1;
padding: 4px 10px;
background: whitesmoke;
color: black;
border-radius: 5px;
border-style: solid;
border-width: 1px;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
font-size: 12px;
text-align: left;
}
/* Creates a small triangle extender for the tooltip*/
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: black;
content: "\25BC";
position: absolute;
text-align: center;
}
/* Style northward tooltips differently */
.d3-tip.n:after {
margin: -1px 0 0 0;
top: 100%;
left: 0;
}
</style>
</head>
<body onload="PopulateBubbleChart()">
<script src="../D3js/d3.min.js" type="text/javascript"></script>
<script src="../D3js/d3.tip.v0.6.3.js" type="text/javascript"></script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../Scripts/jquery-2.0.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
function PopulateBubbleChart() {
var json = { "name": "flare", "children": [{ "name": "US-AL", "children": [{ "name": "AL", "size": 106463, "mcperpatient": 9.11, "displayname": "Alabama" }] }, { "name": "US-AK", "children": [{ "name": "AK", "size": 14693, "mcperpatient": 12.85, "displayname": "Alaska" }] }, { "name": "US-AZ", "children": [{ "name": "AZ", "size": 137362, "mcperpatient": 9.48, "displayname": "Arizona" }] }, { "name": "US-AR", "children": [{ "name": "AR", "size": 85795, "mcperpatient": 10.27, "displayname": "Arkansas" }] }, { "name": "US-CA", "children": [{ "name": "CA", "size": 444432, "mcperpatient": 11.72, "displayname": "California" }] }, { "name": "US-CO", "children": [{ "name": "CO", "size": 90822, "mcperpatient": 9.36, "displayname": "Colorado" }] }, { "name": "US-CT", "children": [{ "name": "CT", "size": 51360, "mcperpatient": 11.1, "displayname": "Connecticut" }] }, { "name": "US-DE", "children": [{ "name": "DE", "size": 14676, "mcperpatient": 10.08, "displayname": "Delaware" }] }, { "name": "US-DC", "children": [{ "name": "DC", "size": 8800, "mcperpatient": 23.2, "displayname": "District of Columbia" }] }, { "name": "US-FL", "children": [{ "name": "FL", "size": 465279, "mcperpatient": 9.21, "displayname": "Florida" }] }, { "name": "US-GA", "children": [{ "name": "GA", "size": 167445, "mcperpatient": 8.4, "displayname": "Georgia" }] }, { "name": "US-HI", "children": [{ "name": "HI", "size": 23824, "mcperpatient": 10.21, "displayname": "Hawaii" }] }, { "name": "US-ID", "children": [{ "name": "ID", "size": 39928, "mcperpatient": 8.33, "displayname": "Idaho" }] }, { "name": "US-IL", "children": [{ "name": "IL", "size": 173998, "mcperpatient": 10.92, "displayname": "Illinois" }] }, { "name": "US-IN", "children": [{ "name": "IN", "size": 122936, "mcperpatient": 9.13, "displayname": "Indiana" }] }, { "name": "US-IA", "children": [{ "name": "IA", "size": 71758, "mcperpatient": 8.09, "displayname": "Iowa" }] }, { "name": "US-KS", "children": [{ "name": "KS", "size": 58097, "mcperpatient": 9.64, "displayname": "Kansas" }] }, { "name": "US-KY", "children": [{ "name": "KY", "size": 101096, "mcperpatient": 9.28, "displayname": "Kentucky" }] }, { "name": "US-LA", "children": [{ "name": "LA", "size": 76489, "mcperpatient": 9.56, "displayname": "Louisiana" }] }, { "name": "US-ME", "children": [{ "name": "ME", "size": 39358, "mcperpatient": 8.52, "displayname": "Maine" }] }, { "name": "US-MD", "children": [{ "name": "MD", "size": 53461, "mcperpatient": 10.43, "displayname": "Maryland" }] }, { "name": "US-MA", "children": [{ "name": "MA", "size": 84345, "mcperpatient": 13.02, "displayname": "Massachusetts" }] }, { "name": "US-MI", "children": [{ "name": "MI", "size": 142558, "mcperpatient": 9.46, "displayname": "Michigan" }] }, { "name": "US-MN", "children": [{ "name": "MN", "size": 108274, "mcperpatient": 9.69, "displayname": "Minnesota" }] }, { "name": "US-MS", "children": [{ "name": "MS", "size": 69676, "mcperpatient": 9.49, "displayname": "Mississippi" }] }, { "name": "US-MO", "children": [{ "name": "MO", "size": 109455, "mcperpatient": 8.59, "displayname": "Missouri" }] }, { "name": "US-MT", "children": [{ "name": "MT", "size": 35189, "mcperpatient": 8.6, "displayname": "Montana" }] }, { "name": "US-NE", "children": [{ "name": "NE", "size": 47275, "mcperpatient": 8.74, "displayname": "Nebraska" }] }, { "name": "US-NV", "children": [{ "name": "NV", "size": 65443, "mcperpatient": 12.04, "displayname": "Nevada" }] }, { "name": "US-NH", "children": [{ "name": "NH", "size": 28604, "mcperpatient": 9.73, "displayname": "New Hampshire" }] }, { "name": "US-NJ", "children": [{ "name": "NJ", "size": 77179, "mcperpatient": 9.71, "displayname": "New Jersey" }] }, { "name": "US-NM", "children": [{ "name": "NM", "size": 48781, "mcperpatient": 10.18, "displayname": "New Mexico" }] }, { "name": "US-NY", "children": [{ "name": "NY", "size": 228820, "mcperpatient": 12.33, "displayname": "New York" }] }, { "name": "US-NC", "children": [{ "name": "NC", "size": 205006, "mcperpatient": 8.73, "displayname": "North Carolina" }] }, { "name": "US-ND", "children": [{ "name": "ND", "size": 18416, "mcperpatient": 8.07, "displayname": "North Dakota" }] }, { "name": "US-OH", "children": [{ "name": "OH", "size": 223944, "mcperpatient": 9.88, "displayname": "Ohio" }] }, { "name": "US-OK", "children": [{ "name": "OK", "size": 90731, "mcperpatient": 8.22, "displayname": "Oklahoma" }] }, { "name": "US-OR", "children": [{ "name": "OR", "size": 96190, "mcperpatient": 9.97, "displayname": "Oregon" }] }, { "name": "US-PA", "children": [{ "name": "PA", "size": 232054, "mcperpatient": 9.07, "displayname": "Pennsylvania" }] }, { "name": "US-RI", "children": [{ "name": "RI", "size": 20132, "mcperpatient": 10.76, "displayname": "Rhode Island" }] }, { "name": "US-SC", "children": [{ "name": "SC", "size": 123070, "mcperpatient": 8.13, "displayname": "South Carolina" }] }, { "name": "US-SD", "children": [{ "name": "SD", "size": 29744, "mcperpatient": 10.32, "displayname": "South Dakota" }] }, { "name": "US-TN", "children": [{ "name": "TN", "size": 135220, "mcperpatient": 9.79, "displayname": "Tennessee" }] }, { "name": "US-TX", "children": [{ "name": "TX", "size": 434233, "mcperpatient": 9.18, "displayname": "Texas" }] }, { "name": "US-UT", "children": [{ "name": "UT", "size": 34062, "mcperpatient": 11.19, "displayname": "Utah" }] }, { "name": "US-VT", "children": [{ "name": "VT", "size": 14925, "mcperpatient": 8.51, "displayname": "Vermont" }] }, { "name": "US-VA", "children": [{ "name": "VA", "size": 87478, "mcperpatient": 9.06, "displayname": "Virginia" }] }, { "name": "US-WA", "children": [{ "name": "WA", "size": 118461, "mcperpatient": 9.17, "displayname": "Washington" }] }, { "name": "US-WV", "children": [{ "name": "WV", "size": 58733, "mcperpatient": 11.12, "displayname": "West Virginia" }] }, { "name": "US-WI", "children": [{ "name": "WI", "size": 117000, "mcperpatient": 10.14, "displayname": "Wisconsin" }] }, { "name": "US-WY", "children": [{ "name": "WY", "size": 18583, "mcperpatient": 10.14, "displayname": "Wyoming" }] }], "minvalue": 8.07, "maxvalue": 23.2, "statecounty": "State" }
$('#mapdiv3').empty();
var color = ["#4F9A85", '#79A163', '#F0C26A', '#C26B50']
try {
var r = 325,
format = d3.format(",d"),
colorScale = d3.scale.quantize()
.domain([json.minvalue, json.maxvalue])
.range(color);
var bubble = d3.layout.pack()
.sort(null)
.size([r, r])
.padding(1);
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function (d) {
return json.statecounty + ": <strong>" + d.dispname + "</strong> <br/> Unique Patients**: <strong>" + format(d.value) + "</strong> <br/> Med per Patient: <strong>$" + d.sc + "</strong> <br/>";
})
var vis = d3.select("#mapdiv3").append("svg")
.attr("width", r)
.attr("height", r)
.attr("class", "bubble");
vis.call(tip);
var node = vis.selectAll("g.node")
.data(bubble.nodes(classes(json))
.filter(function (d) { return !d.children; }))
.enter().append("g")
.attr("class", "node")
.attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; })
.on('mouseover', tip.show)
.on('mouseout', tip.hide);
//node.append("title")
// .text(function (d) // { return d.className + ": " + format(d.value); });
// { return "Name: <strong>" + d.className + "</strong> <br/> Unique Patients: <strong>" + format(d.value) + "</strong> <br/> Medical Care per Patient: <strong>" + d.sc + "</strong> <br/>"; });
node.append("circle")
.attr("r", function (d) { return d.r; })
.style("fill", function (d) { return colorScale(d.sc); });
node.append("text")
.attr("dy", ".3em")
.style("text-anchor", "middle")
.text(function (d) { return d.className.substring(0, d.r / 3) });
// Returns a flattened hierarchy containing all leaf nodes under the root.
function classes(root) {
var classes = [];
function recurse(name, node) {
if (node.children) node.children.forEach(function (child) { recurse(node.name, child); });
else {
classes.push({ packageName: name, className: node.name, value: node.size, sc: node.mcperpatient, dispname: node.displayname });
}
}
recurse(null, root);
return { children: classes };
}
}
catch (err) {
alert( err.message);
}
}
</script>
<form id="form1" runat="server">
<div id="mapdiv3" style="height: 300px; width=400px; border: none; text-align: center"></div>
</form>
</body>
</html>Upvotes: 0
Views: 867
Answers (1)
eyegropram
Reputation: 672
Put the scripts in the HTML head also..
You have the classes function nested in the PopulateBubbleChart function, you likely want to put that on the outside of that function. You then have a similar issue with recurse function. You also do not want to name your function the same name as your array.
You had several issues: here is a jsfiddle you can use to re-piece your code together again: http://jsfiddle.net/ouzo4rje/1/
HTML
<head runat="server">
<title></title>
<script src="../D3js/d3.min.js" type="text/javascript"></script>
<script src="../D3js/d3.tip.v0.6.3.js" type="text/javascript"></script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../Scripts/jquery-2.0.3.min.js" type="text/javascript"></script>
</head>
<body onload="PopulateBubbleChart()">
<form id="form1" runat="server">
<div id="mapdiv3" style="height: 300px; width: 400px; border: none; text-align: center;"></div>
</form>
</body>
CSS
.d3-tip {
line-height: 1;
padding: 4px 10px;
background: whitesmoke;
color: black;
border-radius: 5px;
border-style: solid;
border-width: 1px;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 12px;
text-align: left;
}
/* Creates a small triangle extender for the tooltip*/
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: black;
content:"\25BC";
position: absolute;
text-align: center;
}
/* Style northward tooltips differently */
.d3-tip.n:after {
margin: -1px 0 0 0;
top: 100%;
left: 0;
}
JS
function PopulateBubbleChart() {
var json = {
"name": "flare",
"children": [{
"name": "US-AL",
"children": [{
"name": "AL",
"size": 106463,
"mcperpatient": 9.11,
"displayname": "Alabama"
}]
}, {
"name": "US-AK",
"children": [{
"name": "AK",
"size": 14693,
"mcperpatient": 12.85,
"displayname": "Alaska"
}]
}, {
"name": "US-AZ",
"children": [{
"name": "AZ",
"size": 137362,
"mcperpatient": 9.48,
"displayname": "Arizona"
}]
}, {
"name": "US-AR",
"children": [{
"name": "AR",
"size": 85795,
"mcperpatient": 10.27,
"displayname": "Arkansas"
}]
}, {
"name": "US-CA",
"children": [{
"name": "CA",
"size": 444432,
"mcperpatient": 11.72,
"displayname": "California"
}]
}, {
"name": "US-CO",
"children": [{
"name": "CO",
"size": 90822,
"mcperpatient": 9.36,
"displayname": "Colorado"
}]
}, {
"name": "US-CT",
"children": [{
"name": "CT",
"size": 51360,
"mcperpatient": 11.1,
"displayname": "Connecticut"
}]
}, {
"name": "US-DE",
"children": [{
"name": "DE",
"size": 14676,
"mcperpatient": 10.08,
"displayname": "Delaware"
}]
}, {
"name": "US-DC",
"children": [{
"name": "DC",
"size": 8800,
"mcperpatient": 23.2,
"displayname": "District of Columbia"
}]
}, {
"name": "US-FL",
"children": [{
"name": "FL",
"size": 465279,
"mcperpatient": 9.21,
"displayname": "Florida"
}]
}, {
"name": "US-GA",
"children": [{
"name": "GA",
"size": 167445,
"mcperpatient": 8.4,
"displayname": "Georgia"
}]
}, {
"name": "US-HI",
"children": [{
"name": "HI",
"size": 23824,
"mcperpatient": 10.21,
"displayname": "Hawaii"
}]
}, {
"name": "US-ID",
"children": [{
"name": "ID",
"size": 39928,
"mcperpatient": 8.33,
"displayname": "Idaho"
}]
}, {
"name": "US-IL",
"children": [{
"name": "IL",
"size": 173998,
"mcperpatient": 10.92,
"displayname": "Illinois"
}]
}, {
"name": "US-IN",
"children": [{
"name": "IN",
"size": 122936,
"mcperpatient": 9.13,
"displayname": "Indiana"
}]
}, {
"name": "US-IA",
"children": [{
"name": "IA",
"size": 71758,
"mcperpatient": 8.09,
"displayname": "Iowa"
}]
}, {
"name": "US-KS",
"children": [{
"name": "KS",
"size": 58097,
"mcperpatient": 9.64,
"displayname": "Kansas"
}]
}, {
"name": "US-KY",
"children": [{
"name": "KY",
"size": 101096,
"mcperpatient": 9.28,
"displayname": "Kentucky"
}]
}, {
"name": "US-LA",
"children": [{
"name": "LA",
"size": 76489,
"mcperpatient": 9.56,
"displayname": "Louisiana"
}]
}, {
"name": "US-ME",
"children": [{
"name": "ME",
"size": 39358,
"mcperpatient": 8.52,
"displayname": "Maine"
}]
}, {
"name": "US-MD",
"children": [{
"name": "MD",
"size": 53461,
"mcperpatient": 10.43,
"displayname": "Maryland"
}]
}, {
"name": "US-MA",
"children": [{
"name": "MA",
"size": 84345,
"mcperpatient": 13.02,
"displayname": "Massachusetts"
}]
}, {
"name": "US-MI",
"children": [{
"name": "MI",
"size": 142558,
"mcperpatient": 9.46,
"displayname": "Michigan"
}]
}, {
"name": "US-MN",
"children": [{
"name": "MN",
"size": 108274,
"mcperpatient": 9.69,
"displayname": "Minnesota"
}]
}, {
"name": "US-MS",
"children": [{
"name": "MS",
"size": 69676,
"mcperpatient": 9.49,
"displayname": "Mississippi"
}]
}, {
"name": "US-MO",
"children": [{
"name": "MO",
"size": 109455,
"mcperpatient": 8.59,
"displayname": "Missouri"
}]
}, {
"name": "US-MT",
"children": [{
"name": "MT",
"size": 35189,
"mcperpatient": 8.6,
"displayname": "Montana"
}]
}, {
"name": "US-NE",
"children": [{
"name": "NE",
"size": 47275,
"mcperpatient": 8.74,
"displayname": "Nebraska"
}]
}, {
"name": "US-NV",
"children": [{
"name": "NV",
"size": 65443,
"mcperpatient": 12.04,
"displayname": "Nevada"
}]
}, {
"name": "US-NH",
"children": [{
"name": "NH",
"size": 28604,
"mcperpatient": 9.73,
"displayname": "New Hampshire"
}]
}, {
"name": "US-NJ",
"children": [{
"name": "NJ",
"size": 77179,
"mcperpatient": 9.71,
"displayname": "New Jersey"
}]
}, {
"name": "US-NM",
"children": [{
"name": "NM",
"size": 48781,
"mcperpatient": 10.18,
"displayname": "New Mexico"
}]
}, {
"name": "US-NY",
"children": [{
"name": "NY",
"size": 228820,
"mcperpatient": 12.33,
"displayname": "New York"
}]
}, {
"name": "US-NC",
"children": [{
"name": "NC",
"size": 205006,
"mcperpatient": 8.73,
"displayname": "North Carolina"
}]
}, {
"name": "US-ND",
"children": [{
"name": "ND",
"size": 18416,
"mcperpatient": 8.07,
"displayname": "North Dakota"
}]
}, {
"name": "US-OH",
"children": [{
"name": "OH",
"size": 223944,
"mcperpatient": 9.88,
"displayname": "Ohio"
}]
}, {
"name": "US-OK",
"children": [{
"name": "OK",
"size": 90731,
"mcperpatient": 8.22,
"displayname": "Oklahoma"
}]
}, {
"name": "US-OR",
"children": [{
"name": "OR",
"size": 96190,
"mcperpatient": 9.97,
"displayname": "Oregon"
}]
}, {
"name": "US-PA",
"children": [{
"name": "PA",
"size": 232054,
"mcperpatient": 9.07,
"displayname": "Pennsylvania"
}]
}, {
"name": "US-RI",
"children": [{
"name": "RI",
"size": 20132,
"mcperpatient": 10.76,
"displayname": "Rhode Island"
}]
}, {
"name": "US-SC",
"children": [{
"name": "SC",
"size": 123070,
"mcperpatient": 8.13,
"displayname": "South Carolina"
}]
}, {
"name": "US-SD",
"children": [{
"name": "SD",
"size": 29744,
"mcperpatient": 10.32,
"displayname": "South Dakota"
}]
}, {
"name": "US-TN",
"children": [{
"name": "TN",
"size": 135220,
"mcperpatient": 9.79,
"displayname": "Tennessee"
}]
}, {
"name": "US-TX",
"children": [{
"name": "TX",
"size": 434233,
"mcperpatient": 9.18,
"displayname": "Texas"
}]
}, {
"name": "US-UT",
"children": [{
"name": "UT",
"size": 34062,
"mcperpatient": 11.19,
"displayname": "Utah"
}]
}, {
"name": "US-VT",
"children": [{
"name": "VT",
"size": 14925,
"mcperpatient": 8.51,
"displayname": "Vermont"
}]
}, {
"name": "US-VA",
"children": [{
"name": "VA",
"size": 87478,
"mcperpatient": 9.06,
"displayname": "Virginia"
}]
}, {
"name": "US-WA",
"children": [{
"name": "WA",
"size": 118461,
"mcperpatient": 9.17,
"displayname": "Washington"
}]
}, {
"name": "US-WV",
"children": [{
"name": "WV",
"size": 58733,
"mcperpatient": 11.12,
"displayname": "West Virginia"
}]
}, {
"name": "US-WI",
"children": [{
"name": "WI",
"size": 117000,
"mcperpatient": 10.14,
"displayname": "Wisconsin"
}]
}, {
"name": "US-WY",
"children": [{
"name": "WY",
"size": 18583,
"mcperpatient": 10.14,
"displayname": "Wyoming"
}]
}],
"minvalue": 8.07,
"maxvalue": 23.2,
"statecounty": "State"
}
$('#mapdiv3').empty();
var color = ["#4F9A85", '#79A163', '#F0C26A', '#C26B50']
try {
var r = 325,
format = d3.format(",d"),
colorScale = d3.scale.quantize()
.domain([json.minvalue, json.maxvalue])
.range(color);
var bubble = d3.layout.pack()
.sort(null)
.size([r, r])
.padding(1);
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function (d) {
return json.statecounty + ": <strong>" + d.dispname + "</strong> <br/> Unique Patients**: <strong>" + format(d.value) + "</strong> <br/> Med per Patient: <strong>$" + d.sc + "</strong> <br/>";
});
var vis = d3.select("#mapdiv3").append("svg")
.attr("width", r)
.attr("height", r)
.attr("class", "bubble");
vis.call(tip);
var node = vis.selectAll("g.node")
.data(bubble.nodes(classes(json))
.filter(function (d) {
return !d.children;
}))
.enter().append("g")
.attr("class", "node")
.attr("transform", function (d) {
return "translate(" + d.x + "," + d.y + ")";
})
.on('mouseover', tip.show)
.on('mouseout', tip.hide);
//node.append("title")
// .text(function (d) // { return d.className + ": " + format(d.value); });
// { return "Name: <strong>" + d.className + "</strong> <br/> Unique Patients: <strong>" + format(d.value) + "</strong> <br/> Medical Care per Patient: <strong>" + d.sc + "</strong> <br/>"; });
node.append("circle")
.attr("r", function (d) {
return d.r;
})
.style("fill", function (d) {
return colorScale(d.sc);
});
node.append("text")
.attr("dy", ".3em")
.style("text-anchor", "middle")
.text(function (d) {
return d.className.substring(0, d.r / 3)
});
} catch (err) {
alert(err.message);
}
}
// Returns a flattened hierarchy containing all leaf nodes under the root.
var arrClasses = [];
function classes(root) {
recurse(null, root);
return {
children: arrClasses
};
}
function recurse(name, node) {
if (node.children) {
node.children.forEach(function (child) {
recurse(node.name, child);
});
} else {
arrClasses.push({
packageName: name,
className: node.name,
value: node.size,
sc: node.mcperpatient,
dispname: node.displayname
});
}
}
Upvotes: 1
Related Questions
- Cannot render Bubble Plot in D3
- D3 v5 bubble chart using pack not rendering
- How create legend for bubble chart in d3? Legend not showing up
- Uncaught TypeError: d3.pack(...).sort is not a function
- How to get D3 force bubble chart to draw?
- D3JS oscillating bubbles
- D3 chart implementation error
- D3 Bubble Chart 'bubble.nodes not a function'
- d3 floating bubble chart
- Trouble with getting a bubble chart working in d3