Skip to main content
SimilarExport ZIP
100%

LALA ：Challenge 1

✓ Published0🌍 Public
Llinlala
Last edited Dec 11, 2019
Created on Dec 11, 2019
Forked from Cars Scatter Plot

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.

AI-generated description

this shows data about cars World

MIT Licensed

Similar vizzes

Loading thumbnail…

D3.js challenging - Level 1

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.

11109209710@qq.com
77% match
Loading thumbnail…

fcc-d3-01

A heatmap visualizes monthly global land-surface temperature variations from 1753 to 2015, with the base temperature displayed as a subtitle. Each cell represents a month-year pair, colored by year and opacity scaled by temperature deviation. The visualization uses d3.json to load data from a freeCodeCamp repository, d3.scaleOrdinal, d3.scaleLinear, and d3.scaleBand for scales. SVG rendering includes custom axes, ticks, and a hover tooltip that displays the exact year, month, and temperature values.

SSiddharthMittal07
72% match
Loading thumbnail…

Monthly Global Land Surface Temperatures

This visualization displays monthly global land surface temperatures from 1753 to 2015, with each cell’s color representing variance from the 1951–1980 average. A hover tooltip reveals the exact month, year, and temperature anomaly. The SVG chart uses d3.scaleTime for the x-axis, d3.scaleQuantize for color mapping, and d3.json to load the FreeCodeCamp dataset. Animated transitions appear only in the tooltip’s opacity changes, while a gradient legend is built with d3.scaleLinear and linearGradient stops.

Vvaynexie
71% match
Loading thumbnail…

Monthly Global Land-Surface Temperature

This visualization displays monthly global land-surface temperature anomalies from 1753 to 2015, using a base temperature of 8.66°C. A heatmap grid shows each month-year combination as a colored cell, with colors ranging from deep red (cold) to dark blue (warm). The D3.js code fetches JSON data from a FreeCodeCamp repository, scales the temperature values linearly, and renders an SVG with axes for years and months. d3.scaleTime, d3.scaleLinear, d3.axisBottom, and d3.axisLeft handle the scales and axes, while a separate legend shows the color scale.

Ssriramvsharma
71% match
Loading thumbnail…

summer-heat

The chart displays monthly average temperatures from 1881 to 2017, with each month’s data points laid out vertically and color-coded by year. It uses `d3.nestBy` to group data by month and `d3.line` to draw rolling average paths, while `ss.linearRegression` adds trend lines for each month. Circles representing individual years are rendered with SVG, and hovering highlights all data for that year via `d3.attachTooltip`. The visualization reveals warming trends across most months, with the steepest increases in winter and spring.

11wheel
70% match
Loading thumbnail…

Bar chart

This bar chart displays monthly average temperatures, with each month on the vertical axis and temperature values extending horizontally. The chart uses an SVG canvas with pink bars, rendered using D3 version 5. The code employs `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft`/`axisBottom` for ticks, reading data from a CSV file. Months appear in order from January through December, showing a peak in May.

RRichard Wong
70% match
Loading thumbnail…

LALA: Build a bar chart!

This visualization is a simple bar chart that displays the population for a set of countries. It uses D3 version 5 to map the data, with a linear scale for the x-axis and a band scale for the y-axis. The chart is rendered as an SVG, with bars drawn as rectangles and axes added using the `axisLeft` and `axisBottom` functions. The data is loaded from a CSV file.

Llinlala
70% match
Loading thumbnail…

Untitled

A circular heatmap displays daily temperature ranges for Beijing in 2015, with each day plotted as a radial bar whose length encodes the temperature range and color represents the mean temperature. The visualization uses an SVG gradient legend to map temperature values to a blue-yellow-red color scale. Built with D3.js, the chart loads weather data from a local CSV file and applies d3.scale.linear for both the bar length and angular positioning.

Mmkt-ds
70% match