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).
Related
I've been trying to draw a network of streets. I used paths and images to perform this as you guys can see in the image :
I am also displaying labels on top of the images with some information about them. The problem is that the data source sometimes has overlapping traffic lights in the same coordinate. And as a result of that the labels get overlapped. I was wondering what's the best way to handle those overlaps in d3 v5? I've found some similar questions but none of them seem to work in d3 version 5.
This is one question that I looked at : D3js: Automatic labels placement to avoid overlaps? (force repulsion)
I guess I am looking for something similar, but something that would work with version 5?
I've been struggling the past few days to optimize performance on a D3 map, especially on mobile. I am using SVG transforms for zooming and panning but made the following observation: the overkill comes from path strokes used to fake spacing between countries.
I have uploaded a pair of sample maps for comparison:
http://www.nicksotiriadis.gr/d3/d3-map-1.html
http://www.nicksotiriadis.gr/d3/d3-map-2.html
The only difference between the two maps is the stroke path along the country paths, and the difference in performance is even noticeable on desktop devices - but more obvious on mobile. Removing the path strokes makes mobile performance a breeze..
I tried all kinds of svg stroke shape-rendering options without significant results.
Now to the question. Is there any way to remove a thin border from each country to fake the spacing between countries instead of using a stroke?
If anyone else has a different suggestion I'd love to hear it!
Update: Attaching explanation photo.
What I have drawn is this. The red arrow points to the country joints. When adding a stroke in a color same as the background to the country paths (here depicted in dark grey color) it creates the sense that the countries are seprated - however this adds a serious performance hit on mobile devices. What I am looking for is somehow re-shape the countries paths so that their borderlines are where the blue arrow points, but without having a stroke.
Update 2: People seem not to be able to understand what I am looking for, so I am updating this in order to make the question even clearer.
Let's assume that the original countries paths are shown on the left of this image. What I am looking for is a way that I can somehow 'contract' the paths inwards so that the newly created paths shown in red, leave enough empty space between them that will 'emulate' a stroke between them.
Doing this, will leave no use to having an extra layer of strokes, thus gain performance from only using paths instead of paths+strokes.
Update 2: Hello again, I seem to have found a half-solution to my problem. I managed to extract the topojson to shapefile, edit the shapefile the way I want (used a program named OpenJump), but the conversion takes away all the topojson properties I need - id, country name, so I can't convert back to the original topojson.
Does anyone have any suggestions?
D3 has a thing just for that: topojson.mesh() (see documentation). The idea is that since most countries share borders, there's no need to draw the shared borders twice. If you can draw each border only once, you get as much as 80% reduction in the number of strokes you have to draw. The mesh method does the javascript processing to turn a bunch of closed shapes (countries) into the multiline path of just the borders between them. You can then draw that multiline path into a single <path> object that you position on top of the fills.
The mesh looks like this.
Here's another example.
Finally found the answer. This radically improves d3 map performance!
1) I got my topojson file and extracted to shapefile using mapshaper.org. This gives 3 files: .shp, .shx, .dbf . From what I realized the .dbf file holds all the TopoJSON properties/attributes.
2) Opened the .shp shape file to OpenJUMP http://www.openjump.org/ - Which automatically imports the .dbf file as well.
3) I selected the countries layer and went to Tools > Analysis > Buffer.
4) Checked the Update geometry in source layer box so that the geometry is edited without losing the rest of the attributes/properties and added a negative Fixed Distance -0.1. This shrinked all the country geometries to the result I was looking for.
5) Saved Dataset as ESRI Shapefile
6) Reimported BOTH .shp and .dbf that were produced from OpenJUMP back to mapshaper.org - careful, BOTH files.
7) Exported as TopoJSON. Contains new shape and all original properties/attributes!
The following link has been updated with the new produced map; we have a 'bordered' look without the need of strokes.
http://v7.nicksotiriadis.gr/d3/d3-map-1.html
Compare the performance to this link that has the original shapes + stroke. Please try on mobile to see the performance difference!
http://v7.nicksotiriadis.gr/d3/d3-map-2.html
Also, here is the updated world map TopoJSON file in case someone wants some extra performance! :D
http://v7.nicksotiriadis.gr/d3/js/world-topo-bordered.json
There might be a couple of reasons of this behaviour (on my computer, everything is working fine at the same speed ):
Browser
Which browser do you use ? On Chrome, your exemples are working perfectly.
TopoJson
eg. previous answer.
Animation
You are launching the animation when the page is loading. You might want to add a delay (animation().delay(in ms)). There is also a function in D3: queue(), https://github.com/mbostock/queue which load the data before launching a function.
--
If none of this change your problem, and if you want it to work fine on mobile, you can try to mix D3 and Leaflet (map for mobiles), which is great in term of performance by loading tiles.
One example:
http://bl.ocks.org/zross/6a31f4ef9e778d94c204
Hope it helps
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.
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'm looking for a javascript charting library which would allow me to build an area chart with an ability to hover the portion between the two adjoining points on the graph curve. Basically like this:
Also as seen on this sample it would be really nice to smooth out the lines between points (use bezier curves instead regular straight lines).
Any help deeply appreciated.
Like #Duniyandn suggested, you can create two series and create rules about what to do with them on mouse interaction.
If you wanted a static section of red you could do it like this. e.g. http://jsfiddle.net/qXbsu/
But if you we're trying to have the highlighted section move with the mouse you could do something like this: http://jsfiddle.net/VuePw/2/#run though the matching of the smooth curves wouldn't be possible.
I use the tooltip formatter function to accomplish both of these because it's an easy proxy for a mousemove callback, not because it's the best way to do it.