Working with Time

100%

Working with Time

✓ Published0🌍 Public

Last edited Nov 10, 2021

Created on Nov 10, 2021

This example shows monthly gross profit and units sold over time, with two line charts sharing a time axis. It uses D3 v5 and React, loading data from a CSV file via `d3.csv`. The code employs `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to render the axes, while `line` draws the paths. The visualization compares two metrics across the same 2020–2021 period, with points and lines styled from the data.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Working with Time

This scatter plot visualizes the relationship between time and gross profit (labeled "Temperature") using a dataset from Data Canvas Sense Your City. The visualization is built with React and D3 v5, leveraging `d3.scaleTime` and `d3.scaleLinear` for the axes and `d3.csv` to load the data. Axes are rendered as custom components (AxisBottom, AxisLeft), while individual data points appear as SVG circles with tooltips formatted via `d3.timeFormat`. The chart uses the Poppins font and a clean design, with axis labels and tick marks styled distinctly.

Ggabrielribeirob

81% match

Loading thumbnail…

Line Chart

This example uses a line chart to show the sales of a company over time, with years on the x-axis and sales values on the y-axis. The visualization includes labeled axes, a title, and a red line path. Built with React and D3 v5, it loads CSV data from a GitHub Gist and renders the chart as SVG. The code uses `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line` to map the data to visual elements.

Mmanvithareddykarra

80% match

Loading thumbnail…

Working with time

This visualization displays how temperature varies over time, plotted as a smooth line chart with time on the x-axis and temperature on the y-axis. The chart uses d3.scaleTime for the date-based x-axis and d3.scaleLinear for the temperature y-axis, with tick labels formatted to show weekdays. Data is loaded as CSV from a GitHub gist via d3.csv. The React framework with d3.v6 renders SVG elements, including axes, axis labels, and a path generated using d3.line with curveNatural.

BbeauMarko

78% match

Loading thumbnail…

Testando tooltips 2.0

A time-series line chart displays monthly gross profit from November 2020 to September 2021, based on Dib's database records. An animated gradient stroke transitions smoothly using D3's `transition` with `easeSin`, while hoverable circles reveal tooltips. Built with React, the visualization uses `scaleTime`, `scaleLinear`, and SVG paths, with data loaded via D3's `csv` parser from a GitHub repository.

Ggabrielribeirob

78% match

Loading thumbnail…

LineChart

This line chart displays monthly gross profit across a date range, with data imported from a CSV file. The visualization uses D3 v7 to construct scales, axes, and a line generator, rendering the chart as inline SVG. The y-axis is labeled "Lucro bruto," and the chart includes a title and axis labels. The code applies `d3.scaleTime` and `d3.scaleLinear` for positioning, `d3.line` for the path, and `d3.axisLeft` and `d3.axisBottom` for ticks, with dates formatted using `d3.timeFormat`.

Ggabrielribeirob

78% match

Loading thumbnail…

Working With Time

A scatterplot shows daily closing values over time, with each point marking a date and its corresponding price. The chart uses a time-scaled x-axis with abbreviated weekday labels and a linear y-axis for values. Built with React and D3 v5, the visualization loads CSV data via `d3.csv`, scales positions with `d3.scaleTime` and `d3.scaleLinear`, and renders SVG circles with native `<title>` tooltips. Axes are custom React components using D3's tick generation.

GGayan Priyadarshana

77% match

Loading thumbnail…

Working with Time

A line chart displays temperature readings over time, with each data point marked by a circle and the line connecting them. The chart uses a React state hook to load the data from a CSV file via D3's `csv` utility. Time is formatted on the x-axis using `timeFormat`, while linear scaling handles temperature on the y-axis, with axes and marks rendered as SVG elements.

SSun Hwy (David) Kim

77% match

Loading thumbnail…

Fork of LineChart

This example shows gross profit per month from a CSV dataset, plotting each month’s value as a smoothed line over a time-based x-axis. The chart uses D3 v7 with SVG rendering, employing `d3.csv` for data loading, `scaleLinear` for both axes, `line` with `curveBasis` for the path, and `axisLeft`/`axisBottom` for labeled ticks. The code also includes a rotated y-axis label and a title, with margins defined for layout.

Ggabrielribeirob

77% match