Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <h2>Vehicles recalls for January 2015</h2>

<div id="RecallsChart"></div>
<div id="RecallDetails"></div>

              
            
!

CSS

              
                #RecallsChart {
	position:relative;
	display:inline-block;
}
#RecallDetails {
	display:inline-block;
	height:540px;
	width:500px;
	padding:.8em;
	position:absolute;
	margin-left:10px;
	overflow-y:auto;
  font-size:.8em;
}
.maker {
	font-weight:700;
	font-size:1.3em;
}
              
            
!

JS

              
                var svg = dimple.newSvg("#RecallsChart", 800, 560);

data = [
    {'Record creation date':'20150105','Maker':'MCI','Potential number of units affected':'109','JSON data':'{"items":[{"item":{"date":"January, 5 2015","models":["J4500 (years 2013, 2014, 2015), manufactured from December, 23 2013 to December, 19 2014"],"units":"109","defect":"Jaguar Land Rover North America, LLC (Land Rover) is recalling certain model year 2013-2015 Land Rover Range Rover vehicles manufactured August 23, 2012, to February 5, 2015, and 2014-2015 Range Rover Sport vehicles manufactured June 16, 2013, to February 5, 2015.  In the affected vehicles, a light weight adult front seat passenger may be improperly classified by the occupant classification system (OCS) and, as a result, the front seat passenger air bag may be disabled.","consequence":"If the front passenger air bag is disabled during a vehicle crash, there is an increased risk of injury.","corrective":"Land Rover will notify owners, and dealers will update the OCS software, free of charge. The recall is expected to begin April 17, 2015.  Owners may contact Land Rover customer service at 1-800-637-6837. Land Rover’s number for this recall is P059."}}]}'},
    {'Record creation date':'20150107','Maker':'Victory','Potential number of units affected':'2342','JSON data':'{"items":[{"item":{"date":"January, 7 2015","models":["Gunner (2015), manufactured from November, 19 2013 to February, 4 2014","Hammer Eight Ball (2013), manufactured from May, 2 2013 to December, 5 2013"],"units":"2,342","defect":"Jaguar Land Rover North America, LLC (Land Rover) is recalling certain model year 2013-2015 Land Rover Range Rover vehicles manufactured August 23, 2012, to February 5, 2015, and 2014-2015 Range Rover Sport vehicles manufactured June 16, 2013, to February 5, 2015.  In the affected vehicles, a light weight adult front seat passenger may be improperly classified by the occupant classification system (OCS) and, as a result, the front seat passenger air bag may be disabled.","consequence":"If the front passenger air bag is disabled during a vehicle crash, there is an increased risk of injury.","corrective":"Land Rover will notify owners, and dealers will update the OCS software, free of charge. The recall is expected to begin April 17, 2015.  Owners may contact Land Rover customer service at 1-800-637-6837. Land Rover’s number for this recall is P059."}},{"item":{"date":"January, 7 2015","models":["Hammer Eight Ball (2014), manufactured from May, 2 2013 to December, 5 2013","Vegas Eight Ball (2013, 2014), manufactured from May, 2 2013 to December, 4 2013","Jackpot (2013, 2014), manufactured from April, 24 2013 to December, 4 2013","High Ball (2013, 2014), manufactured from May, 2 2013 to December, 4 2013","Cross Roads Eight Ball (2014), manufactured from May, 15 2013 to October, 10 2013","Cross Country Eight Ball (2014), manufactured from May, 15 2013 to October, 10 2013","Cross Country (2013, 2014), manufactured from April, 30 2013 to October, 10 2013","Ness Cross Country (2014), manufactured from May, 15 2013 to October, 9 2013","Cross Roads (2013, 2014), manufactured from April, 30 2013 to September, 25 2013","Hardball (2013), manufactured from May, 1 2013 to July, 18 2013"],"units":"2,342","defect":"Mercedes-Benz USA, LLC. (MBUSA) is recalling certain model year 2013-2015 E350 Sedan, E350 4Matic Sedan, E350 4Matic Station Wagon, E400 Hybrid Sedan, CLS 550 CGI, and CLS550 4Matic, 2013-2014 E550 4Matic Sedan, 2013 E63 Sedan, E63 Station Wagon and CLS63, 2014-2015 CLS63 4Matic, E63 4Matic Sedan, E63 4Matic Sedan ’S’, and E63 4Matic Station Wagon, 2015 CLS400, 2015 E400 Sedan, E400 4Matic Sedan and CLS400 4Matic and 2014 CLS63 ’S’.  The affected vehicles have a rubber seal at the back of the engine bay that may temporarily stick to the hood when it is opened and then may fall into the engine bay when the hood is closed.","consequence":"If the rubber seal falls into the engine compartment, it may contact parts of the exhaust system, increasing the risk of a fire.","corrective":"MBUSA will notify owners, and dealers will attach four additional retaining clips to the rubber seal, free of charge. The recall is expected to begin by mid-March 2015. Owners may contact MBUSA customer service at 1-201-573-5339.  MBUSA’s number for this recall is 2015020001."}}]}'},
    {'Record creation date':'20150108','Maker':'Thor','Potential number of units affected':'154','JSON data':'{"items":[{"item":{"date":"January, 8 2015","models":["Palazzo (2015), manufactured from April, 24 2014 to December, 11 2014","Challenger (2015), manufactured from April, 24 2014 to December, 11 2014","Hurricane (2015), manufactured from April, 24 2014 to December, 11 2014","Four Winds 5000 (2015), manufactured from April, 24 2014 to December, 11 2014"],"units":"154","defect":"Mercedes-Benz USA, LLC. (MBUSA) is recalling certain model year 2013-2015 E350 Sedan, E350 4Matic Sedan, E350 4Matic Station Wagon, E400 Hybrid Sedan, CLS 550 CGI, and CLS550 4Matic, 2013-2014 E550 4Matic Sedan, 2013 E63 Sedan, E63 Station Wagon and CLS63, 2014-2015 CLS63 4Matic, E63 4Matic Sedan, E63 4Matic Sedan ’S’, and E63 4Matic Station Wagon, 2015 CLS400, 2015 E400 Sedan, E400 4Matic Sedan and CLS400 4Matic and 2014 CLS63 ’S’.  The affected vehicles have a rubber seal at the back of the engine bay that may temporarily stick to the hood when it is opened and then may fall into the engine bay when the hood is closed.","consequence":"If the rubber seal falls into the engine compartment, it may contact parts of the exhaust system, increasing the risk of a fire.","corrective":"MBUSA will notify owners, and dealers will attach four additional retaining clips to the rubber seal, free of charge. The recall is expected to begin by mid-March 2015. Owners may contact MBUSA customer service at 1-201-573-5339.  MBUSA’s number for this recall is 2015020001."}},{"item":{"date":"January, 8 2015","models":["Windsport (2015), manufactured from April, 24 2014 to December, 11 2014","Chateau Citation (2015), manufactured from April, 24 2014 to December, 11 2014"],"units":"154","defect":"Tireco Inc. (Tireco) is recalling certain Milestar BS623 Premium All Position tires, size 225/70R19.5, and Milestar BD733 Regional Open Shoulder Drive tires, size 225/70R19.5, manufactured June 9, 2014, to September 28, 2014. The affected tires may crack in the lower sidewall.","consequence":"Tires that have cracks in the lower sidewall have an increased risk of a sudden failure, increasing the risk of a crash.","corrective":"Tireco will notify owners, and purchasers of the affected tires will receive full refunds.  The recall is expected to begin February 27, 2015.  Owners may contact Tireco customer service at 1-310-767-7990."}},{"item":{"date":"January, 8 2015","models":["Chateau (2015), manufactured from April, 24 2014 to December, 11 2014"],"units":"154","defect":"Dana Driveshaft Manufacturing, LLC (Dana) is recalling certain commercial vehicle lightweight driveshafts, model  SPL250, sizes 1610-2200 or 2220-2830, manufactured January 2, 2013, through June 30, 2013.  In affected driveshafts, the welded bond of the driveshaft and the rear yoke may fail, leading to slippage between the driveshaft and yoke and, potentially, to loss of torque to the rear wheels.","consequence":"If the welded bond fails and results in a loss of torque to the rear wheels, the vehicle operator may be unable to move the vehicle, or may experience deceleration if the vehicle is in motion, increasing the risk of a vehicle crash.","corrective":"Dana will notify owners, and dealers will replace the driveshafts, free of charge. The manufacturer has not yet provided a notification schedule. Owners may contact Dana customer service at 1-419-887-3000.  Note: This recall is an expansion of 14E-050."}},{"item":{"date":"January, 8 2015","models":["Miramar (2015), manufactured from April, 24 2014 to December, 11 2014"],"units":"154","defect":"Nova Bus (Nova) is recalling certain model year 2006-2007 LFS transit buses manufactured January 1, 2006, to December 31, 2007.  In the affected vehicles, the rear exit door controls may not function properly.","consequence":"If the rear exit door does not open and close as expected, there is an increased risk of injury to bus occupants.","corrective":"Nova notified owners, and dealers corrected the exit door control programming, free of charge.  Owners may contact Nova customer service at 1-450-472-6410. Nova’s number for this recall is CR1300."}}]}'}
];

