Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
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; }
JavaScript
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
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>d3-话语-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号