I'm working on a very basic bar plot with dimple.js. When I render in the browser, it shows only the axes and axis labels, but no bars. Any help appreciated. I am using python to create a localhost.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="main.css" rel="stylesheet">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v2.0.0.min.js"></script>
</head>
<body>
<h2> Rise of the Machines: R&D on Unmanned Aerial Aircrafts</h2>
<script src="index.js"></script>
</body>
</html>
index.js
function draw(data) {
/*
D3.js setup code
*/
var margin = 75;
var width = 1400 - margin;
var height = 600 - margin;
/* Find body tag, append svg, and add chart group tag*/
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin)
.attr("height", height + margin)
.append("g")
.attr("class","chart");
/*
Dimple.js Chart construction code
*/
var myChart = new dimple.chart(svg, data);
x = myChart.addCategoryAxis("x", "");
y = myChart.addMeasureAxis("y", "Share of Global Spending (%)");
myChart.addSeries(null, dimple.plot.bar);
myChart.draw();
};
d3.csv("data.csv", draw);
You'd not tell to dimple where to get the data:
x = myChart.addCategoryAxis("x", ""); //<---- X values
y = myChart.addMeasureAxis("y", "Share of Global Spending (%)"); // <--- Y values
example
var data = [
{ "Word":"Hello", "Awesomeness":2000 },
{ "Word":"World", "Awesomeness":3000 }
];
chart.addCategoryAxis("x", "Word");
chart.addMeasureAxis("y", "Awesomeness");
another example
var data = [
{ "data1":"Hello", "data2":2000 },
{ "data1":"World", "data2":3000 }
];
chart.addCategoryAxis("x", "data1");
chart.addMeasureAxis("y", "data2");
You must point to data origin, from csv column name. With your csv:
Xdata, Yvalue
1,10
2,20
3,30
4,20
Your code:
chart.addCategoryAxis("x", "Xdata");
chart.addMeasureAxis("y", "Yvalue");
On the dimple website, it seems to be recommended procedure to use .tsv (tab seperated values) as opposed to comma seperated values.
Here is a sample (vertical) bar chart code taken from the site
<html>
<div id="chartContainer">
<script src="/lib/d3.v3.4.8.js"></script>
<script src="http://dimplejs.org/dist/dimple.v2.2.0.min.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 510, 330)
myChart.addCategoryAxis("x", ["Price Tier", "Channel"]);
myChart.addMeasureAxis("y", "Unit Sales");
myChart.addSeries("Channel", dimple.plot.bar);
myChart.addLegend(65, 10, 510, 20, "right");
myChart.draw();
});
</script>
</div>
</html>
Hopefully, this will guide you in the right direction.
Related
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/aframe-animation-component#3.2.5/dist/aframe-
animation-component.min.js"></script>
<script src="https://unpkg.com/aframe-randomizer-components#3.0.2/dist/aframe-
randomizer-components.min.js"></script>
<script src="https://unpkg.com/aframe-entity-generator-component#3.0.1/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.
Trying to layer a geo-heatmap using simpleheat.js and D3.
Working off an example (https://bl.ocks.org/patricksurry/803a131d4c34fde54b9fbb074341daa5). I am Successful at drawing the map but not the points as heatmap. No error on console.log.
I get one rainbow colored blob (I overdid the radius) on the upper left corner next to the map.
Could not find many examples and documentation on simpleheat is scant. Would appreciate any insight into this.
Thank you.
<!DOCTYPE html>
<html>
<head>
<style>
#container svg, #container canvas {
position: absolute;
top: 0;
}
</style>
<meta charset="utf-8">
<title>D3 Map Example</title>
</head>
<body>
<div id= "container">
</div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script src = "node_modules/simpleheat/simpleheat.js"></script>
<script>
//Width and height
var w = 960;
var h = 600;
div = d3.select("#container")
mapLayer = div.append('svg')
.attr("id","map")
.attr("width",w)
.attr("height",h)
canvasLayer = div.append('canvas').attr('id', 'heatmap').attr('width', w).attr('height', h);
var canvas = canvasLayer.node(),
context = canvas.getContext("2d");
//Define map projection
var projection = d3.geoMercator()
.center([ -120, 37 ])
.translate([ w/2, h/2 ])
.scale([ 2600 ]);
//Define path generator
var path = d3.geoPath()
.projection(projection)
var svg = d3.select("#container")
.append("svg")
.attr("width", w)
.attr("height", h);
// read data in
d3.queue()
.defer(d3.json,"ca.json")
.defer(d3.csv, "heatCAN.csv")
.await(main)
function main (err, ca, heatCAN) {
console.log(heatCAN)
mapLayer
.append('svg')
.selectAll("path")
.data(ca.features)
.enter()
.append("path")
.attr("d",path)
.attr("stroke","#000000")
.attr("fill","#ffffff")
//add heatmap
simpleheat(canvas).data(heatCAN.map(x=>[x.LON,x.LAT,x.cMort_90d])).radius(100,100).draw(0.05);
}
</script>
</body>
</html>
I am running this below simple code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
</head>
<body>
<script type="text/javascript">
//Width and height
var w = 500;1
var h = 300;
//Define default path generator
var path = d3.geo.path();
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Load in GeoJSON data
d3.json("india.json", function(error,json) {
console.log(json);
//Bind data and create one path per GeoJSON feature
svg.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path);
});
</script>
</body>
</html>
When i run it, i am getting the blank web page without any error. india.json file is a valid json file, i verified it in http://jsonlint.com/
I am new to javascript. Any help would be greatly appreciated.
Thanks,
Finally, after many trails, i found the solution an it was problem with projection, so i have used the below code and it worked.
//Width and height
var w = 960
var h = 1000
//Define map projection
var projection = d3.geo.mercator()
.translate([w/2,h/2])
.scale(5000);
//Define path generator
var path = d3.geo.path()
.projection(projection);
I am trying to draw a huge (60k) number of (x, y) points on an HTML5 canvas and simulate streaming data points with D3.js in Chrome and Firefox, and finding that the browser freezes and crashes after about 10 seconds.
I am generating the data set with random values as follows:
var data = d3.range(60000).map(function() { return Math.random() * 500; });
Would it help to break generation of data into sections? I feel that this might be caused by trying to store such a large data set at one time as I have shown.
Is there any way that I can prevent this from happening? Such as drawing and saving smaller sections as tiled images?
Added code:
var margin = {top: 20, right: 20, bottom: 20, left: 40},
w = 100 - margin.left - margin.right,
h = 100 - margin.top - margin.bottom;
var canvas = d3.select("canvas")
.node();
var context = canvas.getContext('2d');
var scale = d3.scale.linear()
. range([0,w])
.domain([0,h]);
data = d3.range(60000).map(function(){return Math.random()*500});
data.forEach(function(d,i) {
context.strokeStyle="red";
context.lineWidth="1";
context.lineTo(scale(++k),scale(d));
context.stroke();
});
Since you are asking a completely different question in the comment section I thought of put it another answer.
Comments and working code inline.
var margin = {top: 20, right: 20, bottom: 20, left: 40},
w = 100 - margin.left - margin.right,
h = 100 - margin.top - margin.bottom;
var canvas = d3.select("canvas")
.node();
var context = canvas.getContext('2d');
var data = d3.range(11).map(function(){return Math.random()*10})
var x = d3.scale.linear().domain([0, 10]).range([0, 700]);
var y = d3.scale.linear().domain([0, 10]).range([10, 290]);
var line = d3.svg.line()
.interpolate("cardinal")
.x(function(d,i) {console.log(x(i));return x(i);})
.y(function(d) {return y(d);})
//making a dummy SVG
var path = d3.select("body").append("svg").append("path")
.attr("d", line(data))
.attr("stroke", "steelblue")
.attr("stroke-width", "2")
.attr("fill", "none").remove();
d3.select("body svg").remove();
//going from 0 to the paths total length and storing all the points
var points = [];
for(var i =0; i < path.node().getTotalLength(); i++){
points.push(path.node().getPointAtLength(i));//store point # that length
}
var id = window.setInterval(function(){
console.log("Doing")
var point = points.shift();//take each point
context.strokeStyle="red";
context.lineWidth="1";
context.lineTo(point.x,point.y);
context.stroke();
if(points.length <= 0){
console.log("Finished")
window.clearInterval(id);//clear the interval since the drawing is complete
}
}, 10)
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.10/d3.js"></script>
</head>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;">
</canvas>
<script src="script.js"></script>
</body>
</html>
Working code on Plunker.
The problem is here:
data.forEach(function(d,i) {
context.strokeStyle="red";
context.lineWidth="1";
context.lineTo(scale(++k),scale(d));
context.stroke();//this should be out of the for loop you should be doing it once not everytime
});
Something like this:
data.forEach(function(d,i) {
context.strokeStyle="red";
context.lineWidth="1";
var j = scale(d);
var m = scale(d++);
context.lineTo(j,m);
});
context.stroke();
Working code here
Hope this helps!
When I only have one or two data points, dimple js will repeat the same ticks. How do I make it not do that?
Example
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v2.1.2.min.js"></script>
</head>
<body>
<script type="text/javascript">
var svg = dimple.newSvg("body", 800, 600);
var data = [
{ "Word":"1/2/1990", "Awesomeness":2000 },
{ "Word":"1/1/1990", "Awesomeness":3000 }
];
var chart = new dimple.chart(svg, data);
chart.addTimeAxis("x", "Word");
chart.addMeasureAxis("y", "Awesomeness");
chart.addSeries(null, dimple.plot.line);
chart.draw();
</script>
</body>
Typically you'll set axis.ticks but when using a time axis you'll want to set timePeriod and timeInterval. This will set one tick mark per day in the data set.
var xAxis = chart.addTimeAxis("x", "Word");
xAxis.timePeriod = d3.time.days;
xAxis.timeInterval = 1;
xAxis.tickFormat = "%A";
chart.addMeasureAxis("y", "Awesomeness");
chart.addSeries(null, dimple.plot.line);
chart.draw();