xxxxxxxxxx<head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } svg { width: 100%; height: 100%; box-sizing: border-box; padding: 20px; } </style></head><body> <svg /> <script> var city = "San Francisco", width = 800, height = 300 margin = {top: 20, right: 20, bottom: 20, left: 20}; // dataset of city temperatures across time d3.tsv('data.tsv', (err, data) => { //console.log(data); //clean the data data.forEach(d => { d.date = d3.timeParse("%Y%m%d")(d.date); d.date = new Date(d.date); //x d[city] = ++d[city]; //y }); //x scales var xExtent = d3.extent(data, d => d.date); var xScale = d3.scaleTime() .domain(xExtent) .range([margin.left, width - margin.right]); //y scales var yExtent = d3.extent(data, d => d[city]); var yScale = d3.scaleLinear() .domain(yExtent) .range([height - margin.bottom, margin.top]); var line = d3.line() .x(function(d) {return xScale(d.date)}) .y(function(d) {return yScale(d[city])}) var svg = d3.select('svg'); svg.append('path') .attr('d', line(data)) .attr('fill', 'none') .attr('stroke', 'blue'); // var heightScale = d3.scaleLinear()// .domain(yExtent)// .range([0, height - margin.top - margin.bottom]); //create the rectangles //var svg = d3.select('svg');// var rect = svg.selectAll('rect')// .data(data)// .enter().append('rect')// .attr('width', 2)// .attr('height', d => heightScale(d[city]))// .attr('x', function(d) {// return xScale(d.date)// })// .attr('y', function(d) {// return yScale(d[city])// })// .attr('fill', 'red')// .attr('stroke', 'white'); //define Axis var xAxis = d3.axisBottom() .scale(xScale); var yAxis = d3.axisLeft() .scale(yScale); svg.append('g') .attr('transform', 'translate(' + [0, height - margin.bottom] + ')') .call(xAxis); svg.append('g') .attr('transform', 'translate(' + [margin.left] + ')') .call(yAxis); }); </script></body> https://d3js.org/d3.v4.min.js