bar chart respond to resize

This bar chart shows top 5 causes of immigrant death

The data originates form The Migrants' Files, you can download it from curran's git

forked from thomaxyu001's block: migration bar chart

Forked from curran 's Stylized Scatter Plot with Color Legend.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<title>Top Internet Countries Visualization</title>
	<style>
		body {
			margin: 0px;
		}
		.domain {
			display: none;
		}
		.tick line {
			stroke: #C0C0BB;
		}
		.tick text {
			fill: #8E8883;
			font-size: 10pt;
			font-family: sans-serif;
		}
		.axis-label {
			fill: #635F5D;
			font-size: -4pt;
			font-family: sans-serif;
		}
	</style>
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
</head>
<body>
<svg width="968" height="500"></svg>
<script>
	$(function () {
		const svg = d3.select('svg');
		var g = svg.append('g')
			.attr("id","root");
		function draw() {
			g.remove();
			g = svg.append('g')
				.attr("id","root");
			var width1 = $(window).width()-50;
			var height1 = $(window).height()-50;

const xValue = d => d.country;
			const xLabel = 'cause';
			const yValue = d => d.netUsers;
			const yLabel = 'death number';
			const margin = { left: 150, right: 70, top: 20, bottom: 110 };

svg.attr("width",width1);
			svg.attr("height",height1);
			const width = svg.attr('width');
			const height = svg.attr('height');
			const innerWidth = width - margin.left - margin.right;
			const innerHeight = height - margin.top - margin.bottom;

g.attr('transform', `translate(${margin.left},${margin.top})`);
			const xAxisG = g.append('g')
				.attr('transform', `translate(0, ${innerHeight})`);
			const yAxisG = g.append('g');

xAxisG.append('text')
				.attr('class', 'axis-label')
				.attr('x', innerWidth / 2)
				.attr('y', 90)
				.text(xLabel);

yAxisG.append('text')
				.attr('class', 'axis-label')
				.attr('x', -innerHeight / 2)
				.attr('y', -100)
				.attr('transform', `rotate(-90)`)
				.style('text-anchor', 'middle')
				.text(yLabel);

const xScale = d3.scaleBand()
				.paddingInner(0.3)
				.paddingOuter(0.2);
			const yScale = d3.scaleLinear();

const xAxis = d3.axisBottom()
				.scale(xScale)
				.tickPadding(15)
				.tickSize(-innerHeight);

const yTicks = 10;
			const yAxis = d3.axisLeft()
				.scale(yScale)
				.ticks(yTicks)
				.tickPadding(15)
				.tickFormat(d3.format('.0s'))
				.tickSize(-innerWidth);

const row = d => {
				const netUsersWithCommas = d['number'];
				return {
					country: d['cause'],
					netUsers: +netUsersWithCommas.replace(/,/g, '')
				};
			};

const top5 = data => data.slice(0, 5);

d3.csv('deathcause.csv', row, data => {
				data = top5(data);
				xScale
					.domain(data.map(xValue))
					.range([0, innerWidth]);

yScale
					.domain([0, d3.max(data, yValue)])
					.range([innerHeight, 0])
					.nice(yTicks);

g.selectAll('rect').data(data)
					.enter().append('rect')
					.attr('x', d => xScale(xValue(d)))
					.attr('y', d => yScale(yValue(d)))
					.attr('width', d => xScale.bandwidth())
					.attr('height', d => innerHeight - yScale(yValue(d)))
					.attr('fill', 'steelblue');

xAxisG.call(xAxis)
					.selectAll('.tick line').remove();
				yAxisG.call(yAxis);
			});
		}
		draw();
		$(window).resize(function() {
			draw();
		});

});
</script>
</body>
</html>

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

https://cdn.bootcss.com/jquery/3.2.1/jquery.js