cities-column-chart

<!DOCTYPE html>
<head>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
    	body { 
    		margin: 0;
    		position: fixed;
    		top: 0;
    		right: 0;
    		bottom: 0;
    		left: 0;
		}

.title {
			font-family: "Georgia";
			font-size: 32px;
			fill: #000;
		}

.axis {
			font-family: "Arial";
			font-size: 11px;
			fill: #808080;
		}

.bar {
			fill: pink;
			fill-opacity: 1;
		}
	</style>
</head>
<body>
	<script>
		var city = "San Francisco";
		var margin = { top: 20, right: 20, bottom: 20, left: 20};
		var width = 960 - margin.left - margin.right;
		var height = 500 - margin.top - margin.bottom;
		d3.tsv("cities.tsv", (error, data) => {
			if (error) throw error;
			data.forEach(function(d) { 
				d.date = d3.timeParse("%Y%m%d")(d.date);
				d.date = new Date(d.date);	// x
				d[city] = ++d[city];		// y
			})

// scales
			var xExtent = d3.extent(data, d => d.date);
			var xScale = d3.scaleTime()
				.domain(xExtent)
				.range([margin.left, width - margin.left - margin.right]);
			var yMax = d3.max(data, d => d[city]);
			var yScale = d3.scaleLinear()
				.domain([0, yMax])
				.range([height - margin.bottom, margin.top]);
			var heightScale = d3.scaleLinear()
				.domain([0, yMax])
				.range([0, height - margin.top - margin.bottom]);

// create rects
			var svg = d3.select("body")
				.append("svg")
				.attr("width", width)
				.attr("height", height);

var rect = svg.selectAll("rect")
				.data(data)
				.enter()
				.append("rect")
				.attr("x", d => xScale(d.date))
				.attr("y", d => yScale(d[city]))
				.attr("width", 2)
				.attr("height", d => heightScale(d[city]))
				.attr("fill", "pink")
				.attr("stroke", "white");

var xAxis = d3.axisBottom()
				.scale(xScale)
				.tickFormat(d3.timeFormat("%b %Y"));
			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, 0] + ")")
				.call(yAxis);
		})
	</script>
</body>
</html>

https://d3js.org/d3.v4.min.js