Skip to content

Commit

Permalink
Refactor old blocks
Browse files Browse the repository at this point in the history
  • Loading branch information
@guilhermesimoes
guilhermesimoes committed Sep 11, 2023
1 parent 755960c commit f8ba983
Show file tree
Hide file tree
Showing 4 changed files with 52 additions and 80 deletions.
49 changes: 20 additions & 29 deletions assets/blocks/animated-nbc-peacock-logo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,23 +6,16 @@
margin: 0;
}

.container {
position: relative;
box-sizing: border-box;
svg {
width: 100%;
height: 100%;
padding: 15px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
display: block;
}

.controls {
position: absolute;
top: 15px;
left: 15px;
}

#peacock {
width: 100%;
height: 100%;
top: 1em;
left: 1em;
}

.feather {
Expand Down Expand Up @@ -82,21 +75,19 @@
</style>
<body>

<div class="container">
<form class="controls js-controls">
<label><button type="button" value="once">Once</button></label>
<label><button type="button" value="infinite">Infinite</button></label>
</form>
<svg id="peacock" class="showoff" viewBox="0 0 64 64">
<path id="feather1" class="feather" style="fill: #fcb711" d="M7.93 49.75h20.95L11.6 37.7c-4-2.56-8.48-1.06-10.1 3.19-1.37 4.87 2.06 8.87 6.42 8.87" />
<path id="feather2" class="feather" style="fill: #f37021" d="M8.43 24.32a6.69 6.69 0 001.12 10.63l18.4 12.61-8.92-20.43c-1.87-4.82-6.98-5.87-10.6-2.81" />
<path id="feather3" class="feather" style="fill: #cc004c" d="M24.26 14.38a6.55 6.55 0 00-5.48 9.06L28 45.2l3.25-22.88c.75-5.68-3.56-8.3-6.99-7.93" />
<path id="feather6" class="feather" style="fill: #0db14b" d="M56.12 49.75H35.17L52.45 37.7c4-2.56 8.48-1.06 10.1 3.19 1.37 4.87-2.05 8.87-6.42 8.87" />
<path id="feather5" class="feather" style="fill: #0089d0" d="M55.62 24.32a6.69 6.69 0 01-1.12 10.63L36.11 47.55l8.92-20.43c1.87-4.82 6.98-5.87 10.6-2.81" />
<path id="feather4" class="feather" style="fill: #6460aa" d="M39.8 14.38c3 .06 7.47 3.62 5.47 9.06L36.05 45.2l-3.24-22.88c-.75-5.68 3.55-8.3 6.98-7.93" />
<path id="body" style="fill: #ffffff" d="m 34.43,21.44 c 0,0 0.93,0 1,0.44 -0.69,0.56 -2.56,0.63 -2.31,3.63 l 2.67,19.63 c 0,0 0.417,2.327 -0.33,3 -1.67,1.5 -5,1.41 -6.72,0 -0.77,-0.62 -0.77,-1.49 -0.617,-2.9 C 28.915,38.4 30.68,28.46 30.8,26.29 31.145,24.38 30.86,21.875 32.68,21.44" />
</svg>
</div>
<form class="controls">
<label><button type="button" value="once">Once</button></label>
<label><button type="button" value="infinite">Infinite</button></label>
</form>
<svg id="peacock" class="showoff" viewBox="0 0 64 64">
<path id="feather1" class="feather" style="fill: #fcb711" d="M7.93 49.75h20.95L11.6 37.7c-4-2.56-8.48-1.06-10.1 3.19-1.37 4.87 2.06 8.87 6.42 8.87" />
<path id="feather2" class="feather" style="fill: #f37021" d="M8.43 24.32a6.69 6.69 0 001.12 10.63l18.4 12.61-8.92-20.43c-1.87-4.82-6.98-5.87-10.6-2.81" />
<path id="feather3" class="feather" style="fill: #cc004c" d="M24.26 14.38a6.55 6.55 0 00-5.48 9.06L28 45.2l3.25-22.88c.75-5.68-3.56-8.3-6.99-7.93" />
<path id="feather6" class="feather" style="fill: #0db14b" d="M56.12 49.75H35.17L52.45 37.7c4-2.56 8.48-1.06 10.1 3.19 1.37 4.87-2.05 8.87-6.42 8.87" />
<path id="feather5" class="feather" style="fill: #0089d0" d="M55.62 24.32a6.69 6.69 0 01-1.12 10.63L36.11 47.55l8.92-20.43c1.87-4.82 6.98-5.87 10.6-2.81" />
<path id="feather4" class="feather" style="fill: #6460aa" d="M39.8 14.38c3 .06 7.47 3.62 5.47 9.06L36.05 45.2l-3.24-22.88c-.75-5.68 3.55-8.3 6.98-7.93" />
<path id="body" style="fill: #ffffff" d="m 34.43,21.44 c 0,0 0.93,0 1,0.44 -0.69,0.56 -2.56,0.63 -2.31,3.63 l 2.67,19.63 c 0,0 0.417,2.327 -0.33,3 -1.67,1.5 -5,1.41 -6.72,0 -0.77,-0.62 -0.77,-1.49 -0.617,-2.9 C 28.915,38.4 30.68,28.46 30.8,26.29 31.145,24.38 30.86,21.875 32.68,21.44" />
</svg>

<script type="text/javascript">
"use strict";
Expand All @@ -114,6 +105,6 @@
}
}

