问如何使用d3.js图编写图

EN

d3.json('data.json', function(data) {
    console.log(data);
});

d3.csv('data.csv', function(data) {
    console.log(data);
});

d3.json('data.json', function(error, data) {
    if (error) {
        return console.warn(error);
    }

 // Manage the data

});

let svg = d3.select('svg');
let margin = 200,
  width = svg.attr('width') - margin,
  height = svg.attr('height') - margin;

svg.append('text')
  .attr('transform', 'translate(100,0)')
  .attr('x', 50).attr('y', 50)
  .attr('font-size', '20px')
  .attr('class', 'title')
  .text('Population bar chart');

let x = d3.scaleBand().range([0, width]).padding(0.4);
let y = d3.scaleLinear().range([height, 0]);

let g = svg.append('g').attr('transform', 'translate(' + 100 + ',' + 100 + ')');

 d3.csv('https://gist.githubusercontent.com/teocci/c0effdc5851bc7a07375106f1d9f4772/raw/1a22006fd5c8747dedee88e9f4980ea4155f9ba3/data.csv', function(error, data) {
  if (error) {
    throw error;
  }

  x.domain(data.map(function(d) {
    return d.year;
  }));
  y.domain([0, d3.max(data, function(d) {
    return d.population;
  })]);

  g.append('g')
    .attr('transform', 'translate(0,' + height + ')')
    .call(d3.axisBottom(x))
    .append('text')
    .attr('y', height - 250)
    .attr('x', width - 125)
    .attr('text-anchor', 'end')
    .attr('font-size', '18px')
    .attr('stroke', 'blue')
    .style('fill', 'blue')
    .text('year');

  g.append('g')
    .append('text')
    .attr('transform', 'rotate(-90)')
    .attr('y', 6)
    .attr('dy', '-50px')
    .attr('dx', '-100px')
    .attr('text-anchor', 'end')
    .attr('font-size', '18px')
    .attr('stroke', 'blue')
    .style('fill', 'blue')
    .text('population');

  g.append('g')
    .attr('transform', 'translate(0, 0)')
    .call(d3.axisLeft(y))

  g.selectAll('.bar')
    .data(data)
    .enter()
    .append('rect')
    .attr('class', 'bar')
    .on('mouseover', onMouseOver)
    .on('mouseout', onMouseOut)
    .attr('x', function(d) {
      return x(d.year);
    })
    .attr('y', function(d) {
      return y(d.population);
    })
    .attr('width', x.bandwidth()).transition()
    .ease(d3.easeLinear).duration(200)
    .delay(function(d, i) {
      return i * 25;
    })

    .attr('height', function(d) {
      return height - y(d.population);
    });
});


function onMouseOver(d, i) {
  d3.select(this)
    .attr('class', 'highlight');

  d3.select(this)
    .transition()
    .duration(200)
    .attr('width', x.bandwidth() + 5)
    .attr('y', function(d) {
      return y(d.population) - 10;
    })
    .attr('height', function(d) {
      return height - y(d.population) + 10;
    });

  g.append('text')
    .attr('class', 'val')
    .attr('x', function() {
      return x(d.year);
    })

    .attr('y', function() {
      return y(d.value) - 10;
    })
}

function onMouseOut(d, i) {
  d3.select(this)
    .attr('class', 'bar');

  d3.select(this)
    .transition()
    .duration(200)
    .attr('width', x.bandwidth())
    .attr('y', function(d) {
      return y(d.population);
    })
    .attr('height', function(d) {
      return height - y(d.population);
    });

  d3.selectAll('.val')
    .remove()
}

.bar {
  fill: green;
}

.highlight {
  fill: red;
}

.title {
  fill: blue;
  font-weight: bold;
}

<svg width="500" height="500"></svg>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>