D3 Heatmap Project

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

How do I make an d3 heatmap project?

Built for freeCodeCamp using D3 and jQuery. Data obtained from the NOAA database API.. What is a d3 heatmap project? How do you make a d3 heatmap project? This script and codes were developed by Zac Clemans on 14 January 2023, Saturday.

D3 Heatmap Project Previews
IQ Test

D3 Heatmap Project - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>D3 Heatmap 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"></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='https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.7.0/d3-legend.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

D3 Heatmap Project - Script Codes CSS Codes

body { background: #f2f2f2;
}
.title { font-size: 24px; font-weight: bold;
}
.graph { width: 1000px; margin: 50px auto 0 auto; background: white; border-radius: 10px; box-shadow: 3px 3px 2px #555555;
}
.legend text { font-size: 12px; font-weight: bold;
}
.axis path { fill: none;
}
.axis text { font-size: 12px;
}
.tooltip { display: none; position: absolute; padding: 5px; background: white; opacity: 0.9; border: 2px solid #c6c6c6; border-radius: 5px;
}

D3 Heatmap Project - Script Codes JS Codes

var months = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"
], days = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31 ], colors = ['#fff7ec','#fee8c8','#fdd49e','#fdbb84','#fc8d59','#ef6548','#d7301f','#b30000','#7f0000'], buckets = 9, margin = { top: 100, right: 20, bottom: 100, left: 90 }, width = 900 - margin.left - margin.right, height = 500 - margin.top - margin.bottom, cellWidth = Math.floor(width / days.length), cellHeight = Math.floor(height / months.length), api = "http://www.ncdc.noaa.gov/cdo-web/api/v2/data?datasetid=GHCND&datatypeid=PRCP&stationid=GHCND:US1FLVL0003&locationid=ZIP:32720&startdate=2015-01-01&enddate=2015-12-31&limit=1000&units=standard", token = "PzmHlMQuSACQwkULruKGdDCqeTdlsXmi";
var xScale = d3.scale.ordinal() .domain(days) .rangeRoundBands([0, width]), yScale = d3.scale.ordinal() .domain(months) .rangeRoundBands([0, height]), parseTime = d3.time.format("%Y-%m-%dT%H:%M:%S").parse, tooltip = d3.select('body').append('div') .attr('class', 'tooltip');
var svg = d3.select('.graph').append('svg') .attr('width', width + margin.left + margin.right) .attr('height', height + margin.top + margin.bottom);
svg.append('g') .attr('class', 'title') .append('text') .attr('text-anchor', 'middle') .attr('transform', 'translate(' + (width + margin.left + margin.right) / 2 + ',' + margin.top / 2 + ')') .text('Rainfall in DeLand, FL (2015)');
var graphContainer = svg.append('g') .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
$.ajax({ url: api, headers: {token: token}, dataType: 'json', success: function(d) { var data = d.results; var colorScale = d3.scale.quantile() .domain([0, d3.max(data, function(d) { return d.value; })]) .range(colors); var tiles = graphContainer.selectAll('rect') .data(data); tiles.enter().append('rect') .attr('x', function(d) { return xScale(parseTime(d.date).getDate()); }) .attr('y', function(d) { return yScale(months[parseTime(d.date).getMonth()]); }) .attr('width', cellWidth) .attr('height', cellHeight) .attr('fill', function(d) { return colorScale(d.value); }) .style('cursor', 'pointer') .on('mouseover', function(d) { var date = parseTime(d.date) tooltip.html("<b>" + months[date.getMonth()] + " " + date.getDate() + "</b><br/>Rainfall: " + d.value + " inches") .style('display', 'inline') .style('top', (d3.event.pageY - 50) + 'px') .style('left', (d3.event.pageX) + 'px'); }) .on('mouseout', function() { tooltip.style('display', 'none'); }) var legend = d3.legend.color() .shapeWidth(Math.floor(width / colors.length)) .shapeHeight(cellHeight) .orient('horizontal') .scale(colorScale); graphContainer.append('g') .attr('class', 'legend') .attr('transform', 'translate(0,' + (height + margin.bottom / 2) + ')') .call(legend); var xAxis = d3.svg.axis() .orient('top') .scale(xScale); graphContainer.append('g') .attr('class', 'x axis') .call(xAxis); var yAxis = d3.svg.axis() .orient('left') .scale(yScale); graphContainer.append('g') .attr('class', 'y axis') .call(yAxis); }
});
D3 Heatmap Project - Script Codes
D3 Heatmap Project - Script Codes
Home Page Home
Developer Zac Clemans
Username thalpha
Uploaded January 14, 2023
Rating 3
Size 3,647 Kb
Views 8,096
Do you need developer help for D3 Heatmap 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
Markdown Previewer
Tic-Tac-Toe
D3 Bar Graph Project
Hero arrow test
Random Chuck Norris Joke Generator
Local Weather App
FCC Camper Leaderboard
FCC Camper Leaderboard Redux Refactor
Pomodoro Timer
Camper News
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!