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 Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

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