Time Series

Line chart - temp over time

A line chart plots temperature over time using D3 v5 scaleTime and scaleLinear scales in a React component. The SVG renders a smooth curve with d3.line and curveNatural, along with circular points for each observation. Data comes from a CSV of San Francisco weekly temperatures loaded via d3.csv. Custom AxisBottom and AxisLeft components generate tick marks and labels, while the chart includes rotated and positioned axis titles for Temperature and Time.

JJulia Hack

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

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

Time Series: Part 2 - Line Chart

This visualization displays a line chart of temperature readings over time, with the x-axis representing timestamp and the y-axis showing temperature values. The chart is built using React components that leverage d3.scaleTime and d3.scaleLinear for axis scaling, with a smooth line rendered via d3.line and curveNatural. The underlying data comes from the Data Canvas Sense Your City Dataset, loaded through d3.csv. Axis ticks are generated using d3's scale methods, while the SVG rendering employs custom AxisBottom and AxisLeft components for clean, labeled axes.

Zzeeeeem

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

Line chart with Time Series

This line chart visualizes temperature readings over time, using a smooth natural curve to connect data points from a CSV dataset of weekly San Francisco temperatures. The chart displays time on the x-axis using `d3.scaleTime` with weekday tick labels formatted via `timeFormat`, while temperature values are plotted on a linear y-axis. Built with React and rendered as SVG, the visualization leverages d3 v6 functions including `extent`, `line`, and `curveNatural` for the path generation, with axes constructed through reusable React components.

AAndres de la Garza

Line Chart

This line chart displays temperature readings over time, with each point marked by a circle and connected by a smooth, curved path. Built with React and D3 v5, it uses `scaleTime` and `scaleLinear` for the axes, `line().curve(curveNatural)` for the path, and native SVG `<circle>` elements with `<title>` tooltips. Data comes from a CSV of weekly San Francisco temperatures, loaded via `d3.csv`, with reusable axis and mark components rendering the visualization.

JJohanna Magdalena

Stylized Line Chart

This example visualizes temperature readings over time as a smooth, stylized line chart. The line is drawn with a natural curve using d3.line() and curveNatural, rendered as an SVG path in a React component. The chart displays axes with tick marks generated by custom AxisBottom and AxisLeft components, while d3.scaleTime and d3.scaleLinear map data to pixel coordinates. The data comes from a CSV file of San Francisco weekly temperatures, loaded via d3.csv, and the visualization omits individual data points to emphasize the line’s shape.

Aaminedahane