demo final stgo

.block

license: gpl-3.0
width: 900
height: 900
scrolling: no
border: no

data.csv

gistfile1.txt

x,y,z
2.0194819546454728,-0.11427667594832436,foo
-0.13019800589517563,0.2744129722521522,bar
-1.612435957857153,-0.1901971945955883,egg
-0.3934383756909314,1.067690340924134,bar
0.30640848803244963,0.7770798079136257,egg
0.40734476560853167,-0.6962970371116528,foo
0.04832507018050704,0.6581945094593132,egg
-2.455724640631823,0.09003981896795776,bar
-0.4875359832166861,-1.0301675789805154,bar
-0.2517288387479043,-0.09062019619660866,bar
0.5850024902930676,-0.18575636615071833,egg
0.2743988115398086,1.3927863707917636,foo
2.7496601514015704,0.5805148704621996,foo
0.08244569628598226,0.08077703299594059,bar
0.32220498222490707,0.6036654167238498,foo
1.259072670818276,-0.1504501965330326,span
-0.1411461396173495,0.1793591674462188,span
1.7826964462964254,-0.21089857187539948,bar
-1.296659457321093,0.0854236167891801,bar
-0.5290341762049067,-0.03814793222282897,foo
0.47681364274280635,-2.0142003126440198,bar
0.1988369580733132,0.23874792832906475,foo
-0.8063109401547579,-0.5348363037885648,foo
0.6079116537678976,-0.1936771104136543,foo
0.5480525091764434,-0.5259859644012593,egg
-0.1189402107661103,0.06401683868496708,egg
-0.37367543406651826,1.4912915284612172,bar
-1.873098095042625,0.031429507629020845,bar
-1.2094475612044313,-1.0144646564844595,bar
0.6754624087759775,0.21497198342251408,span
0.8197680441307542,-1.4589096666921761,egg
0.6261716582019065,2.522723242237222,span
2.0906295825766965,1.2461986795029132,span
0.5363559097884496,0.9829271997075925,egg
-0.6726652896145334,0.6013131313219372,foo
-0.6718042355114154,0.3491912744357937,foo
-0.6843235490906833,1.4413809992669797,span
-1.0078548011241737,-0.5718608097550532,bar
-0.19059794442096317,-1.369491987598348,egg
1.8737077806382392,0.10578321676804839,bar
0.1610537030127617,-0.486535926013534,egg
0.356867962839729,0.6225902510415949,foo
0.3475656596743513,0.09393924554277873,span
0.04786480065745748,-0.028001699369304047,foo
-0.14007710949062718,-0.02401958124669806,span
0.6904879534743422,1.907649164109613,bar
-0.6466535278544892,1.1476075443466844,foo
0.6424120251578971,-0.026309773132446094,foo
-0.6056890970603155,0.5101037124422519,egg
-1.9926653715779272,-0.25434208779666334,foo
-0.11230944177504718,0.3286907664202149,span
0.544455510820883,1.4338824873352423,span
-0.35125725897108323,-0.9337420045353144,bar
-0.1828280565801717,0.37371107862753783,egg
0.6911722893335565,-0.08630183908603335,egg
0.22964611616940803,0.02715343824404014,egg
-0.5163094912790567,-0.44789555617618526,egg
0.3196144563454317,-2.3295292608868032,foo
-3.461179823122928,0.05183936585352432,foo
1.8604343212185668,-0.764086377928454,bar
1.5283323156628694,-1.0353669179694507,egg
-1.1124432575680312,-0.6560716061115894,foo
-0.02556964924520228,0.06999157266287144,egg
-0.7061369763469931,1.6552444378886162,span
-0.7934823238291496,-0.9607594307495256,foo
-0.2223392231713872,0.6344038692788815,span
-1.3639295590551304,-0.014375580368591384,span
-2.275065956328156,1.1442892206327029,span
-0.4074612334323725,0.01689424424097232,bar
0.32534055306674914,1.1583634954132553,egg
0.013615410501502282,-0.08850926732327245,span
0.1964969208959604,0.41342920646311393,span
-2.0103593819079433,0.3405822760837423,egg
0.41084841369075165,0.5573348488962363,egg
-1.6859409187991157,0.3248033092495985,span
1.614537754485264,-1.776072051901012,span
-0.08580506957870764,0.9437549764957854,span
0.4197152092276743,0.22222721684503463,egg
-0.8102753279621441,-0.0786713124249491,foo
-0.4769663585773309,0.8782290712964681,span
-1.7706598277266707,0.7955496250457966,bar
0.4181464143872998,-0.3053124921839939,span
0.6665413772517919,0.5623781146925765,egg
0.9139248859928383,-1.5626419908392484,egg
-0.8248017267568265,0.2536674077255417,foo
1.1616121088917448,1.1478351587373499,foo
-0.22515839171019206,-0.649463294969792,egg
-0.9028611551145266,-0.8180154702789705,span
-0.35091817622394716,1.5666978285602393,egg
0.3288390046798927,0.6714441865972433,span
-0.9530231203600816,-0.277521593952316,foo
0.006184819378814992,-0.06837356439654006,egg
0.7965768089738438,-0.5153989968013754,foo
-0.08012859355231906,-0.014851813790388899,span
-0.7271481775073103,1.2807582731365137,span
-0.23866872173756074,-0.09912071043510876,bar
-0.468417337841113,0.9826817378603758,egg
-0.03930894352944393,-0.8799633151219556,foo
0.8595989497710582,-0.5084521612622053,bar
0.09659881012708113,-2.561018097478821,foo

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="author" content="">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>


	<h1>Grafico de prueba</h1>
	<div id="chart"></div>

	<input type="checkbox" name="categoria" value="foo" checked>foo
	<input type="checkbox" name="categoria" value="bar" checked>bar
	<input type="checkbox" name="categoria" value="egg" checked>egg
	<input type="checkbox" name="categoria" value="span" checked>span

	<script src="d3.js"></script>
	<script src="main.js"></script>
