See also questions close to this topic

• how to change prettier format for react native

  my code formatting prettier didn't works well for react native, i don't understand where to config it but it works well with flutter

  from this code

        import { View, Text } from 'react-native'
      
      import React from 'react'
      
      export default function App() {
        return (
          <View>
      
      <Text>Apps</Text>   
  </View>
        )
      }
  

  it's formatted to this

  import {
    View,
    Text
  } from 'react-native'
  
  import React from 'react'
  
  export default function App() {
    return ( <
      View >
  
      <
      Text > Apps < /Text>
  
  
      <
      /View>
    )
  }
  
• MarkLogic server-side JavaScript and XQuery

  I am just starting using NoSQL MarkLogic DB and trying to choose for me the best query language to learn and use in future. On server side MarkLogic provides the possibility to use JavaScript API or XQuery API.

  I want to receive an advice. Which language is better to concentrate on and learn? JavaScript or XQuery?
• Popover in chrome extension using js

  My goal is I want to create a chrome extension like Toucan Extension. I want to highlight some paragraphs in random site then translate it to specific language. The problem is I do not have an idea on how to implement a popover in chrome extension like in the picture below.

  
• D3.js Arc Diagram - Tapered Ends

  I have an arc diagram that is based on this blocks example, and I'd like to taper the ends of the arc path so that they are hidden behind the circles (or at least aren't wider than the circles themselves).

  I have two thoughts and I'm not sure how feasible either of them are: a) modify d3.arc source code so that the resultant svg path has tapered ends, or b) instead of using d3.arc to generate the path, create my own cubic bezier function that takes in the x and y points of the source and target nodes and outputs a a curve that tapers to maybe half of its full width? Both of which I've never done before and would be floundering a bit trying to do.

  Any tips, tricks, ideas, or general well wishes would be greatly appreciated.

  
• In D3.js, what is the difference the graphing function required to make a line graph and one required to make an area graph?

  I have an application which renders a line graph from programmatically created datasets. I would like to allow users to swap between different visualization modes, but am struggling to turn my existing graph into a different variety of graph.

  I wrote this code to render a line graph:

   let graph = d3.select(graphingArea).append('svg');
  
   ...
  
    if(type == "line"){
      console.log("Graph type: Line");
      for(let i = 0; i < frequencyResponseObjects.length; i++){
        graph.selectAll(".line")
        .data(sessionGraphData)
        .enter()
        .append("path")
        .attr("fill", "none")
        .attr("stroke", function(d){return color(d[0])})
        .attr("stroke-width", 1.5)
        .attr("d", function(d){
          return d3.line()
          .x(function(d){return x(+d.frequency)})
          .y(function(d){return y(+d.magnitude)})
            (d[i+1])
        })
      }
    }
  

  That works perfectly, but I want to change it to an area graph by doing something like this:

    if(type == "area"){
      console.log("Graph type: Area");
      for(let i = 0; i < frequencyResponseObjects.length; i++){
        graph.selectAll(".line")
        .data(sessionGraphData)
        .enter()
        .append("path")
        .style("fill", "#377eb8")
        .attr("stroke", function(d){return color(d[0])})
        .attr("stroke-width", 3)
        .attr("class", "area")
        .attr("d", function(d){
          return d3.area()
          .x(function(d){return x(+d.frequency)})
          .y0(y(graphMin))
          .y(function(d){return y(+d.magnitude)})
            (d[i+1])
        })
      }
    }
  

  That function still outputs a line graph, and I don't understand why - or how to create an equivalent function that draws an area graph.

  There are D3 area graphs online, but they're different from how I constructed my line graph in ways that I don't understand. Could I get an example of how a similarly constructed area graph should look?