var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 710, 355)
var x = myChart.addCategoryAxis("x", "Maker");
x.addOrderRule("Maker");
x.title = '';
myChart.addLogAxis("y", "Potential number of units affected");
var mySeries = myChart.addSeries(["Maker", "JSON data"], dimple.plot.bar);

mySeries.getTooltipText = function (e) {
  var datum = jQuery.parseJSON(e.aggField[1]);
  var titles = [];
  titles['date'] = 'Record creation date';
  titles['units'] = 'Potential number of units affected';
  titles['defect'] = 'Defect summary';
  titles['consequence'] = 'Consequence summary';
  titles['corrective'] = 'Corrective summary';
  var html = '';
  html += '<span class="maker">'+e.aggField[0]+'</span>';
  html += '<br /><br />';
  $.each(datum.items, function(index1, element) {
    $.each(element, function(index2, item) {
      $.each(item, function(key, value) {
        if (key === 'models') {
          if (value.length == 1) {
            html +=  '<strong>Model</strong>:';
          }
          else {
            html +=  '<strong>Models</strong>:';
          }
          html += '<ul>';
          $.each(value, function(vk, val) {
            html += '<li>'+val+'</li>';
          });
          html += '</ul>';
        }
        else {
          html +=  '<em>'+titles[key]+'</em>: '+value+'<br /><br />';
        }
      });
    });
  });

  $("#RecallDetails").html(html);

  return [
    "Maker: " + e.aggField[0],
    "Potential number of units affected: " + parseInt(e.cy).toLocaleString('en')
  ];
};

myChart.ease = "elastic";
myChart.draw(1000);

x.shapes.selectAll("text")
  .style("text-anchor", "end")
  .each(function () {
     var rec = this.getBBox();
     d3.select(this)
      .attr("transform", "rotate(-90," + (rec.x + rec.width) + "," + (rec.y + (rec.height / 2)) + ") translate(5, 0)");
  });

              
            
!
999px

Console