It appends a [&#39;g&#39; element][1] to the SVG. `g` element [is used to group SVG shapes together][2], so no it&#39;s not d3 specific.


  [1]: http://www.w3.org/TR/SVG/struct.html#Groups
  [2]: http://tutorials.jenkov.com/svg/g-element.html

I came here from a d3 learning curve as well. As already pointed out this is not specific to d3, it is specific to svg attributes. Here is a really good tutorial explaining the advantages of svg:g (grouping). 

It is not that different from the use case of &quot;grouping&quot; in graphical drawings such 
as ones you would do in a powerpoint presentation. 

http://tutorials.jenkov.com/svg/g-element.html

As pointed in above link: to translate you need to use translate(x,y):
&gt; The `&lt;g&gt;-element` doesn&#39;t have x and y attributes. To move the contents
&gt; of a `&lt;g&gt;-element` you can only do so using the transform attribute,
&gt; using the &quot;translate&quot; function, like this: transform=&quot;translate(x,y)&quot;.

I tried to execute the following code on a Python IDLE 

    from __future__ import braces 

And I got the following error:

&lt;!-- language: lang-none --&gt;

    SyntaxError: not a chance

What does the above error mean? 

Syntax Error: Not a Chance - What is this error?

Every `docker run` command, or every `RUN` command inside a Dockerfile, creates a container. If the container is no longer running it can still be seen with `docker ps -a`.

Should I be concerned with having an enormous list of non-running containers? Should I be issuing `docker rm` on non-running containers?

I am unsure of what performance or memory/storage penalties these non-running containers incur.

Should I be concerned about excess, non-running, Docker containers?

I am new to `D3.js`, started learning today only

I looked the the [donut example][1] and found this code

    var svg = d3.select(&quot;body&quot;).append(&quot;svg&quot;)
        .attr(&quot;width&quot;, width)
        .attr(&quot;height&quot;, height)
      .append(&quot;g&quot;)
        .attr(&quot;transform&quot;, &quot;translate(&quot; + width / 2 + &quot;,&quot; + height / 2 + &quot;)&quot;);

I searched for [documentation][2], but did not understood what `.append(&quot;g&quot;)` is appending

Is it even `D3` specific?

Looking for guidance here


  [1]: http://bl.ocks.org/mbostock/3887193
  [2]: https://github.com/mbostock/d3/wiki/Selections#wiki-append

D3.js: what is &#39;g&#39; in .append(&quot;g&quot;) D3.js code?

I am new to <code>D3.js</code>, started learning today only
I looked the the <a href="http://bl.ocks.org/mbostock/3887193" target="_blank" rel="noopener noreferrer">donut example</a> and found this code
<pre><code class="hljs language-arduino">var svg = d3.select("body").append("svg")
 .attr("width", width)
 .attr("height", height)
 .append("g")
 .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
</code></pre>
I searched for <a href="https://github.com/mbostock/d3/wiki/Selections#wiki-append" target="_blank" rel="noopener noreferrer">documentation</a>, but did not understood what <code>.append("g")</code> is appending
Is it even <code>D3</code> specific?
Looking for guidance here

How do I use JavaScript to detect

    &lt;br&gt;
    &lt;br&gt;
    &lt;br&gt;

to become one 

    &lt;br&gt;
?

I tried with:

    jQuery(&#39;body&#39;).html().replace(/(\&lt;br\&gt;\r\n){3, }/g,&quot;\n&quot;);

but this is not working for me.


Replace multiple &lt;br&gt;&#39;s with only one &lt;br&gt;

I&#39;ve tried  `console.log` and looping through it using `for in`. 

Here it the [MDN Reference][1] on FormData. 

Both attempts are in this [fiddle][2].

    var fd = new FormData(),
        key;
    
    // poulate with dummy data
    fd.append(&quot;key1&quot;, &quot;alskdjflasj&quot;);
    fd.append(&quot;key2&quot;, &quot;alskdjflasj&quot;);
    
    // does not do anything useful
    console.log(fd);
    
    // does not do anything useful   
    for(key in fd) {
        console.log(key);
    }

How can I inspect form data to see what keys have been set.

  [1]: https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects
  [2]: http://jsfiddle.net/XntyW/1

How to inspect FormData?

In my HTML I can define these knockout foreach bindings:

    &lt;!-- ko foreach: customer --&gt;
       &lt;div data-bind=&quot;text: id&quot; /&gt;
    &lt;!-- /ko --&gt;

vs

    &lt;div data-bind=&quot;foreach: customer&quot;&gt;
        &lt;div data-bind=&quot;text: id&quot; /&gt;
    &lt;/div&gt;

Where are the differences between those two approaches?

comment foreach binding vs foreach binding in knockoutjs

I would like to read a file and convert it into a base64 encoded string using the FileReader object. Here&#39;s the code I use :
&lt;pre&gt;

    var reader = new FileReader();
    reader.onloadend = function(evt) {  
        // file is loaded
        result_base64 = evt.target.result; 
    };
    reader.readAsDataURL(file); 

  
&lt;/pre&gt;

But in this case, I get the result of the conversion in the event handler (onLoadEnd event). I would like a synchronous method. Is there a way the &quot;readAsDataURL&quot; method can return directly the value of the &#39;result_base64&#39; variable ?

Read a file synchronously in Javascript

**Updated for brevity**

How can I reference the $parents&#39; $parent in nested Knockout foreach / with bindings?

Example -

        &lt;!-- ko foreach: grandParent --&gt;
            &lt;tr&gt;
                &lt;!-- ko foreach: $parent.parents --&gt; // &lt;-- Doesn&#39;t work
                    &lt;!-- ko foreach: children --&gt;
                        &lt;td data-bind=&quot;if: favToy().name == $parent.$parent.favToy().name&quot;&gt;
                            &lt;span data-bind=&quot;text: favToy().name&quot;&gt;&lt;/span&gt;
                        &lt;/td&gt;
                    &lt;!-- /ko --&gt;
                &lt;!-- /ko --&gt;
            &lt;/tr&gt;
        &lt;!-- /ko --&gt;

**Original**

Sorry for the confusing question but I am trying to reach a second level parent&#39;s value to check against a value in the current context (like below) to only show a span if it matches a $parent&#39;s $parent&#39;s value (ugh!)

        &lt;!-- ko foreach: grandParent --&gt;
            &lt;tr&gt;
                &lt;!-- ko foreach: $parent.parents --&gt;
                    &lt;!-- ko foreach: children --&gt;
                        &lt;td data-bind=&quot;if: favToy().name == $parent.$parent.favToy().name&quot;&gt;
                            &lt;span data-bind=&quot;text: favToy().name&quot;&gt;&lt;/span&gt;
                        &lt;/td&gt;
                    &lt;!-- /ko --&gt;
                &lt;!-- /ko --&gt;
            &lt;/tr&gt;
        &lt;!-- /ko --&gt;

It would be easier to do it this way but from what I have read this is not possible or I am doing it wrong :) 

        &lt;!-- ko foreach: grandParent --&gt;
            &lt;tr&gt;
                &lt;!-- ko foreach: $parent.parents --&gt;
                    &lt;!-- ko foreach: children ? favToy().name == $parent.$parent.favToy().name --&gt;
                        &lt;td  data-bind=&quot;text: favToy().name&quot;&gt;&lt;/td&gt;
                    &lt;!-- /ko --&gt;
                &lt;!-- /ko --&gt;
            &lt;/tr&gt;
        &lt;!-- /ko --&gt;

Any help would be greatly appreciated.

Access $parent&#39;s $parent in knockout view - nesting context

**How to apply force repulsion on map&#39;s labels so they find their right places automatically ?** 

----
##Bostock&#39; &quot;Let&#39;s Make a Map&quot;

Mike Bostock&#39;s [Let&#39;s Make a Map](http://bost.ocks.org/mike/map/) (screenshot below). By default, labels are put at the point&#39;s coordinates and polygons/multipolygons&#39;s `path.centroid(d)` + a simple left or right align, so they frequently enter in conflict.

![enter image description here][1]

##Handmade label placements
One improvement [I met](http://wwwpub.zih.tu-dresden.de/~rklammer/html/mapOfGermany.html) requires to add an human made `IF` fixes, and to add as many as needed, such :

    .attr(&quot;dy&quot;, function(d){ if(d.properties.name===&quot;Berlin&quot;) {return &quot;.9em&quot;} })

The whole become increasingly dirty as the number of labels to reajust increase  :

    //places&#39;s labels: point objects
    svg.selectAll(&quot;.place-label&quot;)
        .data(topojson.object(de, de.objects.places).geometries)
      .enter().append(&quot;text&quot;)
        .attr(&quot;class&quot;, &quot;place-label&quot;)
        .attr(&quot;transform&quot;, function(d) { return &quot;translate(&quot; + projection(d.coordinates) + &quot;)&quot;; })
        .attr(&quot;dy&quot;, &quot;.35em&quot;)
        .text(function(d) { if (d.properties.name!==&quot;Berlin&quot;&amp;&amp;d.properties.name!==&quot;Bremen&quot;){return d.properties.name;} })
        .attr(&quot;x&quot;, function(d) { return d.coordinates[0] &gt; -1 ? 6 : -6; })
        .style(&quot;text-anchor&quot;, function(d) { return d.coordinates[0] &gt; -1 ? &quot;start&quot; : &quot;end&quot;; });
    
    //districts&#39;s labels: polygons objects.
    svg.selectAll(&quot;.subunit-label&quot;)
        .data(topojson.object(de, de.objects.subunits).geometries)
      .enter().append(&quot;text&quot;)
        .attr(&quot;class&quot;, function(d) { return &quot;subunit-label &quot; + d.properties.name; })
        .attr(&quot;transform&quot;, function(d) { return &quot;translate(&quot; + path.centroid(d) + &quot;)&quot;; })
        .attr(&quot;dy&quot;, function(d){
		//handmade IF
    	 	if( d.properties.name===&quot;Sachsen&quot;||d.properties.name===&quot;Th&#252;ringen&quot;|| d.properties.name===&quot;Sachsen-Anhalt&quot;||d.properties.name===&quot;Rheinland-Pfalz&quot;)
    			{return &quot;.9em&quot;}
    		else if(d.properties.name===&quot;Brandenburg&quot;||d.properties.name===&quot;Hamburg&quot;)
    			{return &quot;1.5em&quot;}
    		else if(d.properties.name===&quot;Berlin&quot;||d.properties.name===&quot;Bremen&quot;)
    			{return &quot;-1em&quot;}else{return &quot;.35em&quot;}}
        )
        .text(function(d) { return d.properties.name; });

##Need for better solution
That&#39;s just not manageable for larger maps and sets of labels. **How to add force repulsions to these both classes: `.place-label` and `.subunit-label`?**


This issue is quite a brain storming as I haven&#39;t deadline on this, but I&#39;am quite curious about it. I was thinking about this question as a basic D3js implementation of Migurski/[Dymo.py](https://github.com/migurski/Dymo). Dymo.py&#39;s README.md documentation set a large set of objectives, from which to select the core needs and functions (20% of the work, 80% of the result). 

 1. **Initial placement:** Bostock give a good start with left/right positionning relative to the geopoint. 
 2. **Inter-labels repulsion:** different approach are possible, Lars &amp; Navarrc proposed one each,
 3. **Labels annihilation:** A label annihilation function when one label&#39;s overall repulsion is too intense, since squeezed between other labels, with the priority of annihilation being either random or based on a `population` data value, which we can get via NaturalEarth&#39;s .shp file.
 4. [Luxury] **Label-to-dots repulsion:** with fixed dots and mobile labels. But this is rather a luxury. 

I ignore if label repulsion will work across layers and classes of labels. But getting countries labels and cities labels not overlapping may be a luxury as well.

  [1]: http://i.stack.imgur.com/HUuli.png

D3js: Automatic labels placement to avoid overlaps? (force repulsion)

I have this D3 chart - pretty much out of the box. Is there a way to make it responsive and use percentages for the width and height variables, innerRadius, and outerRadius? I&#39;m workign on a responsive site and need this to change based on screen size/browser size.

jsfiddle here: http://jsfiddle.net/BTfmH/1/

Code:

    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
    &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;style type=&quot;text/css&quot;&gt;
    html,
    body {
      margin:0;
      padding:0;
      width:100%;
      height:100%;
    }
    
    .chart-container {
    /*  width:50%;
      height:50%;*/
    }
    &lt;/style&gt;
    &lt;body&gt;
    &lt;script src=&quot;http://d3js.org/d3.v3.min.js&quot;&gt;&lt;/script&gt;
    &lt;script&gt;
      var width = 350,
          height = 350,
          τ = 2 * Math.PI;
    
      var arc = d3.svg.arc()
          .innerRadius(100)
          .outerRadius(135)
          .startAngle(0);
    
    var svg = d3.select(&quot;body&quot;).append(&quot;svg&quot;)
          .attr(&quot;width&quot;, width)
          .attr(&quot;height&quot;, height)
        .append(&quot;g&quot;)
          .attr(&quot;transform&quot;, &quot;translate(&quot; + width / 2 + &quot;,&quot; + height / 2 + &quot;)&quot;)
    
      var background = svg.append(&quot;path&quot;)
          .datum({endAngle: τ})
          .style(&quot;fill&quot;, &quot;green&quot;)
          .attr(&quot;d&quot;, arc);
    
      var foreground = svg.append(&quot;path&quot;)
        .datum({endAngle: .127 * τ})
          .style(&quot;fill&quot;, &quot;grey&quot;)
          .attr(&quot;d&quot;, arc);
    
    setInterval(function() {
      foreground.transition()
          .duration(750)
          .call(arcTween, Math.random() * τ);
    }, 1500);
    
      function arcTween(transition, newAngle) {
    
        transition.attrTween(&quot;d&quot;, function(d) {
    
          var interpolate = d3.interpolate(d.endAngle, newAngle);
    
          return function(t) {
    
            d.endAngle = interpolate(t);
    
            return arc(d);
          };
        });
    }
    &lt;/script&gt;


responsive D3 chart

I am trying to set an icon with [FontAwesome][1] instead of text in my D3 nodes. This is the original implmentation, with text:

    g.append(&#39;svg:text&#39;)
        .attr(&#39;x&#39;, 0)
        .attr(&#39;y&#39;, 4)
        .attr(&#39;class&#39;, &#39;id&#39;)
        .text(function(d) { return d.label; });

And now I try with icons:

    g.append(&#39;svg:i&#39;)
       .attr(&#39;x&#39;, 0)
       .attr(&#39;y&#39;, 4)
       .attr(&#39;class&#39;, &#39;id icon-fixed-width icon-user&#39;);

But this is not working, even though the markup is right, and the CSS rules are properly hit: the icons are not visible.

Any idea why?

Here is the related [jsbin][2]

EDIT
----

I have found this alternative to insert images: http://bl.ocks.org/mbostock/950642

    node.append(&quot;image&quot;)
        .attr(&quot;xlink:href&quot;, &quot;https://github.com/favicon.ico&quot;)
        .attr(&quot;x&quot;, -8)
        .attr(&quot;y&quot;, -8)
        .attr(&quot;width&quot;, 16)
        .attr(&quot;height&quot;, 16);

Which is exactly what I want to do, but it does not work with `&lt;i&gt;` elements used by FontAwesome.

  [1]: http://fortawesome.github.io/Font-Awesome/
  [2]: http://jsbin.com/eFAZABe/2

Adding FontAwesome icons to a D3 graph

What is the difference between svg&#39;s x and dx attribute (or y and dy)? When would be a proper time to use the axis shift attribute (dx) versus the location attribute (x)?

For example, I have noticed a lot of d3 examples doing something like this

    chart.append(&quot;text&quot;)
       .attr(&quot;x&quot;, 0)
       .attr(&quot;y&quot;, 0)
       .attr(&quot;dy&quot;, -3)
       .text(&quot;I am a label&quot;)
 
What is the advantage or reasoning for setting both y and dy when the following seems to do the same thing?

    chart.append(&quot;text&quot;)
       .attr(&quot;x&quot;, 0)
       .attr(&quot;y&quot;, -3)
       .text(&quot;I am a label&quot;)

Content Type	Original Author	Original Content on Stackoverflow
Question	daydreamer	View Question on Stackoverflow
Solution 1 - Javascript	Cihan Keser	View Answer on Stackoverflow
Solution 2 - Javascript	kramamurthi	View Answer on Stackoverflow

D3.js: what is 'g' in .append("g") D3.js code?

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

Solution 2 - Javascript

Should I be concerned about excess, non-running, Docker containers?

Syntax Error: Not a Chance - What is this error?

Attributions