lvngd · February 22, 2021 01:04
diff --git a/bar_chart_d3v6.html b/bar_chart_d3v6.html
 <!DOCTYPE html>
 <head>
 	<meta charset="utf-8">
 	<script src="https://d3js.org/d3.v6.min.js"></script>
 </head>

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

 <script>
 	function drawGraph(data){
 		data = data.filter(v => v.bandName != null);	
 		//rollup returns a map data structure
 		let rolled = d3.rollup(data, v => v.length, d => d.bandName.charAt(0))
 		/*
 		Then convert the map to an array of objects just like the output from from d3.nest().
 		*/
 		let entries = Array.from(rolled, ([key, value]) => ({key, value}))
 		/*
 		Converting to an array isn't completely necessary, but now the input data is in the same format as we used in the V4 code with d3.nest(). 

 		I've also included code at the bottom for using just the map(rolled) to create the bars. When you iterate over the map you get an array [[key,value],[key,value],...] and then just index the array to get your data values. 

 		https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map
 		*/

 		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;

 		const 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 + ")")

 		const maxCount = d3.max(entries, d => d.value);
 		let letters = entries.map(d => d.key);
 		letters = letters.sort();

 		const chartWidth = width/2;
 		const chartHeight = height/2;

 		//create a g element for the bar chart that will hold the axes and the bars
 		let barChart = svg.append("g");

 		//x-axis - the starting letters - scaleBand
 		let x = d3.scaleBand()
 			.range([0,chartWidth])
 			.domain(letters);

 		let 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 + ")");

 		//y-axis - the counts, so it should go from zero to the max count of the data
 		let y = d3.scaleLinear()
 			.range([chartHeight,0])
 			.domain([0,maxCount]);

 		let yAxis = barChart.append('g')
 			.classed('axis--y', true)
 			.call(d3.axisLeft(y))
 			.style("font-size", ".8em")
 			.style("font-weight", "bold")
 			.style("font-family", fontFamily);

 	
 		//1. draw the bars with the array of objects - the original way we did it
 		barChart
 			.selectAll("rect")
 			.data(entries)
 			.enter()
 			.append("rect")
 			.attr("fill", barFillColor)
 			.attr("x", d => x(d.key))
 			.attr("y", d => y(d.value))
 			.attr("rx", 1)
 			.attr("width", x.bandwidth())
 			.attr("height", d => chartHeight-y(d.value));
 	



 	/*	
 		
 		//2. creates the bars just by passing the map structure 'rolled' as the input data
 		barChart
 			.selectAll("rect")
 			.data(rolled)
 			.enter()
 			.append("rect")
 			.attr("fill", barFillColor)
 			.attr("x", d => x(d[0])) //index 0 is the key
 			.attr("y", d => y(d[1])) //index 1 is the value
 			.attr("rx", 1)
 			.attr("width", x.bandwidth())
 			.attr("height", d => chartHeight-y(d[1]));

 	*/


 	/*	
 		//3. creates the bars again using the map structure, but the input is the array of letters, and then retrieve the count for each letter from the map

 		barChart
 			.selectAll("rect")
 			.data(letters)
 			.enter()
 			.append("rect")
 			.attr("fill", barFillColor)
 			.attr("x", d => x(d)) //d is the letter
 			.attr("y", d => y(rolled.get(d))) //letters are keys in the map, so retrieve the value with .get()
 			.attr("rx", 1)
 			.attr("width", x.bandwidth())
 			.attr("height", d => chartHeight-y(rolled.get(d)));

 	*/
 		
 	}


 d3.json("results2.json")
 	  .then(data=>drawGraph(data));


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

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

	<script>
	function drawGraph(data){
	data = data.filter(v => v.bandName != null);
	//rollup returns a map data structure
	let rolled = d3.rollup(data, v => v.length, d => d.bandName.charAt(0))
	/*
	Then convert the map to an array of objects just like the output from from d3.nest().
	*/
	let entries = Array.from(rolled, ([key, value]) => ({key, value}))
	/*
	Converting to an array isn't completely necessary, but now the input data is in the same format as we used in the V4 code with d3.nest().

	I've also included code at the bottom for using just the map(rolled) to create the bars. When you iterate over the map you get an array [[key,value],[key,value],...] and then just index the array to get your data values.

	https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map
	*/

	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;

	const 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 + ")")

	const maxCount = d3.max(entries, d => d.value);
	let letters = entries.map(d => d.key);
	letters = letters.sort();

	const chartWidth = width/2;
	const chartHeight = height/2;

	//create a g element for the bar chart that will hold the axes and the bars
	let barChart = svg.append("g");

	//x-axis - the starting letters - scaleBand
	let x = d3.scaleBand()
	.range([0,chartWidth])
	.domain(letters);

	let 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 + ")");

	//y-axis - the counts, so it should go from zero to the max count of the data
	let y = d3.scaleLinear()
	.range([chartHeight,0])
	.domain([0,maxCount]);

	let yAxis = barChart.append('g')
	.classed('axis--y', true)
	.call(d3.axisLeft(y))
	.style("font-size", ".8em")
	.style("font-weight", "bold")
	.style("font-family", fontFamily);


	//1. draw the bars with the array of objects - the original way we did it
	barChart
	.selectAll("rect")
	.data(entries)
	.enter()
	.append("rect")
	.attr("fill", barFillColor)
	.attr("x", d => x(d.key))
	.attr("y", d => y(d.value))
	.attr("rx", 1)
	.attr("width", x.bandwidth())
	.attr("height", d => chartHeight-y(d.value));




	/*

	//2. creates the bars just by passing the map structure 'rolled' as the input data
	barChart
	.selectAll("rect")
	.data(rolled)
	.enter()
	.append("rect")
	.attr("fill", barFillColor)
	.attr("x", d => x(d[0])) //index 0 is the key
	.attr("y", d => y(d[1])) //index 1 is the value
	.attr("rx", 1)
	.attr("width", x.bandwidth())
	.attr("height", d => chartHeight-y(d[1]));

	*/


	/*
	//3. creates the bars again using the map structure, but the input is the array of letters, and then retrieve the count for each letter from the map

	barChart
	.selectAll("rect")
	.data(letters)
	.enter()
	.append("rect")
	.attr("fill", barFillColor)
	.attr("x", d => x(d)) //d is the letter
	.attr("y", d => y(rolled.get(d))) //letters are keys in the map, so retrieve the value with .get()
	.attr("rx", 1)
	.attr("width", x.bandwidth())
	.attr("height", d => chartHeight-y(rolled.get(d)));

	*/

	}


	d3.json("results2.json")
	.then(data=>drawGraph(data));


	</script>