Instantly share code, notes, and snippets.

@Eleonore9 /.block
Last active Jul 25, 2018

Embed
What would you like to do?
Basic bar chart
license: gpl-3.0

Basic bar chart

Link

bl.ocks.org/Eleonore9/978e35ff4bbdf53de90c896e2afdc879

Content

This simple bar chart forked from mbostock's block: Bar Chart

Changes from the original chart

Aim: I'm hoping to create a reusable template for my data viz needs

Idea: I'm expecting data as CSV file and I'm reusing most of mbostock's original project.

How to use as a template?

Note: The template is still being tested and updated to make it more generic

  1. Fork the project

  2. Upload your CSV file

  3. In index.html, update the top section:

// *** EDIT TO CUSTOMISE ***
var dataFile = "test-data.csv",
		xName = "year", // column name for x-axis in the csv
		xAxisLabel = "Years",
    xLabelxPosition = 0, xLabelyPosition = 40,
    yName = "value", // column name for y-axis in the csv
    yAxisLabel = "Value"
		yLabelxPosition = 0, yLabelyPosition = -15;

function transformXdata(data) {
  return data;
}
function transformYdata(data) {
  return +data; // '+' converts to numbers
}
// **************************
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.bar:hover {
fill: #729fcf;
}
.axis--x path {
display: none;
}
svg {
font-family: sans-serif;
}
</style>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
// *** EDIT TO CUSTOMISE ***
var dataFile = "test-data.csv",
xName = "year", // column name for x-axis in the csv
xAxisLabel = "Years",
xLabelxPosition = 0, xLabelyPosition = 40,
yName = "value", // column name for y-axis in the csv
yAxisLabel = "Value"
yLabelxPosition = 0, yLabelyPosition = -15,
barColor= "#3366cc";
function transformXdata(data) {
return data;
}
function transformYdata(data) {
return +data; // '+' converts to numbers
}
// **************************
// Define the svg element, the plot dimensions (and margins)
var svg = d3.select("svg"),
margin = {top: 40, right: 10, bottom: 60, left: 40},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom;
var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
y = d3.scaleLinear().rangeRound([height, 0]);
// Define the svg subelements 'g'
var g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.csv(dataFile, function(d) {
return {xData: transformXdata(d[xName]),
yData: transformYdata(d[yName])};
}, function(error, data) {
if (error) throw error;
// Define the span of x and y axis
var maxY= d3.max(data, function(d) { return d.yData; });
x.domain(data.map(function(d) { return d.xData; }));
y.domain([0, maxY]);
// Add the x-axis
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x))
.append("text") // Add x-axis label
.attr("fill", "#000")
.attr("x", (width /2) + xLabelxPosition)
.attr("y", xLabelyPosition)
.style("font-size", "14px")
.text(xAxisLabel);
// Add the y-axis
g.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(y).ticks(10))
.append("text") // Add y-axis label
.attr("fill", "#000")
.attr("x", yLabelxPosition)
.attr("y", yLabelyPosition)
.style("font-size", "14px")
.text(yAxisLabel);
// Add one bar per data point
g.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("fill", barColor)
.attr("x", function(d) { return x(d.xData); })
.attr("y", function(d) { return y(d.yData); })
.attr("width", x.bandwidth())
.attr("height", function(d) { return height - y(d.yData); });
});
</script>
year value
2010 14
2011 20
2012 18
2013 13
2014 9
2015 15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment