D3 How to place the image next to the horizontal line text

Question

I created this D3 chart that displays the mood value of the results. However, what I'm trying to do is place an image next to horizontal text. Using the JSFiddle example, let's say that "Result 2" is less than 20%. To the right of the text “Result 2” there will be a sad face. Then, if the value was above 20% ... instead a happy face would be displayed. Can this be done?

JSFiddle: https://jsfiddle.net/sopjzwst/3/

I created two different faces below the chart, for example:

<img src="http://www.clipartkid.com/images/15/cartoons-cartoon-logos-cartoon-logo-design-gHlQ6b-clipart.jpg" alt="Smiley face" height="42" width="42"> <img src="http://www.clipartbest.com/cliparts/Rid/8EG/Rid8EGpi9.png" alt="Sad face" height="42" width="42"> 

Answer 1

You can use the ternary operator to determine which image to add next to the stripes:

 svg.selectAll(".images") .data(data) .enter() .append("svg:image") .attr("x", function(d) {return x(d.value) + 4; } ) .attr("y", function(d) { return y(d.sentiment) + 10; }) .attr("width", 42) .attr("height", 42) .attr("xlink:href", function(d){ return d.value < 20 ? "http://www.clipartbest.com/cliparts/Rid/8EG/Rid8EGpi9.png" : "http://www.clipartkid.com/images/15/cartoons-cartoon-logos-cartoon-logo-design-gHlQ6b-clipart.jpg" }); 

So, if d.value less than 20 (true), it adds the first link, otherwise (false) adds the second link.

Here is your updated script: https://jsfiddle.net/c3k8c3a4/

EDIT To display images next to ticks rather than bars, change the x and y tags, respectively. This is the fiddle: https://jsfiddle.net/6uasj8hz/