How to have glowing effects on D3 circle geopoint - javascript

Been playing with D3 for a few days. I got a world map drawn, and some "events" with geo that are displaying on the map.
Each event is compsosed of longitude,latitude,date
The date ranges is from june 1st to August 31st.
When event are added to map as time progress, I have a plain circle. However, I would like to achieve a nice glowing effect, to emphasis the current geo point being an event. (example here : https://www.youtube.com/watch?v=ssbQ2PVxGng )
So far I have come with:
svg.append('svg:circle')
.attr('cx', coordinates[0])
.attr('cy', coordinates[1])
.attr('r', 4)
.transition('next', function() {
d3.select(this)
.duration(300)
.attr('r', 7)
.attr('fill', 'yellow')
.attr('fill-opacity', .3);
})
.attr('fill', 'orange');
But I have no luck so far.

Related

How do I customise doughnut chart using chart.js

I want to make chart.js like the following the example.
When I hover the chart, the Element transform scale up
How can I make it?
example Link:http://bl.ocks.org/erichoco/raw/6694616/
You can analyze the javascript code of your exemple.
I think that the function that doing this, is this one:
paths.enter()
.append('svg:path')
.attr('d', arc)
.style('fill', function(d, i) {
return color(i);
})
.style('stroke', '#FFFFFF')
.on(eventObj)

d3.js v4: How to display an image after mouse click on a node

Still being rather inexperienced in using d3.js I have hit a road block.
Hoping anybody out there can help me.
I am trying to display a picture upon mouse click on a node in a graph.
Ideally, I'd like to click on several nodes and display images. Double click on a node should remove the image. And clicking on the background removes all displayed images. But one step at a time.
What I have done so far is:
Succeeded in using tooltips. I was also able to change the size of a circle node upon mouse clicking on it.
I used as toy project Mike Bostock's force-directed graph example: https://bl.ocks.org/mbostock/4062045 .
I am using d3.js v4
Based on an example on the web I was able to add pictures to all nodes:
Add different images for nodes in d3 v4 network graph
I tried to tailor this example to my needs. First I added:
var defs = svg.append('defs');
Further more:
var node = svg.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(graph.nodes)
.enter()
.append("circle")
.attr("r", 5)
.attr("fill", function(d) { return color(d.group); })
.call(node_drag)
.on("click", function(d){
defs.append("pattern")
.attr("x", 0)
.attr("y", 0)
.attr("width", 12)
.attr("height", 12)
.append("image")
.attr("xlink:href", 'https://assets-cdn.github.com/images/modules/open_graph/github-octocat.png')
.attr("width", 12)
.attr("height", 12)
.attr("x", 0)
.attr("y", 0);
})
In my browser the html indicates that the image is added:
But the image is not showing in the browser.
At this point I am turning to you and hope for some hints how I can accomplish displaying an image as node upon clicking with my mouse cursor on it.
Any input is highly appreciated,
Markus
Your inspector is showing that the image was appended to the pattern, but it was never linked to the circle element.
Instead of appending the pattern to the defs inside the click function, you should just append the pattern with a given ID...
var defs = svg.append('defs');
defs.append("pattern")
.attr("x", 0)
.attr("y", 0)
.attr("id", "myPattern")//ID here
.attr("width", 12)
.attr("height", 12)
.append("image")
.attr("xlink:href", 'https://assets-cdn.github.com/images/modules/open_graph/github-octocat.png')
.attr("width", 12)
.attr("height", 12)
.attr("x", 0)
.attr("y", 0);
... and then, inside the click, just change the fill of the circle according to that ID:
.on("click", function() {
d3.select(this).attr("fill", "url(#myPattern)")
})
Here is Bostock's bl.ocks with those changes (I made the circles bigger so you can better see the image): https://bl.ocks.org/anonymous/0e653b6d21c8d57afa234d5d1765efe0/78ba15e533a2b8f8e6575a30d97b27d156ce2faf

d3 how to add a point to a chart using its coordinate space

I have a line-chart created with d3.js which shows two intersecting graphs (series of data-points). The intersection position gets calculated via javascript by using a lineIntersection-Algorithm and returns an x/y-object. I would like to create a circle at this position or a vertical line to show the break-even which gets visualized with this intersection.
Using d3 I wrote the following function to add a svg-circle to the chart:
d3.select('.nv-lineChart').append('circle')
.attr("cx", intersection.x)
.attr("cy", intersection.y)
.attr("r", 5.5)
.style("fill", "white")
.style("stroke", "black");
The problem is: the intersection coordinates need to be applied to the line-chart's coordinate-space.
I have no real clue how to do that - the d3 documentation is not really helpful for this.
Does anyone have a solution for this?

d3 click handler not working on leaflet map layer

Good evening.
I've added a series of d3 points to a leaflet map, and then wanted to use click handlers on those points to drive another panel. But I don't seem to be able to get the handler to pick up. Why?
You can see the file so far:
http://jsbin.com/bewudenide/edit?html,output
The code that generates the circle points on a custom layer on leaflet.js:
var feature = g.selectAll("circle")
.data(collection)
.enter().append("circle")
.style("stroke", "black")
.style("opacity", .6)
.style("fill", "steelblue")
.attr("r", 10);
I thought it would be simple case of adding click handlers for the mouseover and click events thus:
feature.on("click", click);
function click(d) {
console.log(d.name);
}
And:
feature.on("mouseover", mouse_over);
function mouse_over(d) {
d3.select(this)
.transition()
.duration(500)
.style("background", "lightBlue")
.style("color", "white");
}
While the click function registers to console, I'm not clear why the mouse_over function doesn't change the style of the point. I was also expecting to see the pointer to change, but it doesn't.
Please excuse my lack of experience with d3, javascript or leaflet.
EDIT:
I now realise that I hadn't added some of the JSON used by the existing code. It looks like
[{
"index":1,"name":"Adderley Green Surgery","total":276266.2700000001},{
"index":2,"name":"Alton Surgery","total":416559.8999999998},{
"index":3,"name":"Apsley Surgery","total":1023757.89999999998}]
If you are using leaflet 1.0, I think the reason is that leaflet has set "pointer-event" as "none":
Figure showing SVG within leaflet
which makes the click event cannot be fired. So the solution is quite simple, just set "pointer-event" as "all" by using css, then it works! I have tried it by using leaflet 1.0.
pointer-events:
pointer-events description
The problem is that the style attributes are not valid for the svg element.
Try...
feature.on("mouseover", mouse_over);
function mouse_over(d) {
d3.select(this)
.transition()
.duration(500)
.style("fill", "lightBlue")
.style("stroke", "white");
}
Or...
feature.on("mouseover", mouse_over);
function mouse_over(d) {
d3.select(this)
.transition()
.duration(500)
.style({fill: "lightBlue", stroke: "white"});
}
Or...
feature.on("mouseover", mouse_over);
function mouse_over(d) {
d3.select(this)
.transition()
.duration(500)
.attr({fill: "lightBlue", stroke: "white"});
}

Unable to get drop-shadow on the bars

I am working on a bar chart and I need to get the chart to look like this:
Here is what I tried:
.attr("id", "drop-shadow")
.attr("height", "130%");
but it did not work.
jsfiddle
How do I fix this?
Try this fiddle.
Chart looks like that same as the image.
But i didn't do it adding a drop shadow.
Added ellipse before the bar being created and that gives the same effect as above.
svg.selectAll(".ellipse")
.data(data)
.enter()
.append("ellipse")
.attr("cx", function(d) { return x(d.age) + 30; })
.attr("cy", function(d) { return y(0); })
.attr("rx", 35)
.attr("ry", 5)
.style("fill", function(d) { return d.color2; })
This is very simple. You need to create a ellipse before the bar is created.
When we position the ellipse it acts like a drop shadow.
Sorry that i don't have time to get the contrasting colors of the bar. But you can amend it of course.
If you'd like to do it with a drop shadow.
Here's a link that requires a javascript library for the drop shadow of the svg elements.
Hope this helps.

Categories