cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div id="viz-word-snake"></div>

<!--http://www.beautifulinenglish.com/  -->
            
          
!
            
              html {
  line-height: 1.15;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font-family: "Lato", sans-serif;
}

body {
  margin: 0;
  overflow-x: hidden;
}

section {
  display: block;
}

svg {
  overflow: visible;
}

section {
  background-color: white;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 300;
}

#viz-word-snake {
  font-size: 14px;
  white-space: pre;
  cursor: default;
  width: 700px;
  margin: 0 auto;
}

.circle-path {
  fill: none;
  pointer-events: none;
}

.node .circle-background {
  fill: none;
  pointer-events: all;
  cursor: pointer;
}

.circle-center-translation {
  font-family: "Lato", sans-serif;
  font-size: 0.8em;
  font-weight: 400;
  text-anchor: middle;
  pointer-events: none;
}

.circle-center-original {
  font-family: "Dancing Script", cursive;
  font-size: 1.7em;
  text-anchor: middle;
  pointer-events: none;
}

.circle-center-language {
  font-family: "Lato", sans-serif;
  font-size: 0.8em;
  font-weight: 400;
  font-style: italic;
  text-anchor: middle;
  pointer-events: none;
}

.circle-path-legend {
  font-family: "Lato", sans-serif;
  font-size: 0.8em;
  pointer-events: none;
}

.circle-path-text {
  font-family: "Dancing Script", cursive;
  font-size: 1.1em;
  pointer-events: none;
}

            
          
!
            
              var darkgrey = "#161616",
            middlegrey = "#a7a7a7",
            lightgrey = "#afafaf";

        var languageMap = [];
        languageMap["de"] = "German";
        languageMap["es"] = "Spanish";
        languageMap["fr"] = "French";
        languageMap["it"] = "Italian";
        languageMap["ja"] = "Japanese";
        languageMap["nl"] = "Dutch";
        languageMap["pl"] = "Polish";
        languageMap["pt"] = "Portuguese";
        languageMap["ru"] = "Russian";
        languageMap["tr"] = "Turkish";
        languageMap["all"] = "All languages";
        var divWidth = parseInt(d3.select("#viz-word-snake").style("width"));
        var margin = {
            top: 10,
            right: 10,
            bottom: 40,
            left: 10
        };
        var width = divWidth - margin.left - margin.right;
        var height = width;
