HAW 5.12 Makeover Monday Music

100%

HAW 5.12 Makeover Monday Music

✓ Published0🌍 Public

Last edited Dec 5, 2025

Created on Dec 5, 2025

This visualization displays a week of hourly temperature measurements in San Francisco as a smooth line chart, with time on the x-axis and temperature on the y-axis. The line is drawn using D3’s `line()` generator with a natural curve, while scales are created via `scaleTime` and `scaleLinear`. The React-based interface loads data from a CSV file using D3’s `csv` parser, and renders axes and labels as SVG elements. The styling uses the Poppins font and teal-colored strokes for the mark.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Working with Time

This visualization displays a week of San Francisco temperature data as a smooth time series line chart. The chart uses a React front end to render SVG elements, with D3 v5 providing the scales (`scaleTime`, `scaleLinear`) and the `line` and `curveNatural` generators for the path. Temperature readings from the CSV dataset are plotted against time on the x-axis, with formatted tick labels showing the day of the week. The code reveals the underlying data loading through `csv` and a custom `useData` hook that parses timestamps and numeric values.

Hhuashe418

85% match

Loading thumbnail…

Stylised Line Chart with React & D3

This stylized line chart visualizes San Francisco temperature readings over a week, using a natural curve to connect data points and circular markers with hover tooltips. Built with React and D3 v5, it renders as an SVG, mapping timestamps to the x-axis via `d3.scaleLinear` and formatting tick labels with `d3.timeFormat`. The chart leverages `d3.line` with the `curveNatural` option for smooth paths, while custom axis components handle gridlines and labels. Data is loaded asynchronously from a CSV using `d3.csv`. The clean, minimalist design uses the Poppins font and a teal accent color.

Bbassra

85% match

Loading thumbnail…

Stylized Line Chart

This stylized line chart visualizes temperature readings over a week in San Francisco, using a smooth natural curve to connect data points. The chart is built with React and rendered as SVG, with D3 v7 handling data loading via `d3.csv`, linear and time scaling through `scaleLinear` and `scaleTime`, and axis generation. Styling uses the Poppins font with teal-colored marks and custom tick formatting for weekday labels, while the underlying data comes from a CSV file containing timestamp and temperature values.

KKevin McMorrow

85% match

Loading thumbnail…

Stylized Line Chart

This stylized line chart visualizes temperature over time for a week in San Francisco, using a smooth curving line in teal against a clean, minimal grid. The visualization is built with React and D3 v5, employing `scaleTime` and `scaleLinear` for the axes, `d3.line` with `curveNatural` for the path, and `d3.csv` to load the Data Canvas Sense Your City dataset. Rendered as SVG, it features styled tick labels and Poppins typography, with temporary loading text displayed before data arrives.

TTajallah-maryam

85% match

Loading thumbnail…

Stylized Line Chart

This stylized line chart visualizes weekly temperature measurements in San Francisco, using a smooth natural curve to connect temperature readings over time. The chart renders temperature on the y-axis against timestamps on the x-axis, with circular data points providing tooltips that display the day of the week. Built with React and D3 v6, the visualization uses `scaleTime` and `scaleLinear` for axes, `d3.line` with `curveNatural` for the path, and custom `AxisBottom` and `AxisLeft` components for tick rendering. The SVGs are styled with the Poppins font and a teal color scheme.

WWolfgang

85% match

Loading thumbnail…

Working with Time

This visualization displays temperature readings over a one-week period in San Francisco, using a time-series line chart. The line connects daily data points across a time-based x-axis and a linear temperature y-axis, with styled tick marks and axis labels for readability. Built with React and D3 v5, the chart uses `scaleTime` and `scaleLinear` for scaling, while `line` and `curveNatural` draw a smooth path through the data. The CSV data is loaded asynchronously via D3's `csv` utility and rendered as an SVG.

Nnexus1058

84% match

Loading thumbnail…

Working with Time

This visualization displays a week of temperature readings in San Francisco as a smooth line chart, with time on the horizontal axis and temperature on the vertical axis. The data is loaded from a CSV file using d3.csv, then rendered as an SVG through React components. The chart uses d3.scaleTime and d3.scaleLinear to map the timestamp and temperature values, while d3.line with curveNatural generates the curved path connecting the data points. Custom axis components and a simple tooltip via SVG title elements are included.

JJohn Huang

84% match

Loading thumbnail…

Stylized Line Chart

This stylized line chart displays temperatures in San Francisco over a week, rendered as circles on an SVG canvas using React and D3 v5. The code loads CSV data via `d3.csv`, then builds scales with `scaleTime` and `scaleLinear`. Axes are custom React components with formatted tick labels using `timeFormat`, and each data point includes a tooltip via a `<title>` element. The Poppins font and muted color palette give the visualization a modern, clean aesthetic.

Llefat92

84% match