D3.js challenging - Level 1

100%

D3.js challenging - Level 1

✓ Published0🌍 Public

11109209710@qq.com

Last edited Oct 25, 2021

Created on Oct 23, 2021

This example visualizes daily temperature records in a calendar-style heatmap, with the x-axis representing years and the y-axis representing months. Each cell encodes temperature values through color, and the visualization includes axis labels, gridlines, and a legend for color mapping. Built with D3.js v7, it uses `d3.scaleTime` for both axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and reads data from a CSV file. The code includes placeholder logic for rendering maximum and minimum temperatures and tooltip functionality, though those interactions are not fully implemented in the visible source.

AI-generated description

Here are the basic requirements:

In the matrix, x direction indicates the year and y direction indicates the month (you can switch them if you like). Each cell indicates the corresponding month of a specific year.
You need to visualize the maximum and minimum temperature by month in some way (e.g. you can use click to switch max or min temperature).
When hovering mouse on each cell, a tip should appear to show the date and the temperature value.
A legend is needed to show the mapping between colors and values.

MIT Licensed

Similar vizzes

Loading thumbnail…

HeatMap D3

This heatmap displays average monthly temperatures for ten cities across 2016, using a vertical color gradient from the Inferno interpolator to encode temperature values. The visualization employs D3.js v6 with SVG rendering, scaling months along the x-axis and cities along the y-axis. Interactive tooltips reveal exact temperature values on hover, while a d3-legend color scale provides a visual reference for the temperature range. The data comes from a CSV file loaded via d3.csv, with rounded cell corners and opacity styling for clarity.

AAllen Ho

77% match

Loading thumbnail…

LALA ：Challenge 1

This visualization displays the monthly minimum and maximum temperatures for each year from 1997 to 2017, using a grid of colored rectangles where opacity encodes the coldest recorded temperature. The data is sourced from the temperature_daily_1.csv file, and the visualization is rendered as SVG using D3 v5. The code employs d3.scaleBand for the axes, d3.scaleLinear for color opacity mapping, and d3.axisTop/axisLeft to generate the chart structure. A legend with a linearGradient is also included.

Llinlala

77% match

Loading thumbnail…

EP06 | 學會 D3.js 製作圖表 - 製作折線圖(Line Chart)溫度與日期

This example visualizes daily temperature readings for September 2021 using a line chart. It plots dates on the x-axis and temperatures in degrees Celsius on the y-axis, with green circular marks at each data point. The visualization is rendered as an SVG using D3.js v7, employing `scaleTime` and `scaleLinear` for axis scaling, `axisBottom` and `axisLeft` for axis generation, and `timeFormat` for date tick labels. Data is loaded from a CSV file containing date and temperature columns, with the chart rendered within a React framework.

CCeleste6666

77% match

Loading thumbnail…

D3 - Heatmap

This heatmap visualizes impact magnitudes across locations and months from January to September 2016, using color intensity to convey variation. The D3.js v7 code loads CSV data via `d3.csv`, maps locations and months to x- and y-axes using `d3.scaleBand`, and fills rectangles with the sequential `d3.interpolateViridis` color scale. The SVG rendering includes axis labels, a chart title, and a grey background, with the heatmap cells styled with rounded corners and white strokes.

CChandana Srinivas

76% match

Loading thumbnail…

EP05 | 學會 D3.js 製作圖表 - 製作散佈圖(Scatter Plot)溫度與日期

This example charts daily temperatures for September 2021 as a scatter plot, using a time-scaled x-axis for dates and a linear y-axis for degrees Celsius. Built with D3 v7, it loads data from a CSV file, parses date strings, and renders green circles onto an SVG canvas. The code explicitly uses `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, `timeFormat`, and `extent` to position points and generate gridlines. A title and axis labels are added in CSS-styled text, while margins and tick customization create a clean, readable layout.

CCeleste6666

76% match

Loading thumbnail…

Histogram D3

This histogram displays the distribution of average daily temperatures recorded throughout 2016, with bars colored green that turn red on hover. Built with D3 v6, the visualization loads CSV data via `d3.csv`, computes bin counts using `d3.histogram()`, and scales the axes with `d3.scaleLinear()`. The SVG rendering includes axis generators (`d3.axisBottom` and `d3.axisLeft`), interactive tooltips via appended `title` elements, and explicit margins for layout. The code demonstrates a straightforward binning workflow from raw weather data to a readable chart.

AAllen Ho

76% match

Loading thumbnail…

Basic Line Chart

This basic line chart visualizes temperature readings over the first ten days of a month, with each day plotted on the x-axis and temperature in Celsius on the y-axis. The chart includes labeled axes, a curved trend line, and semi-transparent data point circles, all rendered as SVG. The code uses D3 v5 functions including `scaleLinear`, `axisBottom`, `axisLeft`, `line`, and `curveBasis` to generate the scales, axes, and smoothed path from the CSV data.

FFhouston17

76% match

Loading thumbnail…

d3 | reusable heatmap calendar

This calendar heatmap visualizes daily activity amounts across multiple years using a reusable D3.js component. The chart displays years in separate horizontal bands, with each column representing a week and each cell a day, colored by a diverging linear scale from light pink to red based on the amount value. Month boundaries are marked with paths, and weekday/month labels support orientation. Data is loaded from JSON, mapped to calendar days, and rendered as SVG rectangles within a margin-based layout. The chart supports interactivity via a hover dispatch event.

CCBasis

76% match