Dataviz 2020_Ep27 - 21. Line Chart

Line Chart

This line chart visualizes San Francisco weekly temperature data loaded from a CSV file using D3’s `csv` utility. The React app renders an SVG with time-scaled x-axis labels formatted via `timeFormat` and a linear y-axis for temperature. The line path is generated with D3’s `line` generator and `curveNatural` interpolation, while axes are built from custom React components using `scaleTime` and `scaleLinear`.

Ffjvoris

Dataviz 7 - Line chart

This line chart shows daily temperature readings in San Francisco over a week, plotted as a smooth curve rendered as an SVG path with d3.line and curveNatural. The React app loads the dataset from a CSV using d3.csv in a custom useData hook, then scales time and temperature values with d3.scaleTime and d3.scaleLinear, while using d3.timeFormat for the weekday axis labels.

RRyAlpha

Line Chart

A line chart visualizes how temperature changes over time in San Francisco, using weekly temperature data loaded from a CSV file via D3's `csv` function. The React-based component structure relies on D3's `scaleTime` and `scaleLinear` for axes, with a natural curve applied to the path using D3's `line` and `curveNatural`. The SVG rendering includes custom axis components and an interactive hover effect through circle elements with `<title>` tooltips.

Ppsabela

LineChart

This interactive line chart visualizes weekly temperature trends in San Francisco, plotting temperature readings across time with carefully styled curves and circular data points. Built with React 16 and D3 v5, it uses d3.scaleTime and d3.scaleLinear for axes, while d3.line with a curveNatural interpolation generates smooth paths from CSV data loaded via d3.csv. The SVG rendering includes custom axis components with tick marks and labels, plus styled marks using a muted purple palette for the path and circles.

EEd Hutchinson

line chart

This line chart displays temperature readings from San Francisco over the course of a week, with time on the x-axis and temperature on the y-axis. The visualization is built with React and D3 v7, using `scaleTime` and `scaleLinear` to map data, `d3.line` with `curveNatural` to draw the smoothed path, and SVG circles for data points. The code loads a CSV via `d3.csv`, includes native DOM title tooltips, and renders in a React component using `useData` and SVG elements.

BBlake McCarty

Line Chart

This line chart displays temperature readings over the course of a week in San Francisco, with time on the x-axis and temperature on the y-axis. The data is loaded from a CSV file using `d3.csv` and parsed into `Date` and numeric values. The visualization is rendered as an SVG using React components, with scales constructed via `d3.scaleTime` and `d3.scaleLinear`. Tick marks and labels are generated manually, while the line path is drawn using D3’s `line()` generator.

NNika

Stylized Line Chart

This stylized line chart visualizes San Francisco’s weekly temperature data, sourced from a CSV hosted on GitHub. The line uses a natural curve to connect data points, with axes displaying time on the horizontal axis and temperature on the vertical. Built with React and D3 v7, it leverages `d3.csv` for loading, `scaleTime` and `scaleLinear` for scaling, and `d3.line` with `curveNatural` for path generation. The SVG rendering includes React components for axes and marks, styled with the Poppins font.

Jjbruzzo

line chart

This line chart visualizes weekly temperature variations in San Francisco, with time on the x-axis and temperature on the y-axis. The React app loads CSV data using D3’s `csv` utility and renders an SVG with `scaleTime` and `scaleLinear` scales. Latitude and longitude axes use custom `AxisBottom` and `AxisLeft` components, while the `Marks` component draws a smooth curve via `d3.line().curve(curveNatural)` and overlays circles with native SVG tooltips. The visualization uses teal styling for marks and a clean background, following a modular React component architecture.

Vvijaytayal