Customizing D3js code

Modify the d3js code below [login to view URL] To have the following: 1- Adjust the chart to have a lesser height (300px overall) -- The small chart height would be 50px, If possible make the x-axis labels appear in the middle of the chart. -- Ther large chart would take the rest of the space, while taking care of proper spacing for labels and ticks. 2- Change the large graph into a column chart, each column represents one full day: -- Highlight columns and show a tooltip with date and count on mouseover event. -- Allow selecting one day/column via mouse/touch clicks. A selection event should be fired that can be captured in JavaScript code. -- Make it possible to programmatically change the zoom range and the selected date. 3- Make the chart width flexible: -- The small chart always shows the full data range but shows more or less ticks depending on the window width. -- The large chart and the zoom brush adjust width to show more or less columns depending on the window width, centered around the selected date if any. Sample Data Use the following data sample to generate the graph: ‘data’ is an array with each array element consisting of time (in microseconds) that marks the start of the day and count. ****( check the attached file)*****