console.log(divWidth,width,height)
        //SVG container
        var svg = d3.select("#viz-word-snake").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 parseTime = d3.timeParse("%Y-%m-%d"); // timeParse is added in version v4 
        var angle = 35 * Math.PI / 180;
        var radius = 75;
        var newXmargin = margin.left;
        var n;
        //Round number to 2 behind the decimal
        function round2(num) {
            return (Math.round((num + 0.00001) * 100) / 100);
        }//round2
        function calculateGrid() {
            //How many circles fir in one "row"
            var s = width / Math.cos(angle);
            var numCircle = Math.min(4, Math.floor(s / (2 * radius)));
            //I don't want 1 circle
            if (numCircle === 1) numCircle = 2;
            //If it's not an exact fit, make it so
            radius = Math.min(radius, round2((s / numCircle) / 2));

            //Save the x-locations if each circle
            var xLoc = new Array(numCircle);
            for (var i = 0; i < numCircle; i++) {
                xLoc[i] = round2((1 + 2 * i) * radius * Math.cos(angle));
            }//for i

            //Locations for the textPath
            var xLocArc = new Array(numCircle + 1);
            for (var i = 0; i <= numCircle; i++) {
                xLocArc[i] = round2(2 * i * radius * Math.cos(angle));
            }//for i

            //New width & divide margins so it will sit in the center
            width = xLocArc[numCircle];
            newXmargin = round2((divWidth - width) / 2);
            svg.attr("transform", "translate(" + newXmargin + "," + (margin.top) + ")");

            return { xLoc: xLoc, xLocArc: xLocArc, numCircle: numCircle };
        }//function calculateGrid

        var grid = calculateGrid();
        var top1 =[
{"language":"nl","original":"collega","translation":"colleague","frequency":"38418"},
{"language":"fr","original":"bien | bon","translation":"good","frequency":"204516"},
{"language":"de","original":"schön","translation":"beautiful","frequency":"169808"},
{"language":"it","original":"bene | buon | buono","translation":"good","frequency":"66672"},
{"language":"ja","original":"仕事 | 作業","translation":"work","frequency":"33468"},
{"language":"pl","original":"czwartek","translation":"thursday","frequency":"66756"},
{"language":"pt","original":"bom | bem | boa","translation":"good","frequency":"140778"},
{"language":"ru","original":"мама","translation":"mama","frequency":"95900"},
{"language":"es","original":"hermosa | hermoso | bonito","translation":"beautiful","frequency":"180996"},
{"language":"tr","original":"güzel","translation":"beautiful","frequency":"63927"}
]
var top100Overall = [{"translation":"beautiful","rank":"1"},{"translation":"thursday","rank":"2"},{"translation":"tuesday","rank":"3"},{"translation":"wednesday","rank":"4"},{"translation":"good","rank":"5"},{"translation":"address","rank":"6"},{"translation":"place","rank":"7"},{"translation":"little","rank":"8"},{"translation":"saturday","rank":"9"},{"translation":"white","rank":"10"},{"translation":"love","rank":"11"},{"translation":"request","rank":"12"},{"translation":"english","rank":"13"},{"translation":"great","rank":"14"},{"translation":"happy","rank":"15"},{"translation":"friday","rank":"16"},{"translation":"answer","rank":"17"},{"translation":"business","rank":"18"},{"translation":"city","rank":"19"},{"translation":"sunday","rank":"20"},{"translation":"teacher","rank":"21"},{"translation":"school","rank":"22"},{"translation":"brother","rank":"23"},{"translation":"monday","rank":"24"},{"translation":"language","rank":"25"},{"translation":"autumn","rank":"26"},{"translation":"summary","rank":"27"},{"translation":"job","rank":"28"},{"translation":"man","rank":"29"},{"translation":"available","rank":"30"},{"translation":"quantity","rank":"31"},{"translation":"street","rank":"32"},{"translation":"description","rank":"33"},{"translation":"time","rank":"34"},{"translation":"big","rank":"35"},{"translation":"dog","rank":"36"},{"translation":"work","rank":"37"},{"translation":"daughter","rank":"38"},{"translation":"fast","rank":"39"},{"translation":"company","rank":"40"},{"translation":"name","rank":"41"},{"translation":"chair","rank":"42"},{"translation":"house","rank":"43"},{"translation":"proposal","rank":"44"},{"translation":"well","rank":"45"},{"translation":"confirmation","rank":"46"},{"translation":"kitchen","rank":"47"},{"translation":"children","rank":"48"},{"translation":"order","rank":"49"},{"translation":"friend","rank":"50"},{"translation":"development","rank":"51"},{"translation":"table","rank":"52"},{"translation":"country","rank":"53"},{"translation":"home","rank":"54"},{"translation":"width","rank":"55"},{"translation":"first name","rank":"56"},{"translation":"holiday","rank":"57"},{"translation":"regards","rank":"58"},{"translation":"reply","rank":"59"},{"translation":"decision","rank":"60"},{"translation":"important","rank":"61"},{"translation":"girl","rank":"62"},{"translation":"life","rank":"63"},{"translation":"bad","rank":"64"},{"translation":"right","rank":"65"},{"translation":"aunt","rank":"66"},{"translation":"bed","rank":"67"},{"translation":"father","rank":"68"},{"translation":"offer","rank":"69"},{"translation":"sorry","rank":"70"},{"translation":"nothing","rank":"71"},{"translation":"summer","rank":"72"},{"translation":"target","rank":"73"},{"translation":"power","rank":"74"},{"translation":"colleague","rank":"75"},{"translation":"height","rank":"76"},{"translation":"price","rank":"77"},{"translation":"small","rank":"78"},{"translation":"christmas","rank":"79"},{"translation":"car","rank":"80"},{"translation":"search","rank":"81"},{"translation":"invoice","rank":"82"},{"translation":"shirt","rank":"83"},{"translation":"heart","rank":"84"},{"translation":"amount","rank":"85"},{"translation":"people","rank":"86"},{"translation":"sad","rank":"87"},{"translation":"day","rank":"88"},{"translation":"kind","rank":"89"},{"translation":"family","rank":"90"},{"translation":"responsible","rank":"91"},{"translation":"water","rank":"92"},{"translation":"translator","rank":"93"},{"translation":"son","rank":"94"},{"translation":"month","rank":"95"},{"translation":"tree","rank":"96"},{"translation":"inquiry","rank":"97"},{"translation":"expensive","rank":"98"},{"translation":"error","rank":"99"},{"translation":"high","rank":"100"}]
        // d3.queue()
            // .defer(d3.csv, "./data/top1_per_language_English_combined.csv")
            // .defer(d3.csv, "./data/top100_overall.csv")
            // .defer(d3.csv, "./data/google_trends_data_top_1_words.csv")
            // .defer(d3.csv, "./data/relatedCombined.csv")
            // .await(drawWordSnake);
        drawWordSnake('',top1, top100Overall);
        function drawWordSnake(error, top1, top100Overall, trends, related) {
            ///////////////////////////////////////////////////////////////////////////
            ///////////////////////////// Final data prep /////////////////////////////
            ///////////////////////////////////////////////////////////////////////////
            // console.log()
            if (error) throw error;

            // console.log(JSON.stringify(top100Overall))
            top100Overall.forEach(function (d, i) {
                d.rank = +d.rank;
                //d.totalWord = (i+1) + " " + d.translation + "\u00A0\u00A0";
                d.totalWord = d.translation + "\u00A0\u00A0";
            });

            top1.forEach(function (d) {
                d.frequency = +d.frequency;
            });

            // trends.forEach(function (d) {
            //     d.hits = +d.hits;
            //     d.date = parseTime(d.week);
            // });
            // Scale the range of the trend data
            // xScale.domain(d3.extent(trends, function (d) { return d.date; }));
            // xAxis.call(d3.axisBottom(xScale));

            // related.forEach(function (d) {
            //     d.score = +d.score;
            // });

            ///////////////////////////////////////////////////////////////////////////
            //////////////////////////// Create node data /////////////////////////////
            ///////////////////////////////////////////////////////////////////////////

            var nodes = [];

            top1.forEach(function (d, i) {
                //Are there more original words for this translation?
                var words = d.original.split(" | ");
                nodes.push({
                    rank: i,
                    frequency: d.frequency,
                    radius: radius,
                    translation: d.translation,
                    original: d.original,
                    language: languageMap[d.language],
                    originalMore: words.length > 1,
                    counter: 0,
                    originalSeparate: words
                })
            });

            n = nodes.length;

            ///////////////////////////////////////////////////////////////////////////
            ///////////////////////////// Create the nodes ////////////////////////////
            ///////////////////////////////////////////////////////////////////////////

            var nodeWrapper = svg.append("g").attr("class", "node-wrapper");

            //Create a group for each circle
            var pos = 0, add = 1;
            var node = nodeWrapper.selectAll(".node")
                .data(nodes)
                .enter().append("g")
                .attr("class", "node noselect")
                .attr("transform", function (d, i) {
                    //Save the locations
                    d.x = grid.xLoc[pos];
                    d.y = (1 + 2 * i) * radius * Math.sin(angle);

                    //Figure out which position of the xLoc to use on the next one
                    if (pos === grid.numCircle - 1) { add = -1; }
                    else if (pos === 0) { add = 1; }
                    pos = pos + add;

                    return "translate(" + d.x + "," + d.y + ")";
                });
            // .on("mouseover", mouseoverNode)
            // .on("mouseout", hideTooltip)
            // .on("click", clickOnNode);

            //Hide tooltip again on body/svg click
            // d3.select("body").on("click", hideTooltip);
            // d3.select("#viz-word-snake").on("click", hideTooltip);
            // d3.select("#tooltip-close").on("click", hideTooltip);

            ///////////////////////////////////////////////////////////////////////////
            //////////////////////// Create the central words /////////////////////////
            ///////////////////////////////////////////////////////////////////////////

            //Create background circle for the hover & click
            node.append("circle")
                .attr("class", "circle-background")
                .attr("r", radius);

            //Attach center words to each group
            var originalText = node.append("text")
                .attr("class", "circle-center-original")
                .attr("y", 0)
                .attr("dy", "0.35em")
                .style("fill", darkgrey)
                .style("font-family", function (d) { return d.language === "Russian" ? "'Cormorant Infant', serif" : null; })
                .text(function (d) { return d.originalSeparate[0]; });
            node.append("text")
                .attr("class", "circle-center-translation")
                .attr("y", 22)
                .attr("dy", "0.35em")
                .style("fill", "#787878")
                .text(function (d) { return d.translation; });
            node.append("text")
                .attr("class", "circle-center-language")
                .attr("dy", "0.35em")
                .attr("y", -25)
                .style("fill", lightgrey)
                .text(function (d) { return d.language; });

            ///////////////////////////////////////////////////////////////////////////
            ////////////////////// Create the outer circular paths ////////////////////
            ///////////////////////////////////////////////////////////////////////////

            //Create path
            svg.append("path")
                .attr("class", "circle-path")
                .attr("id", "circle-word-path")
                //.style("stroke", "#d2d2d2")
                .attr("d", calculateSnakePath(grid, n));

            //Create the text itself
            var wordString = "1 ";
            top100Overall.forEach(function (d, i) {
                // console.log('11111')
                var rank = "";
                if ((i + 1) % 10 === 0) rank = (i + 1) + " ";
                wordString = wordString + rank + d.translation + "\u00A0\u00A0";
            });
            console.log(wordString)

            //Create text on path
            var wordSnake = svg.append("text")
                .attr("class", "circle-path-text noselect")
                .style("fill", "none")
                .attr("dy", "0.15em")
                .append("textPath")
                .attr("id", "top-word-string")
                .style("text-anchor", "middle")
                .style("fill", lightgrey)
                .attr("xlink:href", "#circle-word-path")
                .attr("startOffset", "0%")
                .text(wordString + "\u00A0\u00A0\u00A0" + wordString);
            //.text(top100Overall.map(function(d){ return d.translation; }).join("\u00A0\u00A0"));

            ///////////////////////////////////////////////////////////////////////////
            /////////////////////// Create the word string legend /////////////////////
            ///////////////////////////////////////////////////////////////////////////

            var legend = svg.append("g")
                .attr("class", "word-snake-legend")
                .attr("transform", "translate(" + grid.xLoc[1] + "," + (3 * radius * Math.sin(angle)) + ")");

            //Create the path for the legend
            legend.append("path")
                .attr("class", "circle-path")
                .attr("id", "circle-legend-path")
                //.style("stroke", "#d2d2d2")
                .attr("d", function (d) {
                    var r = radius * 1.2;
                    return "M" + (-r * Math.cos(angle)) + "," + (-r * Math.sin(angle)) +
                        " A" + r + "," + r + " 0 1,1" + (-r * Math.cos(angle * 0.99)) + "," + (-r * Math.sin(angle * 0.99)) + " ";
                });

            //Append text to path
            legend.append("text")
                .attr("class", "circle-path-legend noselect")
                .style("fill", "none")
                .attr("dy", "0.15em")
                .append("textPath")
                .style("text-anchor", "middle")
                .attr("startOffset", "25%")
                .style("fill", darkgrey)
                .attr("xlink:href", "#circle-legend-path")
                .text("the most often translated words across all languages");
            //d3.select("#top-word-string").interrupt("move");
            animateWordSnake();
        };//function drawWordSnake

        function calculateSnakePath(grid, n) {
            var pos = 0, add = 1;
            function newPos() {
                if (pos === grid.numCircle) { add = -1; }
                else if (pos === 0) { add = 1; }
                pos = pos + add;
            }//newPos

            var xOld = 0,
                yOld = 0,
                sweep = 0,
                switchSide = 1;

            var path = "M0,0 ";

            //Construct the custom SVG paths out of arcs
            for (var i = 1; i <= n; i++) {

                if (i !== 1 && (i - 1) % (grid.numCircle - 1) === 0 && grid.numCircle % 2 === 1 && switchSide === 1) {
                    //For the outside in an uneven row count when the arc should be the short side
                    //console.log(i, "outer side, short arc");
                    switchSide = 0;

                    x = grid.xLocArc[pos];
                    newPos();
                    newPos();

                    y = yOld + round2(2 * radius * Math.sin(angle));
                    path = path + " A" + radius + "," + radius + " 0 0," + sweep + " " + x + "," + y + " ";
                    yOld = y;
                    sweep = sweep ? 0 : 1;

                } else if (i !== 1 && (i - 1) % (grid.numCircle - 1) === 0) {
                    //For the outside rows in the even row count or,
                    //For the outside in an uneven row count when the arc should be the long side
                    //console.log(i, "outer side, long arc");
                    if (grid.numCircle % 2 === 1) switchSide = 1;

                    newPos();
                    x = grid.xLocArc[pos];
                    y = yOld + round2(2 * radius * Math.sin(angle));
                    path = path + " A" + radius + "," + radius + " 0 0," + sweep + " " + x + "," + y + " ";

                    newPos();
                    x = grid.xLocArc[pos];
                    path = path + " A" + radius + "," + radius + " 0 0," + sweep + " " + x + "," + y + " ";

                    xOld = x;
                    yOld = y;
                    sweep = sweep ? 0 : 1;

                } else {
                    //For the inbetween circles
                    //console.log(i, "inbetween");

                    newPos()
                    x = grid.xLocArc[pos];
                    y = yOld + round2(2 * radius * Math.sin(angle));
                    path = path + " A" + radius + "," + radius + " 0 0," + sweep + " " + x + "," + y + " ";
                    xOld = x;
                    yOld = y;
                    sweep = sweep ? 0 : 1;

                }//else

            }//for i

            //Adjust the height of the SVG
            height = yOld;
            d3.select("#viz-word-snake svg").attr("height", height + margin.top + margin.bottom);

            return path;
        }//function calculateSnakePath


        function animateWordSnake() {
            d3.select("#top-word-string")
                .transition("move").duration(120000)
                .ease(d3.easeLinear)
                .attr("startOffset", "100%")
                .transition("move").duration(120000)
                .ease(d3.easeLinear)
                .attr("startOffset", "0%");
        }//function animateWordSnake
            
          
!
999px
Loading ..................

Console