• D3.js display chart segment data on click

  First time posting so please bear with me. I'm playing around with D3.js and charts at the moment and having trouble getting a working onclick function to display the selected arc's data in a div (id="showData"). I've tried attaching onclick to the arc generator using .on(click){function(d, I) const MyData = ["datapoint"]} but I'm not sure if this is the right spot or of how to lift specific datapoints from the selected segment so it's probably wrong.

  function drawSunburst(data) {
          // Find the root node, calculate the node.value, and sort our nodes by node.value
          root = d3.hierarchy(data)
              .sum(function (d) { return d.size; })
              .sort(function (a, b) { return b.value - a.value; });
  
          // Calculate the size of each arc; save the initial angles for tweening.
          partition(root);
          arc = d3.arc()
              .startAngle(function (d) { d.x0s = d.x0; return d.x0; })
              .endAngle(function (d) { d.x1s = d.x1; return d.x1; })
              .innerRadius(function (d) { return d.y0; })
              .outerRadius(function (d) { return d.y1; })
  
          // Add a <g> element for each node; create the slice variable since we'll refer to this selection many times
          slice = g.selectAll('g.node').data(root.descendants(), function(d) { return d.data.name; }); // .enter().append('g').attr("class", "node");
          newSlice = slice.enter().append('g').attr("class", "node").merge(slice);
          slice.exit().remove();
  
          // Append <path> elements and draw lines based on the arc calculations. Last, color the lines and the slices.
          slice.selectAll('path').remove();
          newSlice.append('path').attr("display", function (d) { return d.depth ? null : "none"; })
              .attr("d", arc)
              .style('stroke', '#fff')
              .style("fill", function (d) { return color((d.children ? d : d.parent).data.name); });
  
          // Populate the <text> elements with our data-driven titles.
          slice.selectAll('text').remove();
  
          newSlice.on("click", highlightSelectedSlice);
      };
  
      d3.selectAll(".showSelect").on("click", showTopTopics)
      d3.selectAll(".sizeSelect").on("click", sliceSizer);
  
      // Redraw the Sunburst Based on User Input
      function highlightSelectedSlice(c,i) {
  
          clicked = c;
          var rootPath = clicked.path(root).reverse();
          rootPath.shift(); // remove root node from the array
  
          newSlice.style("opacity", 0.4);
          newSlice.filter(function(d) {
              if (d === clicked && d.prevClicked) {
                  d.prevClicked = false;
                  newSlice.style("opacity", 1);
                  return true;
  
              } else if (d === clicked) {
                  d.prevClicked = true;
                  return true;
              } else {
                  d.prevClicked = false;
                  return (rootPath.indexOf(d) >= 0);
              }
          })
              .style("opacity", 1);
  
          // var ThisData = d3.select(this)
          // var ThisDatum = ThisData.datum()["data"]
          // return showData
          //     .html(
          //         ThisDatum["size"]
          //     )
      };
  
  
• How can I speed up the routing process in OSMNX?

  Say I have two taxi orders with Origin1、Destination1 and Origin2、Destination2(O1,O2,D1,D2). I want to calculate the possibility of ridesharing, so I need the path between two different points. And, here's my code:

  def path_time(point1, point2):
      path = ox.distance.shortest_path(road, point1, point2, weight='travel_time')
      if path is None:
          #If there isn't a path, a big weight will be set, and it won't be selected during the matching process.
          route_time = 9999
      else:
          route_time = int(sum(ox.utils_graph.get_route_edge_attributes(road, path, "travel_time")))
      return route_time,path
  

  Since there is four points, I need to do this six times, where tp means travel path :

  tpO1O2 = path_time(O1,O2)
  tpO1D1 = path_time(O1,D1)
  tpO1D2 = path_time(O1,D2)
  tpO2D1 = path_time(O2,D1)
  tpO2D2 = path_time(O2,D2)
  tpD1D2 = path_time(D1,D2)
  

  It's okay if I only have two points, but I got a 2 million order set, and each order has hundreds of potential matched orders. So this will take me a lot of time.

  Does anyone knows how can I speed up this process? Thank you!
