Free Code Camp - D3 Scatterplot Visualization
How do I make an free code camp - d3 scatterplot visualization?
What is a free code camp - d3 scatterplot visualization? How do you make a free code camp - d3 scatterplot visualization? This script and codes were developed by Jeremy L. Shepherd on 27 December 2022, Tuesday.
Free Code Camp - D3 Scatterplot Visualization Previews
Free Code Camp - D3 Scatterplot Visualization - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Free Code Camp - D3 Scatterplot Visualization</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container header"> <h1 class="text-center">Free Code Camp</h2> <h2 class="text-center">D3 Scatterplot Visualization</h3>
</div>
<div class="container body"> <svg id="myChart" class="chart center-block"></svg> <div id="tooltip"> <p id="name"></p> <p id="time"></p> <p id="reason"></p> </div> <div class="footer well"> <h4>Sources:</h4> <p>https://en.wikipedia.org/wiki/Alpe_d%27Huez</p> <p>http://www.fillarifoorumi.fi/forum/showthread.php?38129-Ammattilaispy%F6r%E4ilij%F6iden-nousutietoja-%28aika-km-h-VAM-W-W-kg-etc-%29&p=2041608#post2041608</p> <p>https://alex-cycle.blogspot.com/2015/07/alpe-dhuez-tdf-fastest-ascent-times.html</p> <p>http://www.dopeology.org/</p>
</div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js'></script>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>Free Code Camp - D3 Scatterplot Visualization - Script Codes CSS Codes
body { background-image: linear-gradient(-45deg, transparent, rgba(0, 0, 255, 0.6), transparent), url("http://roadbikeaction.com/wp-content/uploads/2015/07/bettiniphoto_0217449_1_full.jpg"); background-color: rgba(255, 204, 0, 0.4); background-blend-mode: multiply;
}
.header { color: #fff; height: 120px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); width: 100%;
}
.chart { background-color: rgba(255, 255, 255, 0.8); margin: 0 auto; box-shadow: 10px 10px 2px rgba(0, 0, 0, 0.3); border: 1px solid #000; border-radius: 10px; position: relative;
}
.axis { font-size: 12px;
}
.axis path, .axis line { fill: none; stroke: #000;
}
.footer { color: #000; margin-top: 40px;
}
.tips { position: relative; padding: 5px; text-align: left; width: 200px; height: 150px; margin: 1em 0 3em; border: 1px solid #fff; color: #fff; background: linear-gradient(rgba(0, 0, 0, 0.7), black); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.tips:before { content: ""; position: absolute; bottom: -20px; left: 82px; border-width: 20px 20px 0; border-style: solid; border-color: #fff transparent; display: block; width: 0;
}
.tips:after { content: ""; position: absolute; bottom: -19px; left: 82px; border-width: 20px 20px 0; border-style: solid; border-color: black transparent; display: block; width: 0;
}
.tips .hidden { display: none;
}
Free Code Camp - D3 Scatterplot Visualization - Script Codes JS Codes
/* Acknowledgements: * Time Axis: http://stackoverflow.com/questions/24541296/d3-js-time-scale-nicely-spaced-ticks-at-minute-intervals-when-data-is-in-second * Scatterplot basics: https://bl.ocks.org/weiglemc/6185069, */
var url = "https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/cyclist-data.json";
$.getJSON(url, function(data) { var riderData = data; d3.select('pre').text(JSON.stringify(riderData, null, 4)); var max = d3.max(data, function(d) { return d.Place; }), margin = { top: 30, right: 20, bottom: 50, left: 50 }, bestTime = d3.min(data, function(d) { return d.Seconds }), worstTime = d3.max(data, function(d) { return d.Seconds }), height = (max * 20) + margin.bottom + margin.top, width = ((worstTime - bestTime) * 5) + margin.left + margin.right; //To show "raw" data on the page, add a pre tag to html to view var json = d3.select('pre').text(JSON.stringify(riderData, undefined, 4)), largestDiff = riderData[riderData.length - 1].Seconds - riderData[0].Seconds, formatTime = d3.time.format('%M' + ':' + '%S'), formatMinutes = function(d) { var t = new Date(2012, 0, 1, 0, 0, d); return formatTime(t); }; function secsToMins(n) { var minutes = Math.floor(n / 60); var seconds = n % 60 < 10 ? '0' + n % 60 : n % 60; return minutes + ':' + seconds; } function findCenter(element) { var center = (+(d3.select('#myChart').attr('width')) / 2) + margin.left; var elementCenter = (Math.floor(element.getBBox().width)) / 2; return center - elementCenter; } var x = d3.scale.linear() .domain([largestDiff, 0]) .range([0, width - margin.right]); var xAxis = d3.svg.axis() .scale(x) .orient("bottom") .tickFormat(formatMinutes); var y = d3.scale.linear() .domain([d3.max(data, function(d) { return d.Place; }) + 1, 0]) .range([(height - margin.bottom), 0]); var yAxis = d3.svg.axis() .scale(y) .orient("left") .ticks(10); var chart = d3.select('#myChart') .attr('width', width + margin.left + margin.right) .attr('height', height + margin.bottom) .append('g') .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var dot = chart.selectAll('g') .data(data) .enter() .append('g') .attr('x', function(d) { // var timeBehind = bestTime - d.Seconds; // var x = (width - margin.left - margin.right) - (timeBehind * 5); var graphWidth = width - margin.left - margin.right; var x = (graphWidth - ((d.Seconds - bestTime) * 5)); return x; }) .attr("y", function(d) { var rank = d.Place; return (rank * 20); }); dot.append('circle') .attr('class', 'circle') .attr("r", 7.5) .attr('cx', function(d) { // var timeBehind = bestTime - d.Seconds; // var x = (width - margin.left - margin.right) - (timeBehind * 5); var graphWidth = width - margin.left - margin.right; var x = (graphWidth - ((d.Seconds - bestTime) * 5)); return x; }) .attr("cy", function(d) { var rank = d.Place; return (rank * 20); }) .attr('fill', function(d) { if (d.Doping === '') { return '#000'; } return '#ff0000'; }) .attr('stroke', '#fff'); dot.append('text') .attr('x', function(d) { var x = +(d3.select(this.parentNode).attr("x")); return x + 10; }) .attr('y', function(d) { var y = +(d3.select(this.parentNode).attr("y")); return y + 3; }) .attr('font-size', '10') .text(function(d) { return d.Name }); var circle = dot.selectAll('circle'); chart.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + (height - margin.bottom) + ")") .call(xAxis) .append('text') .attr("y", 20) .attr("dy", "1.2em"); chart.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 10) .attr("dy", ".8em") .attr('font-size', 24) .style("text-anchor", "end") .text('Rank'); var labels = d3.select('svg').append('g'); var main = labels.append('text') .attr('id', 'main') .attr('font-size', 36) .text('Doping in Professional Bicycle Racing'); main.attr('x', findCenter(document.getElementById('main'))) .attr('y', 36); var submain = labels.append('text') .attr('id', 'submain') .attr('font-size', 24) .text("35 Fastest times up Alpe d'Huez"); submain.attr('x', findCenter(document.getElementById('submain'))) .attr('y', 60); var footnote = labels.append('text') .attr('id', 'footnote') .attr('font-size', 16) .text("Normalized to 13.8km distance"); footnote.attr('x', findCenter(document.getElementById('footnote'))) .attr('y', 76); var xLabel = labels.append('text').attr('id', 'xLabel') .attr('font-size', 18) .text('Minutes Behind Fastest Time'); xLabel.attr('x', findCenter(document.getElementById('xLabel'))) .attr('y', height + (margin.bottom / 2)); var legend = d3.select('svg') .append('g') .attr('transform', 'translate(' + (width / 4) * 3 + ', ' + (height / 4) * 3 + ')'); legend.append('rect') .attr('width', 250) .attr('height', 125) .attr('stroke', 'black') .attr('fill', 'none'); legend.append('text') .attr('font-size', '24px') .attr('y', 24) .text('LEGEND') .attr('x', 250 / 3); legend.append('rect') .attr('fill', 'black') .attr('width', '20') .attr('height', '10') .attr('stroke', 'white') .attr('x', 10) .attr('y', 40); legend.append('text') .attr('font-size', '12px') .attr('x', 35) .attr('y', 49) .text('No doping allegations.'); legend.append('rect') .attr('fill', 'red') .attr('width', '20') .attr('height', '10') .attr('stroke', 'white') .attr('x', 10) .attr('y', 70); legend.append('text') .attr('font-size', '12px') .attr('x', 35) .attr('y', 79) .text('Riders with doping allegations.'); circle.on('mouseover', function(d) { var xPos = +(d3.select(this).attr('cx')); // var yPos = +(d3.select(this).attr('cy')) - 970; var yPos = event.pageY - 1140; var tooltip = d3.select('#tooltip') .style('left', xPos + 'px') .style('top', yPos + 'px') .attr('class', 'tips'); d3.select(this) .attr('r', '10'); d3.select('#name').text(d.Name + ' (' + d.Nationality + ')'); d3.select('#time') .text(d.Year + ' : ' + 'Finished at ' + d.Time + ', ' + secsToMins(d.Seconds - bestTime) + ' behind the leader.'); d3.select('#reason').text(function() { if (d.Doping === '') { return 'No doping allegations.'; } else { return d.Doping; } }); //footer would slide down 196px on mouseover which was distracting, added this to counteract d3.select('.footer').style('margin-top', '-166px'); }) .on('mouseout', function() { d3.select('#tooltip').attr('class', 'hidden'); d3.select(this) .attr('r', '7.5'); //removing the -182px margin-top d3.select('.footer').style('margin-top', '40px'); });
});
| Developer | Jeremy L. Shepherd |
| Username | jeremylshepherd |
| Uploaded | December 27, 2022 |
| Rating | 3 |
| Size | 5,436 Kb |
| Views | 8,096 |
Do you need developer help for Free Code Camp - D3 Scatterplot Visualization?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Jeremy L. Shepherd (jeremylshepherd) Script Codes
| Name | Size |
| FreeCodeCamp - Zipline - Portfolio | 10,405 Kb |
| Free Code Camp - Map Data Across the Globe | 4,479 Kb |
| Mortgage Calculator - React | 3,217 Kb |
| Free Code Camp - Tic Tac Toe | 3,153 Kb |
| Treehouse Badge finder Angular | 2,835 Kb |
| Adjustable Game Timer | 8,728 Kb |
| Free Code Camp - LeaderBoard | 5,221 Kb |
| Markdown Preview Editor - Angular | 2,308 Kb |
| Free Code Camp - JavaScript Calculator | 2,608 Kb |
| Poll Form in React | 4,233 Kb |
Create amazing web content with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Funny menu | AxeLVaisper | 4,671 Kb |
| Resume | Rottingroom | 5,483 Kb |
| Very Simple Slider | Doodlemarks | 2,682 Kb |
| Gradients | Karpovsystems | 2,394 Kb |
| Retina canvas w. resize | Erikterwan | 1,882 Kb |
| Exploding Text | Jjmartucci | 4,749 Kb |
| A Pen by Xand0r | Xand0r | 1,928 Kb |
| V.35 The Monolith Update - Hero Release Notes | Jordan | 12,045 Kb |
| A Pen by Jay | Jaycode | 3,784 Kb |
| Drag n Drop | Martin42 | 2,594 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!