Old school D3 from simpler times

All examples By author By category About

Mavromatika

Full window Github gist

Lebowsky Ransom

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Ransom note - Mavromatika</title>
</head>

<style>
    body{
        background-color:grey;
        font-family: sans-serif;
    }
    #container{
        width: 800px;
        margin: auto;
        background-color:white;
        box-shadow: 10px 10px 5px #343434;
    }
    tspan{
        font-size:28px;
    }
    #entree{
        position : fixed;
        width: 200px;
        top: 7px;
        left:7px;
    }
    #entree p{
        margin-left: 5px;
    }
    textarea {
        width: 200px;
        height: 300px;
    }
    button {
        width:200px;
    }
    #right{
        font-size: 80%;
        font-style: italic;
    }
</style>
<body>
    <div id="entree">
        <textarea>We have bunnie, gather one million dollars in unmarked non-consecutive twentyies! Await instructions. No funny stuff</textarea><br>
        <button>Update</button>
        <p>Enter your own text above and click "update" to create your ransom note.</p>
        <p>Be aware that kidnapping Bunny Lebowsky and asking for a ransom is most likely a crime in your country.</p>
        <p id="right">Made by Mavromatika, 2015.</p>
    </div>
    <div id="container">
    </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script type="text/javascript">
    var w = 800, h = 600;
    
    var svg = d3.select("#container")
                .append("svg")
                .attr("width",w)
                .attr("height",h);
    
    var texte = "We have bunnie, gather one million dollars in unmarked non-consecutive twentyies! Await instructions. No funny stuff";
    
    var letterspace = 24, lineheight = 66;
    var paddingTop = 60, paddingRight = 50;
    var numCol = Math.floor((w - (paddingRight*2)) / letterspace);
    
    var couleurs = ["#626262","#505050","#797979","#c40b0b","#ff4141"];
    
    var coulScale = d3.scale.quantize()
                            .range(couleurs)
                            .domain([0,1]);
    
    var norm = d3.random.normal();
    
    d3.csv("fonts.csv", function(data){
        
        function makeLetter(texte){
            
            var word = [];
            var wordList = [];
            var donnees = [];
            
            // List of punctuation signs
            var ponctuation = [" ",",","?",";",".",":","/","=","+","~","*","!","&","#","(",")","{","}","[","]","-","_","\n"];
            
            // Line and column counters
            var comptLig = 0;
            var comptCol = 0;
            
            // Variables for the attributes of each letter
            var fontVal = 0, colVal = 0, yVal = 0, upperVal = 0, boldVal = 0, italicVal =0, outVal = 0;
            var compteur = 0;
            
            // Make array of words (separated bu punctuation
            for (var i = 0; i < texte.length; i++){
                
                if (ponctuation.indexOf(texte[i]) > -1){
                    wordList.push(word);
                    word = [{'index':i, 'letter':texte[i]}];
                    wordList.push(word);
                    word = [];
                }
                else {
                    word.push({'index':i,'letter':texte[i]});
                }
            }
            
            // Last word if not punctuation
            if (word != []){
                wordList.push(word);
            }
            
            // Loop through list of words...
            for (i = 0; i < wordList.length; i++){
                
                // Create new line when necessary...
                if (wordList[i].length > 0){
                    if ((comptCol > numCol) || (comptCol + wordList[i].length > numCol || wordList[i][0].letter == "\n")){
                        comptLig += 1;
                        comptCol = 0;
                    }
                }
                
                // Loop through each words and compute attributes
                compteur = 0;
                for (j = 0; j < wordList[i].length; j++){
                    
                    if (wordList[i][j].letter != '\n'){
                        
                        if (compteur == 0){
                            // Calculate counter
                            compteur = Math.floor( Math.random() * d3.min([(wordList[i].length - j - 1), 6]) );
                            console.log(compteur);
                            
                            fontVal = Math.floor(Math.random() * data.length)
                            colVal = Math.random();
                            yVal = comptLig * lineheight + paddingTop + (norm() * 5);
                            upperVal = norm() > 0.5 ? 1:0;
                            boldVal = norm() > 0.5 ? 1:0;
                            italicVal = norm() > 0.5 ? 1:0;
                            outVal = norm() > 0.5 ? 1:0;
                            console.log(compteur);
                        }
                        
                        donnees.push({"letter":wordList[i][j].letter, 
                              "font":data[fontVal].font,
                              "y": yVal,
                              "x": comptCol * letterspace + paddingRight,
                              "color": colVal,
                              "upper": upperVal,
                              "bold": boldVal,
                              "italic": italicVal,
                              "out": outVal
                             });
                    
                        comptCol += 1;
                        compteur -= 1;
                    }
                }
            }
            
            svg.attr("height", comptLig * lineheight + paddingTop + 50);
            
            var contenant = svg.append("text");

contenant.selectAll("tspan")
                .data(donnees)
                .enter()
                .append("tspan")
                .text(function(d){
                    if(d.upper){
                        return d.letter.toUpperCase();
                    }
                    else{
                        return d.letter;
                    }
                })
                .attr("x",function(d,i){return d.x;})
                .attr("y",function(d){return d.y;})
                .style("font-family",function(d){return d.font;})
                .style("font-style",function(d){
                    if(d.bold){return "bold";}
                    else{return "normal";}
                })
                .style("font-style",function(d){
                    if(d.italic){return "italic";}
                    else{return "normal";}
                })
                .attr("stroke",function(d){
                    if(d.out){
                        return "black";
                    }
                    else{return coulScale(d.color);}
                })
                .attr("fill",function(d){
                    if (d.out){
                        return "white";
                    }
                    else {
                        return coulScale(d.color);
                    }
                });
        }
        
            
        makeLetter(texte);
        
        d3.select("button").on("click",function(d){
            d3.select("text").remove();
            makeLetter(d3.select("textarea").node().value);
        });
        
        
    });
    
</script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js