JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

// http://matthewgladney.com/blog/data-science/no-nonsense-guide-getting-started-scatter-plots-d3-js-d3-csv/

var alps = [{

"Time": "36:50",

"Place": 1,

"Seconds": 2210,

"Name": "Marco Pantani",

"Year": 1995,

"Nationality": "ITA",

"Doping": "Alleged drug use during 1995 due to high hematocrit levels",

"URL": "https://en.wikipedia.org/wiki/Marco_Pantani#Alleged_drug_use"

}, {

"Time": "36:55",

"Place": 2,

"Seconds": 2215,

"Name": "Marco Pantani",

"Year": 1997,

"Nationality": "ITA",

"Doping": "Alleged drug use during 1997 due to high hermatocrit levels",

"URL": "https://en.wikipedia.org/wiki/Marco_Pantani#Alleged_drug_use"

}, {

"Time": "37:15",

"Place": 3,

"Seconds": 2235,

"Name": "Marco Pantani",

"Year": 1994,

"Nationality": "ITA",

"Doping": "Alleged drug use during 1994 due to high hermatocrit levels",

"URL": "https://en.wikipedia.org/wiki/Marco_Pantani#Alleged_drug_use"

}, {

"Time": "37:36",

"Place": 4,

"Seconds": 2256,

"Name": "Lance Armstrong",

"Year": 2004,

"Nationality": "USA",

"Doping": "2004 Tour de France title stripped by UCI in 2012",

"URL": "https://en.wikipedia.org/wiki/History_of_Lance_Armstrong_doping_allegations"

}, {

"Time": "37:42",

"Place": 5,

"Seconds": 2262,

"Name": "Jan Ullrich",

"Year": 1997,

"Nationality": "GER",

"Doping": "Confessed later in his career to doping",

"URL": "https://en.wikipedia.org/wiki/Jan_Ullrich#Operaci.C3.B3n_Puerto_doping_case"

}, {

"Time": "38:05",

"Place": 6,

"Seconds": 2285,

"Name": "Lance Armstrong",

"Year": 2001,

"Nationality": "USA",

"Doping": "2001 Tour de France title stripped by UCI in 2012",

"URL": "https://en.wikipedia.org/wiki/History_of_Lance_Armstrong_doping_allegations"

}, {

"Time": "38:14",

"Place": 7,

"Seconds": 2294,

"Name": "Miguel Indurain",

"Year": 1995,

"Nationality": "ESP",

"Doping": "1994 Failed test for salbutemol, not a banned drug at that time",

"URL": "http://www.independent.co.uk/sport/drugs-in-sport-indurain-allowed-to-use-banned-drug-1379584.html"

}, {

"Time": "38:14",

"Place": 8,

"Seconds": 2294,

"Name": "Alex Zülle",

"Year": 1995,

"Nationality": "SUI",

"Doping": "Confessed in 1998 to taking EPO",

"URL": "https://en.wikipedia.org/wiki/Alex_Z%C3%BClle#Festina_affair"

}, {

"Time": "38:16",

"Place": 9,

"Seconds": 2296,

"Name": "Bjarne Riis",

"Year": 1995,

"Nationality": "DEN",

"Doping": "Alleged drug use during 1995 due to high hermatrocite levels",

"URL": "https://en.wikipedia.org/wiki/Bjarne_Riis#Doping_allegations"

}, {

"Time": "38:22",

"Place": 10,

"Seconds": 2302,

"Name": "Richard Virenque",

"Year": 1997,

"Nationality": "FRA",

"Doping": "In 2000 confessed to doping during his career",

"URL": "https://en.wikipedia.org/wiki/Richard_Virenque#Festina_affair"

}, {

"Time": "38:36",

"Place": 11,

"Seconds": 2316,

"Name": "Floyd Landis",

"Year": 2006,

"Nationality": "USA",

"Doping": "Stripped of 2006 Tour de France title",

"URL": "https://en.wikipedia.org/wiki/Floyd_Landis_doping_case"

}, {

"Time": "38:36",

"Place": 12,

"Seconds": 2316,

"Name": "Andreas Klöden",

"Year": 2006,

"Nationality": "GER",

"Doping": "Alleged use of illegal blood transfusions in 2006",

"URL": "https://en.wikipedia.org/wiki/Andreas_Kl%C3%B6den#2009_Doping_allegations"

}, {

"Time": "38:40",

"Place": 13,

"Seconds": 2320,

"Name": "Jan Ullrich",

"Year": 2004,

"Nationality": "GER",

"Doping": "Confessed later in his career to doping",

"URL": "https://en.wikipedia.org/wiki/Jan_Ullrich#Operaci.C3.B3n_Puerto_doping_case"

}, {

"Time": "38:44",

"Place": 14,

"Seconds": 2324,

"Name": "Laurent Madouas",

"Year": 1995,

"Nationality": "FRA",

"Doping": "Tested positive for Salbutemol in 1994, suspended for 1 month",

"URL": "http://www.dopeology.org/incidents/Madouas-positive/"

}, {

"Time": "38:55",

"Place": 15,

"Seconds": 2335,

"Name": "Richard Virenque",

"Year": 1994,

"Nationality": "FRA",

"Doping": "In 2000 confessed to doping during his career",

"URL": "https://en.wikipedia.org/wiki/Richard_Virenque#Festina_affair"

}, {

"Time": "39:01",

"Place": 16,

"Seconds": 2341,

"Name": "Carlos Sastre",

"Year": 2006,

"Nationality": "ESP",

"Doping": "",

"URL": ""

}, {

"Time": "39:09",

"Place": 17,

"Seconds": 2349,

"Name": "Iban Mayo",

"Year": 2003,

"Nationality": "ESP",

"Doping": "Failed doping test in 2007 Tour de France",

"URL": "https://en.wikipedia.org/wiki/Iban_Mayo"

}, {

"Time": "39:12",

"Place": 18,

"Seconds": 2352,

"Name": "Andreas Klöden",

"Year": 2004,

"Nationality": "GER",

"Doping": "Alleged doping during 2006 Tour de France",

"URL": "https://en.wikipedia.org/wiki/Operaci%C3%B3n_Puerto_doping_case"

}, {

"Time": "39:14",

"Place": 19,

"Seconds": 2354,

"Name": "Jose Azevedo",

"Year": 2004,

"Nationality": "POR",

"Doping": "Implicated in the Operación Puerto doping case",

"URL": "https://en.wikipedia.org/wiki/Operaci%C3%B3n_Puerto_doping_case"

}, {

"Time": "39:15",

"Place": 20,

"Seconds": 2355,

"Name": "Levi Leipheimer",

"Year": 2006,

"Nationality": "USA",

"Doping": "Testified in 2012 to doping during his time with US Postal Service ",

"URL": "http://www.wsj.com/articles/SB10000872396390444799904578048352672452328"

}, {

"Time": "39:22",

"Place": 21,

"Seconds": 2362,

"Name": "Francesco Casagrande",

"Year": 1997,

"Nationality": "ITA",

"Doping": "Positive testosterone test in 1998",

"URL": "http://autobus.cyclingnews.com/results/1998/sep98/sep2.shtml"

}, {

"Time": "39:23",

"Place": 22,

"Seconds": 2363,

"Name": "Nairo Quintana",

"Year": 2015,

"Nationality": "COL",

"Doping": "",

"URL": ""

}, {

"Time": "39:23",

"Place": 23,

"Seconds": 2363,

"Name": "Bjarne Riis",

"Year": 1997,

"Nationality": "DEN",

"Doping": "Alleged drug use during 1995 due to high hermatrocite levels",

"URL": "https://en.wikipedia.org/wiki/Bjarne_Riis#Doping_allegations"

}, {

"Time": "39:30",

"Place": 24,

"Seconds": 2370,

"Name": "Miguel Indurain",

"Year": 1994,

"Nationality": "ESP",

"Doping": "1994 Failed test for salbutemol, not a banned drug at that time",

"URL": "http://www.independent.co.uk/sport/drugs-in-sport-indurain-allowed-to-use-banned-drug-1379584.html"

}, {

"Time": "39:30",

"Place": 25,

"Seconds": 2370,

"Name": "Luc Leblanc",

"Year": 1994,

"Nationality": "FRA",

"Doping": "Admitted to using epo and amphetimines throughout 1994 ",

"URL": "http://www.dopeology.org/people/Luc_Leblanc/"

}, {

"Time": "39:32",

"Place": 26,

"Seconds": 2372,

"Name": "Carlos Sastre",

"Year": 2008,

"Nationality": "ESP",

"Doping": "",

"URL": ""

}, {

"Time": "39:37",

"Place": 27,

"Seconds": 2377,

"Name": "Vladimir Poulnikov",

"Year": 1994,

"Nationality": "UKR",

"Doping": "",

"URL": ""

}, {

"Time": "39:40",

"Place": 28,

"Seconds": 2380,

"Name": "Giuseppe Guerini",

"Year": 2004,

"Nationality": "ITA",

"Doping": "",

"URL": ""

}, {

"Time": "39:41",

"Place": 29,

"Seconds": 2381,

"Name": "Santos Gonzalez",

"Year": 2004,

"Nationality": "ESP",

"Doping": "High Hematocrit during 2005 season, removed by team management",

"URL": "http://www.cyclingnews.com/news/santos-gonzalez-sacked-by-phonak/"

}, {

"Time": "39:41",

"Place": 30,

"Seconds": 2381,

"Name": "Vladimir Karpets",

"Year": 2004,

"Nationality": "RUS",

"Doping": "Made payments to Ferrari, but no charges filed",

"URL": "http://www.dopeology.org/incidents/Ferrari-investigation/"

}, {

"Time": "39:45",

"Place": 31,

"Seconds": 2385,

"Name": "Fernando Escartin",

"Year": 1995,

"Nationality": "ESP",

"Doping": "Implicated in Giardini Margherita Raid in 1998 as a 'victim' ",

"URL": "http://www.dopeology.org/incidents/Giardini-Margherita-raid-%5bBologna%5d/"

}, {

"Time": "39:47",

"Place": 32,

"Seconds": 2387,

"Name": "Denis Menchov",

"Year": 2006,

"Nationality": "RUS",

"Doping": "",

"URL": ""

}, {

"Time": "39:47",

"Place": 33,

"Seconds": 2387,

"Name": "Michael Rasmussen",

"Year": 2006,

"Nationality": "DEN",

"Doping": "Admitted to doping with multiple substances 1998-2010",

"URL": "http://www.dopeology.org/people/Michael_Rasmussen/"

}, {

"Time": "39:47",

"Place": 34,

"Seconds": 2387,

"Name": "Pietro Caucchioli",

"Year": 2006,

"Nationality": "ITA",

"Doping": "Associated with Mantova investigation, charges dropped",

"URL": "http://www.cyclingnews.com/news/italian-judge-set-to-decide-if-32-named-in-mantova-doping-investigation-should-go-on-trial/"

}, {

"Time": "39:50",

"Place": 35,

"Seconds": 2390,

"Name": "Nairo Quintana",

"Year": 2013,

"Nationality": "COL",

"Doping": "",

"URL": ""

}]

