HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
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.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
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.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
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.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<h2>Vehicles recalls for January 2015</h2>
<div id="RecallsChart"></div>
<div id="RecallDetails"></div>
#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;
}
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)");
});
Also see: Tab Triggers