Bootcamp: Chapter 13 - Code Snippet
No edit summary Tag: 2017 source edit |
(Added Edited template with July 12, 2025.) |
||
(17 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
{{Edited|July|12|2025}} | |||
<message>Write the content here to display this box</message> | |||
=== '''Steps 396, 399''' === | |||
' | ===== <span class="col-blue-dark">ThisIsHtml</span> ===== | ||
<style> | ' | ||
.chart-wrap { | <nowiki><style> | ||
margin-left: 50px; | .chart-wrap { | ||
font-family: sans-serif; | margin-left: 50px; | ||
height: 650px; | font-family: sans-serif; | ||
width: 300px; | height: 650px; | ||
} | width: 300px; | ||
.chart-wrap .title { | } | ||
font-weight: bold; | .chart-wrap .title { | ||
font-size: 1.62em; | font-weight: bold; | ||
padding: 0.5em 0 1.8em 0; | font-size: 1.62em; | ||
text-align: center; | padding: 0.5em 0 1.8em 0; | ||
white-space: nowrap; | text-align: center; | ||
} | white-space: nowrap; | ||
.chart-wrap.vertical .grid { | } | ||
.chart-wrap.vertical .grid { | |||
} | transform: translateY(-175px) translateX(175px) rotate(-90deg); | ||
.chart-wrap.vertical .grid .bar::after { | } | ||
.chart-wrap.vertical .grid .bar::after { | |||
transform: translateY(-50%) rotate(45deg); | |||
} | display: block; | ||
.chart-wrap.vertical .grid::before,. | } | ||
chart-wrap.vertical .grid::after { | .chart-wrap.vertical .grid::before, | ||
.chart-wrap.vertical .grid::after { | |||
} | transform: translateX(-0.2em) rotate(90deg); | ||
.chart-wrap .grid { | } | ||
position: relative; | .chart-wrap .grid { | ||
padding: 5px 0 5px 0; | position: relative; | ||
height: 100%; | padding: 5px 0 5px 0; | ||
width: 100%; | height: 100%; | ||
border-left: 2px solid #aaa; | width: 100%; | ||
background: repeating-linear-gradient(90deg,transparent,transparent 19.5%,rgba(170,170,170,0.7) 20%); | border-left: 2px solid #aaa; | ||
} | background: repeating-linear-gradient(90deg,transparent,transparent 19.5%,rgba(170,170,170,0.7) 20%); | ||
.chart-wrap .grid::before { | } | ||
font-size: 0.8em; | .chart-wrap .grid::before { | ||
font-weight: bold; | font-size: 0.8em; | ||
content: "0%"; | font-weight: bold; | ||
position: absolute; | content: "0%"; | ||
left: -0.5em; | position: absolute; | ||
top: -1.5em; | left: -0.5em; | ||
} | top: -1.5em; | ||
.chart-wrap .grid::after { | } | ||
font-size: 0.8em; | .chart-wrap .grid::after { | ||
font-weight: bold; | font-size: 0.8em; | ||
content: "100%"; | font-weight: bold; | ||
position: absolute; | content: "100%"; | ||
right: -1.5em; | position: absolute; | ||
top: -1.5em; | right: -1.5em; | ||
} | top: -1.5em; | ||
.chart-wrap .bar { | } | ||
width: var(--bar-value); | .chart-wrap .bar { | ||
height: 50px; | width: var(--bar-value); | ||
margin: 30px 0; | height: 50px; | ||
background-color:#F16335; | margin: 30px 0; | ||
border-radius: 0 3px 3px 0; | background-color: #F16335; | ||
} | border-radius: 0 3px 3px 0; | ||
.chart-wrap .bar:hover { | } | ||
opacity: 0.7; | .chart-wrap .bar:hover { | ||
} | opacity: 0.7; | ||
.chart-wrap .bar::after { | } | ||
.chart-wrap .bar::after { | |||
content: attr(data-name); | |||
margin-left: 100%; | |||
padding: 10px; | |||
} | display: inline-block; | ||
white-space: nowrap; | |||
} | |||
</style></nowiki> | |||
'+ | |||
' | |||
<nowiki><div class="chart-wrap vertical"> | |||
<h2 class="title">Bar Chart for Cars and Brands</h2></nowiki> | |||
<nowiki> </nowiki> | |||
<nowiki> </nowiki> <nowiki><div class="grid"> | |||
'+ | |||
Car.allInstances->groupby(c|c.BrandOfCar)->collect(tuple|tuple.BrandOfCar.Name,(100*tuple.List->size/Car.allinstances->size).Round(0).asstring+'%') | |||
->collect(values|'<div class="bar" style="--bar-value:'+values.Part2+';" data-name="'+values.Name+'" title="'+values.Name+' '+values.Part2+'"></div></nowiki>' | |||
) | |||
->asSeparatedList( <nowiki>''</nowiki> )+ | |||
' | |||
<nowiki> </nowiki> <nowiki></div></nowiki> | |||
<nowiki></div></nowiki>'<br /> | |||
</style> | === '''Step 406''' === | ||
' | |||
'+ | <nowiki><style> | ||
' | h1 { | ||
<div class="chart-wrap vertical"> | font: 24px sans-serif; | ||
} | |||
.bar { | |||
fill: #d81c3f; | |||
'+ | } | ||
Car.allInstances->groupby(c|c. | |||
->collect(values|'<div class="bar" style="--bar-value:'+values.Part2+';" data-name="'+values.Name+'" title="'+values.Name+' '+values.Part2+'"></div>' | .bar:hover { | ||
fill: darkgray; | |||
) | } | ||
->asSeparatedList( '' )+ | |||
' | .axis { | ||
font: 10px sans-serif; | |||
</ | } | ||
</ | |||
.axis path, | |||
.axis line { | |||
fill: none; | |||
( | stroke: #000; | ||
shape-rendering: crispEdges; | |||
} | |||
.x.axis path { | |||
display: none; | |||
} | |||
</style></nowiki> | |||
'+ | |||
' | |||
<nowiki><div class="chart-wrap vertical"> | |||
<h2 class="title">Bar Chart for Cars and Brands</h2></nowiki> | |||
<nowiki> </nowiki> | |||
<nowiki> </nowiki> <nowiki><div class="grid"> | |||
'+ | |||
Car.allInstances->groupby(c|c.BrandOfCar)->collect(tuple|tuple.BrandOfCar.Name,(100*tuple.List->size/Car.allinstances->size).Round(0).asstring+'%') | |||
->collect(values|'<div class="bar" style="--bar-value:'+values.Part2+';" data-name="'+values.Name+'" title="'+values.Name+' '+values.Part2+'"></div></nowiki>' | |||
) | |||
->asSeparatedList( <nowiki>''</nowiki> )+ | |||
' | |||
<nowiki> </nowiki> <nowiki></div></nowiki> | |||
<nowiki></div></nowiki>'+ | |||
'<nowiki><h1>SVG Vertical Bar Chart</h1></nowiki> | |||
<svg width="960" height="500"> | |||
<g transform="translate(40,20)"> | |||
<g class="x axis" transform="translate(0,450)">'+ | |||
let cars=Car.allInstances in | |||
( | |||
<nowiki> </nowiki> cars->groupby(c|c.BrandOfCar)->collect(tuple|tuple.BrandOfCar.Name,(100*tuple.List->size/cars->size).Round(0).asstring+'%',BrandOfCar.allinstances->indexof(tuple.BrandOfCar)*35) | |||
->collect(values|' | |||
<nowiki> </nowiki> <g class="tick" transform="translate('+values.Part3.asstring+',0)" style="opacity: 1;"><line y2="6" x2="0"></line> | |||
<text dy=".71em" y="9" x="0" style="text-anchor: middle;">'+values.Name+'</text> | |||
</g> | |||
' | |||
) | |||
->asSeparatedList( <nowiki>''</nowiki> ) | |||
)+ | |||
' | |||
<nowiki> </nowiki> | |||
<path class="domain" d="M0,6V0H900V6"></path> | |||
</g> | |||
<g class="y axis"> | |||
<g class="tick" transform="translate(0,450)" style="opacity: 1;"><line x2="-6" y2="0"></line> | |||
<text dy=".32em" x="-9" y="0" style="text-anchor: end;">0%</text> | |||
</g> | |||
<g class="tick" transform="translate(0,212)" style="opacity: 1;"><line x2="-6" y2="0"></line> | |||
<text dy=".32em" x="-9" y="0" style="text-anchor: end;">50%</text> | |||
</g> | |||
<g class="tick" transform="translate(0,24.87009919697684)" style="opacity: 1;"><line x2="-6" y2="0"></line> | |||
<text dy=".32em" x="-9" y="0" style="text-anchor: end;">100%</text> | |||
</g> | |||
<path class="domain" d="M-6,0H0V450H-6"></path> | |||
<text transform="rotate(-90)" y="6" dy=".71em" style="text-anchor: end;">Frequency</text> | |||
</g> | |||
'+ | |||
let cars=Car.allInstances in | |||
( | |||
<nowiki> </nowiki> cars->groupby(c|c.BrandOfCar)->collect(tuple|tuple.BrandOfCar.Name, | |||
<nowiki> </nowiki> (450*tuple.List->size/cars->size).Round(0), | |||
<nowiki> </nowiki> BrandOfCar.allinstances->indexof(tuple.BrandOfCar)*35) | |||
->collect(values|' | |||
<rect class="bar" x="'+values.Part3.asstring+'" width="31" y="'+values.Part2.asstring+'" height="'+(450-values.Part2).asstring+'"></rect> | |||
' | |||
) | |||
->asSeparatedList( <nowiki>''</nowiki> ) | |||
)+ | |||
' | |||
</svg>' | |||
[[Category:Bootcamp]] |
Latest revision as of 06:28, 20 January 2025
Steps 396, 399
ThisIsHtml
' <style> .chart-wrap { margin-left: 50px; font-family: sans-serif; height: 650px; width: 300px; } .chart-wrap .title { font-weight: bold; font-size: 1.62em; padding: 0.5em 0 1.8em 0; text-align: center; white-space: nowrap; } .chart-wrap.vertical .grid { transform: translateY(-175px) translateX(175px) rotate(-90deg); } .chart-wrap.vertical .grid .bar::after { transform: translateY(-50%) rotate(45deg); display: block; } .chart-wrap.vertical .grid::before, .chart-wrap.vertical .grid::after { transform: translateX(-0.2em) rotate(90deg); } .chart-wrap .grid { position: relative; padding: 5px 0 5px 0; height: 100%; width: 100%; border-left: 2px solid #aaa; background: repeating-linear-gradient(90deg,transparent,transparent 19.5%,rgba(170,170,170,0.7) 20%); } .chart-wrap .grid::before { font-size: 0.8em; font-weight: bold; content: "0%"; position: absolute; left: -0.5em; top: -1.5em; } .chart-wrap .grid::after { font-size: 0.8em; font-weight: bold; content: "100%"; position: absolute; right: -1.5em; top: -1.5em; } .chart-wrap .bar { width: var(--bar-value); height: 50px; margin: 30px 0; background-color: #F16335; border-radius: 0 3px 3px 0; } .chart-wrap .bar:hover { opacity: 0.7; } .chart-wrap .bar::after { content: attr(data-name); margin-left: 100%; padding: 10px; display: inline-block; white-space: nowrap; } </style> '+ ' <div class="chart-wrap vertical"> <h2 class="title">Bar Chart for Cars and Brands</h2> <div class="grid"> '+ Car.allInstances->groupby(c|c.BrandOfCar)->collect(tuple|tuple.BrandOfCar.Name,(100*tuple.List->size/Car.allinstances->size).Round(0).asstring+'%') ->collect(values|'<div class="bar" style="--bar-value:'+values.Part2+';" data-name="'+values.Name+'" title="'+values.Name+' '+values.Part2+'"></div>' ) ->asSeparatedList( '' )+ ' </div> </div>'
Step 406
' <style> h1 { font: 24px sans-serif; } .bar { fill: #d81c3f; } .bar:hover { fill: darkgray; } .axis { font: 10px sans-serif; } .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; } .x.axis path { display: none; } </style> '+ ' <div class="chart-wrap vertical"> <h2 class="title">Bar Chart for Cars and Brands</h2> <div class="grid"> '+ Car.allInstances->groupby(c|c.BrandOfCar)->collect(tuple|tuple.BrandOfCar.Name,(100*tuple.List->size/Car.allinstances->size).Round(0).asstring+'%') ->collect(values|'<div class="bar" style="--bar-value:'+values.Part2+';" data-name="'+values.Name+'" title="'+values.Name+' '+values.Part2+'"></div>' ) ->asSeparatedList( '' )+ ' </div> </div>'+ '<h1>SVG Vertical Bar Chart</h1> <svg width="960" height="500"> <g transform="translate(40,20)"> <g class="x axis" transform="translate(0,450)">'+ let cars=Car.allInstances in ( cars->groupby(c|c.BrandOfCar)->collect(tuple|tuple.BrandOfCar.Name,(100*tuple.List->size/cars->size).Round(0).asstring+'%',BrandOfCar.allinstances->indexof(tuple.BrandOfCar)*35) ->collect(values|' <g class="tick" transform="translate('+values.Part3.asstring+',0)" style="opacity: 1;"><line y2="6" x2="0"></line> <text dy=".71em" y="9" x="0" style="text-anchor: middle;">'+values.Name+'</text> </g> ' ) ->asSeparatedList( '' ) )+ ' <path class="domain" d="M0,6V0H900V6"></path> </g> <g class="y axis"> <g class="tick" transform="translate(0,450)" style="opacity: 1;"><line x2="-6" y2="0"></line> <text dy=".32em" x="-9" y="0" style="text-anchor: end;">0%</text> </g> <g class="tick" transform="translate(0,212)" style="opacity: 1;"><line x2="-6" y2="0"></line> <text dy=".32em" x="-9" y="0" style="text-anchor: end;">50%</text> </g> <g class="tick" transform="translate(0,24.87009919697684)" style="opacity: 1;"><line x2="-6" y2="0"></line> <text dy=".32em" x="-9" y="0" style="text-anchor: end;">100%</text> </g> <path class="domain" d="M-6,0H0V450H-6"></path> <text transform="rotate(-90)" y="6" dy=".71em" style="text-anchor: end;">Frequency</text> </g> '+ let cars=Car.allInstances in ( cars->groupby(c|c.BrandOfCar)->collect(tuple|tuple.BrandOfCar.Name, (450*tuple.List->size/cars->size).Round(0), BrandOfCar.allinstances->indexof(tuple.BrandOfCar)*35) ->collect(values|' <rect class="bar" x="'+values.Part3.asstring+'" width="31" y="'+values.Part2.asstring+'" height="'+(450-values.Part2).asstring+'"></rect> ' ) ->asSeparatedList( '' ) )+ ' </svg>'
This page was edited 57 days ago on 01/20/2025. What links here