Scatterplot Graph D3

Developer
Adam
Size
5,762 Kb
Views
8,096
  1. Scatterplot Graph D3 Previews
  2. Scatterplot Graph D3 HTML Codes
  3. Scatterplot Graph D3 CSS Codes
  4. Scatterplot Graph D3 JS Codes

How do I make an scatterplot graph d3?

Scatterplot graph made with d3.js for fcc data visualisation course. What is a scatterplot graph d3? How do you make a scatterplot graph d3? This script and codes were developed by Adam on 28 November 2022, Monday.

Scatterplot Graph D3 Previews
IQ Test

Scatterplot Graph D3 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Scatterplot Graph D3</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container"> <h1>Doping in Cycling</h1> <h2>Fastest Cyclists up Alpe d'Huez </h2> <svg class="chart"> <div class="legend"> <p>Cyclists with doping allegations</p> <p>No doping allegations</p> </div> </svg> <div class="sources"> <p>https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/cyclist-data.json</p> <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/4.5.0/d3.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Scatterplot Graph D3 - Script Codes CSS Codes

body { height: 100%; text-align: center; background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)), url("https://images.unsplash.com/photo-1482838635474-0e9a91bbf218?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop="); color: #fff; font-family: 'verdana', sans-serif; font-size: 20px;
}
h1 { padding: 0.5em 0 0.3em; font-size: 2.5em; font-weight: 700;
}
h2 { font-size: 1.25em;
}
.chart text { fill: #fff; font: 20px 'verdana';
}
.axis path, .tick { stroke: #fff;
}
.legend { position: relative; text-align: left; top: -200px; left: 800px;
}
.legend p { padding: 10px 0;
}
.legend p:before { content: ''; position: absolute; top: 0.5em; left: -1.5em; width: 20px; height: 20px; border-radius: 50%; background: red; box-shadow: 0 2em green;
}
.sources { margin: -50px 0 0; padding: 0 0 50px; text-align: center; font-size: 0.5em;
}
.tooltip { text-align: left; position: absolute; opacity: 0; padding: 0.5em; color: #000; font-size: 0.6em; background-color: #fff; border-radius: 0.2em;
}

Scatterplot Graph D3 - Script Codes JS Codes

"use strict";
/*Scatterplot Graph D3 Made for free code camp data visualisation course
*/
var url = 'https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/cyclist-data.json';
d3.json(url, function (data) { //Size variables var yMargin = 75; var xMargin = 50; var height = 600 - xMargin * 2; var width = 1000 - yMargin * 2; var padding = 50; //Find fastest and slowest times from data var fastestTime = d3.min(data, function (d) { return d.Seconds; }); var slowestTime = d3.max(data, function (d) { return d.Seconds; }); //create scales based on time difference and position var x = d3.scaleLinear().domain([0, slowestTime - fastestTime]).range([width, 0]); var y = d3.scaleLinear().range([0, height]).domain([1, data.length + 1]); // create axis var xAxis = d3.axisBottom().scale(x); var yAxis = d3.axisLeft().scale(y); //create tooltip element var tooltip = d3.select(".container").append("div").attr("class", "tooltip"); //set chart size var chart = d3.select(".chart").attr('height', height + padding * 2).attr('width', width + padding * 2).append('g').attr("transform", "translate(" + padding * 1.7 + "," + padding + ")"); //Create group and append and style axis chart.append("g").attr("class", "x axis").attr("transform", "translate(0," + height + ")").call(xAxis).append("text").attr("dy", "2.5em").attr("dx", "35em").text("Seconds behind Leader"); chart.append("g").attr("class", "y axis").call(yAxis).append("text").attr("transform", "rotate(-90)").attr("dy", "1.2em").style("text-anchor", "end").text("Position"); //bind data to circles chart.selectAll("circle").data(data).enter().append("circle").attr("cx", function (data) { return x(data.Seconds - fastestTime); }).attr("cy", function (data) { return y(data.Place); }).attr("r", 5).style('fill', function (data) { //display color based on doping return data.Doping !== "" ? 'red' : 'green'; }) //handle tooltip reveal .on("mouseover", function (data) { //append data into tooltip and style tooltip.transition().style("opacity", 0.8); tooltip.html("<span>Cyclist: " + data.Name + "</span><br>" + "<span>Nation: " + data.Nationality + "</span><br>" + "<span>Year: " + data.Year + "</span><br>" + "<span>Time: " + data.Time + "</span><br>" + "<span>" + data.Doping + "</span>").style("left", d3.event.pageX + 10 + "px").style("top", d3.event.pageY + 10 + "px"); });
});
Scatterplot Graph D3 - Script Codes
Scatterplot Graph D3 - Script Codes
Home Page Home
Developer Adam
Username rzencoder
Uploaded November 28, 2022
Rating 3
Size 5,762 Kb
Views 8,096
Do you need developer help for Scatterplot Graph D3?

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!

Adam (rzencoder) Script Codes
Name
Markdown Previewer
Placeholder Portfolio
CSS World Flags
React Leaderboard
Scrolling Effects Practice
React Game of Life
The Crystal Maze
Heat Map Data Visualisation D3
Whack-a-Mole and Simon Game
Countdown Anagram Game
Create amazing sales emails 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!