DimpleJS legend limited to part of the series - d3.js

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();

Related

Area chart - start filling from non zero y value

I am trying to create an area chart that looks like this where I am using bars:
var trace1 = {
x: ['2013-10-04 9:00:00', '2013-10-04 9:30:00', '2013-10-04 10:00:00', '2013-10-04 11:00:00', '2013-10-04 11:30:00', '2013-10-04 12:30:00'],
y: [20, 20, 10, 10, 20, 20],
type: 'bar',
base: [5,5,5,5,5,5],
mode: 'none'
};
var data = [trace1];
myDiv = document.getElementById('myDiv');
Plotly.newPlot(myDiv, data);
Pen
As you can see y axis starts from non zero value. Is it even possible?
Thanks
You can add this code to start y-axis 0
var layout = {
yaxis: {
rangemode: 'tozero' //or below
//range: [0, 25]
}
};
Plotly.newPlot(myDiv, data, layout);

D3 animate Leaflet polyline

I am trying to animmate Polyline using D3.
But it didn't work. Here is what I tried:
function drawPolyline(x1,y1,x2,y2, tooltip)
{
var arr = [];
arr.push(map.unproject([x1 , y1]));
arr.push(map.unproject([x2 , y2]));
var options ={color: 'green', weight: 3,opacity: 0.5, smoothFactor: 1 };
var polyline = new L.Polyline(arr, options);
polyline.addTo(map);
var label = new L.Label({offset: [-20, -20]});
label.setContent(tooltip);
label.setLatLng(polyline.getBounds().getCenter());
map.showLabel(label);
d3.select(polyline).transition()
.duration(350)
.attr({stroke: "rgb(0, 41, 255)" , fill: "rgb(0, 41, 255)"})
}
You're using d3.select on the L.Polyline instance, that won't work. It's not a SVG path element. The actual path element is stored in your L.Polyline instance as member property _path. Try this:
d3.select(polyline._path).transition().duration(350).attr('stroke', 'rgb(0, 41, 255)')

dimple d3 plot, average of the values, quick command fix

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;

Dimple Filter for X Value

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);

dimple.js dash line chart

How can draw series 2 below as a dashed line? If not something that can be done in dimple.js itself, how would i do this using d3.js?
<div id="chart1">
<script>
var svg1 = dimple.newSvg("#chart1", 600, 500);
var data1 = [[{x: '01/31/1998', y: 100.0}, {x: '02/28/1998', y: 110.0}, {x: '03/31/1998', y: 120.0}, {x: '04/30/1998', y: 130.0}],
[{x: '01/31/1998', y: 120.0}, {x: '02/28/1998', y: 130.0}, {x: '03/31/1998', y: 140.0}, {x: '04/30/1998', y: 150.0}]]
var chart1 = new dimple.chart(svg1);
chart1.setBounds(70, 30, 400, 300)
var xAxis = chart1.addTimeAxis("x", "x", "%m/%d/%Y", "%b %y");
xAxis.title="Date"
var yAxis = chart1.addMeasureAxis("y", "y");
yAxis.title = "Price"
s1 = chart1.addSeries("Series1", dimple.plot.line, [xAxis, yAxis]);
s1.data = data1[0]
s2 = chart1.addSeries("Series2", dimple.plot.line, [xAxis, yAxis]);
s2.data = data1[1]
myLegend1 = chart1.addLegend(510, 100,60, 200, "Right");
chart1.draw();
</script>
</div>
You can access the shapes after calling the draw method. They will be classed according to their value, then you can do what you like with a bit of d3. Here's how to make the second series in your case dashed:
svg1.selectAll("path.dimple-series2").style("stroke-dasharray", "2");
NB. The class is dimple-series2 because it's named Series2 not because of it's position. If you have a more complicated series name you might need to inspect the line to determine which class to use. for example My Awesome Series would be classed as "dimple-my-awesome-series". If you have a single series with multiple lines then series names and values are added as classes so you can grab whichever you need.

Resources