xxxxxxxxxx
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.min.css" ref="stylesheet" type="text/css">
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
div.bar {
display: inline-block;
width: 8px;
height: 75px; /* Gets overriden by D3-assigned height below */
margin-right: 2px;
background-color: teal;
}
</style>
</head>
<body>
<div id="viz"></div>
<script id="jsbin-javascript">
var states = [
{
key: 'count by states',
values: [
{
"state": "texas",
"count": 29
},
{
"state": "florida",
"count": 26
},
{
"state": "illinois",
"count": 25
},
{
"state": "new york",
"count": 24
},
{
"state": "california",
"count": 23
},
{
"state": "georgia",
"count": 22
},
{
"state": "louisiana",
"count": 17
},
{
"state": "alabama",
"count": 15
},
{
"state": "maryland",
"count": 14
},
{
"state": "ohio",
"count": 14
},
{
"state": "pennsylvania",
"count": 14
},
{
"state": "tennessee",
"count": 13
},
{
"state": "michigan",
"count": 10
},
{
"state": "north carolina",
"count": 10
},
{
"state": "oklahoma",
"count": 7
},
{
"state": "arkansas",
"count": 5
},
{
"state": "district of columbia",
"count": 5
},
{
"state": "south carolina",
"count": 5
},
{
"state": "minnesota",
"count": 4
},
{
"state": "missouri",
"count": 4
},
{
"state": "mississippi",
"count": 4
},
{
"state": "washington",
"count": 4
},
{
"state": "kansas",
"count": 3
},
{
"state": "massachusetts",
"count": 3
},
{
"state": "delaware",
"count": 2
},
{
"state": "iowa",
"count": 2
},
{
"state": "wisconsin",
"count": 2
},
{
"state": "arizona",
"count": 1
},
{
"state": "indiana",
"count": 1
},
{
"state": "kentucky",
"count": 1
},
{
"state": "nebraska",
"count": 1
},
{
"state": "new jersey",
"count": 1
},
{
"state": "nevada",
"count": 1
},
{
"state": "connecticut",
"count": 1
}
]
}
];
nv.addGraph(function() {
var chart = nv.models.discreteBarChart();
chart.x(function(d) {return d.state;})
.y(function(d) {return d.count;})
.showValues(true);
d3.select('#viz')
.datum(states)
.call(chart);
return chart;
});
</script>
<script id="jsbin-source-html" type="text/html">
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.min.js"><\/script>
<script src="//code.jquery.com/jquery-2.1.1.min.js"><\/script>
<script src="//d3js.org/d3.v3.min.js"><\/script>
<link href="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.min.css" ref="stylesheet" type="text/css">
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="viz"></div>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">div.bar {
display: inline-block;
width: 8px;
height: 75px; /* Gets overriden by D3-assigned height below */
margin-right: 2px;
background-color: teal;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">
var states = [
{
key: 'count by states',
values: [
{
"state": "texas",
"count": 29
},
{
"state": "florida",
"count": 26
},
{
"state": "illinois",
"count": 25
},
{
"state": "new york",
"count": 24
},
{
"state": "california",
"count": 23
},
{
"state": "georgia",
"count": 22
},
{
"state": "louisiana",
"count": 17
},
{
"state": "alabama",
"count": 15
},
{
"state": "maryland",
"count": 14
},
{
"state": "ohio",
"count": 14
},
{
"state": "pennsylvania",
"count": 14
},
{
"state": "tennessee",
"count": 13
},
{
"state": "michigan",
"count": 10
},
{
"state": "north carolina",
"count": 10
},
{
"state": "oklahoma",
"count": 7
},
{
"state": "arkansas",
"count": 5
},
{
"state": "district of columbia",
"count": 5
},
{
"state": "south carolina",
"count": 5
},
{
"state": "minnesota",
"count": 4
},
{
"state": "missouri",
"count": 4
},
{
"state": "mississippi",
"count": 4
},
{
"state": "washington",
"count": 4
},
{
"state": "kansas",
"count": 3
},
{
"state": "massachusetts",
"count": 3
},
{
"state": "delaware",
"count": 2
},
{
"state": "iowa",
"count": 2
},
{
"state": "wisconsin",
"count": 2
},
{
"state": "arizona",
"count": 1
},
{
"state": "indiana",
"count": 1
},
{
"state": "kentucky",
"count": 1
},
{
"state": "nebraska",
"count": 1
},
{
"state": "new jersey",
"count": 1
},
{
"state": "nevada",
"count": 1
},
{
"state": "connecticut",
"count": 1
}
]
}
];
nv.addGraph(function() {
var chart = nv.models.discreteBarChart();
chart.x(function(d) {return d.state;})
.y(function(d) {return d.count;})
.showValues(true);
d3.select('#viz')
.datum(states)
.call(chart);
return chart;
});
</script></body>
</html>
Modified http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.min.js to a secure url
Modified http://code.jquery.com/jquery-2.1.1.min.js to a secure url
Modified http://d3js.org/d3.v3.min.js to a secure url
https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.min.js
https://code.jquery.com/jquery-2.1.1.min.js
https://d3js.org/d3.v3.min.js
https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.min.js
https://code.jquery.com/jquery-2.1.1.min.js
https://d3js.org/d3.v3.min.js