Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

205
Views
Visualise graph with JavaScript in Google Colab

This code implements visualisation of the graph that is stored in the MapperViz.json file.

I have 0 knowledge of Javascript, how can I run this code in Google colab, so that I can see the graph?

%%javascript

svg = d3.select("#mapperViz"),
width = +svg.attr("width"),
height = +svg.attr("height");


var simulation = d3.forceSimulation()
  .force('charge', d3.forceManyBody().strength(-10))
  .force('center', d3.forceCenter(width / 2, height / 2))
  .force("link", d3.forceLink().id(function(d) { return d.id; }))
  


d3.json("mapperViz.json", function(error, network){
  if (error) throw error;
          

//Force Link Network//

  scaleRadius = d3.scaleLinear()  
      .domain([0, network.max_weight])
      .range([25,100]);

  scaleColor = d3.scaleLinear()
      .domain([0, network.rcover[0][0]])
      .range([1,0.2]);

  simulation
      .nodes(network.nodes)
      .on("tick", ticked);

  simulation.force("link")
      .links(network.links);


  function updateLinks() {
    var u = d3.select('.links')
      .selectAll('line')
      .data(network.links)

    u.enter()
      .append('line')
      .merge(u)
      .attr('x1', function(d) {return d.source.x;})
      .attr('y1', function(d) {return d.source.y;})
      .attr('x2', function(d) {return d.target.x;})
      .attr('y2', function(d) {return d.target.y;})

    u.exit().remove()
  }

  function updateNodes() {
    u = d3.select('.nodes')
      .selectAll('circle')
      .data(network.nodes)

    u.enter()
      .append('circle')
      .merge(u)
      .attr('cx', function(d) {return d.x;})
      .attr('cy', function(d) {return d.y;})
      .attr('r',  function (d) {return Math.sqrt(scaleRadius(d.weight));})
      .attr('fill', function(d){ return d3.interpolateReds(scaleColor(d.group))})
      .call(d3.drag()
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended));

    u.exit().remove()
  }

  function ticked() {
    updateLinks()
    updateNodes()
  }

  function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
}

function dragged(d) {
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}

function dragended(d) {
  if (!d3.event.active) simulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
 cv}
 

  })

When I actually run it in Google Colab, I get no errors, at the same time I cannot see a graph, I am wondering if there is another way to run Java Script.

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!