How to implement Google's infographic using CSS online fonts and D3

This article brings you how to use CSS online fonts and D3 to implement Google infographics. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Effect preview

Source code download

https://github.com/comehope/front-end-daily -challenges

Code interpretation

Define dom, there is only 1 empty element, which does not contain any text:

<div></div>

Introducing font files, Product Sans is Google's special brand promotion Created sans serif font:

@import url("https://fonts.googleapis.com/css?family=Product+Sans");

Centered display:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

Use pseudo elements to make the logo. Note that the content of content is not "Google" , but "google_logo":

.logo::before {
    content: 'google_logo';
    font-size: 10vw;
}

Set the font, using the online font just introduced, the "google_logo" text on the page just now was replaced with a single color Logo pattern:

body {
    font-family: 'product sans';
}

Define color variables:

:root {
    --blue: #4285f4;
    --red: #ea4335;
    --yellow: #fbbc05;
    --green: #34a853;
}

Set the text mask effect and color the text:

.logo::before {
    background-image: linear-gradient(
        to right,
        var(--blue) 0%, var(--blue) 26.5%, 
        var(--red) 26.5%, var(--red) 43.5%, 
        var(--yellow) 43.5%, var(--yellow) 61.5%,
        var(--blue) 61.5%, var(--blue) 78.5%, 
        var(--green) 78.5%, var(--green) 84.5%, 
        var(--red) 84.5%, var(--red) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

At this point, the Google logo is completed, next is the production googol information, indicating that the name Google comes from the word googol, which means a large number followed by 1 followed by 100 zeros.

Add a line of description text and a container to hold the numbers in the dom. The container contains 5 numbers, and a color variable is specified in the inline style of each number:

<p>The name of Google originated from a misspelling of the word "googol", the number 1 followed by 100 zeros.</p> 
<p>
    <span>1</span>
    <span>0</span>
    <span>0</span>
    <span>0</span>
    <span>0</span>
</p>

Set the description text Style:

.desc {
    font-size: 1.5vw;
    font-weight: normal;
    color: dimgray;
    margin-top: 2em;
}

Set the style of numbers:

.zeros {
    font-size: 3vw;
    font-weight: bold;
    margin-top: 0.2em;
    text-align: center;
    width: 25.5em;
    word-wrap: break-word;
}

Color the numbers:

.zeros span {
    color: var(--c);
}

Fine-tune the margins of the numbers "1", let It should not be too close to the following "0":

.zeros span:nth-child(1) {
    margin-right: 0.2em;
}

At this point, the static layout is completed, and then use d3 to batch process numbers.

Introduce the d3 library and delete the digital sub-elements of .zeros in the dom:

<script></script>

Eventually we will display 100 0## on the page #, each 0 has a different color, and for the sake of appearance, the colors of adjacent numbers should also be different. So, first define a function to get the color. It can take any color from the 4 colors of the Google logo color matching, and has a parameter indicating the excluded color. When this parameter is specified, it will select from the 4 colors. Remove this color from the available colors, and then randomly select a color from the remaining 3 colors:

function getColor(excludedColor) {
    let colors = new Set(['blue', 'red', 'yellow', 'green'])
    colors.delete(excludedColor)
    return Array.from(colors)[Math.floor(d3.randomUniform(0, colors.size)())]
}

Then, define 2 constants,

ZEROS is to store 100 ## The array of #0, ONE is an object that stores the number 1, it has 2 attributes, number means that its value is 1, color means that its color is blue: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const ZEROS = d3.range(100).map(x=&gt;0) const ONE = {number: 1, color: 'blue'}</pre><div class="contentsignin">Copy after login</div></div>Next, return a new array by iterating over the

ZEROS

array using the reduce functionnumbers, which has 101 elements (1 followed by 100 0s), each element is an object containing the number and color properties: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">let numbers = ZEROS.reduce(function (numberObjects, d) {     numberObjects.push({         number: d,         color: getColor(numberObjects[numberObjects.length - 1].color)     })     return numberObjects }, [ONE])</pre><div class="contentsignin">Copy after login</div></div>Then, use

numbers

as the data source, use d3 to create dom elements in batches, and write the color information in the inline style: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">d3.select('.zeros')     .selectAll('span')     .data(numberObjects)     .enter()     .append('span')     .style('--c', (d)=&gt;`var(--${d.color})`)     .text((d)=&gt;d.number)</pre><div class="contentsignin">Copy after login</div></div>Finally, fine-tune the content margins to center the entire content:

.logo {
    margin-top: -10vh;
}

You’re done!

Related recommendations:

How to use pure CSS to achieve stripe illusion animation effects (source code attached)

Introduction to CSS3 text effect attribute text-shadow , explain the effect of flame text with examples

The above is the detailed content of How to implement Google's infographic using CSS online fonts and D3. For more information, please follow other related articles on the PHP Chinese website!