Fork of Stylized Line Chart

Fork of Stylized Line Chart

This fork of a stylized line chart displays temperature readings over the course of a week from the Data Canvas Sense Your City dataset. The visualization uses a smooth, naturally curved line rendered as an SVG path via d3.line with curveNatural. React components structure the chart, with d3.scaleTime and d3.scaleLinear handling the x- and y-axis scales respectively, while custom AxisBottom and AxisLeft components render the gridlines and tick labels. The dataset is loaded asynchronously using d3.csv from a GitHub gist.

BBenoit Estrade

Fork of Stylized Line Chart

This fork of the stylized line chart visualizes weekly temperature readings from the Data Canvas Sense Your City dataset, plotting time on the x-axis against temperature on the y-axis. It uses d3.scaleTime and d3.scaleLinear for the axes, with d3.line and d3.curveNatural to generate a smooth path for the data points. The React components organize the visualization into separate AxisBottom, AxisLeft, and Marks modules, rendering the chart as SVG (replacing the original scatter plot’s circles with a single connected line).

Aavneet12284

Fork of Stylized Line ChartTH

This React-based line chart visualizes weekly temperature data from the Data Canvas Sense Your City dataset, plotting temperature over time. The SVG renderer displays a smooth curve using d3.line() with curveNatural, while d3.scaleTime and d3.scaleLinear map the time and temperature domains to screen coordinates. Axes are custom React components generating tick lines and labels, with axis labels and styling applied through CSS. The d3.csv function loads the dataset, and experimental circle marks for tooltips are commented out in the Marks component. The chart uses a Poppins font and muted color palette.

Ttmorgante

Fork of Stylized Line Chart

This fork of a stylized line chart visualizes weekly temperature readings from the Data Canvas Sense Your City dataset. The React app uses d3.csv to load data, d3.scaleTime and d3.scaleLinear for scales, and a d3.line generator with curveNatural to draw a smooth path through the temperature points over time. SVG renders the chart, with Poppins font styling, muted gray axes, and a teal stroke. The code includes components for axes and marks, though circle markers are commented out, leaving only the curved line.

Cchar0496

Fork of Stylized Line Chart

This fork of a stylized line chart displays temperature readings over a week using data from the Data Canvas Sense Your City dataset. The chart uses an SVG rendering with React components, where D3 v5 scales (scaleTime and scaleLinear) map timestamps and temperature values to pixel coordinates. A smooth line path is drawn using d3.line with curveNatural, while AxisBottom and AxisLeft components generate tick marks and labels. The visualization is currently incomplete, showing only the x-axis without the temperature line, y-axis, or data marks.

Wwdoucet

Fork of Stylized Line Chart

This line chart visualizes weekly temperature data from the Data Canvas Sense Your City dataset, plotting temperature against time. The SVG rendering uses React components with D3 scales (scaleTime, scaleLinear) to map the data points and a D3 line generator with curveNatural to create a smooth, stylized path. Axes are built using custom React components that leverage the D3 axis tick system, with a Poppins font and muted color palette applied via CSS.

Ppreethamkesa

Fork of Stylized Line Chart

This example visualizes weekly temperature readings from the Data Canvas Sense Your City dataset as a stylized line chart. The chart displays temperature over time using a smooth curve, with labeled axes for time and temperature. The code builds the visualization with React components and D3 v5 APIs including `scaleTime`, `scaleLinear`, `line`, and `curveNatural`. It renders as an SVG, using D3’s `csv` loader to fetch data and `extent` to compute domains, with tick marks and axis labels styled via CSS.

GGeekboxer

Fork of Stylized Line Chart

This example displays a stylized line chart of weekly temperature data from the Data Canvas Sense Your City dataset, plotting temperature against time. The visualization uses rounded, natural curves via d3.line and curveNatural, with a smooth, minimalist aesthetic defined by Poppins typography and teal strokes. The chart is rendered as SVG through React components, with axes generated by d3.scaleTime and d3.scaleLinear, while data loading and parsing rely on d3.csv and date/temperature formatting.

TTsaikkari