Tier Name vs. Pivot Field Names HeatMap

forked from Catherine-Yu's block: Tier Name vs. Pivot Field Names HeatMap

<!DOCTYPE html>
<meta charset="utf-8">
<html>
  <head>
    <style>
      rect.bordered {
        stroke: #ffffff;
        stroke-width:2px;
      }

text.mono {
        font-size: 7pt;
        font-family: Consolas, courier;
        fill: #aaa;
      }

text.axis-workweek {
        fill: #000;
      }

text.axis-worktime {
        fill: #000;
      }
    </style>
    <script src="https://d3js.org/d3.v4.js"></script>
  </head>
  <body>
    <div id="chart">
	</div>
    <div id="dataset-picker">
    
    <script type="text/javascript">
	const margin = { top: 50, right: 0, bottom: 100, left: 320 },
		width = 1100 - margin.left - margin.right,
		height = 1500 - margin.top - margin.bottom,
		gridSize = Math.floor(width / 7),
		legendElementWidth = gridSize*0.5,
		buckets = 8,
		colors = ["#bae6d9","#98cfd2","#77bfcb","#5ea9c0","#4195b7","#2988a8","#2e6e9a","#2b598a"], // alternatively colorbrewer.YlGnBu[9]
		tiername = ["Four-year/For-profit","Highly selective/private","Highly selective/public","Ivy Plus","Less than two-year schools of any type","Nonselective four-year private/not-for-profit","Nonselective four-year/public","Other elite schools/(public and private)","Selective/private","Selective/public","Two-year/(public and private not-for-profit)","Two-year/for-profit"],
		fieldname = ["Child_Married","Parent_Income_Mean","Parent_Income_Median","Parent_Income_Rank","Child_Earning_Rank","Child_Earning_Mean","Child_Earning_Median"];

const svg = d3.select("#chart").append("svg")
		.attr("width", width + margin.left + margin.right)
		.attr("height", height + margin.top + margin.bottom)
		.append("g")
		.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
	svg.append("text")
		.attr("x", -320)
		.attr("y", -30 )
		.attr("dy", "0.35em")
		.attr("text-anchor", "left")
		.attr("font-family", "sans-serif")
		.attr("font-size", "25px")
		.attr("font-weight", "bold")
		.attr("fill", "black")
		.text("Information about children and parents with different types of University");
	const tienameLabels = svg.selectAll(".tienameLabel")
		.data(tiername)
		.enter().append("text")
		.text(function (d) { return d; })
		.attr("x", 0)
		.attr("y", (d, i) => i * gridSize)
		.style("text-anchor", "end")
		.attr("transform", "translate(-6," + gridSize / 1.5 + ")")
		.attr("class","tienameLabel mono axis axis-workweek" );

const fieldnameLabels = svg.selectAll(".fieldnameLabel")
		.data(fieldname)
		.enter().append("text")
		.text((d) => d)
		.attr("x", (d, i) => i * gridSize)
		.attr("y", 0)
		.style("text-anchor", "middle")
		.attr("transform", "translate(" + gridSize / 2 + ", -6)")
		.attr("class", "fieldnameLabel mono axis axis-worktime");

const type = (d) => {
		return {
		  tier_name: +d.tier_name,
		  field_name: +d.field_name,
		  value: +d.value
		};
	};

