D3 challenge month: week 1, day 2 - Reusable charts + ES6

readme.md

Graphs following the reusable chart pattern have two characteristics:

1. Configurability. We want to modify the appearance and behavior of the graph without having to modify the code itself.
2. Ability to be built in an independent way. We want every graph element associated with a data point of our dataset independently. This has to do with the way D3 associates data instances with DOM elements. This will become more clear in a minute.

You can also preview this gist.

---

This D3 block is based on the @dmesquita block.

bubblechart_es6.js

	const bubbleChart = () => {
	 	
	 	let margin = { top: 40, right: 30, bottom: 40, left: 30},
	 		width = 960 - margin.right - margin.left,
	 		height = 960 - margin.top - margin.bottom,
	 		colorCategory = "category",
	 		colRadius = "views";

//		# MODIFIES THE selection GIVEN BY .call()
	 	const chart = selection => {

	 		let data = selection.enter().data();

	 		let chart = d3.select("svg")
	 			.attr("class", "chart")
	 			.attr("width", width + margin.left + margin.right)
	 			.attr("height", height + margin.top + margin.bottom)
	 		.append("g")
	 			.attr("transform", `translate(${margin.left}, ${margin.top})`);

//			# CREATE CATEGORICAL AND QUANTITATIVE EXTRA ENCODINGS
			let colorCircles = d3.scaleOrdinal(d3.schemeCategory10);
	 		let scaleRadius = d3.scaleLinear()
	 			.domain([
	 				d3.min(data, dp => +dp[colRadius]),
	 				d3.max(data, dp => +dp[colRadius])
	 				])
	 			.range([5,21]);


//			# DUE TO REUSABLE CHARTS, ALL 'STYLE' IS DONE WITH JS
	 		let tooltip = selection.append("div")
	 			.style("position", "absolute")
	            .style("visibility", "visible")
	            .style("color", "white")
	            .style("padding", "8px")
	            .style("background-color", "#626D71")
	            .style("border-radius", "6px")
	            .style("text-align", "center")
	            .style("font-family", "monospace")
	            .style("width", "400px")
	            .text("");

//			# A FORCE ANIMATION FOR EVERY DP
	        let sim = d3.forceSimulation(data)
	        	.force("charge", d3.forceManyBody().strength([-80]))
	        	.force("x", d3.forceX())
	        	.force("y", d3.forceY())
	        	.on("tick", e => {
	        		node.attr("cx", dp => dp.x)
	        			.attr("cy", dp => dp.y);
	        	});

//			# TELLS D3 TO CREATE 'CIRCLES' BINDED TO DATA IF NOT BINDED YET, ADD ATTRS
	 		let node = chart.selectAll("circle")
	 			.data(data)
	 		 .enter()
	 		 .append("circle")
	 		 	.attr("r", dp => scaleRadius(dp[colRadius]))
	 		 	.attr("fill", dp => colorCircles(dp[colorCategory]))
	 		 	.attr("transform", `translate(${ width /2}, ${ height /2})`)
	 		 	.on("mouseover", dp => {
	 		 		tooltip.html(`${ dp[colorCategory] }<br>${ dp["title"] }<br>${ dp[colorCategory] } hearts`);
	 		 		return tooltip.style("visibility", "visible");
	 		 	})
	 		 	.on("mousemove", () => {
	 		 		return tooltip.style("top", `${ d3.event.pageY -10 }px`)
	 		 					  .style("left", `${ d3.event.pageX +10 }px`);
	 		 	})
	 		 	.on("mouseout", () => {
	 		 		return tooltip.style("visibility", "hidden");
	 		 	});
//				SOMEHOW THESE 'MOUSE' ACTIONS DON'T WORK

	 	}


//		APPLIES D3 CONCEPT OF CHAINING METHODS	 		
	 	chart.width = val => {
	 		width = val - margin.right - margin.left;
	 		return chart;
	 	}

	 	chart.height = val => {
	 		height = val - margin.top - margin.bottom;
	 		return chart;
	 	}

	 	chart.color = column => {
	 		colorCategory = column;
	 		return chart;
	 	}

	 	chart.radius = column => {
	 		colRadius = column;
	 		return chart;
	 	}


	    return chart;
	}



	d3.csv('medium_january.csv', (error, data) => {
		if (error) {
			console.error('Error getting or parsing the data.');
			throw error;
		}

//		PRE-PROCESS DATA
    	data.map(dp => dp["views"] = +dp["views"]);

//    	CHOOSE THE CHART PARAMETERS, THEN CALL chart TO DRAW IT WITH data
	    let chart = bubbleChart()
		    .width(720)
		    .height(500);

	    d3.select('svg')
		    .data(data)
		    .call(chart);
    });

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Reusable Bubble Chart - inspired by @dmesquita</title>
</head>
<body>
	<svg></svg>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.6.0/d3.min.js"></script>
	<script type="text/javascript">
	"use strict";

	var bubbleChart = function bubbleChart() {

		var margin = { top: 40, right: 30, bottom: 40, left: 30 },
		    width = 960 - margin.right - margin.left,
		    height = 960 - margin.top - margin.bottom,
		    colorCategory = "category",
		    colRadius = "views";

//		# MODIFIES THE selection GIVEN BY .call()
		var chart = function chart(selection) {

			var data = selection.enter().data();

			var chart = d3.select("svg")
				.attr("class", "chart")
				.attr("width", width + margin.left + margin.right)
				.attr("height", height + margin.top + margin.bottom)
			 .append("g")
			 	.attr("transform", "translate(" + margin.left + ", " + margin.top + ")");

//			# CREATE CATEGORICAL AND QUANTITATIVE EXTRA ENCODINGS
			var colorCircles = d3.scaleOrdinal(d3.schemeCategory10);
			var scaleRadius = d3.scaleLinear().domain([d3.min(data, function (dp) {
				return +dp[colRadius];
			}), d3.max(data, function (dp) {
				return +dp[colRadius];
			})]).range([5, 21]);

//			# DUE TO REUSABLE CHARTS, ALL 'STYLE' IS DONE WITH JS
			var tooltip = selection.append("div")
				.style("position", "absolute")
				.style("visibility", "visible")
				.style("color", "white")
				.style("padding", "8px")
				.style("background-color", "#626D71")
				.style("border-radius", "6px")
				.style("text-align", "center")
				.style("font-family", "monospace")
				.style("width", "400px")
				.text("");

//			# A FORCE ANIMATION FOR EVERY DP
			var sim = d3.forceSimulation(data)
				.force("charge", d3.forceManyBody().strength([-80]))
				.force("x", d3.forceX())
				.force("y", d3.forceY())
				.on("tick", function (e) {
					node.attr("cx", function (dp) {
						return dp.x;
					}).attr("cy", function (dp) {
						return dp.y;
					});
				});

//			# TELLS D3 TO CREATE 'CIRCLES' BINDED TO DATA IF NOT BINDED YET, ADD ATTRS
			var node = chart.selectAll("circle")
				.data(data)
			 .enter()
			 .append("circle")
			 	.attr("r", function (dp) {
					return scaleRadius(dp[colRadius]);
				}).attr("fill", function (dp) {
					return colorCircles(dp[colorCategory]);
				}).attr("transform", "translate(" + width / 2 + ", " + height / 2 + ")")
				.on("mouseover", function (dp) {
					tooltip.html(dp[colorCategory] + "<br>" + dp["title"] + "<br>" + dp[colorCategory] + " hearts");
					return tooltip.style("visibility", "visible");
				}).on("mousemove", function () {
					return tooltip.style("top", d3.event.pageY - 10 + "px")
					.style("left", d3.event.pageX + 10 + "px");
				}).on("mouseout", function () {
					return tooltip.style("visibility", "hidden");
				});
//				SOMEHOW THESE 'MOUSE' ACTIONS DON'T WORK
		};

//		APPLIES D3 CONCEPT OF CHAINING METHODS	 		
		chart.width = function (val) {
			width = val - margin.right - margin.left;
			return chart;
		};

		chart.height = function (val) {
			height = val - margin.top - margin.bottom;
			return chart;
		};

		chart.color = function (column) {
			colorCategory = column;
			return chart;
		};

		chart.radius = function (column) {
			colRadius = column;
			return chart;
		};

		return chart;
	};

	d3.csv('medium_january.csv', function (error, data) {
		if (error) {
			console.error('Error getting or parsing the data.');
			throw error;
		}

		//		PRE-PROCESS DATA
		data.map(function (dp) {
			return dp["views"] = +dp["views"];
		});

		//    	CHOOSE THE CHART PARAMETERS, THEN CALL chart TO DRAW IT WITH data
		var chart = bubbleChart().width(720).height(500);

		d3.select('svg').data(data).call(chart);
	});
	</script>
</body>
</html>

medium_january.csv