jhnwllr/.block

## .block
license: gpl-3.0

## README.md

      
    Raw
  

              README.md
            
          
    This line chart is constructed from a TSV file storing the daily average temperatures of New York, San Francisco and Austin over the last year. The chart employs conventional margins and a number of D3 features:

d3.tsv - load and parse data
d3.time.format - parse dates
d3.time.scale - x-position encoding
d3.scale.linear - y-position encoding
d3.scale.category10, a d3.scale.ordinal - color encoding
d3.extent, d3.min and d3.max - compute domains
d3.keys - compute column names
d3.svg.axis - display axes
d3.svg.line - display line shape

forked from mbostock's block: Multi-Series Line Chart
forked from fengqingli's block: Multi-Series Line Chart
forked from fengqingli's block: Multi-Series Line Chart
forked from fengqingli's block: Multi-Series Line Chart
forked from fengqingli's block: Multi-Series Line Chart
forked from fengqingli's block: Multi-Series Line Chart
forked from salvob41's block: Multi-Series Line Chart 

  
## data.tsv

          
            date
            gioia
            tristezza
            rabbia
            sorpresa
            paura
            fiducia

            
              1950
              17.73558173407279
              15.126479642051217
              15.414462806898646
              15.676883463355388
              18.006981294297315
              18.03961105932466

            
              1960
              16.840899013635806
              14.971796819501876
              15.597222927031147
              15.703423765830756
              17.5190747767178
              19.36758269728262

            
              1970
              16.609792752250314
              14.91096971067595
              16.150689091105402
              15.466338536296858
              17.88330464413327
              18.978905265538216

            
              1980
              16.63023061517834
              14.988793512078008
              16.116867141672675
              15.519088396788819
              17.99664924066742
              18.74837109361474

            
              1990
              16.617880664524417
              14.930514513515707
              16.240352806729515
              15.46024951087959
              18.11305722780381
              18.637945276546947

            
              2000
              16.544175079156226
              15.033624250198754
              16.23795788767903
              15.40980264972941
              18.09632120014769
              18.67811893308889

            
              2017
              16.54854261782511
              14.932743625086704
              16.230146429503932
              15.408993787184114
              18.016401564214135
              18.863171976186006

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
  background-color: #f5f5f5;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
	/*deleted;*/
}

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>

var margin = {top: 20, right: 80, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var parseDate = d3.time.format("%Y").parse;

var x = d3.time.scale()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

var color = d3.scale.category10();

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");


var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

var line = d3.svg.line()
    .interpolate("basis")
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.temperature); });

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  	.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.tsv("data.tsv", function(error, data) {
  if (error) throw error;

  color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));

  data.forEach(function(d) {
    d.date = parseDate(d.date);
  });

  var cities = color.domain().map(function(name) {
    return {
      name: name,
      values: data.map(function(d) {
        return {date: d.date, temperature: +d[name]};
      })
    };
  });

  x.domain(d3.extent(data, function(d) { return d.date; }));

  y.domain([
    d3.min(cities, function(c) { return d3.min(c.values, function(v) { return v.temperature; }); }),
    d3.max(cities, function(c) { return d3.max(c.values, function(v) { return v.temperature; }); })
  ]);

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Score (%)");

  var city = svg.selectAll(".city")
      .data(cities)
      .enter().append("g")
      .attr("class", "city");

  city.append("path")
      .attr("class", "line")
      .attr("d", function(d) { return line(d.values); })
      .style("stroke", function(d) { return color(d.name); });

  city.append("text")
      .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
      .attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.temperature) + ")"; })
      .attr("x", 3)
      .attr("dy", ".35em")
      .text(function(d) { return d.name; });
});

</script>
date	gioia	tristezza	rabbia	sorpresa	paura	fiducia
1950	17.73558173407279	15.126479642051217	15.414462806898646	15.676883463355388	18.006981294297315	18.03961105932466
1960	16.840899013635806	14.971796819501876	15.597222927031147	15.703423765830756	17.5190747767178	19.36758269728262
1970	16.609792752250314	14.91096971067595	16.150689091105402	15.466338536296858	17.88330464413327	18.978905265538216
1980	16.63023061517834	14.988793512078008	16.116867141672675	15.519088396788819	17.99664924066742	18.74837109361474
1990	16.617880664524417	14.930514513515707	16.240352806729515	15.46024951087959	18.11305722780381	18.637945276546947
2000	16.544175079156226	15.033624250198754	16.23795788767903	15.40980264972941	18.09632120014769	18.67811893308889
2017	16.54854261782511	14.932743625086704	16.230146429503932	15.408993787184114	18.016401564214135	18.863171976186006
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	font: 10px sans-serif;
	background-color: #f5f5f5;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.x.axis path {
	/deleted;/
	}

	.line {
	fill: none;
	stroke: steelblue;
	stroke-width: 1.5px;
	}

	</style>
	<body>
	<script src="https://d3js.org/d3.v3.min.js"></script>
	<script>

	var margin = {top: 20, right: 80, bottom: 30, left: 50},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var parseDate = d3.time.format("%Y").parse;

	var x = d3.time.scale()
	.range([0, width]);

	var y = d3.scale.linear()
	.range([height, 0]);

	var color = d3.scale.category10();

	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom");


	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left");

	var line = d3.svg.line()
	.interpolate("basis")
	.x(function(d) { return x(d.date); })
	.y(function(d) { return y(d.temperature); });

	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	d3.tsv("data.tsv", function(error, data) {
	if (error) throw error;

	color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));

	data.forEach(function(d) {
	d.date = parseDate(d.date);
	});

	var cities = color.domain().map(function(name) {
	return {
	name: name,
	values: data.map(function(d) {
	return {date: d.date, temperature: +d[name]};
	})
	};
	});

	x.domain(d3.extent(data, function(d) { return d.date; }));

	y.domain([
	d3.min(cities, function(c) { return d3.min(c.values, function(v) { return v.temperature; }); }),
	d3.max(cities, function(c) { return d3.max(c.values, function(v) { return v.temperature; }); })
	]);

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", ".71em")
	.style("text-anchor", "end")
	.text("Score (%)");

	var city = svg.selectAll(".city")
	.data(cities)
	.enter().append("g")
	.attr("class", "city");

	city.append("path")
	.attr("class", "line")
	.attr("d", function(d) { return line(d.values); })
	.style("stroke", function(d) { return color(d.name); });

	city.append("text")
	.datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
	.attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.temperature) + ")"; })
	.attr("x", 3)
	.attr("dy", ".35em")
	.text(function(d) { return d.name; });
	});

	</script>