🌍 Public
Viewing a saved revision (read-only)
e8db031a9dac4892a70c03229ab258b9
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.
AI-generated descriptionBoilerplate code for a React + D3 visualization with:
- CDN links for React, ReactDOM, and D3
- Basic React boilerplate
- Variables for dimensions and margins
- A
VizContainercomponent that:- Abstracts SVG/group container elements
- Follows the margin convention
- Show the margins, which can be easily removed by deleting the
showMargins={true} prop