</body>

</html>



let COLORS = ['#1b9e77','#d95f02','#7570b3','#e7298a']
let classes = ['foo', 'bar', 'egg', 'span']
let colorMap = {}

for (let i = 0; i < classes.length; i++) {
	colorMap[classes[i]] = COLORS[i];
}

WIDTH = 800
HEIGHT = 800

// Variables para no dejar el gráfico justo al margen.
let paddingLeft = 50;
let paddingRight = 50;
let paddingBottom = 50;
let paddingTop = 10;

// Primero leemos los datos
// En D3v5 d3.csv retorna una promesa.
let allData;
d3.csv("/data.csv")
.then(data => {
	data.map(d => {
		d.x = +d.x
		d.y = +d.y
	});

	allData = data;

	render(data);
});

function render(data) {
	let svgCanvas = d3.select("#chart")
		.append('svg')
		.attr("width", WIDTH)
		.attr("height", HEIGHT);

	let canvas = svgCanvas.append('g')
		.classed("canvas", true)
		.attr("transform", `translate(${paddingLeft}, ${paddingTop})`);

	let xScale = d3.scaleLinear()
		.range([0, WIDTH - paddingRight - paddingLeft])
		.domain([d3.min(data, d => d.x), d3.max(data, d => d.x)]) 

	let yScale = d3.scaleLinear()
		.range([HEIGHT - paddingTop - paddingBottom, 0])
		.domain([d3.min(data, d => d.y), d3.max(data, d => d.y)]) 

	let yAxis = d3.axisLeft(yScale);

	let xAxis = d3.axisBottom(xScale);

	canvas.append("g")
		.classed("xaxis", true)
		.attr("transform", `translate(0, ${HEIGHT - paddingBottom - paddingTop})`)
		.call(xAxis)

	canvas.append("g")
		.classed("yaxis", true)
		.call(yAxis);

	canvas.selectAll('circle')
		.data(data)
		.enter()
			.append("circle")
			.attr("cx", d => xScale(d.x))
			.attr("cy", d => yScale(d.y))
			.attr("r", 10)
			.attr("fill", d => {
				return colorMap[d.z];
			})
		.on('mouseover', function(d) {
			d3.select(this).transition().attr("r", 20);
			let x = d3.select(this).attr("cx");
			let y = d3.select(this).attr("cy");
			canvas.append("text")
				.classed("temporal-hover", true)
				.attr("x", x)
				.attr("y", y)
				.attr("dy", 30)
				.text(`${(d.x).toFixed(2)}, ${(d.y).toFixed(2)}, ${d.z}`);
		})
		.on('mouseout', function(d) {
			d3.select(this).transition().attr("r", 10);
			canvas.selectAll(".temporal-hover")
				.remove();
		});
}

function getCurrentCategories() {
	let selected = []
	d3.selectAll('input[type="checkbox"]:checked').each(function() {
		selected.push(d3.select(this).node().value);
	})
	return selected;
}

d3.selectAll("input[type='checkbox']").on("click", filterData);

function filterData() {
	currentCategories = getCurrentCategories()

	if (currentCategories.length == 0) {
		d3.select(".canvas").style("opacity", 0)
		return
	} else {
		d3.select(".canvas").style("opacity", 1)
	}

	let data = allData.filter(d => currentCategories.indexOf(d.z) >= 0);

	let xScale = d3.scaleLinear()
		.range([0, WIDTH - paddingRight - paddingLeft])
		.domain([d3.min(data, d => d.x), d3.max(data, d => d.x)]) 

	let yScale = d3.scaleLinear()
		.range([HEIGHT - paddingTop - paddingBottom, 0])
		.domain([d3.min(data, d => d.y), d3.max(data, d => d.y)]) 

	let xAxis = d3.axisBottom(xScale);
	let yAxis = d3.axisLeft(yScale);

	console.log(d3.min(data, d => d.x));

	d3.selectAll("circle")
		.transition()
		.attr("cx", d => xScale(d.x))
		.attr("cy", d => yScale(d.y))
		.style("opacity", 1)
		.style("display", 'inline')
		.filter(d => currentCategories.indexOf(d.z) < 0)
		.duration(200)
		.style("opacity", 0)
		.on('end', function () { d3.select(this).style('display', 'none') });

	d3.selectAll("g.xaxis").transition().call(xAxis);
	d3.selectAll("g.yaxis").transition().call(yAxis);

}

