el-beeswarm
Version:
<div style="display: flex; padding: 1rem; flex-direction: column; align-items: center; justify-content: center; height: 100vh; text-align: center; display: flex;
299 lines (280 loc) • 8.72 kB
HTML
<!DOCTYPE html>
<html lang="en" style="width: 100%; height: 100%">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="UTF-8" />
<title>Title</title>
<!-- <script src="../dist/bundle.js"></script> -->
<script src="http://localhost:8080/bundle.js"></script>
<script src="https://d3js.org/d3.v7.min.js"></script>
<link rel="stylesheet" type="text/css" href="../src/styles/main.css"></link>
</head>
<body>
<style>
.tooltip {
position: absolute;
background-color: white;
border: 1px solid gray;
border-radius: 5px;
padding: 5px;
font-size: 12px;
}
</style>
<script>
function loadDataSet() {
const dataset = d3.csv("./dataset/carros_teste3.csv", function (data) {
return data;
});
return dataset;
}
window.onload = function () {
async function main() {
dataset = await loadDataSet();
const colors = [
"blue",
"green",
"red",
"orange",
"purple",
"yellow",
"cyan",
"magenta",
"lime",
"pink",
"teal",
"indigo",
"brown",
"silver",
"gold",
"olive",
"navy",
"maroon",
"aqua",
"coral",
"violet",
"orchid",
"turquoise",
"plum",
"khaki",
"salmon",
"sienna",
"crimson",
"slateblue",
"darkgreen",
];
const attr = [
"MARCA","COMBUSTIVEL","TURBO","NRPORTAS","TIPO","TRACAO","POSMOTOR","PESO","NRCILINDROS","POTENCIA","RPM","VALOR","ANO","ORIGEM"
];
console.log('interpolate color',d3.interpolateMagma)
// htmlElementId,data, xType, yType, xLabel, yLabel, radius, width, height
beeswarm0 = new vis.BeeswarmPlot(
"canvas0",
dataset,
attr[7],
5,
(this.settings = {
title: "Beeswarm Basico Y",
color: "#069", //"grey",//"#069",
highlightColor: "#FF1122", //"#08E700",
opacity: 1,
notSelectedOpacity: 0.15,
size_type: "fit", //"absolute"
width: 700,
height: 400,
autoresize: true,
theme: "dark",
orientation: 'y',
colorAttr: attr[7],
interpolate: d3.interpolateGreens,
showLegend: true,
margin:{top: 30, right: 10, bottom: 60, left: 60 },
dotsType: 'hex',
// colors:['red','blue','pink',"green"]
})
);
beeswarm0.setTooltipLabels(
[attr[3],
attr[4]]);
beeswarm0.draw();
console.log(beeswarm0);
beeswarm = new vis.BeeswarmPlot(
"canvas1",
dataset,
attr[7],
5,
(this.settings = {
title: "Beeswarm Basico X",
color: "#069", //"grey",//"#069",
highlightColor: "#FF1122", //"#08E700",
opacity: 1,
notSelectedOpacity: 0.15,
size_type: "fit", //"absolute"
width: 700,
height: 400,
paddingTop: 25,
paddingLeft: 50,
paddingRight: 50,
paddingBottom: 30,
autoresize: true,
colorAttr: attr[7],
margin:{top: 30, right: 10, bottom: 60, left: 60 },
theme: "dark",
orientation: 'x',
showLegend: true,
interpolate: d3.interpolateMagma,
dotsType: 'hex',
// colors:['red','blue','pink',"green"]
})
);
beeswarm.setTooltipLabels(
[attr[3],
attr[4]]);
beeswarm.draw();
console.log(beeswarm);
beeswarm3 = new vis.BeeswarmGroup(
"canvas2",
dataset,
attr[4],
attr[10],
4,
(this.settings = {
color: "#069", //"grey",//"#069",
highlightColor: "#FF1122", //"#08E700",
opacity: 1,
notSelectedOpacity: 0.15,
size_type: "fit", //"absolute"
width: 800,
height: 600,
paddingTop: 25,
paddingLeft: 50,
paddingRight: 50,
paddingBottom: 30,
autoresize: true,
margin:{top: 30, right: 10, bottom: 60, left: 60 },
colorAttr: attr[1],
theme: "dark",
// colors:['red','blue','pink',"green"]
})
);
beeswarm3.setTooltipLabels(
[attr[4],
attr[1]]);
beeswarm3.draw();
console.log(beeswarm3);
beeswarm2 = new vis.BeeswarmGroup(
"canvas3",
dataset,
attr[2],
attr[4],
5,
(this.settings = {
color: "#069", //"grey",//"#069",
highlightColor: "#FF1122", //"#08E700",
opacity: 1,
notSelectedOpacity: 0.15,
size_type: "fit", //"absolute"
width: 800,
height: 600,
paddingTop: 25,
paddingLeft: 50,
paddingRight: 50,
paddingBottom: 30,
autoresize: true,
margin:{top: 30, right: 60, bottom: 60, left: 60 },
colorAttr: attr[4],
forceX:5,
forceY:5,
theme: "light",
// colors:['red','blue','pink',"green"]
})
);
beeswarm2.setTooltipLabels(
[attr[4],
attr[2]]);
beeswarm2.draw();
console.log(beeswarm2);
beeswarm4 = new vis.BeeswarmGroup(
"canvas4",
dataset,
attr[0],
attr[7],
4,
(this.settings = {
color: "#069", //"grey",//"#069",
highlightColor: "#FF1122", //"#08E700",
opacity: 1,
notSelectedOpacity: 0.15,
size_type: "fit", //"absolute"
width: 1800,
height: 800,
paddingTop: 25,
paddingLeft: 50,
paddingRight: 50,
paddingBottom: 30,
autoresize: true,
margin:{top: 30, right: 10, bottom: 60, left: 60 },
colorAttr: attr[0],
theme: "light",
dotsType: 'circle',
forceSteps: 1000,
showLegend: true,
})
);
beeswarm4.setTooltipLabels(
[attr[3],
attr[4]]);
beeswarm4.draw();
console.log(beeswarm4)
beeswarm5 = new vis.BeeswarmGroup(
"canvas5",
dataset,
attr[4],
attr[7],
8,
(this.settings = {
title: "GRÁFICO DE CARROS POR TIPO",
color: "#069", //"grey",//"#069",
opacity: 1,
notSelectedOpacity: 0.15,
size_type: "fit", //"absolute"
width: 800,
height: 800,
highlightColor: "#FFFFFF",
autoresize: true,
margin:{top: 30, right: 10, bottom: 60, left: 60 },
colorAttr: attr[4],
theme: "dark",
forceX: 5,
forceY:2,
dotsType: 'hex',
showLegend: true,
colors: colors
})
);
beeswarm5.setTooltipLabels(attr);
beeswarm5.draw()
beeswarm5.dotGroup.on('mouseover',(d)=>{
beeswarm5.setTooltip(d.target);
beeswarm5.setHighlight(d.target);
})
beeswarm5.dotGroup.on('mouseout',(d)=>{
beeswarm5.setRemoverHighlight(d.target);
beeswarm5.setRemoveTooltip(d.target);
})
.on('click',(d)=>{
beeswarm5.setSelected(d.target);
})
}
main();
};
</script>
<div id="canvas0"></div>
<div id="canvas1"></div>
<div id="canvas2"></div>
<div id="canvas3"></div>
<div id="canvas4"></div>
<div id="canvas5"></div>
<div id="canvas6"></div>
</body>
</html>