lvngd · February 19, 2021 20:05
diff --git a/barchart.html b/barchart.html
 <!DOCTYPE html>
 <head>
 	<meta charset="utf-8">
 	<script src="https://d3js.org/d3.v4.min.js"></script>
 </head>

 <body>
 	<div id="chart"></div>
 </body>

 <script>
 	
 	function drawGraph(data){
 		var data = data.filter(function(v){ return v.bandName != null});
 		
 		var entries = d3.nest()
 			.key(function(d){return d.bandName.charAt(0);})
 			.rollup(function(v){return v.length;})
 			.entries(data);
 		
 		const svgBackgroundColor = 'blue',
 			barFillColor = "green",
 			fontFamily = "helvetica";

 		const margin = {top: 50, right: 40, bottom: 50, left: 40},
        		width = 500-margin.left-margin.right,
        		height = 500-margin.top-margin.bottom;


 		var svg = d3.select("#chart")
 			.append('svg')
 			.attr('width', width)
 			.attr('height', height)
 			.style('background-color', svgBackgroundColor)
 			.append('g')
 			.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
 		
 		
 		var barChart = svg.append("g");
 		const chartWidth = width/2;
 		const chartHeight = height/2;
 		
 		var letters = Array.from(entries.map(function(d){return d.key;}));
 		
 		var x = d3.scaleBand()
 			.range([0,chartWidth])
 			.domain(letters);

 		var xAxis = barChart.append('g')
 			.classed('axis--x', true)
 			.call(d3.axisBottom(x))
 			.style("font-size", ".7em")
 			.style("font-weight", "bold")
 			.style("font-family", fontFamily)
 			.attr("transform", "translate(0," + chartHeight + ")");
 		//"translate(0,200)"
 		
 		var maxCount = d3.max(entries, function(d){return d.value});
 		
 		
 		//draw bars
 		barChart
 			.selectAll("rect")
 			.data(entries)
 			.enter().append("rect")
 			.attr("fill", barFillColor)
 			.attr("x", function(d) { return x(d.key); })
 			.attr("y", function(d) { return y(d.value); })
 			.attr("rx", 1)
 			.attr("width", x.bandwidth())
 			.attr("height", function(d){return chartHeight-y(d.value)});


 	}

 	d3.json('results2.json',function(error,data){
 	      drawGraph(data);
 	    });

 </script>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	</head>

	<body>
	<div id="chart"></div>
	</body>

	<script>

	function drawGraph(data){
	var data = data.filter(function(v){ return v.bandName != null});

	var entries = d3.nest()
	.key(function(d){return d.bandName.charAt(0);})
	.rollup(function(v){return v.length;})
	.entries(data);

	const svgBackgroundColor = 'blue',
	barFillColor = "green",
	fontFamily = "helvetica";

	const margin = {top: 50, right: 40, bottom: 50, left: 40},
	width = 500-margin.left-margin.right,
	height = 500-margin.top-margin.bottom;


	var svg = d3.select("#chart")
	.append('svg')
	.attr('width', width)
	.attr('height', height)
	.style('background-color', svgBackgroundColor)
	.append('g')
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")")


	var barChart = svg.append("g");
	const chartWidth = width/2;
	const chartHeight = height/2;

	var letters = Array.from(entries.map(function(d){return d.key;}));

	var x = d3.scaleBand()
	.range([0,chartWidth])
	.domain(letters);

	var xAxis = barChart.append('g')
	.classed('axis--x', true)
	.call(d3.axisBottom(x))
	.style("font-size", ".7em")
	.style("font-weight", "bold")
	.style("font-family", fontFamily)
	.attr("transform", "translate(0," + chartHeight + ")");
	//"translate(0,200)"

	var maxCount = d3.max(entries, function(d){return d.value});


	//draw bars
	barChart
	.selectAll("rect")
	.data(entries)
	.enter().append("rect")
	.attr("fill", barFillColor)
	.attr("x", function(d) { return x(d.key); })
	.attr("y", function(d) { return y(d.value); })
	.attr("rx", 1)
	.attr("width", x.bandwidth())
	.attr("height", function(d){return chartHeight-y(d.value)});


	}

	d3.json('results2.json',function(error,data){
	drawGraph(data);
	});

	</script>