Creating a network map using D3 - javascript

Does anyone know how to create a map as shown below using D3?
https://www.khanacademy.org/exercisedashboard
I am wondering how one able to zoom in/ zoom out, then give nodes some symbol plus name and clicking on the nodes leads to some URL. Is it possible this kinda map with D3?
Thank you very much.

Hi you can find more information on this page;
Examples
And it is possible.
Some useful links
http://matthiasnehlsen.com/blog/2013/05/18/using-d3js-with-play/
https://vida.io/documents/N4jSip7n68yQ48DXp

Related

Can't create a symmetric link graph using Gojs

I have been trying to use GoJS to draw some interactive graphs in my application but I couldn't figure out how to make a link graph to display symmetrically.
The current graph that I drew looked like this image.
In the image, I expect the element A>90 to be symmetric with the A>91 element but I can't make it happen.
Can anyone give me a hint to correctly config GoJS to achieve this? Thank you!

Ability to scroll the map when hovering marker?

Im struggling to make possible zooming the map when hovering a marker.
https://codesandbox.io/s/my2p15knj8 - example with marker
However, it is possible but only if I use feature instead of a marker.
https://codesandbox.io/s/l42n3np7xm
Unfortunately - feature is almost unstylable, cant pass children to it nor cant style them independently.
Looking for some solution how to make able to zoom map even if hovering marker. As you can see, my markers are kinda big so it will be hard for user to avoid them while scrolling :)
Thank you!
I think that might be a bug in react-map-gl since the vanilla JS Marker example doesn't suffer the same issue.

Circle-Packing chart with direction links

I'am trying to create circle-packing chart like that
https://bl.ocks.org/mbostock/4063530
But I also want to create some relation between data, to show how data binds to each other, so I need to add some code to change example above to make it like on this image: Circle chart with relational links
So the question is: is it possible to add relational between children in array to reach desired behavior and change Circle-chart layout to Linked Circle chart layout?
P.S. I'm new in d3.js so I don't have deep knowledge in this field, so It would be great if you provide me some examples how to reach that
I've solved my problem my problem by myself, The solution is that to draw arrows by hands without d3 layout tools, I hope it could be useful for someone:
Circle pack with relation arrows

Google Maps markers ontop of each other

So I have a probably not so unique scenario. The simplest way to explain it is a google map with all 50 US states, each state will have two markers. The markers are both driven by the same lat/long value. The problem Im having is that the markers are rendering ontop of one another. I somehow need to have them render next to one another or offset so that I can see both. The problem is how do I get it to not overlap into another state.
I saw some really neat "spider" functionality where it renders one marker and then if you click on it the others fan out, but the website was in another language.
I am going to try and use the following library.
https://github.com/jawj/OverlappingMarkerSpiderfier
The problem with the above implementation is that I am using a combination of KML and google maps client-side. I dont see a way to implement that for the kml markers
The Overlapping Marker Spiderfier project on GitHub will probably accomplish what you need.
Otherwise you can play around with the Marker's icon property. The icon can accept a Symbol which has and anchor that can be shifted from the default location (0,0).
Symbol documentation: https://developers.google.com/maps/documentation/javascript/reference#Symbol

Google Maps Points do not appear until low zoom levels

I'm working on a (Perl) program that uses the Google Maps API and a KML file to pull data from a database that creates points on the map. I have that much done, but the points only appear after I zoom pretty much all the way in, to a zoom level where only one point is showing.
The default zoom only shows my small city (3-5 miles) so I thought all the points would be able to show. Does anybody know how to get all of the points to show up at city-wide level as opposed to only showing up when zoomed all the way in?
Any help is greatly appreciated. Thanks!
Edit: Added a JavaScript tag because I've seen a lot of work done with Google Maps using JS, and considering the problem really isn't language-specific, I figured some of those developers might be able to offer some insight.
Try to incorporate the <Lod> tag in your KML, which is child of a <Region>. You can define this once per placemark you get from your DB. or only once per query (defined by minLat, maxLat, minLong, maxLong). In the first case the LodPixels is a constant whereas in the latter case you must calculate it as a function of the region size. It sure works in Google Earth and may work as well in Maps. Look here to see it work in Earth API (JS)
....
<Region>
<LatLonAltBox>
<north>###</north>
<south>###</south>
<east>###</east>
<west>###</west>
<minAltitude>###</minAltitude>
<maxAltitude>###</maxAltitude>
</LatLonAltBox>
<Lod>
<minLodPixels>###</minLodPixels>
<maxLodPixels>###</maxLodPixels>
<minFadeExtent>###</minFadeExtent>
<maxFadeExtent>###</maxFadeExtent>
</Lod>
</Region>
....

Categories