aaizemberg/index.html

## 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 &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>


<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>
	<!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>