A simple D3 script showing the use of the d3.range.map function to generate a simple multi-dimentional array. The code then generates a rather odd looking column chart with the bars height and width are set according to the data.
This rudimentary example uses html div's rather than svg rect's to generate the chart columns.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>D3 : Multi-dimentional Data Array - Column Chart</title> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script> | |
| <style type="text/css"> | |
| #chartholder { | |
| height: 400px; | |
| width: 600px; | |
| } | |
| .bar { | |
| display: inline-block; | |
| width: 50px; | |
| height: 10px; | |
| margin-right: 2px; | |
| background-color: teal; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="chartholder"></div> | |
| <script type="text/javascript"> | |
| // Generate ransom multi-dimensional array | |
| var data = d3.range(10).map(function () { | |
| return { | |
| x: Math.random(), | |
| y: Math.random() | |
| }; | |
| }); | |
| var svg = d3.select('#chartholder').selectAll('div') | |
| .data(data) | |
| .enter() | |
| .append('div') | |
| .attr('class', 'bar') | |
| .style('height', function (d) { | |
| return d.y * 300 + 'px'; | |
| }) | |
| .style('width', function (d) { | |
| return d.x * 80 + 'px'; | |
| }); | |
| </script> | |
| </body> | |
| </html> |