//format seconds for human readable axis

//http://bl.ocks.org/mbostock/3048166

//http://stackoverflow.com/questions/24541296/d3-js-time-scale-nicely-spaced-ticks-at-minute-intervals-when-data-is-in-second

// Formatters for counts and times (converting numbers to Dates).

var formatCount = d3.format(",.0f"),

formatTime = d3.time.format("%H:%M"),

formatMinutes = function(d) {

var t = new Date(2012, 0, 1, 0, d)

t.setSeconds(t.getSeconds() + d);

return formatTime(t);

};

var tip = d3.tip()

.attr('class', 'd3-tip')

.html(function(d) {

var tooltipHTML = "" + d.Name + "
" + d.Year + "
" + d.Nationality;

if (d.doping !== "") {

tooltipHTML += "
" + d.Doping;

} else {

tooltipHTML += "
No doping allegations";

}

return tooltipHTML;

});

var fastestTime = 2210;

//Prep the data for D3

alps.forEach(function(finish) {

//turn finishing time into seconds behind winner

finish.behind = finish.Seconds - fastestTime;

//add data legend

if (finish.Doping != "") {

finish.legend = "Doping Allegations";

} else {

finish.legend = "No Doping Allegation";

}

console.log(finish.legend);

})

//d3 Stuff Here

