Skip to main content
SimilarExport ZIP
100%

Visualização de gráfico de linha v1

✓ Published0🌍 Public
Xxilingus
Last edited Nov 1, 2021
Created on Nov 1, 2021

This line chart visualizes temperature over time, using a smooth natural curve to connect data points. The visualization encodes time on the x-axis and temperature on the y-axis, with red circles marking individual observations. Built with React and rendered as SVG, it uses D3’s `scaleTime`, `scaleLinear`, `line` with `curveNatural`, and `extent` for domain computation. The data comes from a CSV file loaded via `d3.csv`. Both axes include tick marks and labels, with a title and axis labels styled using the Oswald font.

AI-generated description

Visualização de gráfico de linha v1

MIT Licensed

Similar vizzes

Loading thumbnail…

Line Chart Template

This line chart template visualizes temperature over time, displaying data points as small circles connected by a smooth, natural curve. The chart uses a time-scaled x-axis and a linear y-axis, with axis labels indicating time and temperature. Built with React and D3 v5, the implementation uses `scaleTime`, `scaleLinear`, and `curveNatural` from D3, alongside custom React components for axes and marks. The data is loaded from a CSV file using D3’s `csv` and rendered as an SVG, with a tooltip showing the time on hover.

SSam Hege
84% match
Loading thumbnail…

Line chart Temperature

A line chart displays temperature readings over time, with individual data points highlighted by circles that reveal the exact date on hover. The visualization loads CSV data from a GitHub gist and renders it as an SVG using React components. Axes are generated with d3.scaleTime and d3.scaleLinear, while the curve is drawn with d3.line and the curveNatural interpolation. Styling comes from external CSS, and the chart follows a simple top-down layout with labeled axes for time and temperature.

JJosh Zalcman
83% match
Loading thumbnail…

react time line chart styled

This interactive visualization displays temperature readings over time as a smooth line chart with circular markers, rendered as SVG within a React application. The chart uses d3.scaleTime for the x-axis and d3.scaleLinear for the y-axis, with d3.line and curveNatural generating the smoothed path. Built with React 17 and D3 v7, the code loads temperature data from a CSV file via d3.csv, and includes tooltips on hover for each data point using SVG title elements.

MMalcolm Mead
83% match
Loading thumbnail…

Line Chart

This example visualizes temperature over time with a line chart. The SVG rendering plots a line and points connecting daily temperature readings, with axes and tick labels generated from the data. Built with React and D3 v5, it uses `scaleLinear` for scaling, `line` from D3 for the path, and `timeFormat` for tick labels. The data is loaded as CSV from a remote URL using D3's `csv` utility, and React state manages the asynchronous data fetching.

Uuplusv
82% match
Loading thumbnail…

line chart

A line chart displays temperature over time, with time on the x-axis and temperature on the y-axis. The chart uses React to render SVG elements, with D3 v5 providing scales, axis generation, and the line path via `d3.line()`. Data is loaded from a CSV file using `d3.csv`, and the x-axis is formatted with `timeFormat`. The visualization includes labeled axes, tick marks, and a smooth stroke line without individual data point circles.

Aaparnasj-sj
82% match
Loading thumbnail…

line chart

This line chart visualizes temperature trends over time using a smoothed cardinal spline curve. The React-based code renders SVG marks, including a path for the line and circles for individual data points, with hover tooltips. It leverages d3's `scaleTime`, `scaleLinear`, and `line` API, along with `curveCardinal` for the interpolated curve. Data is loaded from a CSV file.

MMATTE-blz
82% match
Loading thumbnail…

Line with time temperature

This example displays a line chart of temperature over time, using a smooth natural curve to connect weekly data points. The chart includes labeled axes for time and temperature, with a clean SVG rendering that emphasizes the trend. It uses React to structure the visualization and D3 v6 functions like `scaleTime`, `scaleLinear`, and `line().curve(curveNatural)` for data mapping and path generation. Data comes from a CSV file of San Francisco weekly temperatures, loaded with `d3.csv`.

JJonas Carvalho
82% match
Loading thumbnail…

Line Chart - Temperature

This line chart visualizes temperature readings over time, showing a continuous trend with individual data points marked as circles. The chart uses D3.js v5 within a React component, rendering SVG elements for precise control. Axes are generated with `scaleTime` and `scaleLinear`, while the line path is created using D3's `line()` with `curveNatural`. The data is loaded from a CSV file via D3's `csv` function.

FFlorian Kotthoff
82% match