d3 js adjust existing bar chart

Attached are 2 images and a HTML file. HTML file "[login to view URL]" uses d3 javascript library to make a bar chart with a line connecting the bars. I need you to make the chart look like the "new" image. Changes: 1. the bars are spaced an equal distance apart based on the width of the chart. Dynamic values so if chart width changes, so do the distance between the bars. 2. Bar width. Currently hard-coded to something like "30px" or "25%". Need to make it dynamic based on number of bars. Eg, if 10 bars, then bar width might be 10% or less. If only 5 bars, bar width might be near 20%. d3 has a built-in calculation for this, I think. 2. use rangeBound or similar command to move the first and last bars in away from the edge of the chart 3. the line currently connects the left corner of the bars. Need to connect the middle of the bars. For negative bars (orange color), connect middle bottom of bar. For positive bars (blue), connect middle top of bar. 4. X axis ticks. Currently they are positioned at x=0 for each bar. Need to be center of each bar.