Adding responsive legend to D3 charts

gistfile1.html

<div class="sk-legend-wrapper" ng-show="isLegendShown"> 
    <div kendo-window="chartLegend" k-title="'Legend'" k-visible="false" k-on-open="chartLegendVisible = true" k-on-close="chartLegendVisible = false">
        <div class="sk-legend-content k-content" kendo-tab-strip="" k-options="tabStripOptions">
            <!-- tab list -->
            <ul>
              <li class="k-state-active">Career Names</li>
              <li>Bubbles</li>
            </ul>
            <div class="sk-legend-careers">
               <ul>
                 <div class="sk-legend-career" ng-class="{'sk-highlight-career': highlightCareer}" career-num="{{careerNum}}" ng-mouseover="addHighlight(careerNum); showCareerInfo = true; highlightCareer = true;" ng-mouseout="removeHighlight(careerNum); showCareerInfo = false; highlightCareer = false;" ng-repeat="(careerNum, career) in selectedCareersData | orderBy:'career_name'">
                    <span class="sk-legend-career-name">{{career.career_name}}</span>
                    <div class="sk-legend-career-info" ng-show="showCareerInfo">
                        <div>
                            <span class="sk-tooltip-label">People employed: </span><span class="sk-tooltip-data">{{career.career_2012_emp*1000 | number}}</span>
                        </div>
                        <div>
                            <span class="sk-tooltip-label">Expected change in demand: </span><span class="sk-tooltip-data">{{career.career_percent_emp_change}}%</span>
                        </div>
                        <div>
                            <span class="sk-tooltip-label">Annual wage: </span><span class="sk-tooltip-data">${{career.career_med_ann_wage | number}}</span>
                        </div>
                    </div>
                 </div>
               </ul>
            </div>
            <div sk-legend-bubbles="" class="sk-legend-bubbles">
            </div>
       </div>
    </div>
</div>