document.querySelector(".js-controls").addEventListener("click", animate);
document.querySelector(".controls").addEventListener("click", animate);
</script>
</body>
</body>
30 changes: 14 additions & 16 deletions assets/blocks/animating-bars-going-down.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,33 +7,31 @@
}

.chart-container {
position: relative;
box-sizing: border-box;
height: 100%;
padding: 15px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
padding: 1em;
}

.controls {
display: flex;
flex-direction: column;
position: absolute;
bottom: 15px;
left: 15px;
bottom: 1em;
left: 1em;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

@media screen and (min-width: 310px) {
.controls {
display: block;
bottom: initial;
top: 15px;
top: 1em;
}
}

.chart {
width: 100%;
height: 100%;
overflow: visible;
}

.chart path,
Expand All @@ -53,13 +51,13 @@
</style>
<body>

<div class="chart-container js-chart-container">
<form class="controls js-controls">
<label><button type="button" value="height">Animate height</button></label>
<label><button type="button" value="y">Animate y</button></label>
<label><button type="button" value="both">Animate y and height</button></label>
</form>
<svg class="chart js-chart"></svg>
<form class="controls">
<label><button type="button" value="height">Animate height</button></label>
<label><button type="button" value="y">Animate y</button></label>
<label><button type="button" value="both">Animate y and height</button></label>
</form>
<div class="chart-container">
<svg class="chart"></svg>
</div>

<script src="https://d3js.org/d3.v5.min.js"></script>
Expand All @@ -75,7 +73,7 @@
barX = (width - barWidth) / 2,
toggling = true;

var svg = d3.select(".js-chart")
var svg = d3.select(".chart")
.attr("viewBox", "0 0 " + container.width + " " + container.height);

var mainContainer = svg.append("g")
Expand All @@ -95,7 +93,7 @@
.attr("y1", height)
.attr("y2", height);

var buttons = d3.selectAll(".js-controls button");
var buttons = d3.selectAll(".controls button");
buttons.on("click", toggleBar);

function toggleBar() {
Expand Down
41 changes: 16 additions & 25 deletions assets/blocks/animating-between-scales.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,24 +6,17 @@
margin: 0;
}

.chart-container {
position: relative;
box-sizing: border-box;
height: 100%;
padding: 15px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.chart-container .controls {
.controls {
position: absolute;
top: 15px;
left: 15px;
top: 1em;
left: 1em;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.chart {
width: 100%;
height: 100%;
overflow: visible;
display: block;
}

.chart path,
Expand All @@ -48,17 +41,15 @@
</style>
<body>

<div class="chart-container js-chart-container">
<form class="controls">
Scale:
<label><input type="radio" name="x-scale" value="power2" checked>Power2</label>
<label><input type="radio" name="x-scale" value="linear">Linear</label>
<label><input type="radio" name="x-scale" value="sqrt">SquareRoot</label>
<label><input type="radio" name="x-scale" value="log2">Log2</label>
<label><input type="radio" name="x-scale" value="log10">Log10</label>
</form>
<svg class="chart js-chart"></svg>
</div>
<form class="controls">
Scale:
<label><input type="radio" name="x-scale" value="power2" checked>Power2</label>
<label><input type="radio" name="x-scale" value="linear">Linear</label>
<label><input type="radio" name="x-scale" value="sqrt">SquareRoot</label>
<label><input type="radio" name="x-scale" value="log2">Log2</label>
<label><input type="radio" name="x-scale" value="log10">Log10</label>
</form>
<svg class="chart js-chart"></svg>

<script src="https://d3js.org/d3.v5.min.js"></script>
<script type="text/javascript">
Expand Down Expand Up @@ -89,7 +80,7 @@
this.setXScale();
this.draw(data);

d3.selectAll(".js-chart-container input").on("click", this.changeXScale.bind(this));
d3.selectAll(".controls input").on("click", this.changeXScale.bind(this));
},

draw: function (data) {
Expand Down Expand Up @@ -146,7 +137,7 @@
setXScale: function () {
var scaleType;

scaleType = d3.select(".js-chart-container input:checked").node().value;
scaleType = d3.select(".controls input:checked").node().value;
this.xScale = this.scales[scaleType];
}
};
Expand Down
12 changes: 2 additions & 10 deletions assets/blocks/encoding-values-as-circles.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,10 @@
margin: 0;
}

.chart-container {
box-sizing: border-box;
height: 100%;
padding: 15px;
}

.chart {
width: 100%;
height: 100%;
overflow: visible;
display: block;
}

.chart .axis path,
Expand Down Expand Up @@ -44,9 +38,7 @@
</style>
<body>

<div class="chart-container">
<svg class="chart js-chart"></svg>
</div>
<svg class="chart js-chart"></svg>

<script src="https://d3js.org/d3.v5.min.js"></script>
<script type="text/javascript">
Expand Down

0 comments on commit f8ba983

Please sign in to comment.