A basic Barchart
The following example shows a basic usage of d3.js to render a bargraph of country's population.
Create a data.csv file with the following content:
Country,Population Switzerland,8000000 Germany,80000000 United States,330000000
Then, create an index.html file with the following content:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3 Barchart</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
<style media="screen">
body, html {
height: 100%;
background: #eee;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.list .country {
background-color: red;
padding: 10px 10px;
border-radius: 3px;
margin: 10px 0;
color: black;
font-family: sans-serif;
}
</style>
</head>
<body>
<div class="list">
</div>
<script type="text/javascript">
// convert is called with every row in the csv file
function convert(d) {
d.Population = parseInt(d.Population);
return d;
}
// load csv and invoke callback with the loaded data
d3.csv('data.csv', convert, function(data){
// prepare a scale for the population domain
var scale = d3.scaleLinear()
.domain([0, d3.max(data, function(d){
return d.Population;
})])
.range([0, 1000]);
// create a selection of divs with the class country
// in the div with the class list
d3.select('.list').selectAll('.country')
// join with the loaded data
.data(data)
// compute set of added rows
.enter()
// append a new div to the selection
.append('div')
// set class
.attr('class', 'country')
// map width of element to population
.style('width', function(d){
return scale(d.Population) + 'px';
})
// set content to the country's name
.text(function(d){
return d.Country;
});
});
</script>
</body>
</html>
Adjust the example to your needs.