Eleonore9/.block

## .block
license: gpl-3.0

## README.md

      
    Raw
  

              README.md
            
          
    Basic line chart

Link

bl.ocks.org/Eleonore9/c1648f9e143ae451a2dd6f044334c31f
Content

This simple bar chart forked from mbostock's block: Line 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


Fork the project


Upload your CSV file


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 = -5, yLabelyPosition = -17;

function transformXdata(data) {
  var parseTime = d3.timeParse("%Y");
  return parseTime(data);
}
function transformYdata(data) {
  return +data; // '+' converts to numbers
}
// **************************

  
## index.html
<!DOCTYPE html>
<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 = -5, yLabelyPosition = -17,
    lineColor = "#729fcf";

function transformXdata(data) {
  var parseTime = d3.timeParse("%Y");
  return parseTime(data);
}
function transformYdata(data) {
  return +data; // '+' converts to numbers
}
// **************************

var svg = d3.select("svg"),
    margin = {top: 30, right: 30, bottom: 60, left: 50},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var x = d3.scaleTime()
    .rangeRound([0, width]);

var y = d3.scaleLinear()
    .rangeRound([height, 0]);

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(d3.extent(data, function(d) { return d.xData; }));
  y.domain([0, maxY]);

  var line = d3.line()
    .x(function(d) { return x(d.xData); })
    .y(function(d) { return y(d.yData); });

  g.append("g")
      .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);

  g.append("g")
      .call(d3.axisLeft(y))
    .append("text") // Add y-axis label
      .attr("fill", "#000")
  		.attr("x", yLabelxPosition)
      .attr("y", yLabelyPosition)
  		.style("font-size", "14px")
      .text(yAxisLabel);

  g.append("path")
      .datum(data)
      .attr("fill", "none")
      .attr("stroke", lineColor)
      .attr("stroke-linejoin", "round")
      .attr("stroke-linecap", "round")
      .attr("stroke-width", 2.5)
      .attr("d", line);
});

</script>

## test-data.csv

          
            year
            value

            
              2010
              14

            
              2011
              20

            
              2012
              18

            
              2013
              13

            
              2014
              9

            
              2015
              15

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<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 = -5, yLabelyPosition = -17,
	lineColor = "#729fcf";

	function transformXdata(data) {
	var parseTime = d3.timeParse("%Y");
	return parseTime(data);
	}
	function transformYdata(data) {
	return +data; // '+' converts to numbers
	}
	// **************************

	var svg = d3.select("svg"),
	margin = {top: 30, right: 30, bottom: 60, left: 50},
	width = +svg.attr("width") - margin.left - margin.right,
	height = +svg.attr("height") - margin.top - margin.bottom,
	g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	var x = d3.scaleTime()
	.rangeRound([0, width]);

	var y = d3.scaleLinear()
	.rangeRound([height, 0]);

	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(d3.extent(data, function(d) { return d.xData; }));
	y.domain([0, maxY]);

	var line = d3.line()
	.x(function(d) { return x(d.xData); })
	.y(function(d) { return y(d.yData); });

	g.append("g")
	.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);

	g.append("g")
	.call(d3.axisLeft(y))
	.append("text") // Add y-axis label
	.attr("fill", "#000")
	.attr("x", yLabelxPosition)
	.attr("y", yLabelyPosition)
	.style("font-size", "14px")
	.text(yAxisLabel);

	g.append("path")
	.datum(data)
	.attr("fill", "none")
	.attr("stroke", lineColor)
	.attr("stroke-linejoin", "round")
	.attr("stroke-linecap", "round")
	.attr("stroke-width", 2.5)
	.attr("d", line);
	});

	</script>