d3.js library in SpiderBasic

Using Javascript from SpiderBasic
zxretrosoft
Posts: 20
Joined: Sun Jan 25, 2015 10:37 am
Location: Prague, Czech Republic
Contact:

d3.js library in SpiderBasic

Post by zxretrosoft »

Hello friends,

please, I have just a question.

Can it use the d3.js (https://d3js.org) library in SB? Does anyone have experience with it?

Thank you.
User avatar
MrTAToad
Posts: 291
Joined: Sun Apr 20, 2014 11:43 am
Location: Chichester, England
Contact:

Re: d3.js library in SpiderBasic

Post by MrTAToad »

I presume it's possible - never heard of it though :)
zxretrosoft
Posts: 20
Joined: Sun Jan 25, 2015 10:37 am
Location: Prague, Czech Republic
Contact:

Re: d3.js library in SpiderBasic

Post by zxretrosoft »

Well, I have this example.

http://bl.ocks.org/mbostock/1153292

Down is index.html code.

How can I implement this code in SB, please? :shock:
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: d3.js library in SpiderBasic

Post by Peter »

@zxretrosoft: perhaps this is a good starting point:

Code: Select all

DeclareModule D3Js
  
  Global IsInitialized
  
  Declare Init(Callback)
  Declare Gadget(Gadget, x, y, Width, Height, Flags = 0)
  Declare GetSvg(Gadget)
  
EndDeclareModule

Module D3Js
  
  Macro GetSelector
    !  var selector = $(spider_GadgetID(v_gadget).div).find('.dijitContentPane');
  EndMacro
  
  Procedure Init(Callback)
    
    
    Protected CSS.s = "<style>" +
                      "  .link {" +
                      "  fill: none;" +
                      "  stroke: #666;" +
                      "  stroke-width: 1.5px;" +
                      "  }" +
                      "  #licensing {" +
                      "  fill: green;" +
                      "  }" +
                      "  .link.licensing {" +
                      "  stroke: green;" +
                      "  }" +
                      "  .link.resolved {" +
                      "  stroke-dasharray: 0,2 1;" +
                      "  }" +
                      "  circle {" +
                      "  fill: #ccc;" +
                      "  stroke: #333;" +
                      "  stroke-width: 1.5px;" +
                      "  }" +
                      "  text {" +
                      "  font: 10px sans-serif;" +
                      "  pointer-events: none;" +
                      "  text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;" +
                      "  }" +
                      "</style>"
    
    ! $('head').append($(v_css));
    
    ! require(["//d3js.org/d3.v3.min.js"],
    !   function(dThree) {
    IsInitialized = #True
    !     window.d3=dThree;
    !     v_callback();
    !   }
    ! );   
    
  EndProcedure
  
  Procedure Gadget(Gadget, x, y, Width, Height, Flags = 0)
    
    If Gadget = #PB_Any
      Gadget = ContainerGadget(Gadget, x, y, Width, Height, Flags)
    Else
      ContainerGadget(Gadget, x, y, Width, Height, Flags)
    EndIf
    
    CloseGadgetList()
    
    GetSelector
    
    ! selector.append($("<svg id='d3_svg_g" + v_gadget + "' style='width:100%;height:100%' />"));
    
    ProcedureReturn Gadget
    
  EndProcedure
  
  Procedure GetSvg(Gadget)
    ! return d3.select("#d3_svg_g" + v_gadget);
  EndProcedure
  
EndModule

CompilerIf #PB_Compiler_IsMainFile
  
  Procedure Main()
    
    OpenWindow(0, 10, 10, 600, 600, "D3JsGadget()", #PB_Window_ScreenCentered)
    
    Protected GadgetWidth  = 580
    Protected GadgetHeight = 580
    
    D3Js::Gadget(0, 10, 10, GadgetWidth, GadgetHeight, #PB_Container_Flat)
    
    Protected SVG = D3Js::GetSvg(0)
    
    ! var links = [
    !   {source: "Microsoft", target: "Amazon", type: "licensing"},
    !   {source: "Microsoft", target: "HTC", type: "licensing"},
    !   {source: "Samsung", target: "Apple", type: "suit"},
    !   {source: "Motorola", target: "Apple", type: "suit"},
    !   {source: "Nokia", target: "Apple", type: "resolved"},
    !   {source: "HTC", target: "Apple", type: "suit"},
    !   {source: "Kodak", target: "Apple", type: "suit"},
    !   {source: "Microsoft", target: "Barnes & Noble", type: "suit"},
    !   {source: "Microsoft", target: "Foxconn", type: "suit"},
    !   {source: "Oracle", target: "Google", type: "suit"},
    !   {source: "Apple", target: "HTC", type: "suit"},
    !   {source: "Microsoft", target: "Inventec", type: "suit"},
    !   {source: "Samsung", target: "Kodak", type: "resolved"},
    !   {source: "LG", target: "Kodak", type: "resolved"},
    !   {source: "RIM", target: "Kodak", type: "suit"},
    !   {source: "Sony", target: "LG", type: "suit"},
    !   {source: "Kodak", target: "LG", type: "resolved"},
    !   {source: "Apple", target: "Nokia", type: "resolved"},
    !   {source: "Qualcomm", target: "Nokia", type: "resolved"},
    !   {source: "Apple", target: "Motorola", type: "suit"},
    !   {source: "Microsoft", target: "Motorola", type: "suit"},
    !   {source: "Motorola", target: "Microsoft", type: "suit"},
    !   {source: "Huawei", target: "ZTE", type: "suit"},
    !   {source: "Ericsson", target: "ZTE", type: "suit"},
    !   {source: "Kodak", target: "Samsung", type: "resolved"},
    !   {source: "Apple", target: "Samsung", type: "suit"},
    !   {source: "Kodak", target: "RIM", type: "suit"},
    !   {source: "Nokia", target: "Qualcomm", type: "suit"}
    ! ];
    
    ! var nodes = {};
    
    ! // Compute the distinct nodes from the links.
    ! links.forEach(function(link) {
    !   link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
    !   link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
    ! });
    
    ! var force = d3.layout.force()
    !     .nodes(d3.values(nodes))
    !     .links(links)
    !     .size([v_gadgetwidth, v_gadgetheight])
    !     .linkDistance(60)
    !     .charge(-300)
    !     .on("tick", tick)
    !     .start();
    
    ! // Per-type markers, as they don't inherit styles.
    ! v_svg.append("defs").selectAll("marker")
    !     .data(["suit", "licensing", "resolved"])
    !   .enter().append("marker")
    !     .attr("id", function(d) { return d; })
    !     .attr("viewBox", "0 -5 10 10")
    !     .attr("refX", 15)
    !     .attr("refY", -1.5)
    !     .attr("markerWidth", 6)
    !     .attr("markerHeight", 6)
    !     .attr("orient", "auto")
    !   .append("path")
    !     .attr("d", "M0,-5L10,0L0,5");
    
    ! var path = v_svg.append("g").selectAll("path")
    !     .data(force.links())
    !   .enter().append("path")
    !     .attr("class", function(d) { return "link " + d.type; })
    !     .attr("marker-end", function(d) { return "url(#" + d.type + ")"; });
    
    ! var circle = v_svg.append("g").selectAll("circle")
    !     .data(force.nodes())
    !   .enter().append("circle")
    !     .attr("r", 6)
    !     .call(force.drag);
    
    ! var text = v_svg.append("g").selectAll("text")
    !     .data(force.nodes())
    !   .enter().append("text")
    !     .attr("x", 8)
    !     .attr("y", ".31em")
    !     .text(function(d) { return d.name; });
    
    ! // Use elliptical arc path segments to doubly-encode directionality.
    ! function tick() {
    !   path.attr("d", linkArc);
    !   circle.attr("transform", transform);
    !   text.attr("transform", transform);
    ! }
    
    ! function linkArc(d) {
    !   var dx = d.target.x - d.source.x,
    !       dy = d.target.y - d.source.y,
    !       dr = Math.sqrt(dx * dx + dy * dy);
    !   return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
    ! }
    
    ! function transform(d) {
    !   return "translate(" + d.x + "," + d.y + ")";
    ! }    
    
    
  EndProcedure
  
  D3Js::Init(@Main())
  
CompilerEndIf
Greetings ... Peter
zxretrosoft
Posts: 20
Joined: Sun Jan 25, 2015 10:37 am
Location: Prague, Czech Republic
Contact:

Re: d3.js library in SpiderBasic

Post by zxretrosoft »

Exactly Peter! Thank you so much! :o ;)
I'm going to experiment 8-)
zxretrosoft
Posts: 20
Joined: Sun Jan 25, 2015 10:37 am
Location: Prague, Czech Republic
Contact:

Re: d3.js library in SpiderBasic

Post by zxretrosoft »

Hello Peter, please, I try to rewrite the case by your example, but I can not :|

http://bl.ocks.org/nbremer/6052814

May I ask you for your help? :geek: Thank you very much in advance!
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: d3.js library in SpiderBasic

Post by Peter »

quick'n dirty:

Code: Select all

DeclareModule D3Js
  
  Global IsInitialized
  
  Declare Init(Callback)
  Declare Gadget(Gadget, x, y, Width, Height, Flags = 0)
  Declare GetSvg(Gadget)
  
EndDeclareModule

Module D3Js
  
  Macro GetSelector
    !  var selector = $(spider_GadgetID(v_gadget).div).find('.dijitContentPane');
  EndMacro
  
  Procedure Init(Callback)
    
    
    Protected CSS.s = "<style type='text/css'>" + 
                      "  body {" + 
                      "  margin: 0px; " + 
                      "  overflow: hidden; " + 
                      "  font-family: 'Helvetica Neue', Helvetica; " + 
                      "  font-size: 14px;" + 
                      "  }" + 
                      "  .header {" + 
                      "  margin-top: 20px;" + 
                      "  margin-left: 20px;" + 
                      "  font-size: 36px; " + 
                      "  font-weight: 300; " + 
                      "  display: block; " + 
                      "  z-index: 1; " + 
                      "  text-shadow: 0 1px 0 #fff;" + 
                      "  }" + 
                      "  .hint {" + 
                      "  width: 1280px; " + 
                      "  right: 0px; " + 
                      "  color: rgb(153, 153, 153); " + 
                      "  font-size: 12px;" + 
                      "  padding-bottom: 20px;" + 
                      "  }" + 
                      "  #chart{" + 
                      "  text-align: center;" + 
                      "  }" + 
                      "  .hr-style {" + 
                      "  border: 0;" + 
                      "  height: 2px;" + 
                      "  width: 80%;" + 
                      "  color: #E8E8E8;" + 
                      "  background-color: #E8E8E8;" + 
                      "  }" + 
                      "</style>";
    
    ! $('head').append($(v_css));
    
    ! require(["//d3js.org/d3.v3.min.js"], function(dThree) {
    !		window.d3=dThree;
    ! 	require(["//d3js.org/d3.hexbin.v0.min.js"], function() {
    IsInitialized = #True
    !     v_callback();
    !		});   
    !	});   
    
  EndProcedure
  
  Procedure Gadget(Gadget, x, y, Width, Height, Flags = 0)
    
    If Gadget = #PB_Any
      Gadget = ContainerGadget(Gadget, x, y, Width, Height, Flags)
    Else
      ContainerGadget(Gadget, x, y, Width, Height, Flags)
    EndIf
    
    CloseGadgetList()
    
    GetSelector
    
    ! selector.append($("<svg id='d3_svg_g" + v_gadget + "' style='width:100%;height:100%' />"));
    
    ProcedureReturn Gadget
    
  EndProcedure
  
  Procedure GetSvg(Gadget)
    ! return d3.select("#d3_svg_g" + v_gadget);
  EndProcedure
  
EndModule

CompilerIf #PB_Compiler_IsMainFile
  
  Procedure Main()
    
    OpenWindow(0, 10, 10, 900, 600, "D3JsGadget()", #PB_Window_ScreenCentered)
    
    Protected GadgetWidth  = 850
    Protected GadgetHeight = 400
    
    D3Js::Gadget(0, 10, 10, GadgetWidth, GadgetHeight, #PB_Container_Flat)
    
    Protected SVG = D3Js::GetSvg(0)
    
    ! //The color of each hexagon
    ! var color = ["#E9FF63", "#7DFF63", "#63F8FF", "#99FF63", "#CFFE63", "#FFC263", "#FFC763", "#FF8E63", "#FF6464", "#FF7563", "#FF6364", "#FF7F63", "#FFE963", "#E3FF63", "#FFD963", "#FFE263", "#BAFF63", "#6BFF63", "#64FF69", "#71FF63", "#63FF6C", "#63FFD8", "#64FF69", "#63FF9A", "#FDFC63", "#88FF63", "#66FF64", "#A6FF63", "#63FFDB", "#63D9FE", "#90FF63", "#FF9B63", "#FF7263", "#9DFF63", "#E5FF63", "#FF7F63", "#FF7463", "#FFAE63", "#F4FF63", "#FFEC63", "#FBFF63", "#FFE663", "#FFC263", "#9DFF63", "#AEFF63", "#6AFF63", "#65FF65", "#63FFC7", "#C5FF63", "#63FFBE", "#63FF93", "#63FFAC", "#62FF79", "#90FF63", "#6AFF63", "#63FFEF", "#63F7FF", "#63FFD1", "#6370FF", "#638DFF", "#63FFDF", "#C5FF63", "#63FF6A", "#64FF69", "#C7FE63", "#FDFC63", "#D0FE63", "#FFDC63", "#E3FF63", "#DCFF63", "#C9FE63", "#FBFF63", "#FFB663", "#D9FF63", "#9DFF63", "#69FF63", "#DCFF63", "#63FFD4", "#63FFB8", "#64FF67", "#74FF63", "#63FCFF", "#63FFF9", "#63FFE9", "#A6FF63", "#63FFCD", "#63CEFE", "#63FBFF", "#63FFFB", "#637CFF", "#6379FF", "#D2FE63", "#CFFE63", "#63FF6E", "#65FF65", "#EEFF63", "#DCFF63", "#9DFF63", "#AAFF63", "#B6FF63", "#D0FE63", "#AEFF63", "#CDFE63", "#64FF67", "#99FF63", "#66FF64", "#63FFC1", "#63FFD4", "#63FF90", "#63FFD1", "#63FFF4", "#63FFEC", "#63FFF9", "#71FF63", "#63FF93", "#63FFC4", "#63F7FF", "#638DFF", "#63E9FF", "#6375FF", "#88FF63", "#95FF63", "#63FFAF", "#63FF93", "#63FF9A", "#9DFF63", "#88FF63", "#EEFF63", "#BDFF63", "#71FF63", "#B6FF63", "#80FF63", "#62FF82", "#63FF6C", "#62FF76", "#63FF6E", "#63FFCD", "#63EFFF", "#63FFF6", "#63FFB5", "#63FFFC", "#63B4FF", "#63FFC1", "#63F5FF", "#63FFB5", "#63FFBB", "#63FFFC", "#6379FF", "#63B0FF", "#63FFBB", "#D5FE63", "#63FFB8", "#63FF6C", "#62FF7C", "#63FFBE", "#FFDF63", "#FFE263", "#FFE963", "#76FF63", "#67FF64", "#63FF90", "#65FF65", "#63FFA0", "#63FFA6", "#62FF73", "#63FFC1", "#63FFC4", "#63FFF9", "#63CEFE", "#63A4FF", "#6373FF", "#63C5FE", "#638DFF", "#63FF9D", "#6387FF", "#63FFBE", "#63FEFE", "#63FFEC", "#63FFF1", "#638DFF", "#FF6A64", "#FBFF63", "#FFEF63", "#63FFE9", "#62FF8C", "#BAFF63", "#FFAB63", "#FFCB63", "#62FF82", "#88FF63", "#63FFB2", "#63FFC1", "#63FFDF", "#63FFB5", "#63FFB5", "#62FF7F", "#63FFC4", "#63ECFF", "#63FFFC", "#63F3FF", "#63FFE5", "#63D2FE", "#63FFF6", "#63A8FF", "#63F8FF", "#63FFFB", "#63E4FF", "#636DFF", "#63FFC4", "#6387FF", "#FF8B63", "#EBFF63", "#C5FF63", "#BDFF63", "#62FF76", "#DCFF63", "#BDFF63", "#99FF63", "#62FF82", "#63FFA6", "#63C9FE", "#63FEFE", "#62FF89", "#63FFD8", "#63FFB8", "#63FFF1", "#63C1FE", "#63FCFF", "#63FFCA", "#63C9FE", "#63FFFC", "#6FFF63", "#63FFE5", "#63E9FF", "#63F7FF", "#63B0FF", "#636CFF", "#636CFF", "#63ACFF", "#63F1FF", "#FF8863", "#FF6864", "#FFB363", "#A2FF63", "#63FFD8", "#63FF96", "#99FF63", "#AEFF63", "#C7FE63", "#63FF93", "#63FFC1", "#63FFF9", "#63FFFB", "#67FF64", "#B2FF63", "#62FF76", "#62FF73", "#639CFF", "#63FFC1", "#63FFEF", "#66FF64", "#62FF76", "#63FFC4", "#63FFCA", "#63FFBE", "#63FFFC", "#6363FF", "#63ACFF", "#6375FF", "#63CEFE", "#FFB663", "#79FF63", "#BDFF63", "#63FF6C", "#66FF64", "#76FF63", "#FEF763", "#D7FE63", "#7DFF63", "#63FFB8", "#63F5FF", "#63F7FF", "#62FF7F", "#63FFA6", "#62FF76", "#63FFA6", "#63FFD1", "#63FEFE", "#63FFDF", "#63F8FF", "#63FF96", "#63FFA9", "#63FFA9", "#63C1FE", "#63FFC1", "#63D6FE", "#636EFF", "#6364FF", "#6370FF", "#6398FF", "#FFE663", "#C0FF63", "#EBFF63", "#C5FF63", "#D2FE63", "#69FF63", "#6FFF63", "#D4FE63", "#F4FF63", "#63FFC4", "#62FF89", "#63FFF4", "#63FFB8", "#63FFF4", "#63F8FF", "#62FF71", "#63FFBB", "#63FFEF", "#63FFF1", "#63FBFF", "#63C1FE", "#63FFDF", "#63FFD1", "#63FFE2", "#63ACFF", "#63F3FF", "#63DDFF", "#63FFF6", "#63D6FE", "#63CEFE", "#D4FE63", "#80FF63", "#FF8B63", "#D5FE63", "#63FFCA", "#90FF63", "#D7FE63", "#FBFF63", "#62FF7C", "#C9FE63", "#76FF63", "#69FF63", "#62FF7C", "#63FFD4", "#63FFA6", "#6BFF63", "#63FFC7", "#63E4FF", "#62FF7C", "#63FFF6", "#6379FF", "#63FFCD", "#63FFCA", "#63FFEF", "#63FFBE", "#63E9FF", "#63ECFF", "#63FFF9", "#63E0FF", "#63C5FE", "#FF6B63", "#FFD663", "#63FF6E", "#63FFB2", "#FFD663", "#62FF7F", "#63FFA6", "#9DFF63", "#F6FF63", "#95FF63", "#95FF63", "#FFD963", "#DCFF63", "#63FF90", "#63FFD1", "#63FFFC", "#63FFA3", "#63FFAF", "#63ECFF", "#63FFEF", "#63C5FE", "#63FDFF", "#63FF93", "#62FF76", "#69FF63", "#63EFFF", "#636DFF", "#6379FF", "#63E7FF", "#63E7FF", "#FF8E63", "#CDFE63", "#BDFF63", "#F9FF63", "#62FF7F", "#63FFE2", "#62FF86", "#67FF64", "#63FFA3", "#6DFF63", "#9DFF63", "#FFE963", "#FFBE63", "#6AFF63", "#62FF7F", "#63FFD4", "#79FF63", "#63D2FE", "#63DDFF", "#63FEFE", "#63BDFE", "#63FFDB", "#64FF69", "#62FF8C", "#63FFD8", "#63BDFE", "#63B8FF", "#6391FF", "#63FFDB", "#63FEFE", "#F8FF63", "#FFF263", "#C2FF63", "#FFDF63", "#D2FE63", "#64FF69", "#63FFE2", "#7DFF63", "#FDFC63", "#FF9763", "#6BFF63", "#F2FF63", "#FBFF63", "#AEFF63", "#80FF63", "#63D9FE", "#63FFBB", "#63FFD8", "#63FFEF", "#63C5FE", "#63FF90", "#62FF89", "#63D2FE", "#63FFC4", "#63FF93", "#63D2FE", "#63DDFF", "#63FDFF", "#6DFF63", "#62FF82", "#FF8363", "#DAFF63", "#74FF63", 
    !              "#63FF6A", "#63FF6A", "#64FF69", "#FFDF63", "#FF7F63", "#FFEF63", "#EEFF63", "#CFFE63", "#6AFF63", "#95FF63", "#63FF6C", "#63FF90", "#6BFF63", "#63FF90", "#63FFCA", "#63E9FF", "#63FFEC", "#63FFAC", "#63FFD4", "#63FAFF", "#63FFCA", "#63ECFF", "#62FF8C", "#63FFE5", "#69FF63", "#FF7463", "#FF9463", "#E0FF63", "#FFCB63", "#A6FF63", "#63FF93", "#E0FF63", "#FEFA63", "#EBFF63", "#AAFF63", "#C2FF63", "#D4FE63", "#63FFAC", "#65FF65", "#62FF73", "#63FFE9", "#65FF66", "#95FF63", "#62FF7F", "#63FFB5", "#63D2FE", "#63FFAC", "#63FFFB", "#62FF8C", "#64FF69", "#99FF63", "#63FFB2", "#63FFDF", "#63FFB8", "#BAFF63", "#FFDC63", "#62FF76", "#BDFF63", "#C2FF63", "#95FF63", "#F6FF63", "#FFA163", "#CFFE63", "#63FFE9", "#84FF63", "#6BFF63", "#6DFF63", "#63FFC1", "#D0FE63", "#69FF63", "#63FFC1", "#62FF8C", "#63FFBB", "#63FF96", "#63FAFF", "#63FFEC", "#63FEFE", "#62FF76", "#63FF9A", "#FFC563", "#6FFF63", "#63FFAF", "#63F5FF", "#63F1FF", "#63FF6A", "#62FF7C", "#63F8FF", "#9DFF63", "#99FF63", "#AEFF63", "#FF8363", "#FFC963", "#62FF79", "#63FF90", "#63FF6A", "#63FCFF", "#63E9FF", "#63FFA0", "#64FF67", "#FFD463", "#A6FF63", "#CBFE63", "#63FF90", "#63FFC4", "#63C9FE", "#63FFE5", "#63FFDB", "#62FF89", "#63FFD8", "#79FF63", "#63FF9A", "#63FAFF", "#63E9FF", "#63FF6E", "#63F7FF", "#63E4FF", "#63F5FF", "#64FF67", "#C9FE63", "#FFBA63", "#D9FF63", "#63FFD1", "#63FFF6", "#63FF93", "#C0FF63", "#F6FF63", "#62FF82", "#AEFF63", "#CBFE63", "#FF8363", "#63FF6A", "#63FFCD", "#63F7FF", "#63FFF9", "#63FFC4", "#63FFC4", "#95FF63", "#63FFCD", "#A2FF63", "#EBFF63", "#63FFC1", "#63FFA0", "#63E4FF", "#63FFFB", "#63F3FF", "#63CEFE", "#63FBFF"]
    
    ! ///////////////////////////////////////////////////////////////////////////
    ! ////////////// Initiate SVG and create hexagon centers ////////////////////
    ! ///////////////////////////////////////////////////////////////////////////
    
    ! //Function to call when you mouseover a node
    ! function mover(d) {
    !   var el = d3.select(this).transition().duration(10).style("fill-opacity", 0.3);
    ! }
    
    ! //Mouseout function
    ! function mout(d) { 
    ! 	var el = d3.select(this).transition().duration(1000).style("fill-opacity", 1);
    ! };
    
    ! //svg sizes and margins
    ! var margin = {
    !     top: 30,
    !     right: 20,
    !     bottom: 20,
    !     left: 50
    ! };
    
    ! var width = 850;
    ! var height = 350;
    
    ! //The number of columns and rows of the heatmap
    ! var MapColumns = 30;
    ! var MapRows = 20;
    
    ! //The maximum radius the hexagons can have to still fit the screen
    ! var hexRadius = d3.min([width/((MapColumns + 0.5) * Math.sqrt(3)), height/((MapRows + 1/3) * 1.5)]);
    
    ! //Set the new height and width of the SVG based on the max possible
    ! width = MapColumns*hexRadius*Math.sqrt(3);
    ! heigth = MapRows*1.5*hexRadius+0.5*hexRadius;
    
    ! //Set the hexagon radius
    ! var hexbin = d3.hexbin().radius(hexRadius);

    ! //Calculate the center positions of each hexagon	
    ! var points = [];
    ! for (var i = 0; i < MapRows; i++) {
    !     for (var j = 0; j < MapColumns; j++) {
    !         points.push([hexRadius * j * 1.75, hexRadius * i * 1.5]);
    !     }//for j
    ! }//for i
    
    ! v_svg.attr("width", width + margin.left + margin.right);
    ! v_svg.attr("height", height + margin.top + margin.bottom);
    ! v_svg.append("g");
    ! v_svg.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
    ! ///////////////////////////////////////////////////////////////////////////
    ! ////////////////////// Draw hexagons and color them ///////////////////////
    ! ///////////////////////////////////////////////////////////////////////////
    
    ! //Start drawing the hexagons
    ! v_svg.append("g")
    !     .selectAll(".hexagon")
    !     .data(hexbin(points))
    !     .enter().append("path")
    !     .attr("class", "hexagon")
    !     .attr("d", function (d) {
    ! 		return "M" + d.x + "," + d.y + hexbin.hexagon();
    ! 	})
    !     .attr("stroke", function (d,i) {
    ! 		return "#fff";
    ! 	})
    !     .attr("stroke-width", "1px")
    !     .style("fill", function (d,i) {
    ! 		return color[i];
    ! 	})
    ! 	.on("mouseover", mover)
    ! 	.on("mouseout", mout)
    ! 	;
    
  EndProcedure
  
  D3Js::Init(@Main())
  
CompilerEndIf
Greetings ... Peter
zxretrosoft
Posts: 20
Joined: Sun Jan 25, 2015 10:37 am
Location: Prague, Czech Republic
Contact:

Re: d3.js library in SpiderBasic

Post by zxretrosoft »

wow, thank you very much Peter, you are genius! :roll: ;)

I owe you! Thanks a lot!
Post Reply