martin-martin/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <title>d3eath sentence</title>

  <script src="http://d3js.org/d3.v3.min.js"></script>

  <style type='text/css'>
    /*some style for the visualization*/
    body {
      max-width: 400px;
      margin: auto;
      text-align: center;
    }
    p {
      color: lightgray;
    }
    a {
      color: gray;
    }
    .chart,
    .axis {
      display: flex;
      justify-content: space-between;
      align-items: vertical;
      font-size: 10px;
    }
    .chart div {
      font-family: sans-serif;
      background-color: black;
      color: white;
      width: 20px;
      height: 50px; /*this gets overwritten in the draw() function*/
    }

  </style>

  <script type="text/javascript">
  // data of death sentences in the USA for 4 years
  var data = [
    {
      'year': 2000,
      'deaths': 85
    },
    {
      'year': 2005,
      'deaths': 60
    },
    {
      'year': 2010,
      'deaths': 46
    },
    {
      'year': 2015,
      'deaths': 28
    }
  ];

  // drawing the bar chart
  function draw(data) {
      d3.select('.chart')
        .selectAll('div')
        .data(data)
        .enter()
        .append('div')
        .style('height', function(d) { return d.deaths * 10 + 'px'; })
        .text(function(d) { return d.deaths; });
      // highlighting the data-associated ticks
      d3.selectAll('.five')
        .style('color', 'black');
  };
  </script>
</head>
<body>

  <!-- introduction and explanation -->
  <h1>number of death sentences executed in the USA<br><em>for specific years</em></h1>
  <p style="color:black;">what <a href="http://viz.wtf/image/140698552508">this graph</a> <strong>misses</strong> are reproducible <strong>values</strong></p>
  <hr>

  <!-- creating an amateur axis object... -->
  <div class="axis">
    <p class="five">2000</p>
    <p>2001</p>
    <p>2002</p>
    <p>2013</p>
    <p>2014</p>
    <p class="five">2005</p>
    <p>2006</p>
    <p>2007</p>
    <p>2018</p>
    <p>2019</p>
    <p class="five">2010</p>
    <p>2011</p>
    <p>2012</p>
    <p>2013</p>
    <p>2014</p>
    <p class="five">2015</p>
  </div>

  <!-- basic html structure where the d3 bars get appended -->
  <div class='chart'></div>

  <script type='text/javascript'>
    // calling the function that populates the div
    draw(data);
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8'>
	<title>d3eath sentence</title>

	<script src="http://d3js.org/d3.v3.min.js"></script>

	<style type='text/css'>
	/some style for the visualization/
	body {
	max-width: 400px;
	margin: auto;
	text-align: center;
	}
	p {
	color: lightgray;
	}
	a {
	color: gray;
	}
	.chart,
	.axis {
	display: flex;
	justify-content: space-between;
	align-items: vertical;
	font-size: 10px;
	}
	.chart div {
	font-family: sans-serif;
	background-color: black;
	color: white;
	width: 20px;
	height: 50px; /this gets overwritten in the draw() function/
	}

	</style>

	<script type="text/javascript">
	// data of death sentences in the USA for 4 years
	var data = [
	{
	'year': 2000,
	'deaths': 85
	},
	{
	'year': 2005,
	'deaths': 60
	},
	{
	'year': 2010,
	'deaths': 46
	},
	{
	'year': 2015,
	'deaths': 28
	}
	];

	// drawing the bar chart
	function draw(data) {
	d3.select('.chart')
	.selectAll('div')
	.data(data)
	.enter()
	.append('div')
	.style('height', function(d) { return d.deaths * 10 + 'px'; })
	.text(function(d) { return d.deaths; });
	// highlighting the data-associated ticks
	d3.selectAll('.five')
	.style('color', 'black');
	};
	</script>
	</head>
	<body>

	<!-- introduction and explanation -->
	<h1>number of death sentences executed in the USA<br><em>for specific years</em></h1>
	<p style="color:black;">what <a href="http://viz.wtf/image/140698552508">this graph</a> <strong>misses</strong> are reproducible <strong>values</strong></p>
	<hr>

	<!-- creating an amateur axis object... -->
	<div class="axis">
	<p class="five">2000</p>
	<p>2001</p>
	<p>2002</p>
	<p>2013</p>
	<p>2014</p>
	<p class="five">2005</p>
	<p>2006</p>
	<p>2007</p>
	<p>2018</p>
	<p>2019</p>
	<p class="five">2010</p>
	<p>2011</p>
	<p>2012</p>
	<p>2013</p>
	<p>2014</p>
	<p class="five">2015</p>
	</div>

	<!-- basic html structure where the d3 bars get appended -->
	<div class='chart'></div>

	<script type='text/javascript'>
	// calling the function that populates the div
	draw(data);
	</script>
	</body>
	</html>