d3.js Stacked Bar Chart

I would like to display data as a stacked bar chart using the [d3.js][1] library. An example of using d3 to create this type of chart is [here][2]. My data includes values for an arbitrary number of foodstuffs within a set of categories for a set of countries. I have attached two example datasets: * [login to view URL] * [login to view URL] The function would firstly calculate an overview of the data by category, as illustrated in: * [login to view URL] * [login to view URL] It would then display this overview in a stacked bar chart as illustrated in the attached OverviewChart.jpg. This chart has two buttons: 1. Switch Dataset - transitions chart between data in [login to view URL] and [login to view URL] 2. See Details - transitions chart to corresponding detail dataset, as illustrated in [login to view URL] attached These would be nice smooth [transitions][3]. In reality this data would be sent to the browser as a JSON. One of the first tasks would be to define the ideal format of this JSON. The function should be able to cope with any data in a JSON of the right format (i.e. any number of categories, foodstuffs and countries) Please let me know if you have any questions or suggestions. More details are in the "Additional Information" box. Kind Regards, Derek. ## Deliverables COLOURS The colours should be generated in a predictable way from the country names. For example here is a hackish way to do it: // adds up the unicode value of each character in the id, and takes the last two digits as a "predictable random number" function id_to_index(id) { var bin = 0; for (var i = 0; i < [login to view URL]; i++) { bin += [login to view URL](i); } bin = [login to view URL](); var code = [login to view URL]([login to view URL] - 2, 2); return Number(code) / 100; } var color_scale = [login to view URL]("#CCCCCC", "#24466B"); color = color_scale(id_to_index([login to view URL])); TOOLTIPS The country names should be displayed in an HTML tooltip which appears near the mouse when the user hovers over the bar segment, stays static while the mouse moves within that bar segment, and then disappears when the mouse moves off the chart or to a new bar segment. Here is some example formatting which gives white text in a semi-transparent grey rounded box: #tooltip { display: none; position:absolute; color: white; font-size: 14px; background: rgba(0,0,0,0.5); padding: 5px 10px 5px 10px; -moz-border-radius: 8px 8px; border-radius: 8px 8px; transition: opacity 500ms linear; -moz-transition: opacity 500ms linear; -webkit-transition: opacity 500ms linear; } Please use no additional libraries to generate this tooltip. The only libraries used in this application should be d3.js and JQuery. PRESENTATION It would be acceptable to send the results in a single file that demonstrates the behaviour. However I'm looking for people that I can work with on an ongoing basis and there are two things I'm looking out for: 1) People with a knowledge of Rails and who could demonstrate this working in a Heroku Rails Bootstrap app. OR 2) People who are very good at Javascript which means understanding [JavaScript patterns][4] and being able to contribute to a library like [nvd3][5] or having a familiarity with frameworks like [backbone.js][6] Please let me know if you have any questions or suggestions, Kind Regards, Derek.