How can i draw multiple shapes on d3 javascript - javascript

Hi i want to demonstrate my dots on a map by 2 shapes: circle and rectangle. i use filter to separate my data into 2 parts: equal to 1 or equal to 0. But i just can demonstrate circles.
I just can demonstrate 1 rectangle althought my data has many rows that satify the condition. I see that the coordinate for rectangle is in my data's last row. Maybe the filter make the file's pointer go to last place? What wrong? Can you guys point out my problem?
My code
// draw circle dots
svg.selectAll(".dot")
.data(data).enter()
.append("circle")
.filter(function(d) { return d.class ==0})
.attr("class", "dot")
.attr("r", 3.5)
.attr("cx", xMap)
.attr("cy", yMap)
.style("fill", function(d) { return color(cValue(d));})
.on("mouseover", function(d) {
tooltip.transition()
.duration(200)
.style("opacity", .9);
tooltip.html(d.class1 + "<br/> (" + xValue(d)
+ ", " + yValue(d) + ")")
.style("left", (d3.event.pageX + 5) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
tooltip.transition()
.duration(500)
.style("opacity", 0);
});
//Draw rectangle dot
svg.selectAll(".rec")
.data(data).enter().append("rect")
.filter(function(d) { return d.class ==1})
.attr("class", "rec")
.attr("cx", xMap)
.attr("cy", yMap)
.attr("height", 30)
.attr("width", 30)
.style("fill", function(d) { return color(cValue(d));})
.on("mouseover", function(d) {
tooltip.transition()
.duration(200)
.style("opacity", .9);
tooltip.html(d.class1 + "<br/> (" + xValue(d)
+ ", " + yValue(d) + ")")
.style("left", (d3.event.pageX + 5) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
tooltip.transition()
.duration(500)
.style("opacity", 0);
});
my data.csv
tree house class class1
0.12804 0.25792 0 B
0.14595 0.33472 0 B
0.23117 0.48474 0 C
0.088995 0.25033 0 B
0.12231 0.40285 0 C
0.14204 0.28154 0 B
1.0284 0.02235 0 A
0.023085 0.38046 0 B
0.074772 0.43056 0 C
-0.046482 0.19074 0 B
0.10548 0.11783 0 B
0.21276 0.20738 0 B
-0.064076 0.089246 0 A
-0.029258 0.48967 0 C
0.1851 0.20177 0 B
0.029084 0.11508 1 B
0.10206 0.27658 1 B
0.11558 0.20622 1 B
0.15363 0.29544 1 B
-0.40068 0.94515 1 E
0.057977 0.26218 1 B
0.089279 0.39531 1 B

Related

Javascript D3 position tooltip to chart

I try to build a tooltip like it is explained here:
D3 Tooltip Example
But I want to have a div as a tooltip.
Now I have the problem to position the div to the chat line.
My code:
var div = d3.select("#chart").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
var path = svg.append("path") // Add the line path.
.data(data)
.attr("class", "line")
.attr("d", line(data));
var focus = svg.append("g")
.attr("class", "focus")
.style("display", "none");
focus.append("text")
.attr("x", 9)
.attr("dy", ".35em");
svg.append("rect")
.attr("class", "overlay")
.attr("width", width)
.attr("height", height)
.on("mouseover", function() {
focus.style("display", null);
})
.on("mouseout", function(d) {
div.transition()
.duration(50)
.style("opacity", 1e-6);
})
.on("mousemove", mousemove);
function mousemove() {
var x0 = x.invert(d3.mouse(this)[0]),
i = bisectDate(data, x0, 1),
d0 = data[i - 1],
d1 = data[i],
d = x0 - d0.date > d1.date - x0 ? d1 : d0;
//move focus around
focus.attr("transform", "translate(" + x(d.date) + "," + y(d.equity) + ")");
div.transition()
.duration(50)
.style("opacity", .9);
div.html("<strong><table><tr><th>Datum: </th><th>" + formatTime(d.date) + "</th></tr><tr><th>Equity:</th><th>" + Euro(d.equity) + "</th></tr></table></strong>")
// .style("left", (d3.event.pageX) + "px")
// .style("top", (d3.event.pageY - 1100) + "px");
;
}
The full example on Fiddle
Is it possible to position the div relatively to the svg line, where the mouse is?
Changing the div position using left and top is best for HTML tooltips: https://jsfiddle.net/da3nx51L/
div.transition()
.duration(50)
.style('left', d3.event.clientX + "px")
.style('top', d3.event.clientY + "px")
.style('display', 'inline-block')
.style("opacity", .9);
uncomment the last two lines, and remove the -1100 from the top
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY) + "px");

d3.js an Inverse bubble chart

