<!DOCTYPE html> <html> <head> <style> .axis path { fill: none; stroke: #C0C0C0; shape-rendering: crispEdges; } .tick.major line { stroke: #C0C0C0; shape-rendering: crispEdges; } .viz { height: 500px; } .y-title, .x-title { font-size: 20px; font-weight: bold; } .legend { font-size: 12px; } .vizkit-tooltip { background-color: whiteSmoke; padding: 5px; border: 1px solid #E0E0E0; } .vizkit-tooltip h1 { font-size: 12px; } .bar-mo { stroke: none; } .key-mo { -webkit-svg-shadow: 0 0 7px #53BE12; } .bar-nomo { stroke: #c0c0c0; fill: whiteSmoke !important; } .key-nomo { fill: whiteSmoke !important; } .bar-set-1 .bar { fill: #7591FF; } .bar-set-2 .bar { fill: #F24E4E; } .bar-set-3 .bar{ fill: #00E00F; } .bar-set-4 .bar{ fill: #E0BF00; } .key-1 { fill: #7591FF; } .key-2 { fill: #F24E4E; } .key-3 { fill: #00E00F; } .key-4 { fill: #E0BF00; } </style> </head> <body> <div class="viz"></div> <script src="../lib/d3.js"></script> <script src="../vizkit.js"></script> <script> var data = [ [ {"key": "blue", "xValue": '1', "yValue": '1'}, {"key": "blue", "xValue": '2', "yValue": '2'}, {"key": "blue", "xValue": '3', "yValue": '3'}, {"key": "blue", "xValue": '4', "yValue": '4'}, {"key": "blue", "xValue": '5', "yValue": '5'} ], [ {"key": "red", "xValue": '1', "yValue": '3'}, {"key": "red", "xValue": '2', "yValue": '4'}, {"key": "red", "xValue": '3', "yValue": '2'}, {"key": "red", "xValue": '4', "yValue": '6'}, {"key": "red", "xValue": '5', "yValue": '5'} ], [ {"key": "green", "xValue": '1', "yValue": '9'}, {"key": "green", "xValue": '2', "yValue": '6'}, {"key": "green", "xValue": '3', "yValue": '1'}, {"key": "green", "xValue": '4', "yValue": '2'}, {"key": "green", "xValue": '5', "yValue": '2'} ], [ {"key": "yellow", "xValue": '1', "yValue": '10'}, {"key": "yellow", "xValue": '2', "yValue": '7'}, {"key": "yellow", "xValue": '3', "yValue": '2'}, {"key": "yellow", "xValue": '4', "yValue": '1'}, {"key": "yellow", "xValue": '5', "yValue": '3'} ], ]; var DrawViz = vizkit.barchart(data) .xAxis({scale: 'ordinal'}) .legend({addMouseoverClasses: true, symbol: {type: 'square'}}) .tooltip({content: "<h1>{{key}}:</h1><p>{{xValue}}, {{yValue}}</p>"}); DrawViz(d3.select('.viz')); </script> </body> </html>