Skip to main content
SimilarExport ZIP
100%

mapLinky

✓ Published1🌍 Public
RRajeev Pal
Last edited Apr 14, 2021
Created on Apr 14, 2021

This example visualizes temperature readings from the Data Canvas Sense Your City dataset as a time series line chart. The React app loads CSV data via `d3.csv` and renders an SVG with `scaleTime` and `scaleLinear` axes, using reusable `AxisBottom`, `AxisLeft`, and `Marks` components. A smooth curve is drawn with the `line` generator and `curveNatural` interpolation, styled with a teal stroke. The chart displays static day-scale tick labels from `timeFormat` and axis labels for temperature and time.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Stylized Line Chart

This stylized line chart visualizes temperature readings over time from the Data Canvas Sense Your City dataset. A smooth, natural curve connects the data points, rendered as an SVG path using D3’s `line` and `curveNatural` generators, with teal strokes and circular marks (commented out) available for point emphasis. The chart uses `scaleTime` and `scaleLinear` axes, with tick marks and labels generated by custom React components `AxisBottom` and `AxisLeft`. The React app loads CSV data via the `csv` function from d3.v5.

Bblkhar
88% match
Loading thumbnail…

Stylized Line Chart

This stylized line chart visualizes temperature measurements over time from the Data Canvas Sense Your City dataset. The data is rendered as a smooth, natural curve using D3’s `line` and `curveNatural` functions, displayed as a thick teal path within an SVG. Axes are labeled “Time” and “Temperature”, with ticks styled in muted grays and a Poppins font applied throughout. The React application loads CSV data via `d3.csv`, maps timestamps and temperatures, and uses `scaleTime` and `scaleLinear` with `extent` and `nice` to set domains and ranges.

Rreo440
88% match
Loading thumbnail…

Stylized Line Chart

This stylized line chart visualizes temperature variations over time using the Data Canvas Sense Your City dataset, loaded via d3.csv. The React-based application renders an SVG with a natural curve path (d3.line with curveNatural) linking data points, while d3.scaleTime and d3.scaleLinear map timestamps and temperature values to axes. The axes, built with custom React components, display weekdays and temperature labels using d3.timeFormat. The chart omits individual data point markers, emphasizing the smooth curved trend line with a teal stroke styled through CSS.

Nnorangai
87% match
Loading thumbnail…

Fork of mapLinky

This line chart visualizes temperature changes over time for a week in San Francisco, using data from the Data Canvas Sense Your City Dataset. The React-based application employs D3 v5 scales and the `d3.line` function with a natural curve to draw the smooth temperature path across a time-based x-axis. Both axes are rendered as SVG elements with tick marks, while CSS styling applies a consistent teal color scheme. The visualization loads CSV data asynchronously via `d3.csv` and updates the chart once the data arrives.

RRajeev Pal
85% match
Loading thumbnail…

Line Chart

This line chart visualizes temperature over time using data from the Data Canvas Sense Your City Dataset. Rendered with React and SVG, it uses D3 v5's `scaleTime`, `scaleLinear`, `extent`, and `line` with `curveNatural` to plot a smoothed path and circular points. The chart includes labeled axes with tick marks formatted via `timeFormat('%a')`, and hovering over a point reveals its timestamp.

Wwindwaver
85% match
Loading thumbnail…

Stylized Line Chart

This stylized line chart displays temperature readings over time from the Data Canvas Sense Your City dataset, plotting a smooth curve through daily measurements. The visualization uses React with D3 v5, employing `scaleTime` and `scaleLinear` for axes, `line().curve(curveNatural)` for the smooth path, and `csv` for data loading. The SVG rendering features a minimalist design with muted axis labels, thin grid lines, and a thick teal stroke, while the Poppins font adds a polished, modern aesthetic.

Mmoinamazon123
84% match
Loading thumbnail…

Fork of Stylized Line Chart

This example visualizes temperature readings over time from the Data Canvas Sense Your City dataset, showing a smooth, stylized line chart rendered as SVG in a React application. The code uses d3.scaleTime and d3.scaleLinear for axes, d3.line with curveNatural for the curved path, and d3.csv to load the weather data. A time format function labels the x-axis with weekday abbreviations, while the y-axis displays temperature values, with React components managing the marks and axis rendering.

Ssumukh-bharadwaj
84% match
Loading thumbnail…

Working with Time

This visualization displays temperature readings over time from the Data Canvas Sense Your City dataset, plotting temperature against timestamps. The chart uses a line path rendered with d3.line and curveNatural, while employing scaleTime and scaleLinear to map the data domain to pixel coordinates. The React component structure includes custom AxisBottom and AxisLeft components for tick marks, with d3.timeFormat to display abbreviated weekday labels. The SVG rendering leverages D3 v7 within a React framework, showing a smooth natural curve through the temperature data points.

Rrmgoldberg24
84% match