Percentage of electricity produced from nuclear sources per year

In the chart we have shown percentage of electricity produced from nuclear sources per year, through to 2015.

Data published by World Bank- World Development Indicators (WDI) Percentage of electricity produce from nuclear sources.

forked from curran's block: Stylized Scatter Plot with Color Legend

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js"></script>
    <title>Basic Scatter Plot</title>
    <style>
      body {
        margin: 0px;
      }
      .domain {
        display: none;
      }
      .tick line {
        stroke: #C0C0BB;
      }
      .tick text, .legendCells text {
        fill: #e4e2e1;
        font-size: 10pt;
        font-family: sans-serif;
      }
      .axis-label, .legend-label {
        fill: #e1e0df;
        font-size: 15pt;
        font-family: sans-serif;
      }
      .subtitle {
        font-size: 16pt;
      	font-family: 'Open Sans', sans-serif;
      	alignment-baseline: middle;
      	fill: #ffffff;
    }
    </style>
  </head>
  <body>
    <svg width="960" height="500"></svg>
    <script>
      const xValue = d => d.Year;
      const xLabel = 'Year';
      const yValue = d => d.NuclearPercent;
      const yLabel = 'Nuclear Power Percentage (%)';
      const colorValue = d => d.Entity;
      const colorLabel = 'Countries';
      const margin = { left: 120, right: 300, top: 20, bottom: 120 };

g.append('text')
        .attr('class', 'subtitle')
        .attr('x', -50)
        .attr('y', margin.top-60)
    		.style('font-weight', 'bold')
        .text('Percentage of Electricity Produced From Nuclear Sources Per Year');
      
      xAxisG.append('text')
          .attr('class', 'axis-label')
          .attr('x', innerWidth / 2)
          .attr('y', 50)
          .text(xLabel);

yAxisG.append('text')
          .attr('class', 'axis-label')
          .attr('x', -innerHeight / 2)
          .attr('y', -60)
          .attr('transform', `rotate(-90)`)
          .style('text-anchor', 'middle')
          .text(yLabel);

colorLegendG.append('text')
          .attr('class', 'legend-label')
          .attr('x', -30)
          .attr('y', -40)
          .text(colorLabel);

const xScale = d3.scaleLinear();
      const yScale = d3.scaleLinear();
      const colorScale = d3.scaleOrdinal()
        .range(d3.schemeCategory10);

const xAxis = d3.axisBottom()
        .scale(xScale)
        .tickPadding(15)
        .tickSize(-innerHeight)
        .tickFormat(d3.format("d"));

const yAxis = d3.axisLeft()
        .scale(yScale)
        .ticks(6)
        .tickPadding(15)
        .tickSize(-innerWidth)
        .tickFormat(d3.format("d"));

const colorLegend = d3.legendColor()
        .scale(colorScale)
        .shape('circle');

const row = d => {
        d.year = +d.year;
        d.NuclearPercent = +d.NuclearPercent;
        return d;
      };

d3.csv('nuclear-energy-vet.csv', row, data => {
        xScale
          .domain(d3.extent(data, xValue))
          .range([0, innerWidth])
          .nice();

yScale
          .domain(d3.extent(data, yValue))
          .range([innerHeight, 0])
          .nice();

g.selectAll('circle').data(data)
          .enter().append('circle')
            .attr('cx', d => xScale(xValue(d)))
            .attr('cy', d => yScale(yValue(d)))
            .attr('fill', d => colorScale(colorValue(d)))
            .attr('fill-opacity', 0.6)
            .attr('r', d => yValue(d)*20/100);

xAxisG.call(xAxis);
        yAxisG.call(yAxis);
        colorLegendG.call(colorLegend)
          .selectAll('.cell text')
            .attr('dy', '0.1em');
      });
    </script>
  </body>
</html>

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

https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js