• How to properly plot a tree (27k nodes) using a circular tree / leave layout

  I have this (unbalanced) tree with 27k+ nodes. It is an hierachy. Now I would to plot it as such to obtain a plot something like this (no idea how you would describe it, but I would call it a circular leave tree...?

  

  However, I am unable to achieve such a result unfortunately. I have already tried igraph, Networkx, Maltego, Graphviz, Gephi. Hopefully someone can help me / give me tips & tricks or hints.

  Maltego

  Gives me quiet easily the following. However I cannot export it to pdf. Furthermore it has this wierd expansion on the top going to the left. I would be able to 'manually' (minimize) move it. However that is not what I would like.

  This is btw in my view (with the manual fix) the best result. But I cannot export it to vector or high-res image.

  

  igraph

  import igraph as ig
  bigGraphAsTupleList = (('a','b'),('b','c'),('b','d'), ..., ('c','e'))
  g = ig.Graph.TupleList(bigGraphAsTupleList)
  layout = g.layout("rt_circular") #fr (fruchterman reingold), tree, circle, rt_circular (reingold_tilford_circular)
  # bbox = size of picture
  ig.plot(g,layout=layout,bbox=(10000,10000),target='mygraph.png')
  

  This gives me something like below.

  reingold tilford circular

  fruchterman reingold (so much overlap of nodes and connections)

  Networkx

  import networkx as nx
  import matplotlib.pyplot as plt
  G = nx.Graph()
  G.add_edge(...) #build graph
  nx.draw_circular(G) #nx.draw_spring(G) #nx.draw_spectral
  plt.draw()
  plt.show()
  

  

  Graphviz (via Networkx)

  Also a wierd result a bit similar as the next one Maltego. However

  import networkx as nx
  import matplotlib.pyplot as plt
  import pydot
  from networkx.drawing.nx_pydot import graphviz_layout
  G = nx.Graph()
  G.add_edge(...) #build graph
  pos = graphviz_layout(G, prog="circo")
  plt.figure(1,figsize=(60,60))
  nx.draw(G, pos,node_size=10)
  plt.show(block=False)
  plt.savefig("Graph.png", format="PNG")
  

  
• Object and Pointers Graph Representation in Ruby

  I am studying how to represent a graph in memory with Objects and Pointers in ruby and cannot find a representation of this anywhere. Can anyone point me in the right direction of how to build this ds?
• How to deal with the colorbar axis space in matplotlib subplots

  I am plotting seven different parameters over four seasons, as shown in below image. but on last column (Post-Monsoon) sub_plots axis compromised with colorbar axis, that is really awkward!!

  import matplotlib.pyplot as plt
  import cartopy
  import cartopy.crs as ccrs
  from cartopy.mpl.gridliner import LONGITUDE_FORMATTER, LATITUDE_FORMATTER
  import warnings
  warnings.filterwarnings('ignore')
  
  k = [1,5,9,13,17,21,25]
  k1= [25,26,27,28]
  k2= [4,8,12,16,20,24,28]
  k3= [1,2,3,4]
  k4=[25]
  S=['Winter','Pre-monsoon','Monsoon','Post-Monsoon']
  
  fig=plt.figure(figsize=(13,11), dpi=300)
  for i in range(1,29):
      ax = fig.add_subplot(7,4,i, projection=ccrs.PlateCarree())
      ax.set_extent([39.9,100.5,-0.5,25.5],ccrs.PlateCarree())
      ax.add_feature(cartopy.feature.COASTLINE)
      ax.add_feature(cartopy.feature.BORDERS, linestyle='-')
      ax.add_feature(cartopy.feature.LAND, zorder=100, edgecolor='k')
      ax.set_xticks([40,50,60,70,80,90,100], crs=ccrs.PlateCarree())
      ax.set_yticks([0,5,10,15,20,25], crs=ccrs.PlateCarree())
      ax.tick_params(axis='x', length=7, width=1, bottom=True, top=True)
      ax.tick_params(axis='y', length=7, width=1, right=True, left=True)
      ax.yaxis.set_major_formatter(plt.NullFormatter())
      ax.xaxis.set_major_formatter(plt.NullFormatter())
  
  A=D[i-1].plot.pcolormesh(ax=ax, cmap='seismic', transform=ccrs.PlateCarree(),
                    add_colorbar=False,add_labels=False)  # D contains list of parameters to be plotted
  if i in k:
      gl = ax.gridlines(draw_labels=True, linestyle='--')
      gl.xlabels_top=False
      gl.xlabels_bottom=False
      gl.ylabels_right=False
      gl.xformatter=LONGITUDE_FORMATTER
      gl.yformatter=LATITUDE_FORMATTER
      gl.xlabel_style={'size':10,}
      gl.ylabel_style={'size':10,}
      ax.tick_params(axis='y', length=7, width=1, left=False)
  if i in k1:
      gl = ax.gridlines(draw_labels=True, linestyle='--')
      gl.xlabels_top=False
      gl.xlabels_bottom=True
      gl.ylabels_right=False
      gl.ylabels_left=False
      gl.xformatter=LONGITUDE_FORMATTER
      gl.yformatter=LATITUDE_FORMATTER
      gl.xlabel_style={'size':10,}
      gl.ylabel_style={'size':10,}
      ax.tick_params(axis='x', length=7, width=1, bottom=False, top=True)
      ax.tick_params(axis='y', length=7, width=1, right=True, left=True)
  if i in k4:
      ax.tick_params(axis='y', length=7, width=1, right=True, left=False)
  if i in k2:
      ax.tick_params(axis='y', length=7, width=1, right=False)
      fig.colorbar(A,ax=ax, shrink=0.5)  #  Here is the Colorbar option 
  if i in k3:
      ax.tick_params(axis='x', length=7, width=1,top=False)
      ax.title.set_text(S[i-1])
      
  fig.tight_layout(h_pad=0)
  plt.show()
  

  How to adjust colorbar without distortion of the last axis, Any remark from the community🙏 Thanks