<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"/> <title>rdxl html scaffolding </title> <link crossorigin="anonymous" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <script crossorigin="anonymous" charset="UTF-8" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" src="https://code.jquery.com/jquery-3.5.1.slim.min.js" type="application/javascript"> </script> <script crossorigin="anonymous" charset="UTF-8" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" type="application/javascript"> </script> <script crossorigin="anonymous" charset="UTF-8" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" type="application/javascript"> </script> <script charset="UTF-8" src="https://d3js.org/d3.v4.min.js" type="application/javascript"> </script> </head> <body> <div class="container"> <h2><a href="https://github.com/andrew-johnson-4/rdxl">Rdxl Templating Examples</a></h2> <div style="padding-top:10px;"> <div style="float:left; margin-right:3px; padding:4px; border:2px solid #EEEEEE; border-radius:5px 5px 0 0; cursor:pointer;" onclick="let cs = document.getElementsByClassName('_uid_index_tabs_1593211131_581126000');
for(var ci=0; ci<cs.length; ci++){ cs[ci].style.display = 'none'; }
document.getElementById('_uid_index_tabs_1593211131_581126000_0').style.display = 'initial';"> Inline Container Elements </div> <div style="float:left; margin-right:3px; padding:4px; border:2px solid #EEEEEE; border-radius:5px 5px 0 0; cursor:pointer;" onclick="let cs = document.getElementsByClassName('_uid_index_tabs_1593211131_581126000');
for(var ci=0; ci<cs.length; ci++){ cs[ci].style.display = 'none'; }
document.getElementById('_uid_index_tabs_1593211131_581126000_1').style.display = 'initial';"> Flexible Container Elements </div> <div style="float:left; margin-right:3px; padding:4px; border:2px solid #EEEEEE; border-radius:5px 5px 0 0; cursor:pointer;" onclick="let cs = document.getElementsByClassName('_uid_index_tabs_1593211131_581126000');
for(var ci=0; ci<cs.length; ci++){ cs[ci].style.display = 'none'; }
document.getElementById('_uid_index_tabs_1593211131_581126000_2').style.display = 'initial';"> Input Elements </div> <div style="float:left; margin-right:3px; padding:4px; border:2px solid #EEEEEE; border-radius:5px 5px 0 0; cursor:pointer;" onclick="let cs = document.getElementsByClassName('_uid_index_tabs_1593211131_581126000');
for(var ci=0; ci<cs.length; ci++){ cs[ci].style.display = 'none'; }
document.getElementById('_uid_index_tabs_1593211131_581126000_3').style.display = 'initial';"> Contextual Elements </div> <div style="float:left; margin-right:3px; padding:4px; border:2px solid #EEEEEE; border-radius:5px 5px 0 0; cursor:pointer;" onclick="let cs = document.getElementsByClassName('_uid_index_tabs_1593211131_581126000');
for(var ci=0; ci<cs.length; ci++){ cs[ci].style.display = 'none'; }
document.getElementById('_uid_index_tabs_1593211131_581126000_4').style.display = 'initial';"> Graph Elements </div> <div style="clear:both;"> </div> <div style="padding:10px; background-color:#F0F0F0;"> <div id="_uid_index_tabs_1593211131_581126000_0" class="_uid_index_tabs_1593211131_581126000" style=" "> <h3>Inline Container Elements</h3> <p>Table: <table class="table"> <tbody> <tr> <td> A </td> <td> B </td> <td> C </td> </tr> <tr> <td> 1 </td> <td> 3 </td> <td> 2 </td> </tr> <tr> <td> Q </td> <td> W </td> <td> E </td> </tr> </tbody> </table></p> <p>List: <ul class="list-group"> <li class="list-group-item"> AB </li> <li class="list-group-item"> CD </li> <li class="list-group-item"> EF </li> <li class="list-group-item"> GH </li> </ul></p> </div> <div id="_uid_index_tabs_1593211131_581126000_1" class="_uid_index_tabs_1593211131_581126000" style="display:none "> <h3>Flexible Container Elements</h3> <div class="row"> <div class="col-sm-6"> <b>Card:</b> </div> <div class="col-sm-6"> <b>Carousel:</b> </div> </div> <div class="row"> <div class="col-sm-3"> <div class="card"> <img src="'stanford_bunny.png'" class="card-img-top"/> <div class="card-body"> <p>The Stanford Bunny is cute!</p> </div> </div> </div> <div class="col-sm-3"> <div class="card"> <img src="'icann.png'" class="card-img-top"/> <div class="card-body"> <h4>ICANN Headquarters</h4> <p>ICANN is a large organization</p> </div> </div> </div> <div class="col-sm-6"> <div id="_uid_carousel_1593211131_580543000" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="'carousel-item active'"> <img src="'stanford_bunny.png'" class="d-block w-100"/> </div> <div class="'carousel-item'"> <img src="'icann.png'" class="d-block w-100"/> </div> <div class="'carousel-item'"> <img src="'stanford_bunny.png'" class="d-block w-100"/> </div> <div class="'carousel-item'"> <img src="'stanford_bunny.png'" class="d-block w-100"/> </div> </div> <a class="carousel-control-prev" href="'#_uid_carousel_1593211131_580543000'" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"> </span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="'#_uid_carousel_1593211131_580543000'" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"> </span> <span class="sr-only">Next</span> </a> </div> </div> </div> </div> <div id="_uid_index_tabs_1593211131_581126000_2" class="_uid_index_tabs_1593211131_581126000" style="display:none "> <h3>Input Elements</h3> <input type="button" name="'Button'" value="'Button'"/> <p>Checkbox: <input type="checkbox" name="'Checkbox'"/></p> <p>Button Group: <span style="background-color:#CCCCCC;"> <input type="button" name="'GroupButton1'" value="'GroupButton1'"/> <input type="button" name="'GroupButton2'" value="'GroupButton2'"/> </span></p> <p>Text Input: <input type="text" name="'Text'"/></p> <p>Email Input: <input type="email" name="'Email'"/></p> <p>Search Input: <input type="search" name="'Search'"/></p> <p>Password Input: <input type="password" name="'Password'"/></p> <p>Number Input: <input type="number" name="'Number'"/></p> <p>Telephone Input: <input type="tel" name="'Telephone'"/></p> <p>Url Input: <input type="url" name="'Url'"/></p> <p>Range Input: <input type="range" name="'Range'" min="4" max="11"/></p> <p>Color Input: <input type="color" name="'Color'"/></p> <p>Date Input: <input type="date" name="'Date'"/></p> <p>Datetime Input: <input type="datetime-local" name="'Datetime'"/></p> <p>Month Input: <input type="month" name="'Month'"/></p> <p>Week Input: <input type="week" name="'Week'"/></p> <p>Time Input: <input type="time" name="'Time'"/></p> <p>File Input: <input type="file" name="'File'"/></p> <p>Image Input: <input type="image" name="'Image'"/></p> <p>Radio Input: <span style="background-color:#CCCCCC;"> <input type="radio" name="\"Radio\"" value="\"A\""/> <input type="radio" name="\"Radio\"" value="\"B\""/> <input type="radio" name="\"Radio\"" value="\"C\""/> </span></p> <p>Submit Input: <input type="submit"/></p> </div> <div id="_uid_index_tabs_1593211131_581126000_3" class="_uid_index_tabs_1593211131_581126000" style="display:none "> <h3>Contextual Elements</h3> <p>Alerts:</p> <p><div class="alert alert-primary alert-dismissible fade show" role="alert"> Primary Alert <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div></p> <p><div class="alert alert-secondary alert-dismissible fade show" role="alert"> Secondary Alert <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div></p> <p><div class="alert alert-success alert-dismissible fade show" role="alert"> Success Alert <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div></p> <p><div class="alert alert-danger alert-dismissible fade show" role="alert"> Danger Alert <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div></p> <p><div class="alert alert-warning alert-dismissible fade show" role="alert"> Warning Alert <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div></p> <p><div class="alert alert-info alert-dismissible fade show" role="alert"> Info Alert <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div></p> <p><div class="alert alert-light alert-dismissible fade show" role="alert"> Light Alert <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div></p> <p><div class="alert alert-dark alert-dismissible fade show" role="alert"> Dark Alert <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div></p> </div> <div id="_uid_index_tabs_1593211131_581126000_4" class="_uid_index_tabs_1593211131_581126000" style="display:none "> <h3>Graph Elements</h3> <p>Bar Graph: <div id="_uid_d3_div__1593211131_581028000"> </div> <script> var margin = {top: 20, right: 20, bottom: 60, left: 60},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scaleBand()
.range([0, width])
.padding(0.1);
var y = d3.scaleLinear()
.range([height, 0]);
var svg = d3.select( '#_uid_d3_div__1593211131_581028000' ).append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
var data = [ ['Joeline',7], ['John',5], ['Jane',9], ['Jennifer',3], ['James',4], ];
x.domain(data.map(function(d) { return d[0]; }));
y.domain([0, d3.max(data, function(d) { return d[1]; })]);
svg.selectAll('.bar')
.data(data)
.enter().append('rect')
.attr('class', 'bar')
.attr('x', function(d) { return x(d[0]); })
.attr('width', x.bandwidth())
.attr('y', function(d) { return y(d[1]); })
.attr('height', function(d) { return height - y(d[1]); });
svg.append('g')
.attr('transform', 'translate(0,' + height + ')')
.call(d3.axisBottom(x));
svg.append('g')
.call(d3.axisLeft(y));
svg.append('text')
.attr('transform',
'translate(' + (width/2) + ',' +
(height + margin.top + 20) + ')')
.style('text-anchor', 'middle')
.text( 'name' );
svg.append('text')
.attr('transform', 'rotate(-90)')
.attr('y', 0 - margin.left)
.attr('x',0 - (height / 2))
.attr('dy', '1em')
.style('text-anchor', 'middle')
.text( 'pairs of shoes' ); </script></p> <p>Histogram: <div id="_uid_d3_div__1593211131_581071000"> </div> <script> var margin = {top: 20, right: 20, bottom: 60, left: 60},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scaleBand()
.range([0, width])
.padding(0.1);
var y = d3.scaleLinear()
.range([height, 0]);
var svg = d3.select( '#_uid_d3_div__1593211131_581071000' ).append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
var data = [ [45,49,1], [50,54,3], [55,59,5], [60,64,7], [65,69,2], [70,74,6], [75,79,2], ];
x.domain(data.map(function(d) { return d[0]; }));
y.domain([0, d3.max(data, function(d) { return d[2]; })]);
svg.selectAll('.bar')
.data(data)
.enter().append('rect')
.attr('class', 'bar')
.attr('x', function(d) { return x(d[0]); })
.attr('width', x.bandwidth())
.attr('y', function(d) { return y(d[2]); })
.attr('height', function(d) { return height - y(d[2]); });
svg.append('g')
.attr('transform', 'translate(0,' + height + ')')
.call(d3.axisBottom(x));
svg.append('g')
.call(d3.axisLeft(y));
svg.append('text')
.attr('transform',
'translate(' + (width/2) + ',' +
(height + margin.top + 20) + ')')
.style('text-anchor', 'middle')
.text( 'seconds' );
svg.append('text')
.attr('transform', 'rotate(-90)')
.attr('y', 0 - margin.left)
.attr('x',0 - (height / 2))
.attr('dy', '1em')
.style('text-anchor', 'middle')
.text( '# of finishers' ); </script></p> </div> </div> </div> </div> </body> </html>