I am interested in creating something like this. Usually we see people drawing a bubble - I am keen to draw the space to represent the bubble. I would perhaps place this mask/chart in a shared component -- that is conjoined only by a background image -- so maybe embed this in a bootstrap part like col-md-8.
I've added the the subtraction mask -- and some label/pointer stuff - but its not rendering.
http://jsfiddle.net/NYEaX/1525/
var data = [{
"label": "My Property Value over 3 yrs.",
"value": "148",
"direction": "up"
}]
so the json for this may be something like
$(document).ready(function() {
function maskMaker(el) {
var backcolor = $(el).data("color");
var backopacity = $(el).data("opacity");
// Set the main elements for the series chart
var svgroot = d3.select($(el)[0]).append("svg");
var mask = svgroot
.append("defs")
.append("mask")
.attr("id", "myMask");
mask.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", "1200px")
.attr("height", 500)
.style("fill", "white")
.style("opacity", backopacity);
mask.append("circle")
.attr("cx", 550)
.attr("cy", 250)
.attr("r", 150);
var data = [{
label: "text",
x: 222,
y: 222
}]
//__labels
var labels = mask.append("g")
.attr("class", "labels")
//__ enter
var labels = labels.selectAll("text")
.data(data);
labels.enter()
.append("text")
.attr("text-anchor", "middle")
//__ update
labels
.attr("x", function(d) {
return d.x;
})
.attr("y", function(d) {
return d.y;
})
.text(function(d) {
return d.label;
})
.each(function(d) {
var bbox = this.getBBox();
d.sx = d.x - bbox.width / 2 - 2;
d.ox = d.x + bbox.width / 2 + 2;
d.sy = d.oy = d.y + 5;
})
.transition()
.duration(300)
labels
.transition()
.duration(300)
//__ exit
labels.exit().remove();
//__labels
//__labels
//__pointers
var pointers = mask.append("g")
.attr("class", "pointers")
pointers.append("defs").append("marker")
.attr("id", "circ")
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.attr("refX", 3)
.attr("refY", 3)
.append("circle")
.attr("cx", 3)
.attr("cy", 3)
.attr("r", 3);
var pointers = pointers.selectAll("path.pointer")
.data(data);
//__ enter
pointers.enter()
.append("path")
.attr("class", "pointer")
.style("fill", "none")
.style("stroke", "black")
.attr("marker-end", "url(#circ)");
//__ update
pointers
.attr("d", function(d) {
if (d.cx > d.ox) {
return "M" + d.sx + "," + d.sy + "L" + d.ox + "," + d.oy + " " + d.cx + "," + d.cy;
} else {
return "M" + d.ox + "," + d.oy + "L" + d.sx + "," + d.sy + " " + d.cx + "," + d.cy;
}
})
.transition()
.duration(300)
pointers
.transition()
.duration(300)
//__ exit
pointers.exit().remove();
//__pointers
var svg = svgroot
.attr("class", "series")
.attr("width", "1200px")
.attr("height", "500px")
.append("g")
.attr("transform", "translate(0,0)")
var rect = svg
.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", "750px")
.attr("height", 500)
.attr("mask", "url(#myMask)")
.style("fill", backcolor);
}
//var el = $(".mask"); //selector
$('[data-role="mask"]').each(function(index) {
console.log("test")
maskMaker(this);
});
});
latest answer
http://jsfiddle.net/NYEaX/1535/
You need to do several things:
In SVG DOM have the label and the pointer after the rectangle with the mask (or the rectangle itself before them). This will make them topmost. There is no z-index in SVG.
Add a declaration of the marker to the same 'defs' node at the beginning of SVG
Set pointer target values d.cx and d.cy (in the example below I set them to ordinary values)
Implement enter-update-exit pattern differently. In your example code with comments '__ update' will only be executed for existing elements in the selection, whereas it is empty on first run. See https://bl.ocks.org/mbostock/3808218 on how to merge operations on just added elements and already existing ones.
labels.enter()
.append("text")
.attr("text-anchor", "middle")
//__ update
//labels
.attr("x", function(d) {
return d.x;
})
...
A working example here: http://jsfiddle.net/NYEaX/1528/

D3 js selectAll each doesn't iterate

I am trying to implement the FishEye lens (Cartesian) in my scatterplot.
I am trying to follow this approach, but apparently my selector already fails.
I have my FishEye defined as
var fisheye = d3.fisheye.circular().radius(120);
svg.on("mousemove", function() {
fisheye.focus(d3.mouse(this));
console.log("here " + points.selectAll("circle").length);
points.selectAll("circle").each(function(d) {
console.log("aaa");
d.fisheye = fisheye(d);
/*points.selectAll("circle")
.each(function(d) {
console.log("???");
this.attr("cx", function(d) { return d.fisheye.x; })
this.attr("cy", function(d) { return d.fisheye.y; })
this.attr("r", function(d) { console.log("hype"); return 10; });
}); */
});
});
and my points is defined as
points = svg.append("g")
.attr("class", "point")
.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) { // Set the x position using the x-scale
return x(d.x);
})
.attr("cy", function(d) { // Set the y position using the y-scale
return y(d.y);
})
.attr("r", 5) // Set the radius of every point to 5
.on("mouseover", function(d) { // On mouse over show and set the tooltip
if(!isBrushing){
tooltip.transition()
.duration(200)
.style("opacity", 0.9);
tooltip.html(d.symbol + "<br/> (" + parseFloat(x(d.x)).toFixed(4)
+ ", " + parseFloat(y(d.y)).toFixed(4) + ")")
.style("left", (d3.event.pageX + 5) + "px")
.style("top", (d3.event.pageY - 28) + "px");
}
})
.on("mouseout", function(d) { // on mouseout, hide the tooltip.
tooltip.transition()
.duration(500)
.style("opacity", 0);
});
The console.log with "here" is spamming when I am moving the mouse, and shows the correct amount. Hwoever, the each loop is never executed as I do not see "aaa". I have also tried to just use selectAll("circle") but that doesn't work either.
What am I doing wrong and how can I get my FishEye to work?

