Adding legend to D3 chart

D3 is very powerful free JavaScript library that allows to do many things such as DOM manipulations, working with data and shapes, smoth transitions between UI states etc. I show just a simple example how I adedd a legend into a coloured barchart.

HTML and CSS:

1. <style>
2. #barchart {
3. float: left;
4. }
5. #legend svg {
6. height: 300px;
7. }
8. </style>
10. <div id="barchart"></div>
11. <div id="legend"></div>

<style>
   #barchart {
      float: left;
   }
   #legend svg {
      height: 300px; 
   }
</style>

<div id="barchart"></div>
<div id="legend"></div>

Javascript:

//Initialize data
  var chartData = [
   {name: "Sydney", value: 4.74, color: "#2ea4ea"},
   {name: "Melbourne", value: 4.68, color: "#eb1560"},
   {name: "Brisbane", value: 2.33, color: "#f78f12"},
   {name: "Adelaide", value: 1.32, color: "#20c02d"},
   {name: "Perth", value: 2.00, color: "#8031eb"}
  ];
  
  //Select top container and create svg parent node
  var barWidth = 50;
  var heightScale = 60;
  var barchart = d3
   .select('#barchart')
   .append('svg')
   .style('height', '330px')
   .selectAll('.bar')
   .data(chartData);
   
  //Create bar rectangles
  barchart
   .enter()
   .append('rect')
   .attr('class', 'bar')
   .attr('width', barWidth)
   .attr('height', d => {
    return d.value * heightScale;
   })
   .style('fill', d => d.color)
   .attr('transform',
                (d, i) => {
                    var x = barWidth * i + 10;
                    var y = 310 - d.value * heightScale;
                    return `translate(${x}, ${y})`;
                });
  
  //Add bar values
  barchart
   .enter()
   .append('text')
   .attr('x', (d, i) => barWidth * i + 20)
   .attr('y', d => 300 - d.value * heightScale)
   .text(d => d.value);  
   

  //Initialize legend
  var legendItemSize = 12;
        var legendSpacing = 4;
  var xOffset = 150;
  var yOffset = 100;
        var legend = d3
   .select('#legend')
   .append('svg')
            .selectAll('.legendItem')
            .data(chartData);
   
  //Create legend items
  legend
   .enter()
   .append('rect')
   .attr('class', 'legendItem')
   .attr('width', legendItemSize)
   .attr('height', legendItemSize)
   .style('fill', d => d.color)
   .attr('transform',
                (d, i) => {
                    var x = xOffset;
                    var y = yOffset + (legendItemSize + legendSpacing) * i;
                    return `translate(${x}, ${y})`;
                });
  
  //Create legend labels
  legend
   .enter()
   .append('text')
   .attr('x', xOffset + legendItemSize + 5)
   .attr('y', (d, i) => yOffset + (legendItemSize + legendSpacing) * i + 12)
   .text(d => d.name);  

1. //Initialize data
2. var chartData = [
3. {name: "Sydney", value: 4.74, color: "#2ea4ea"},
4. {name: "Melbourne", value: 4.68, color: "#eb1560"},
5. {name: "Brisbane", value: 2.33, color: "#f78f12"},
6. {name: "Adelaide", value: 1.32, color: "#20c02d"},
7. {name: "Perth", value: 2.00, color: "#8031eb"}
8. ];
10. //Select top container and create svg parent node
11. var barWidth = 50;
12. var heightScale = 60;
13. var barchart = d3
14. .select('#barchart')
15. .append('svg')
16. .style('height', '330px')
17. .selectAll('.bar')
18. .data(chartData);
20. //Create bar rectangles
21. barchart
22. .enter()
23. .append('rect')
24. .attr('class', 'bar')
25. .attr('width', barWidth)
26. .attr('height', d => {
27. return d.value * heightScale;
28. })
29. .style('fill', d => d.color)
30. .attr('transform',
31. (d, i) => {
32. var x = barWidth * i + 10;
33. var y = 310 - d.value * heightScale;
34. return `translate(${x}, ${y})`;
35. });
37. //Add bar values
38. barchart
39. .enter()
40. .append('text')
41. .attr('x', (d, i) => barWidth * i + 20)
42. .attr('y', d => 300 - d.value * heightScale)
43. .text(d => d.value);
46. //Initialize legend
47. var legendItemSize = 12;
48. var legendSpacing = 4;
49. var xOffset = 150;
50. var yOffset = 100;
51. var legend = d3
52. .select('#legend')
53. .append('svg')
54. .selectAll('.legendItem')
55. .data(chartData);
57. //Create legend items
58. legend
59. .enter()
60. .append('rect')
61. .attr('class', 'legendItem')
62. .attr('width', legendItemSize)
63. .attr('height', legendItemSize)
64. .style('fill', d => d.color)
65. .attr('transform',
66. (d, i) => {
67. var x = xOffset;
68. var y = yOffset + (legendItemSize + legendSpacing) * i;
69. return `translate(${x}, ${y})`;
70. });
72. //Create legend labels
73. legend
74. .enter()
75. .append('text')
76. .attr('x', xOffset + legendItemSize + 5)
77. .attr('y', (d, i) => yOffset + (legendItemSize + legendSpacing) * i + 12)
78. .text(d => d.name);

//Initialize data
  var chartData = [
   {name: "Sydney", value: 4.74, color: "#2ea4ea"},
   {name: "Melbourne", value: 4.68, color: "#eb1560"},
   {name: "Brisbane", value: 2.33, color: "#f78f12"},
   {name: "Adelaide", value: 1.32, color: "#20c02d"},
   {name: "Perth", value: 2.00, color: "#8031eb"}
  ];
  
  //Select top container and create svg parent node
  var barWidth = 50;
  var heightScale = 60;
  var barchart = d3
   .select('#barchart')
   .append('svg')
   .style('height', '330px')
   .selectAll('.bar')
   .data(chartData);
   
  //Create bar rectangles
  barchart
   .enter()
   .append('rect')
   .attr('class', 'bar')
   .attr('width', barWidth)
   .attr('height', d => {
    return d.value * heightScale;
   })
   .style('fill', d => d.color)
   .attr('transform',
                (d, i) => {
                    var x = barWidth * i + 10;
                    var y = 310 - d.value * heightScale;
                    return `translate(${x}, ${y})`;
                });
  
  //Add bar values
  barchart
   .enter()
   .append('text')
   .attr('x', (d, i) => barWidth * i + 20)
   .attr('y', d => 300 - d.value * heightScale)
   .text(d => d.value);  
   

  //Initialize legend
  var legendItemSize = 12;
        var legendSpacing = 4;
  var xOffset = 150;
  var yOffset = 100;
        var legend = d3
   .select('#legend')
   .append('svg')
            .selectAll('.legendItem')
            .data(chartData);
   
  //Create legend items
  legend
   .enter()
   .append('rect')
   .attr('class', 'legendItem')
   .attr('width', legendItemSize)
   .attr('height', legendItemSize)
   .style('fill', d => d.color)
   .attr('transform',
                (d, i) => {
                    var x = xOffset;
                    var y = yOffset + (legendItemSize + legendSpacing) * i;
                    return `translate(${x}, ${y})`;
                });
  
  //Create legend labels
  legend
   .enter()
   .append('text')
   .attr('x', xOffset + legendItemSize + 5)
   .attr('y', (d, i) => yOffset + (legendItemSize + legendSpacing) * i + 12)
   .text(d => d.name);  

You can try it on the JSFiddler:
https://jsfiddle.net/AndrewBuntsev/usk73eoa

For more information about D3 read this
https://d3indepth.com/