var margin = {

top: 80,

right: 140,

bottom: 60,

left: 60

},

width = 800 - margin.left - margin.right,

height = 600 - margin.top - margin.bottom;

var yScale = d3.scale.linear()

.domain([1, 36])

.range([0, height]);

var xScale = d3.scale.linear()

.domain([60 * 3.5, 0])

//.domain([d3.max(alps, function(d) {

// return d.behind+50;

// }),0])

.range([0, width]);

var yAxis = d3.svg.axis()

.scale(yScale)

.ticks(8)

.orient("left");

var xAxis = d3.svg.axis()

.scale(xScale)

.ticks(6)

.orient("bottom")

.tickFormat(formatMinutes);

//Create SVG element

var svg = d3.select("#container").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 ascents = svg.selectAll("circle")

.data(alps)

.enter()

.append("circle")

.attr("cx", function(d) {

return xScale(d.behind);

})

.attr("cy", function(d) {

return yScale(d.Place);

})

.attr("r", 5)

.attr("fill", function(d) {

if (d.Doping == "") {

return "#333";

}

return "#f44";

})

.attr("data-legend", function(d) {

return d.legend;

})

.on("mouseover", function(d) {

tooltip.transition()

.duration(200)

.style("opacity", .9);

tooltip.html(createToolTip(d)

/*

function() {

var tooltipHTML = "" + d.Name+": "+ d.Nationality+"" ;

tooltipHTML += "
Year: " + d.Year + ", Time: " + friendlySeconds(d.Seconds) +"
";

if (d.doping !== "") {

tooltipHTML += "
" + d.Doping;

} else {

tooltipHTML += "
No Doping Allegation";

}

return tooltipHTML;

}

*/

)

.style("left", (width / 2) + "px")

.style("top", (280) + "px");

})

