As the title suggests, I am trying to convert a Stacked BarPlot from D3 (version 4) to Aframe (using the AR.js library).
The D3 example I am using can be found here:
https://www.d3-graph-gallery.com/graph/barplot_stacked_basicWide.html
When I run the code in the browser, I can see 4 boxes (squares), stacked on top of the other corresponding boxes, however in a weird, layered fashion. I believe this is due to my ‘scale’ and ‘position’ attributes which are incorrectly reading in the data and rendering like they should. Or perhaps it’s how I appended the “a-entity” and then “a-box” to my “a-scene”. Or perhaps it’s neither / both (?)
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src='https://aframe.io/releases/0.9.2/aframe.min.js'></script>
<script src="https://raw.githack.com/jeromeetienne/AR.js/master/aframe/build/aframe-
ar.min.js"></script>
<script src="https://raw.githack.com/donmccurdy/aframe-extras/master/dist/aframe-
extras.loaders.min.js"></script>
<script>
THREEx.ArToolkitContext.baseURL =
'https://raw.githack.com/jeromeetienne/ar.js/master/three.js/'
</script>
<script src="https://unpkg.com/[email protected]/dist/aframe-
animation-component.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-
randomizer-components.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-
entity-generator-component.min.js"></script>
<script src="https://rawgit.com/mayognaise/aframe-mouse-cursor-
component/master/dist/aframe-mouse-cursor-component.min.js"></script>
</head>
<body style="margin : 0px; overflow: hidden;">
<div id="data_by_age"></div>
<a-scene vr-mode-ui="enabled: false" embedded arjs='sourceType: webcam;
sourceWidth:1280; sourceHeight:960; displayWidth: 1280; displayHeight: 960;
debugUIEnabled: false;'>
<a-entity gps-entity-place="longitude: -73.766327; latitude: 41.032730;">
<a-cursor fuse="true" color="yellow"></a-cursor>
</a-entity>
<a-camera gps-camera rotation-reader></a-camera>
</a-scene>
<script type="text/javascript">
byAge();
function byAge() {
var scene = d3.select("a-scene");
d3.csv("../static/sample.csv", function(data) {
var subgroups = data.columns.slice(1)
var groups = d3.map(data, function(d){return(d.group)}).keys()
var color = d3.scaleOrdinal()
.domain(subgroups)
.range(['#011f4b','#03396c','#005b96', '#6497b1', '#b3cde0'])
var stackedData = d3.stack()
.keys(subgroups)
(data)
var data_scle = [];
var data_pos = [];
scene
.append("a-entity")
.selectAll("a-entity")
.data(stackedData)
.enter()
.append('a-entity')
.attr("fill", function(d) { return color(d.key); })
.selectAll("a-box")
.data(function(d) { return d; })
.enter().append("a-box")
.attr('rotation', '0 180 0')
.attr('scale', function (d,i) {
return d + " " + d + " " + d;
})
// .attr('scale', function (d,i) {
// var x = i * 10;
// var y = d;
// var z = d;
// data_scle[i] = {"x": x, "y": y, "z": z};
// return x+" "+y+" "+z;
// })
.attr('position', function(d,i) {
var x = i * 175;
// var y = 0;
var y = d;
var z = -500;
data_pos[i] = {"x": x, "y": y, "z": z};
return x+" "+y+" "+z;
})
})
};
</script>
</body>
</html>
Here is my csv file:
group, stronglyAgree, somewhatAgree, stronglyDisagree, notSureNoOpinion
eighteen, 21, 22, 11, 18, 28
thirtyfive, 33, 29, 11, 5, 22
fortyfive, 36, 23, 9, 8, 24
sixtyfive, 42, 24, 7, 10, 17
I’ve also seen github repos tailored specifically for making stacked bar chart components in Aframe, however I couldn’t seem to get it to work properly.
https://github.com/fran-aguilar/a-framedc/tree/master/src/components/barchartstack
Any help would be immensely appreciated.
