D3 Map Project

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

How do I make an d3 map project?

Built for freeCodeCamp using D3 and jQuery. Modeled after tutorials.. What is a d3 map project? How do you make a d3 map project? This script and codes were developed by Zac Clemans on 14 January 2023, Saturday.

D3 Map Project Previews
IQ Test

D3 Map Project - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>D3 Map Project</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <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="map container-fluid"></div> <script src='https://d3js.org/d3.v3.min.js'></script>
<script src='https://d3js.org/topojson.v1.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='https://raw.githubusercontent.com/mbostock/d3/master/lib/colorbrewer/colorbrewer.js'></script> <script src="js/index.js"></script>
</body>
</html>

D3 Map Project - Script Codes CSS Codes

.country { fill: rgb(2, 99, 4);
}
svg { background: rgb(75, 204, 223);
}

D3 Map Project - Script Codes JS Codes

var width = parseInt(d3.select('.map').style('width')), height = width;
var svg = d3.select('.map').append('svg') .attr('width', width) .attr('height', height);
var tooltip = d3.select('body').append('div') .style('position', 'absolute') .style('color', 'white') .style('background', 'grey') .style('padding', '5px') .style('border-radius', '5px');
var projection = d3.geo.mercator() .scale(width / 7) .translate([width / 2, height / 2]);
var path = d3.geo.path() .projection(projection);
var zoom = d3.behavior.zoom() .scaleExtent([1, 8]) .on('zoom', function() { svg.attr('transform', 'translate(' + d3.event.translate.join(",") + ')scale(' + d3.event.scale + ')'); });
svg.call(zoom);
d3.select(window).on('resize', resize);
d3.json("https://raw.githubusercontent.com/mbostock/topojson/master/examples/world-50m.json", function(error, topology) { svg.append('g').selectAll('path') .data(topojson.feature(topology, topology.objects.countries) .features) .enter() .append('path') .attr('class', 'country') .attr('d', path); d3.json("https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/meteorite-strike-data.json", function(error, data) { var mass = data.features.map(function(d) { return d.properties.mass; }); var radiusScale = d3.scale.quantile() .domain([d3.min(mass), d3.max(mass)]) .range([10, 15, 20, 25]); var colors = colorbrewer.Reds[9]; colors = colors.slice(3, -2); svg.append('g').selectAll('circle') .data(data.features) .enter() .append('circle') .attr('class', 'meteorite') .attr('cx', function(d) { if (d.geometry == null) { return 0; } else { return projection(d.geometry.coordinates)[0]; } }) .attr('cy', function(d) { if (d.geometry == null) { return 0; } else { return projection(d.geometry.coordinates)[1]; } }) .attr('r', 2) .attr('fill', 'rgb(175, 54, 61)') .on('mouseover', function(d) { tooltip.html("<b>Name:</b> " + d.properties.name + "<br/>" + "<b>Mass:</b> " + d.properties.mass + "<br/>" + "<b>Class:</b> " + d.properties.recclass + "<br/>" + "<b>Fall:</b> " + d.properties.fall + "<br/>" + "<b>Longitude:</b> " + d.properties.reclong + "<br/>" + "<b>Latitude:</b> " + d.properties.reclat + "<br/>" + "<b>Year:</b> " + d.properties.year) .style('top', function() { if (d3.event.pageY - 150 < 0) { return (d3.event.pageY + 25) + 'px'; } else { return (d3.event.pageY - 170) + 'px'; } }) .style('left', (d3.event.pageX - 100) + 'px') .style('display', 'inline'); d3.select(this).transition() .attr('r', function(d) { return radiusScale(+d.properties.mass); }) .attr('fill', function(d) { var radius = radiusScale(+d.properties.mass); if (radius == 10) return colors[0]; else if (radius == 15) return colors[1]; else if (radius == 20) return colors[2]; else if (radius == 25) return colors[3]; }) .style('stroke-width', 2) .style('stroke', 'rgb(242, 242, 242)') .style('opacity', function(d) { return radiusScale(+d.properties.mass) > 5 ? 0.5 : 1; }); }) .on('mouseout', function() { tooltip.style('display', 'none'); d3.select(this).transition() .attr('r', 2) .attr('fill', 'rgb(175, 54, 61)') .style('stroke-width', '0') .style('opacity', 1); }); });
});
function resize() { width = parseInt(d3.select('.map').style('width')), height = width; projection .scale(width / 7) .translate([width / 2, height / 2]); svg .style('width', width + 'px') .style('height', height + 'px'); svg.selectAll('.country').attr('d', path); svg.selectAll('.meteorite') .attr('cx', function(d) { if (d.geometry == null) { return 0; } else { return projection(d.geometry.coordinates)[0]; } }) .attr('cy', function(d) { if (d.geometry == null) { return 0; } else { return projection(d.geometry.coordinates)[1]; } });
}
D3 Map Project - Script Codes
D3 Map Project - Script Codes
Home Page Home
Developer Zac Clemans
Username thalpha
Uploaded January 14, 2023
Rating 3
Size 3,119 Kb
Views 8,096
Do you need developer help for D3 Map 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
Recipe Box
Camper News
D3 Scatterplot Project
D3 Force-directed Graph Project
FCC Camper Leaderboard Redux Refactor
FCC Camper Leaderboard
Pomodoro Timer
Hero arrow test
Random Chuck Norris Joke Generator
Local Weather App
Create amazing blog posts 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!