Fork of Stylized Line Chart

Fork of Stylized Line Chart

This line chart displays temperature readings over time from the Data Canvas Sense Your City dataset. The visualization uses a natural curve to create a smooth, stylized path through the weekly temperature data points, with axes labeled "Time" and "Temperature." Built with React and D3 v5, it uses `scaleTime`, `scaleLinear`, and `curveNatural` to position and render the SVG line. The code loads CSV data via `d3.csv`, and includes modular axis and marks components that handle tick generation and path drawing.

AAndres de la Garza

Fork of Stylized Line Chart

This line chart visualizes hourly temperature readings from the Data Canvas Sense Your City Dataset, emphasizing the curve’s continuous form with a smooth natural spline and no individual data points. The React-based application uses d3.scaleTime and d3.scaleLinear to map timestamps and temperatures, while d3.line with curveNatural generates the stylized path. It renders as SVG with shared axis components, and the visualization omits circles in the marks layer to focus purely on the temperature trend across the week.

SSophia Chiao

Fork of Stylized Line Chart

This line chart visualizes temperature readings over time from the Data Canvas Sense Your City dataset, rendered as a smooth, natural curve using React and SVG. The chart displays time on the x-axis with day-of-week labels and temperature on the y-axis, with gridlines and axis labels styled via CSS. Built with React components and D3 v5, the visualization uses `scaleTime`, `scaleLinear`, and `curveNatural` to generate the path, while axis ticks are created through custom `AxisBottom` and `AxisLeft` components that leverage D3’s scale methods.

AAhmeTyAtakan

Fork of Stylized Line Chart

This example visualizes temperature readings over time as a smooth line chart, with a time-based x-axis and linear temperature y-axis. The chart uses React components with D3 v5 scales and the `line` and `curveNatural` generators to draw the curved path, while helper components render axes with tick marks and labels. The data originates from the Data Canvas Sense Your City Dataset, though the active dataset loads world country topologies via `d3.json` and `topojson.feature`, making the chart behavior partly exploratory. The SVG rendering includes styled axis lines, text, and a stroke-only path without visible data points.

DDavid Allyn

Fork of Stylized Line asdsad

This visualization displays temperature readings over time as a smooth, curving line, plotted on a scatter plot of the Data Canvas Sense Your City dataset. The chart uses a natural curve through the data points to create a stylized representation of the weekly temperature trend, with circular marks available for individual data points but currently commented out. The React-based implementation leverages D3 v5 modules, including `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and `curveNatural` for line smoothing, all rendered as SVG elements within a standard chart frame.

Jjth500

Fork of Stylized Line Chart

This visualization displays temperature readings over time as a smooth, natural line within a scatter plot framework. The chart uses data from the Data Canvas Sense Your City dataset, loaded as CSV and rendered as an SVG. Built with React and D3 v5, the implementation leverages D3's `scaleTime`, `scaleLinear`, `line` with `curveNatural`, and `timeFormat` for axes, while the line path is styled with a custom stroke color and width, with axis ticks and labels using the Poppins font family.

SSampras Dsouza

Fork of Stylized Line Chart

This interactive SVG line chart visualizes ambient temperature over time using data from the Data Canvas Sense Your City Dataset. The chart plots temperature values along a smooth natural curve, with time on the x-axis and temperature on the y-axis, rendered in teal against a minimalist Poppins-font interface. Built with React and D3 v5, it leverages D3’s `scaleTime`, `scaleLinear`, and `curveNatural` functions for axis scaling and path interpolation. The axes and marks are constructed through custom React components, with data fetched asynchronously via D3’s `json` loader and rendered using SVG elements.

Ssz3g12

Fork of Stylized Line Chart

This interactive line chart visualizes temperature readings over time, using a smooth, natural curve to connect data points. The visualization is built with React and renders to SVG, leveraging D3 v5 APIs including `scaleTime`, `scaleLinear`, and the `line` and `curveNatural` functions to compute the path. The chart’s axes are drawn with custom tick marks, and the dataset comes from the San Francisco week temperature CSV supplied by Data Canvas. Styling uses the Poppins font and a muted color palette applied through CSS rules targeting the SVG elements.

AAleksei Vozhdaev