I am mapping tens of thousands of circles to a d3.js chart, with varying radii. Here is a screenshot (of a subset of the data, which can be filtered):
There is an overlaying voronoi diagram which is used to display a custom pop-up (with a bit of detail) when a user rolls over each circle. The voronoi points ("positions") have a random number assigned as the decimal, to prevent the issue of overlapping exactly similar data points. Here is a screenshot with the voronoi overlap:
However, the pop-up tooltip only displays when mousing over some of the data points, and not others.
I am using d3.js, v2 (not v3), and the code is at https://github.com/shaunjacobsen/divvy_savestime, with my progress so far visible at http://sjacobsen.com/testing/2015/bubble-chart.html. (It's difficult to append the large json datasets in jsfiddle).
Do you have any advice or guidance for how to get the pop-up to appear over each circle on mouseover? I greatly appreciate it.
Edit: I should note that this is based on http://ta.virot.me.s3-website-us-east-1.amazonaws.com/hubway/hubway-summary.html
AFAIK you use the voronoi diagram to show the tooltip? A better approach is a weighted voronoi with equalized areas for the circles.
Related
I am currently developing a visualization using D3.js where I am displaying the data in a force-directed graph. As data in JSON format has 6 different types of nodes so I want to display them in different shapes like circle, rectangle, square etc. I had gone through the following blogs
https://bl.ocks.org/mbostock/1062383
http://bl.ocks.org/eyaler/10586116
http://bl.ocks.org/FrissAnalytics/a63553129a896159c07b71dd3ede35d7
http://bl.ocks.org/fzyukio/563059b1bff8901dc3beaf1150934323
But I did not understand the logic of how did the append different shapes. I do not want to use symbols as I had tried them and they are too small were distorting my visualization. So Please let me know how can I display different shapes for my nodes.
I am working on a project where data points are visualized in the scatterplot using d3. Since it is a web application, the region is limited and a lot of points overlap. In total there are 20k points and I allow users zooming in with a brush (and its extent) on regions, but even when zoomed in there is still a huge overlap of points. An example of such a situation:
What are good approaches to still visualize underlying points, to enhance the view or perception of the points? I was thinking about maybe using transparency, but I do not know if that would do it.
It might be worthy to note that all points represent genes, so clustering them may not be very logical in terms of representation.
I would suggest trying d3's fisheye plug-in. It allows you to zoom and distort the scale with the mouse letting you zoom in on areas.
You can see an example of it used with a scatter/bubble chart lower on the page here: http://bost.ocks.org/mike/fisheye/
In addition, if you have overlap I would increase opacity, so you can see which points have lots of overlap vs. points that don't.
Here's an example graph with very clustered points that I created using both fisheye and opacity: http://crclayton.com/projects/fisheye/
It also allows you to hover over individual points to see a tooltip containing more details about them.
If the number of data points is of interest, then you could cluster the points (either on client/server side). You typically see this pattern if maps have too many markers (example cluster map).
Edit:
I am still not quite sure if I'm heading in the right direction. To visualize the quantity of points you could use a 3D visualization. Here is an idea taken from the Software Cities project:
You could basically render the position of the points on the plane and create vertical cylinders - the more points on the same spot, the higher the cylinder.
I'm trying to link two D3 plots so that selecting part of the histogram on the right, causes a certain scatter plot to display on the left.
This is my attempt.
My current question is why the right plot isn't rendering, which I think goes back to how to create and refer to multiple SVG tags in d3.
D3 has SVG controls for this type of situation. What you are looking for is a brush with context.
Here are the API docs:
https://github.com/mbostock/d3/wiki/SVG-Controls
And here are two great examples:
http://bl.ocks.org/mbostock/4063663
http://bl.ocks.org/mbostock/1667367
I'm using the google charts library to make some interactive scatter plots. And I cannot find is whether you can have symbols other than circles as "markers" ? As far as I can see it was possible with the previous obsolete version of google charts. But is it impossible with the current one ?
Scatter chart "playground":
https://code.google.com/apis/ajax/playground/?type=visualization#scatter_chart
Currently (as of July, 2013) there is no way to do this within the chart options. You have a choice between circles and no markers, and that's it.
You could go through the code and change the SVG using javascript, changing the circles to rectangles, and manipulating the coordinates appropriately (or drawing paths, or whatever you'd like). That's really the only way to do it.
Edited to add:
Additionally, you could set a fill for the circles themselves using javascript, and make the fill any shape you'd like.
You can do it with the help of image charts. You can change the color and shape of the markers using this.Refer this link. An example for the different shape markers
Click here to see this. For more google charts related queries take a look at this jqfaq.com
I am trying to achieve the following with javascript:
draw a scatter plot with many (~10,000) points
allow the user to draw a curved shape on top of the plot to select a region (I am open to exactly how the shape is designed: an ellipse would be fine, or a polygon, or a path defined by bezier curves)
get a list of the points inside the selected area and do something with them.
Obviously, it is step 2 that is causing the problem. I have previously used jqplot to something similar to the above using a rectangular selection, but it is vital for the purposes of this project that the user be able to select an elliptical region.
Can anybody give any hint as to which javascript library would allow this?
I know that you can create paths using Raphael. I would have though that the most difficult part of this would be the last, but I did find this (yes, I know it's VB, but it gives a basis that can be applied to JavaScript).