Fork of Making a line chart

Fork of Stylized Line Chart

This example visualizes a week of hourly temperature readings from San Francisco, plotting them as a smooth line chart with time on the x-axis and temperature on the y-axis. The chart uses React with SVG rendering, and d3-scale functions like scaleTime and scaleLinear to compute positions, while d3.line with curveNatural generates the curved path. Axes are built from custom React components that render tick marks and labels, and the data is loaded as CSV using d3.csv.

CCheng Tang

Fork of A Week in San Francisco Line Chart

This example shows a line chart of San Francisco temperatures over a week, with a smoothed curve and labeled axes for time and temperature. The chart uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render an SVG path. Data is loaded from a CSV via `d3.csv`, and margins, tick marks, and an axis label are added through SVG groups and text elements.

Aayodhyanandh

Fork of A week in San Francisco - Line chart

This visualization shows temperature readings in San Francisco over a week, using a smooth line chart with time on the x-axis and temperature on the y-axis. The chart includes labeled axes, gridlines, and a title, with the line rendered in a thick maroon stroke. The code uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear for scaling, and d3.line with curveBasis to generate the path. Axes are drawn with d3.axisBottom and d3.axisLeft, while the SVG structure and styling are managed through d3 selections and CSS.

RRoque Luís Pina

Fork of A week in San Francisco - Line chart

This visualization displays a line chart of temperature in San Francisco over time, with the title “Temperature in San Francisco” and labeled axes for time and temperature. The chart uses D3 v5, leveraging `d3.scaleTime`, `d3.scaleLinear`, `d3.line` with `curveBasis`, and `d3.axisBottom`/`d3.axisLeft` to render gridlines and axes in SVG. Data is loaded from a CSV file via `d3.csv` and parsed into date and numeric values. The line is styled with a maroon stroke, and tick labels are enlarged for readability.

SShishiraRudrabhatla

Fork of Stylized Line Chart

This example visualizes a week of temperature measurements in San Francisco as a smooth, stylized line chart. The chart uses a natural curve interpolation to connect temperature readings over time, with a clean, minimal design featuring labeled axes and muted grid lines. The visualization is built with React and D3.js, using `scaleTime` and `scaleLinear` for the x and y scales, and `line` with `curveNatural` to generate the path. Data comes from a CSV file via `d3.csv`, and the SVG is rendered through React components.

MMarvin

Fork of Temperature in San Francisco Line Chart

This fork of the D3.js example visualizes one week of temperature data for San Francisco using a line chart. The chart plots temperature on the y-axis against time on the x-axis, with data loaded from a CSV file containing timestamp and temperature values. The code leverages D3 v5 APIs including `scaleLinear`, `scaleTime`, `axisLeft`, `axisBottom`, and `line` with `curveBasis`, rendering the result as SVG elements. Axis labels and a title are added using SVG text elements, while CSS styles define the appearance of the maroon line and tick marks.

DDevyn Chew

AAdriana Rodriguez Sanabria

Fork of Working with Time in LIne Chart

This line chart visualizes temperature readings over a week for San Francisco, using a smooth natural curve to connect daily data points. The chart displays time on the x-axis and temperature on the y-axis, with hover tooltips showing the day of the week for each point. Built with React and D3 v5, the visualization uses `scaleTime` and `scaleLinear` for axes, `d3.line` with `curveNatural` for the path, and renders as SVG. Data comes from a CSV file loaded via `d3.csv`, with axis labels and tick marks styled through CSS.

Fork of Stylized Line Chart

An interactive SVG line chart displays temperature readings over a week in San Francisco, using a smooth curve to connect data points across time. Powered by React components and D3 scales, the visualization maps timestamps to the x-axis via `d3.scaleTime` and temperatures to the y-axis via `d3.scaleLinear`. D3’s `line` generator with `curveBasis` creates the stylized path, while custom axis components render ticks with `d3.timeFormat` for weekday labels. The data comes from a CSV file fetched with `d3.csv` from a GitHub gist.

SSharmaNirupam