barchart example.rtf

{\rtf1\ansi\ansicpg1252\deff0\nouicompat\deflang1033{\fonttbl{\f0\fnil\fcharset0 Calibri;}}
{\*\generator Riched20 10.0.14393}\viewkind4\uc1 
\pard\sa200\sl276\slmult1\f0\fs22\lang9 <!DOCTYPE html>\par
<!--\par
To change this license header, choose License Headers in Project Properties.\par
To change this template file, choose Tools | Templates\par
and open the template in the editor.\par
-->\par
<html>\par
    <head>\par
        <title>TODO supply a title</title>\par
        <meta charset="UTF-8">\par
        <meta name="viewport" content="width=device-width, initial-scale=1.0">\par
        <script src="http://d3js.org/d3.v3.min.js"></script>\par
    </head>\par
    <body>\par
        <div class="">\par
    <h2>Create A Bar Chart With D3 JavaScript</h2>\par
    <div id="bar-chart">\par
        <script type="text/javascript">\par
           var chartdata = [40, 60, 80, 100, 70, 120, 100, 60, 70, 150, 120, 140];\par
\par
            var height = 200,\par
            width = 720,\par
 \par
            barWidth = 40,\par
            barOffset = 20;\par
  \par
        d3.select('#bar-chart').append('svg')\par
            .attr('width', width)\par
            .attr('height', height)\par
            .style('background', '#dff0d8')\par
            .selectAll('rect').data(chartdata)\par
            .enter().append('rect')\par
            .style(\{'fill': '#3c763d', 'stroke': '#d6e9c6', 'stroke-width': '5'\})\par
            .attr('width', barWidth)\par
            .attr('height', function (data) \{\par
            return data;\par
    \})\par
    .attr('x', function (data, i) \{\par
        return i * (barWidth + barOffset);\par
    \})\par
    .attr('y', function (data) \{\par
        return height - data;\par
    \});\par
    </script>\par
    </div>\par
</div>\par
    </body>\par
</html>\par
}
 