Want to make a plot with the average values of HR and avg. Looked it up in the documentation, but it seems i cannot get the average command to work :(
Can anybody spot my stupid mistake ?
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("bbd3.tsv", function (data) {
var myChart = new dimple.chart(svg, data);
myChart.setBounds(75, 30, 490, 330)
myChart.addMeasureAxis("x", "HR");
myChart.addMeasureAxis("y", "avg");
myChart.aggregate = dimple.aggregateMethod.avg;
myChart.addSeries( ["handedness"], dimple.plot.bubble);
myChart.addLegend(180, 10, 360, 20, "right");
myChart.draw();
Aggregation applies to the series not the chart. So you can rewrite like this:
var mySeries = myChart.addSeries( ["handedness"], dimple.plot.bubble);
mySeries.aggregate = dimple.aggregateMethod.avg;
Related
I have quite a long period of observations (tornadoes) 800-2016 (about 2000 inputs). To visualize them on one bar chart I use mouseZoomable (true) function for DC.js but it starts to mess filtering: User can't properly select interval on the chart, it slips all the time and seems as asynchronized.
Sorry I am very new to D3 and DC.js and couldn't find an answer.
Here is my code:
var ndx = crossfilter(records);
var YearDim = ndx.dimension(function(d) { return d["Year"]; });
var numRecordsByYear = YearDim.group();
var minYear = YearDim.bottom(1)[0]["Year"];
var maxYear = YearDim.top(1)[0]["Year"];
var timeChart = dc.barChart("#time-chart");
timeChart
.width(600)
.height(140)
.margins({top: 10, right: 50, bottom: 40, left: 40})
.dimension(YearDim)
.group(numRecordsByYear)
.transitionDuration(500)
.mouseZoomable(true)
.x(d3.time.scale().domain([minYear, maxYear]))
.zoomOutRestrict([true])
.elasticY(true)
Will be very gratefull for helping or suggesting another way to visualize long and irregular time interval.
I'm using DimpleJS to render a BubblePlot. My data looks like this:
[
{type: "A", name:"First", x:1, y:200},
{type: "A", name:"Second", x:30, y:10},
{type: "B", name:"Third", x:50, y:120},
{type: "B", name:"Fifth", x:90, y:100}
]
The graph is created with:
var myChart = new dimple.chart(svg, chartData);
myChart.setBounds(50, 30, 370, 230);
var x = myChart.addMeasureAxis("x", "x");
var y = myChart.addMeasureAxis("y", "y");
var series = myChart.addSeries(["type", "name"], dimple.plot.bubble);
myChart.addLegend(10, 10, 360, 20, "right");
myChart.draw();
This nearly does what I want, with all the data available in the tooltips etc. But coloring is based on both typeand name.
Also unfortunately the legend also picks up all the values from the name field where I'd prefer to just see the type values within the legend.
I also tried to the use the addColorAxismethod like this:
var c = myChart.addColorAxis("type");
var series = myChart.addSeries("name", dimple.plot.bubble);
But that renders black bubbles, shows "NaN" as type in the tooltips and putting that into a legend also doesn't seem to be possible.
Any suggestions are welcome!
Turns out that the order of arguments in the series is important.
This solved my problem:
var myChart = new dimple.chart(svg, chartData);
myChart.setBounds(50, 30, 370, 230);
var x = myChart.addMeasureAxis("x", "x");
var y = myChart.addMeasureAxis("y", "y");
var series = myChart.addSeries(["name","type"], dimple.plot.bubble);
myChart.addLegend(10, 10, 360, 20, "right");
myChart.draw();
I'm trying to change the default colour in Dimple.js, I want each bar to be red, I can change the colour by individually citing each entry in the series, but I can't seem to change the colour across the whole chart, once I set the buyerchartSeries to null.
var myChart = new dimple.chart(svg2_3, data);
myChart.setBounds(10, 15, "92%", "84%");
myChart.addMeasureAxis("x", "sum");
var y = myChart.addCategoryAxis("y", "service");
y.addOrderRule("sum");
y.hidden = true;
var buyerchartSeries = myChart.addSeries(null, dimple.plot.bar);
myChart.assignColor(null,"red")
myChart.draw();
Your solution is fine but if you also have some non-null series identifiers which you would like to colour separately it won't work. You can use assignColor but you need to assign to "All":
var myChart = new dimple.chart(svg2_3, data);
myChart.setBounds(10, 15, "92%", "84%");
myChart.addMeasureAxis("x", "sum");
var y = myChart.addCategoryAxis("y", "service");
y.addOrderRule("sum");
y.hidden = true;
var buyerchartSeries = myChart.addSeries(null, dimple.plot.bar);
// This is all I've changed
myChart.assignColor("All", "red");
myChart.draw();
I've found the answer... it might be an egregious hack, or it might be the best way to do this, (advice welcome).
Rather than assign a colour to a 'null' series, which obviously won't work, I've changed the defaultColor of the chart. If you only have one colour it has the correct effect of imposing a single colour on all the bars.
var myChart = new dimple.chart(svg3_1, dt);
myChart.setBounds(4, 20, "88%", "80%");
myChart.addMeasureAxis("x", "sum");
var y = myChart.addCategoryAxis("y", "supplier");
y.hidden = true;
supplierChartSeries = myChart.addSeries("supplier", dimple.plot.bar);
myChart.defaultColors = [
new dimple.color("#3498db", "#2980b9", 1), // blue
];
I've been using a little d3 and am now exploring dimple. I am trying to create some pie charts. However, I want the x-axis value to be a subset of the actual values.
Here's what I have:
var svg = dimple.newSvg("body", 800, 600);
//data
var data = [{"Inst":"Two", "Finaid":"Grant", "Value":50},
{"Inst":"Two","Finaid":"None", "Value":10},
{"Inst":"Two","Finaid":"No", "Value": 30},
{"Inst":"One", "Finaid":"Grant", "Value":20},
{"Inst":"One","Finaid":"None", "Value":10},
{"Inst":"One","Finaid":"No", "Value": 30}];
//basic chart
var chart = new dimple.chart(svg, data);
console.log(data);
chart.setBounds(50,20,460,360)
chart.addCategoryAxis("y", "Inst")
chart.addMeasureAxis("x", "Value");
chart.addMeasureAxis("p", "Value");
chart.addMeasureAxis("z", "Value");
chart.addSeries("Finaid", dimple.plot.pie);
chart.addLegend(600,20,90,300, "left");
chart.draw();
So this works, but I want the x-axis value to only be the value of "Finaid":"Grant" something like chart.addMeasureAxis("x", {"Finaid":"Grant"}.Value);... although I realize that actual code does nothing.
Any suggestions? Thanks
Just filter it before plotting. In fact, dimple.js even offers a helpful function for just that.
var data = [{"Inst":"Two", "Finaid":"Grant", "Value":50},
{"Inst":"Two","Finaid":"None", "Value":10},
{"Inst":"Two","Finaid":"No", "Value": 30},
{"Inst":"One", "Finaid":"Grant", "Value":20},
{"Inst":"One","Finaid":"None", "Value":10},
{"Inst":"One","Finaid":"No", "Value": 30}];
var filteredData = dimple.filterData(data, "Finaid", "Grant");
// now make chart
var chart = new dimple.chart(svg, filteredData);
I'm trying to figure out how to get my legend to appear at the bottom of a chart but having no luck.
In the code below, since my chart has a height of 600, i figure i could simply add an offset of 600 for the Y coordinate and that would do the trick. Does not work however.
var svg = dimple.newSvg("#chart", 800, 600);
...
chart.addLegend(0, 600 + 40, 200, 10, "left");
Anyone know how to solve this either with dimple.js or d3.js? It would also be great if i did not have to hard code these values and instead could do something like this:
chart.addLegend(0, d3.select("#chart").height + 40, 200, 10, "left");
here is the documentation for addLegend for dimple.js:
https://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#addLegend
Your code should be Ok.
Please check js fiddle(http://jsfiddle.net/ch2187dd/)
var svg = dimple.newSvg("#chartContainer", 590, 540);
var myChart = new dimple.chart(svg, data);
myChart.setBounds(90, 35, 480, 325)
myChart.addCategoryAxis("x", ["date"]);
myChart.addCategoryAxis("y", "close");
myChart.addSeries("Price Tier", dimple.plot.bubble);
myChart.addLegend(90, 480, 330, 20, "left");
myChart.draw();