tooltip to show single element of group

I have a bar chart and I have text values at the end of each bar. What I would like to do is set text to invisible, and on mouseover I'd like it to show the number associated with the bar, at the magnitude of that bar. I'm having trouble figuring out how to do this in an efficient manner.
var tooltip = d3.select("body").append("div")
.style("position", "absolute")
.attr("class", "tooltip")
.style("opacity", 0);
var rect = svg.selectAll("rect")
.attr("class", "rect")
.data(dataset)
.enter()
.append("rect")
.attr("y", function(d,i){
return yScale(i);
})
.attr("x", 0)
.attr("width", function(d,i){
return xScale(d);
})
.attr("height", h/dataset.length)
.style("fill", function(d,i){
return colors(d);
})
.on("mouseover", function(d){
d3.select(this).style("opacity", 0.5)
tooltip.transition()
.duration(200)
.style("opacity", 1);
tooltip.html(d)
.style("left", d3.event.pageX + "px")
.style("top", d3.event.pageY + "px")
})
.on("mouseout", function(d){
d3.select(this).style("opacity", 1)
tooltip.transition()
.duration(500)
.style("opacity", 0)
});
Instead of mouseover and mouseout, I recommend doing it with $(this).hover and $(this).mousemove. Try something like this:
$(this).hover(
function() {
tooltip.transition()
.duration(200)
.style("opacity", 1)
// In order to trigger the magnitude or 'width' of the rect:
var rectWidth = $(this).attr("width");
}, function () {
tooltip.transition()
.duration(500)
.style("opacity", 1e-6)
}
);
/*$(this).mousemove(function(event) {
tooltip
.style("left", event.clientX + "px")
.style("top", event.clientY + "px")
});*/

d3 link static tooltip to points

I am trying to create a scatter plot and want to show tooltips by clicking on each point. The tooltip will disappear only when the point is deselected (clicked again). Currently, selected points will have a black border with r=8. Deselected points have no visible black border with r=4.5.
With the code below, when I deselect the points, the tooltip won't go away. How can I link the tooltip to each point? Thanks!
.on("click", function (d) {
var clickTooltip = d3.select("#data_visualization").append("div").attr("class", "click_tooltip");
if (d3.select(this).attr("r") < 8) {
d3.select(this)
.style("stroke", "black")
.style("stroke-width", "2px")
.style("stroke-opacity", 1)
.attr("r", 8);
clickTooltip.style("opacity", 0.62);
var clickTooltipText = "display";
clickTooltip.html(clickTooltipText)
.style("left", (d3.event.pageX + 20) + "px")
.style("top", (d3.event.pageY - 40) + "px");
} else {
d3.select(this)
.attr("r", 4.5)
.style("stroke-opacity", 0);
clickTooltip.style("opacity", 0);
}
}
You are appending a new element every time the click handler is called. Instead, create the element once and then select it:
var clickTooltip = d3.select("#data_visualization").append("div").attr("class", "click_tooltip");
.on("click", function (d) {
if (d3.select(this).attr("r") < 8) {
// etc
I figured it out. I am posting my answer here in case anyone is interested. The idea is to add an ID to each tooltip div. Later we can use JQuery to remove by ID.
.on("click", function (d) {
var pointID = "point_" + d3.select(this).attr("cx").replace(".", "_") + "_" + d3.select(this).attr("cy").replace(".", "_");
var clickTooltip = d3.select("#data_visualization")
.append("div")
.attr("id", pointID)
.attr("class", "click_tooltip");
if (d3.select(this).attr("r") < 8) {
d3.select(this)
.style("stroke", "black")
.style("stroke-width", "2px")
.style("stroke-opacity", 1)
.attr("r", 8);
clickTooltip.style("opacity", 0.62);
var clickTooltipText = "display";
clickTooltip.html(clickTooltipText)
.style("left", (d3.event.pageX + 20) + "px")
.style("top", (d3.event.pageY - 40) + "px");
} else {
d3.select(this)
.attr("r", 4.5)
.style("stroke-opacity", 0);
d3.select("#" + pointID).remove();
}
}

Categories

Resources