const heatmapChart = function() {
		var dic = new Array();
		
		dic["Four-year for-profit"] = 1;//"Four-year for-profit","Highly selective private","Highly selective public","Ivy Plus","Less than two-year schools of any type","Nonselective four-year private not-for-profit","Nonselective four-year public","Other elite schools (public and private)","Selective private","Selective public","Two-year (public and private not-for-profit)","Two-year for-profit"
		dic["Highly selective private"] = 2;
		dic["Highly selective public"] = 3;
		dic["Ivy Plus"] = 4;
		dic["Less than two-year schools of any type"] = 5;
		dic["Nonselective four-year private not-for-profit"] = 6;
		dic["Nonselective four-year public"] = 7;
		dic["Other elite schools (public and private)"] = 8;
		dic["Selective private"] = 9;
		dic["Selective public"] = 10;
		dic["Two-year (public and private not-for-profit)"] = 11;
		dic["Two-year for-profit"] = 12;
		
		var dics = new Array();
		dics["married"] = 1;
		dics["par_mean"] = 2;
		dics["par_median"] = 3;
		dics["par_rank"] = 4;
		dics["k_mean"] = 5;
		dics["k_median"] = 6;
		dics["k_rank"] = 7;
		d3.csv("s4.csv", function(error, data) {
			var dic = new Array();
			dic["Four-year for-profit"] = 1;
			dic["Highly selective private"] = 2;
			dic["Highly selective public"] = 3;
			dic["Ivy Plus"] = 4;
			dic["Less than two-year schools of any type"] = 5;
			dic["Nonselective four-year private not-for-profit"] = 6;
			dic["Nonselective four-year public"] = 7;
			dic["Other elite schools (public and private)"] = 8;
			dic["Selective private"] = 9;
			dic["Selective public"] = 10;
			dic["Two-year (public and private not-for-profit)"] = 11;
			dic["Two-year for-profit"] = 12;
			var dics = new Array();
			dics["Married"] = 1;
			dics["Par Mean"] = 2;
			dics["Par Median"] = 3;
			dics["Par Rank"] = 4;
			dics["K Mean"] = 5;
			dics["K Median"] = 6;
			dics["K Rank"] = 7;
			//console.log(data);
			data.forEach(function(d) {
			d.tier_name = parseInt(dic[d.tier_name]);
			d.field_name = parseInt(dics[d.field_name]);
			d.value = parseFloat(d.value);
			});
			console.log(data);
			const colorScale = d3.scaleQuantile()
            .domain([0, d3.max(data, (d) => d.value)])
            .range(colors);
			console.log(d3.max(data, (d) => d.value));
			console.log(colorScale);
			const cards = svg.selectAll(".field_name")
				.data(data, (d) => d.tier_name+':'+d.field_name);
			cards.append("title");
			cards.enter().append("rect")
				.attr("x", function(d) {return (d.field_name - 1) * gridSize; })
				.attr("y", (d) => (d.tier_name - 1) * gridSize)
				.attr("rx", 4)
				.attr("ry", 4)
				.attr("class", "field_name bordered")
				.attr("width", gridSize)
				.attr("height", gridSize)
				.style("fill", colors[0])
				.merge(cards)
					.transition()
					.duration(1000)
					.style("fill", (d) => colorScale(d.value));

cards.select("title").text((d) => d.value);
			cards.exit().remove();
			const legend = svg.selectAll(".legend")
				.data([0].concat(colorScale.quantiles()), (d) => d);  
			console.log(colorScale.quantiles());
			
			const legend_g = legend.enter().append("g")
				.attr("class", "legend");
			legend_g.append("rect")
				.attr("x", (d, i) => legendElementWidth * i*1.7)
				.attr("y", height)
				.attr("width", legendElementWidth*1.7)
				.attr("height", gridSize / 2)
				.style("fill", (d, i) => colors[i]);

legend_g.append("text")
				.attr("class", "mono")
				.text((d) => "≥" + d.toFixed(4))
				.attr("x", (d, i) => legendElementWidth * i*1.7)
				.attr("y", height );

legend.exit().remove();
			
			
		});
      };

heatmapChart();
	function wrap(text, width,left) {
		text.each(function() {
		var text = d3.select(this),
			words = text.text().split(/\s+/).reverse(),
			word,
			line = [],
			lineNumber = 0,
			lineHeight = 3, // ems
			y = text.attr("y"),
			dy = parseFloat(text.attr("dy")),
			tspan = text.text(null).append("tspan").attr("x",left).attr("y", y).attr("dy", dy + "em");
		while (word = words.pop()) {
			line.push(word);
			tspan.text(line.join(" "));
			if (tspan.node().getComputedTextLength() > width) {
				line.pop();
				tspan.text(line.join(" "));
				line = [word];
				tspan = text.append("tspan").attr("x",left).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
			}
		}
		});
	}
    </script>
	</div>
	<div>
		<p>About Data: I use the rescaling method in python that is discussed in Freature Scaling article in wikipeadia page. I rescale the data in seven colums and normalized these data from 0 to 1. In order to creat the normalized heatmap, I also apply the pivot function so that this data file could be used in Tableau-Lan Yu
		</p>
		<p>This visualization shows the information about children's conditions and parents' conditions in different types of universities. Color here represents the percentage of each column occupies in a specific type of universities. -Lan Yu
		</p>
		<p>From this visualization, it's clear that the highest rate of marriage and the highest parents' income ouucrs when the tier_name is Two-year public, private and not-for-profit. Surprising, children's earning rank and parents income rank are not very high in Ivy Plus university.-Lan Yu
		</p>
	</div>
  </body>
</html>

Modified http://d3js.org/d3.v4.js to a secure url

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