Skip to content

Instantly share code, notes, and snippets.

@etra0
Created September 24, 2018 03:02
Show Gist options
  • Save etra0/4474e2acbf66b924cd893516066532cd to your computer and use it in GitHub Desktop.
Save etra0/4474e2acbf66b924cd893516066532cd to your computer and use it in GitHub Desktop.
demo final stgo
license: gpl-3.0
width: 900
height: 900
scrolling: no
border: no
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
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);
}
<!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>
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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment