index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>makeover monday, week 13, 2020</title>
<script src="https://d3js.org/d3.v5.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&family=Indie+Flower&display=swap" rel="stylesheet">
<style>
text,div#note {
font-family: 'Indie Flower', cursive;
}
circle.hombres {
fill: steelblue;
}
circle.mujeres {
fill: plum;
}
</style>
</head>
<body>
<div id='vis'></div>
<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 & <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>
<script>
var data = [{"topping":"Mushrooms","total":65,"male":63,"female":68},
{"topping":"Onion","total":62,"male":62,"female":63},
{"topping":"Ham","total":61,"male":66,"female":56},
{"topping":"Peppers","total":60,"male":63,"female":57},
{"topping":"Chicken","total":56,"male":60,"female":52},
{"topping":"Pepperoni","total":56,"male":66,"female":46},
{"topping":"Tomato","total":51,"male":49,"female":54},
{"topping":"Bacon","total":49,"male":56,"female":43},
{"topping":"Pineapple","total":42,"male":40,"female":44},
{"topping":"Sweetcorn","total":42,"male":38,"female":46},
{"topping":"Beef","total":36,"male":47,"female":26},
{"topping":"Olives","total":33,"male":33,"female":32},
{"topping":"Chillies","total":31,"male":42,"female":22},
{"topping":"Jalapenos","total":30,"male":39,"female":21},
{"topping":"Spinach","total":26,"male":20,"female":32},
{"topping":"Pork","total":25,"male":34,"female":17},
{"topping":"Tuna","total":22,"male":23,"female":21},
{"topping":"Anchovies","total":18,"male":21,"female":15},
{"topping":"something else","total":11,"male":12,"female":10}];
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>