Skip to content

Instantly share code, notes, and snippets.

@jamesleesaunders

jamesleesaunders/README.md

Last active July 16, 2019 20:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jamesleesaunders/8ba1fb5657d6bc7286be to your computer and use it in GitHub Desktop.
Save jamesleesaunders/8ba1fb5657d6bc7286be to your computer and use it in GitHub Desktop.
Download ZIP
d3-ez : Bar Chart (Vertical) Example
Raw
README.md

d3-ez : Bar Chart (Vertical) Example

Generated using d3-ez D3 Reusable Chart Library

A bar chart is a chart with rectangular bars with lengths proportional to the values that they represent. One axis of the chart shows the specific categories being compared, and the other axis represents a discrete value. Bar charts provide a visual presentation of categorical data. Categorical data is a grouping of data into discrete groups, such as months of the year, age group, shoe sizes, and animals. These categories are usually qualitative. Bars on the chart may be arranged in any order.

FUNCTION: Comparison; Trend over time

Credit: Data Viz Project

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>d3-ez : Bar Chart (Vertical) Example</title>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://raw.githack.com/jamesleesaunders/d3-ez/master/dist/d3-ez.js"></script>
<link rel="stylesheet" type="text/css" href="http://rawgit.com/jamesleesaunders/d3.ez/master/dist/d3-ez.css" />
</head>
<body>
<div id="chartholder"></div>
<br/>
<div>Value: <span id="message"></span></div>
<script type="text/javascript">
// Generate some data
function randomDataset() {
var _randomNum = function() {
return Math.floor(Math.random() * 10);
};
var data = {
"key": "Languages",
"values": [{
"key": "JavaScript",
"value": _randomNum()
}, {
"key": "C++",
"value": _randomNum()
}, {
"key": "Java",
"value": _randomNum()
}, {
"key": "Ruby",
"value": _randomNum()
}, {
"key": "Python",
"value": _randomNum()
}, {
"key": "PHP",
"value": _randomNum()
}, {
"key": "Perl",
"value": _randomNum()
}, {
"key": "Basic",
"value": _randomNum()
}, {
"key": "Assembly",
"value": _randomNum()
}]
};
return data;
}
var chart = d3.ez.chart.barChartVertical().colors(d3.ez.palette.categorical(1));
var legend = d3.ez.component.legend().title("Top 10");
var title = d3.ez.component.title().mainText("Programming Languages").subText("Top 10 Languages Used By Developers");
// Create chart base
var myChart = d3.ez.base()
.width(750)
.height(400)
.chart(chart)
.legend(legend)
.title(title)
.on("customValueMouseOver", function(d, i) {
d3.select("#message").text(d.value);
});
// Add to page
function update() {
var data = randomDataset();
d3.select("#chartholder")
.datum(data)
.call(myChart);
}
update();
setInterval(update, 2000);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment