Skip to main content
Log in
R

renguangz

@renguangz·4 public vizzes

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart visualizes temperature readings over time for San Francisco, using a dataset from Data Canvas. The chart employs a time-based x-axis and a linear y-axis for temperature, with grid lines extending across the plot area. The visualization renders multiple line paths, each representing a different city, using ordinal color scaling. Built with React and D3 v5, the SVG rendering leverages d3.scaleTime, d3.scaleLinear, d3.line, and d3.nest to group data by city, while the VizContainer handles margins and layout.

Aug 27, 2021
Loading thumbnail…

Fork of Fork of Temperature in San Francisco Line Chart

This example visualizes the temperature in San Francisco over time with a smooth, maroon line chart. The x-axis shows timestamps, while the y-axis displays temperature values, with gridlines extending across the plot area. Data is loaded from a CSV file via `d3.csv`, parsed, and rendered using D3 v5’s `scaleTime` and `scaleLinear` for axes, and `d3.line` with a `curveBasis` for the smoothed path. The code uses a React `VizContainer` component that follows a margin convention, drawing SVG rectangles to visualize the chart’s padding.

Aug 27, 2021
Loading thumbnail…

Fork of Fork of Temperature in San Francisco Line Chart

This example visualizes the temperature in San Francisco over time with a smooth, maroon line chart. The x-axis shows timestamps, while the y-axis displays temperature values, with gridlines extending across the plot area. Data is loaded from a CSV file via `d3.csv`, parsed, and rendered using D3 v5’s `scaleTime` and `scaleLinear` for axes, and `d3.line` with a `curveBasis` for the smoothed path. The code uses a React `VizContainer` component that follows a margin convention, drawing SVG rectangles to visualize the chart’s padding.

Aug 27, 2021
Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This line chart visualizes temperature over time in San Francisco, with time on the x-axis and temperature on the y-axis. The code uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear for scaling, and d3.axisBottom and d3.axisLeft for axes. A d3.line generator with a curveBasis curve renders the temperature trend as a maroon path, while the React-based VizContainer component (though not used in this index.js) abstracts the SVG margin convention. The chart includes axis labels for "Time" and "Temperature" and dashed grid lines via tickSize.

Aug 27, 2021