Nice tutorial. Update for anyone using d3 v5 (instead of v4 used in the video): when loading in the json data, instead of "d3.json("VotacionesSenado2017.json", function(err, graph){...})" the code should now be "d3.json("VotacionesSenado2017.json").then(function(graph){...}).catch(function(err){...})" and now the "if(err)..." line should be placed inside the catch body. When adding colours to the nodes, "d3.schemeCategory20" has been removed in d3 v5, but new scheme's have been added instead. Simply replace "schemeCategory20" with "schemeAccent".
Hola Alfonso! I worked with the team of congreso visible that has been collecting that data. In theory you can also extract it from the "gaceta oficial" but it isn't straightforward
Hi I want to ask what do you mean by color=(d.party) when you use the fillstyle context. I don't understand what is d.party. Also, how do I set specific colors for each node and then label them using a legend to denote the node name based on the color ?
In my dataset d.party contains the politician party, so I'm coloring by party. To add legends you can just draw them on after drawing the circle using something like cts.fillText(d.legend, d.x, d.y)
Hi john! great tutorial, I have a question for you, it is possible change the color of a node after drawing all the network? in other words, it is possible manpiulate the network in real time without redrawing all again?.
On the video I'm using an d3.scaleOrdinal, which assigns a different color to each party (political data). Check the documentation of d3.scaleOrdinal, as you can tweak it to use specific colors to specific values. Is something like: var color = d3.scaleOrdinal() .domain(["John", "Mafe"]) .range(["steelblue", "salmon"]); then color("John") returns steelblue
@@duto_guerra if the json is {"name" :[ {"item":"wordpress","type":"website"}, {"item":"sublime","type":application"} ]} if i want to give color to the cicle base on the type , how i must set it?
Hi very good movie))) question is how can I manage positions of our nodes if I want to put them in place what I want? One part in one place and second part in the second. If I need to some group of nodes to set fixed position I mean. Thank you
Thanks so much for this tutorial. it was indeed very helpful. But i will like to ask if it is possible to visualize a network using another data-set with the same code?
You know quite well what you are doing. However it is quite hard to follow up, you explain things very briefly (almost without explanation, almost "this is that way because it is that way"), had to pause many many times to get the idea and slow down the speed of the video. Don't get me wrong. I appreciate your effort and material. It is good stuff but the tutorials are very advanced level and hard to understand (my level in D3 is beginner to normal). I give you "like" but now I'm going to reverse engineering this example to get to know what is really happening. Thank you.
jejejeje, I know the feeling, I've been there. Every time I see Mike Bostock doing anything I feel the same way. The advantage of TH-cam is that you can always rewatch
100% what I'm looking for! Six years later....
Thanks!
Nice tutorial. Update for anyone using d3 v5 (instead of v4 used in the video): when loading in the json data, instead of "d3.json("VotacionesSenado2017.json", function(err, graph){...})" the code should now be "d3.json("VotacionesSenado2017.json").then(function(graph){...}).catch(function(err){...})" and now the "if(err)..." line should be placed inside the catch body.
When adding colours to the nodes, "d3.schemeCategory20" has been removed in d3 v5, but new scheme's have been added instead. Simply replace "schemeCategory20" with "schemeAccent".
Thanks for sharing!
my career has grown with your videos thanks for that, Saludos desde cali
Buenísimo!
You make it look so easy. I enjoyed this tutorial very much.
So glad you like it
Great tutorial! Liked the step by step approach, deleting the previous fake data as the build became more complex.
Thanks you so much, You made my day.
This is such a good tutorial. Thank you for making this.
Hi great video! How would you add a tooltip which would display some data about the node on hover?
This is exactly what I wanted to know about forces in D3V4. Thanks a lot for your clear explanations!
+Goede Bekende Data Design glad to hear to liked it
Great content！ Thanks for the clear explanations!
Thankyou for taking the time to do this. Very simple to follow
Fantastic tutorial! So clear.
Great tutorial my friend. Thanks a lot.
This is soo amazing and helped me so much. Thanks!! Post more D3 V4 videos!
Great tutorial. I would like to know how did you extract the information from the senators' vote to generate a json file.
Hola Alfonso!
I worked with the team of congreso visible that has been collecting that data.
In theory you can also extract it from the "gaceta oficial" but it isn't straightforward
Thanks a lot for this amazing tutorial
Amazing, congrats and thank you
Hi I want to ask what do you mean by color=(d.party) when you use the fillstyle context. I don't understand what is d.party. Also, how do I set specific colors for each node and then label them using a legend to denote the node name based on the color ?
In my dataset d.party contains the politician party, so I'm coloring by party. To add legends you can just draw them on after drawing the circle using something like cts.fillText(d.legend, d.x, d.y)
Hi john! great tutorial, I have a question for you, it is possible change the color of a node after drawing all the network? in other words, it is possible manpiulate the network in real time without redrawing all again?.
It is possible. It depends on how you draw it. I think in here I actually used canvas, so technically every cycle everything redraws
the code works fine but once i attach the json file it doesnt show in the UI
Hard to know with so little information, maybe open an issue on stack overflow with all the info and send me the link?
hi, i want to ask, how to set the color of the node? it is random or you can change and set it? thank
On the video I'm using an d3.scaleOrdinal, which assigns a different color to each party (political data). Check the documentation of d3.scaleOrdinal, as you can tweak it to use specific colors to specific values. Is something like:
var color = d3.scaleOrdinal()
.domain(["John", "Mafe"])
.range(["steelblue", "salmon"]);
then color("John") returns steelblue
@@duto_guerra thank you so much
@@duto_guerra if the json is
{"name" :[
{"item":"wordpress","type":"website"},
{"item":"sublime","type":application"}
]}
if i want to give color to the cicle base on the type , how i must set it?
Thank you very much, you explained really well !!!
Hi very good movie))) question is how can I manage positions of our nodes if I want to put them in place what I want? One part in one place and second part in the second. If I need to some group of nodes to set fixed position I mean. Thank you
Take a look a my force in a box plugin observablehq.com/@john-guerra/force-in-a-box
Excelente tutorial, es justo lo que buscaba. Gracias 😊
This is perfect. Thank you.
dude. this is GOOD! helped me a lot thank you!
Great to hear!
Sorry, my English is bad, but i want to ask something. Can we make the link look like arrow? And if we can, how to make it. Thanks.
In canvas you can, but you will need to actually draw the triangle doing the math stackoverflow.com/questions/808826/draw-arrow-on-canvas-tag
Excellent tutorial... any advice on how to make the graph interactive such as display the nodeName on hover or highlight links on NodeClick?
+Jay Jay look for simulation.find
how to add labels along with node
Use the canvas text functions such as fillText developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillText
@@duto_guerra how to add zooming feature?
@@harikrishnaps9216 this is literally the first result that google sent for "d3 zoom canvas" observablehq.com/@d3/zoom-canvas
Thanks so much for this tutorial. it was indeed very helpful. But i will like to ask if it is possible to visualize a network using another data-set with the same code?
yes it is possible
excellent tutorial .. any advice on how to represent these nodes in 3D?
+Ashish S yeah, don't 😁. 3D only generates more noise occlusion and other perception problems
How can I put label "onhover" of nodes?
Mira este ejemplo bl.ocks.org/mbostock/ad70335eeef6d167bc36fd3c04378048
Thank you!!
Nice! Thanks so much!
Thank you for this tutorial. Is it possible to make a game using the forceSimulation?
+SongYee interesting question. I wanna say yes, it's possible, but I guess there has to be better tools for that
I was using NameIDFrom and NameIDTo in links and failing. Changed to explicit "source" and "target" and it worked.
Good catch
thanks!!
I like how you pronounce "tick". Sounds like T H I C C
+Jack Le jajajajaja
Do you have a Bitcoin Cash wallet? I'd like to tip you.
No, I don't, but thanks
You know quite well what you are doing. However it is quite hard to follow up, you explain things very briefly (almost without explanation, almost "this is that way because it is that way"), had to pause many many times to get the idea and slow down the speed of the video.
Don't get me wrong. I appreciate your effort and material. It is good stuff but the tutorials are very advanced level and hard to understand (my level in D3 is beginner to normal). I give you "like" but now I'm going to reverse engineering this example to get to know what is really happening. Thank you.
jejejeje, I know the feeling, I've been there. Every time I see Mike Bostock doing anything I feel the same way. The advantage of TH-cam is that you can always rewatch
Also +Combine the force layout is a more advanced one, try this one for learning the basics th-cam.com/video/oHkQek4FTrE/w-d-xo.html
Thank you! I subscribed to your channel. Good stuff there :)