index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="author" content="">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>


	<h1>Grafico de prueba</h1>
	<div id="chart"></div>

	<input type="checkbox" name="categoria" value="foo" checked>foo
	<input type="checkbox" name="categoria" value="bar" checked>bar
	<input type="checkbox" name="categoria" value="egg" checked>egg
	<input type="checkbox" name="categoria" value="span" checked>span

	<script src="https://d3js.org/d3.v5.min.js"></script>
	<script src="main.js"></script>
</body>

</html>

main.js

let COLORS = ['#1b9e77','#d95f02','#7570b3','#e7298a']
let classes = ['foo', 'bar', 'egg', 'span']
let colorMap = {}

for (let i = 0; i < classes.length; i++) {
	colorMap[classes[i]] = COLORS[i];
}

WIDTH = 800
HEIGHT = 800

// Variables para no dejar el gráfico justo al margen.
let paddingLeft = 50;
let paddingRight = 50;
let paddingBottom = 50;
let paddingTop = 10;

// Primero leemos los datos
// En D3v5 d3.csv retorna una promesa.
let allData;
d3.csv("data.csv")
.then(data => {
	data.map(d => {
		d.x = +d.x
		d.y = +d.y
	});

	allData = data;

	render(data);
});

function render(data) {
	let svgCanvas = d3.select("#chart")
		.append('svg')
		.attr("width", WIDTH)
		.attr("height", HEIGHT);

	let canvas = svgCanvas.append('g')
		.classed("canvas", true)
		.attr("transform", `translate(${paddingLeft}, ${paddingTop})`);

	let xScale = d3.scaleLinear()
		.range([0, WIDTH - paddingRight - paddingLeft])
		.domain([d3.min(data, d => d.x), d3.max(data, d => d.x)]) 

	let yScale = d3.scaleLinear()
		.range([HEIGHT - paddingTop - paddingBottom, 0])
		.domain([d3.min(data, d => d.y), d3.max(data, d => d.y)]) 

	let yAxis = d3.axisLeft(yScale);

	let xAxis = d3.axisBottom(xScale);

	canvas.append("g")
		.classed("xaxis", true)
		.attr("transform", `translate(0, ${HEIGHT - paddingBottom - paddingTop})`)
		.call(xAxis)

	canvas.append("g")
		.classed("yaxis", true)
		.call(yAxis);

	canvas.selectAll('circle')
		.data(data)
		.enter()
			.append("circle")
			.attr("cx", d => xScale(d.x))
			.attr("cy", d => yScale(d.y))
			.attr("r", 10)
			.attr("fill", d => {
				return colorMap[d.z];
			})
		.on('mouseover', function(d) {
			d3.select(this).transition().attr("r", 20);
			let x = d3.select(this).attr("cx");
			let y = d3.select(this).attr("cy");
			canvas.append("text")
				.classed("temporal-hover", true)
				.attr("x", x)
				.attr("y", y)
				.attr("dy", 30)
				.text(`${(d.x).toFixed(2)}, ${(d.y).toFixed(2)}, ${d.z}`);
		})
		.on('mouseout', function(d) {
			d3.select(this).transition().attr("r", 10);
			canvas.selectAll(".temporal-hover")
				.remove();
		});
}

function getCurrentCategories() {
	let selected = []
	d3.selectAll('input[type="checkbox"]:checked').each(function() {
		selected.push(d3.select(this).node().value);
	})
	return selected;
}

d3.selectAll("input[type='checkbox']").on("click", filterData);

function filterData() {
	currentCategories = getCurrentCategories()

	if (currentCategories.length == 0) {
		d3.select(".canvas").style("opacity", 0)
		return
	} else {
		d3.select(".canvas").style("opacity", 1)
	}

	let data = allData.filter(d => currentCategories.indexOf(d.z) >= 0);

	let xScale = d3.scaleLinear()
		.range([0, WIDTH - paddingRight - paddingLeft])
		.domain([d3.min(data, d => d.x), d3.max(data, d => d.x)]) 

	let yScale = d3.scaleLinear()
		.range([HEIGHT - paddingTop - paddingBottom, 0])
		.domain([d3.min(data, d => d.y), d3.max(data, d => d.y)]) 

	let xAxis = d3.axisBottom(xScale);
	let yAxis = d3.axisLeft(yScale);

	console.log(d3.min(data, d => d.x));

	d3.selectAll("circle")
		.transition()
		.attr("cx", d => xScale(d.x))
		.attr("cy", d => yScale(d.y))
		.style("opacity", 1)
		.style("display", 'inline')
		.filter(d => currentCategories.indexOf(d.z) < 0)
		.duration(200)
		.style("opacity", 0)
		.on('end', function () { d3.select(this).style('display', 'none') });

	d3.selectAll("g.xaxis").transition().call(xAxis);
	d3.selectAll("g.yaxis").transition().call(yAxis);

}