.on("mouseout", function(d) {

tooltip.transition()

.duration(500)

.style("opacity", 0);

});

// add the tooltip area to the webpage

var tooltip = d3.select("body").append("div")

.attr("class", "tooltip")

.style("opacity", 0);

//text labels

svg.selectAll("text")

.data(alps)

.enter()

.append("text")

.text(function(d) {

return d.Name;

})

.attr("x", function(d) {

return xScale(d.behind);

})

.attr("y", function(d) {

return yScale(d.Place);

})

.attr("transform", "translate(15,+4)");

//create xAxis

svg.append("g")

.attr("class", "axis")

.attr("transform", "translate(0," + height + ")")

.call(xAxis)

.append("text")

.attr("x", 300)

.attr("y", 35)

.attr("dy", ".35em")

.style("text-anchor", "middle")

.text("Minutes Behind Fastest Time");;

//.attr("transform", "translate(40,500)");

//Create Y axis

svg.append("g")

.attr("class", "axis")

.attr("transform", "translate(0, 0)")

.call(yAxis)

.append("text")

.attr("x", 0)

.attr("y", -35)

.attr("dy", ".35em")

.style("text-anchor", "end")

.attr("transform", "rotate(-90)")

.text("Ranking");

//Add title & subtitle to SvG element

//Could also be done in HTML

svg.append("text")

.attr("x", (width / 2))

.attr("y", -margin.top / 2)

.attr("text-anchor", "middle")

.attr("class", "title")

.text("Doping in Professional Bicycle Racing");

svg.append("text")

.attr("x", (width / 2))

.attr("y", -margin.top / 2 + 35)

.attr("text-anchor", "middle")

.attr("class", "subtitle")

.text("35 Fastest times up Alpe d'Huez");

svg.append("text")

.attr("x", (width / 2))

.attr("y", -margin.top / 2 + 55)

.attr("text-anchor", "middle")

.attr("class", "asterix")

.text("Normalized to 13.8km distance");

//legend

//circles with fill

//gray circle

svg.append("circle")

.attr("cx", function(d) {

return xScale(10);

})

.attr("cy", function(d) {

return yScale(20);

})

.attr("r", 5)

.attr("fill", "#333");

svg.append("text")

.attr("x", function(d) {

return xScale(7);

})

.attr("y", function(d) {

return yScale(20) + 4;

})

.attr("text-anchor", "left")

.attr("class", "legend")

.text("No doping allegations");

//red circle

svg.append("circle")

.attr("cx", function(d) {

return xScale(10);

})

.attr("cy", function(d) {

return yScale(23);

})

.attr("r", 5)

.attr("fill", "#f44");

svg.append("text")

.attr("x", function(d) {

return xScale(7);

})

.attr("y", function(d) {

return yScale(23) + 4;

})

.attr("text-anchor", "left")

.attr("class", "legend")

.text("Riders with doping allegations");

function friendlySeconds(seconds) {

return parseInt(seconds / 60) + ":" + seconds % 60;

}

function createToolTip(d) {

var tooltipHTML = "" + d.Name + ": " + d.Nationality + "";

tooltipHTML += "
Year: " + d.Year + ", Time: " + friendlySeconds(d.Seconds) + "
";

if (d.doping !== "") {

tooltipHTML += "
" + d.Doping;

} else {

tooltipHTML += "
No Doping Allegation";

}

return tooltipHTML;

}

