makeover monday, W13 2020

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>makeover monday, week 13, 2020</title>

</head>

<div id="note">
    <div><span style="color:steelblue;font-weight:bold">Men</span> like spicy or meaty topping.</div>
    <div>Instead, <span style="color:plum;font-weight:bold">women</span> prefer the vegetarian options.</div>
  </div>
  
  <br>
  <small>
    <div><a href="https://www.makeovermonday.co.uk/">makeovermonday</a> week 13, 2020</div>
    <div>design &amp; <a href="https://bl.ocks.org/aaizemberg/97a1673474f29a413370e6b1bce6dada">code</a>: Ariel Aizemberg 
        <a href="https://twitter.com/aaizemberg"><img src="//www.twitter.com/favicon.ico" alt="twitter"></a>
        <a href="https://www.linkedin.com/in/arielaizemberg/"><img src="//www.linkedin.com/favicon.ico" alt="linkedin"></a>
    </div>
  </small>

var svg = d3.select("div#vis").append("svg").attr("width", 270).attr("height", 310);

svg.append("rect").attr("width", 270).attr("height", 310)

svg.selectAll('text').data(data).enter().append('text')
            .attr("x", 10)
            .attr("y", function(d, i) { return (i + 1) * 16; })
            .text(function(d, i) { return i + 1 + ". " + d.topping; })
            .attr("fill", (d) => ((d.male > d.female) ? 'steelblue' : 'plum'))

svg.selectAll('line').data(data).enter().append('line')
            .attr("x1", function(d) { return 150 + 1.5 * d3.min([d.male, d.female]); })
            .attr("y1", function(d, i) { return 12 + (i * 16); })
            .attr("x2", function(d) { return 150 + 1.5 * d3.max([d.male, d.female]); })
            .attr("y2", function(d, i) { return 12 + (i * 16); })
            .attr("stroke", (d) => ((d.male > d.female) ? 'steelblue' : 'plum'))
            .attr("stroke-width", 3)
            .append("title")
            .text( (d) => 'average ' + d.total + '%');

svg.selectAll('circle.hombres').data(data).enter().append('circle')
            .attr("class", "hombres")
            .attr("cx", function(d) { return 150 + d.male * 1.5; })
            .attr("cy", function(d, i) { return 12 + (i * 16); })
            .attr("r", (d) => ((d.male > d.female) ? 4 : 3))
            .append("title")
            .text( (d) => 'male ' + d.male + '%');

svg.selectAll('circle.mujeres').data(data).enter().append('circle')
            .attr("class", "mujeres")
            .attr("cx", function(d) { return 150 + (d.female * 1.5); })
            .attr("cy", function(d, i) { return 12 + (i * 16); })
            .attr("r", (d) => ((d.female > d.male) ? 4 : 3))
            .append("title")
            .text( (d) => 'female ' + d.female + '%');
</script>
</body>
</html>

https://d3js.org/d3.v5.min.js