D3 Scatterplot Project

Developer
Zac Clemans
Size
3,150 Kb
Views
8,096
  1. D3 Scatterplot Project Previews
  2. D3 Scatterplot Project HTML Codes
  3. D3 Scatterplot Project CSS Codes
  4. D3 Scatterplot Project JS Codes

How do I make an d3 scatterplot project?

Built for freeCodeCamp using D3 and jQuery. Dataset obtained from data.gov API.. What is a d3 scatterplot project? How do you make a d3 scatterplot project? This script and codes were developed by Zac Clemans on 14 January 2023, Saturday.

D3 Scatterplot Project Previews
IQ Test

D3 Scatterplot Project - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>D3 Scatterplot Project</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="graph"> Zipcode of your area: <input class="search" type="text" placeholder="Enter zip code">
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

D3 Scatterplot Project - Script Codes CSS Codes

.axis path { fill: none; stroke: black; shape-rendering: crispEdges;
}
.axis line { stroke: black; shape-rendering: crispEdges;
}
.tooltip { position: relative; display: none; padding: 5px; color: white; width: 200px; background: #000000; border-radius: 10px; opacity: .7;
}
circle { fill: green;
}
.graph { width: 900px; margin: 50px auto 0 auto;
}
.title { font-weight: bold;
}
.search { width: 100px; height: 20px; padding-left: 5px; font-size: 12px; border-radius: 2px;
}

D3 Scatterplot Project - Script Codes JS Codes

var margin = { top: 30, right: 20, bottom: 70, left: 70
}, width = 900 - margin.left - margin.right, height = 500 - margin.top - margin.bottom;
var xScale = d3.scale.linear() .range([0, width]), yScale = d3.scale.linear() .range([height, 0]);
function update(zip) { var api = "https://api.data.gov/ed/collegescorecard/v1/schools?fields=school.name,2007.aid.median_debt.completers.overall,2007.earnings.6_yrs_after_entry.working_not_enrolled.mean_earnings&zip=" + zip + "&distance=100mi&per_page=100&api_key=nQDaF3IbUt9f2ewa1ZRudHd7AymqYpmdILR3XOjk"; $.ajax({ url: api, dataType: 'json', success: function(d) { // Remove previous scatterplots and tooltips d3.select('svg').remove(); d3.select('.tooltip').remove(); var data = d.results; xScale.domain([0, d3.max(data, function(point) { return point["2007.earnings.6_yrs_after_entry.working_not_enrolled.mean_earnings"]; })]); yScale.domain([0, d3.max(data, function(point) { return point["2007.aid.median_debt.completers.overall"]; })]) var svg = d3.select('.graph') .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 scatterContainer = svg.selectAll('circle') .data(data) // Tooltip div for additional info var div = d3.select('.graph').append('div') .attr('class', 'tooltip') .attr('transform', 'translate(' + margin.left + ',0)'); scatterContainer.enter().append('circle') .attr('cx', function(point) { return xScale(point["2007.earnings.6_yrs_after_entry.working_not_enrolled.mean_earnings"]); }) .attr('cy', function(point) { return yScale(point["2007.aid.median_debt.completers.overall"]); }) .attr('r', 5) .on('mouseover', function(point) { div.html("<b>" + point["school.name"] + "</b><br/>Median Debt: $" + point["2007.aid.median_debt.completers.overall"] + "<br/>Median Income: $" + point["2007.earnings.6_yrs_after_entry.working_not_enrolled.mean_earnings"]) .style('left', width / 2 + 'px') .style('display', 'block'); }) .on('mouseout', function() { div.style('display', 'none'); }); var xAxis = d3.svg.axis() .scale(xScale) .orient('bottom') .tickFormat(d3.format("$")); var xAxisContainer = svg.append('g') .attr('class', 'x axis') .attr('transform', 'translate(0,' + height + ')') .call(xAxis); var yAxis = d3.svg.axis() .scale(yScale) .orient('left') .tickFormat(d3.format("$")); var yAxisContainer = svg.append('g') .attr('class', 'y axis') .call(yAxis); yAxisContainer.append('text') .attr('transform', 'rotate(-90)') .attr('text-anchor', 'end') .attr('dx', '-.4em') .attr('dy', '1em') .text("Median Debt of Graduates"); xAxisContainer.append('text') .text("Median Income of Graduates") .attr('text-anchor', 'end') .attr('dx', '50em') .attr('dy', '-.4em'); svg.append('text') .attr('class', 'title') .attr('text-anchor', 'middle') .attr('x', width / 2) .text("Graduate Income vs Debt in Zipcode: " + zip + " (within 100mi)"); } });
}
$(document).ready(function() { var zip = "40214" update(zip);
});
$('.search').keyup(function(e) { if (e.keyCode == 13) { var zip = $(this).val(); update(zip); $(this).val(""); }
})
D3 Scatterplot Project - Script Codes
D3 Scatterplot Project - Script Codes
Home Page Home
Developer Zac Clemans
Username thalpha
Uploaded January 14, 2023
Rating 3
Size 3,150 Kb
Views 8,096
Do you need developer help for D3 Scatterplot Project?

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!

Zac Clemans (thalpha) Script Codes
Name
D3 Force-directed Graph Project
D3 Map Project
Personal Portfolio
Random Chuck Norris Joke Generator
FCC Camper Leaderboard
Hero arrow test
FCC Camper Leaderboard Redux Refactor
Camper News
D3 Bar Graph Project
Simon Says
Create amazing love letters 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!