ajax散点图改变样式,使用D3.js实现的散点图可视化相关推荐

  1. AMap + echarts、google map + d3.js分别实现数据可视化中的飞线图（迁徙图）

    首先肯定是给出demo啦: 演示demo 直接到左侧选择框中选择View taxi flow里面随便选个日期 总体介绍 最近由于工作室项目需要做一个数据可视化平台,这个平台最终是交由国外人使用的.而国 ...

  2. D3.js用动画渲染数据集的显示

    介绍 数据统计和数据分析离不开数据集.之前几篇博客(用D3.js进行医疗数据可视化 (一)折线图 (Line Chart) 等)基于的是国家卫生和计划生育委员会统计信息中心的数据,可以说是已经经过了加 ...

  3. D3.js的v5版本入门教程（第一章）—— 如何在项目中使用D3.js

    D3.js的v5版本入门教程(第一章) 1.需要的一些工具 这个其实随便!最简单的就是建一个.txt文件就可以敲起代码来!作者本人用的是myeclipse(主要需要安装tomcat),因为写的是前端, ...

  4. three.js和D3.js

    D3.js是一个数据可视化的库,看看他们的DEMO就可以知道,技术基础是SVG.兼容性是IE9+. three.js是以webgl为基础的库,封装了一些3D渲染需求中重要的工具方法与渲染循环. web ...

  5. python qt gui与数据可视化编程 kindle_Kindle电子书 – D3.js数据可视化实战手册 azw3...

    豆瓣评分:7.0 27人评价 简介: 如今这个互联网时代,人们每天都产生海量的数据,如果直接面对这些数据,可能让人无从下手.将数据可视化,用形象立体的形式将其展现,有利于分析其中的关联,攫取可能存在的 ...

  6. D3.js的v5版本入门教程（第六章）——做一个简单的图表

    D3.js的v5版本入门教程(第六章) 从这一章开始,进入正式的d3,js绘图阶段,有了前面几章基本知识的积累,这样看接下来的绘图代码才不会觉得比较辛苦 做一个简单的图表 为了做一个简单的图表,我们还 ...

  7. D3.js的v5版本入门教程（第十四章）—— 力导向图

    D3.js的v5版本入门教程(第十四章) 这一章我们来绘制一个力导向图,什么叫力导向图,通俗一点将就是有节点和线组成,当鼠标拖拽一个节点时,其他节点都会受到影响(力导向图有多种类型,本章绘制的效果就是 ...

  8. D3.js的v5版本入门教程（第十三章）—— 饼状图

    D3.js的v5版本入门教程(第十三章) 这一章我们来绘制一个简单的饼状图,我们只绘制构成饼状图基本的元素--扇形.文字,从这一章开始,内容可能有点难理解,因为每一章都会引入比较多的难理解知识点,在这 ...

  9. Vue.js动态改变样式

    动态改变样式 我们经常有这样的需求,就是用js控制css.但是我们知道js只能控制DOM层和BOM层,没有办法控制写入CSS文件.可是我们有时候偏偏需要改变样式怎么办呢?我们有两种方法: 动态改变st ...

最新文章

  1. asp.net获取页面url参数值的实现代码实例
  2. 谢文睿：西瓜书 + 南瓜书 吃瓜系列 1. 一元线性回归
  3. php-Facade（外观模式）
  4. 3月12日云栖精选夜读：操作阿里云Kibana
  5. 精准评论是如何在娱乐类产品中大放异彩？
  6. 在Servlet中实现页面重定向
  7. java util下的并发包_jdk并发包下：使用java.util.concurrent.Executor线程池
  8. java oom dump_Java OOM 内存溢出分析
  9. 免费下载 | 超级APP背后的移动端技术大揭秘
  10. python中的字典及注意事项
  11. MUSICAL CHAIRS【模拟】
  12. ssm框架搭建+easyui增删改查实现
  13. Remoting入门实例
  14. 给学习java web新手们的建议和推荐一些书籍
  15. 2020 年度 OSC 中国开源项目评选结果公布
  16. for循环里面嵌套if_信不信两层python嵌套for循环就能把你搞懵了
  17. 【协同任务】基于matlab二阶一致性算法多无人机协同编队动态仿真【含Matlab源码 1740期】
  18. 人工智能、机器学习、神经网络和深度学习的关系
  19. c 和易语言如何传字节集,易语言字节集参数传递详解
  20. AgentWeb 更加简洁优秀的webview

热门文章

  1. 清除终端 Terminal 的代码 快捷键(清屏)
  2. 关于Eclipse的SVN插件(Subclipse)历史版本乱码的问题
  3. C语言自动类型转换和强制类型转换详解,C语言强制类型转换 - 地狱的烈火的个人页面 - OSCHINA - 中文开源技术交流社区...
  4. MATLAB一维插值和二维插值
  5. 自己制作“EleksTubeIPS创意复古RGB拟辉光管时钟”分享《一》---（持续更新2021-12-17）
  6. hdu-4411-Arrest
  7. 【技术美术图形部分】关于前向渲染和延迟渲染
  8. Linux查看cpu、内存、硬盘命令
  9. 欧几里德算法及其扩展
  10. 网上图书店的设计与实现