Star Map

Line Chart

This line chart visualizes temperature over time using data from the Data Canvas Sense Your City Dataset. Rendered with React and SVG, it uses D3 v5's `scaleTime`, `scaleLinear`, `extent`, and `line` with `curveNatural` to plot a smoothed path and circular points. The chart includes labeled axes with tick marks formatted via `timeFormat('%a')`, and hovering over a point reveals its timestamp.

Wwindwaver

World Map

This visualization displays temperature readings over time as a smooth, connected line chart. It uses a time-scaled x-axis and a linear y-axis, with data sourced from the Data Canvas Sense Your City dataset. The implementation leverages React for the component structure, d3.scaleTime and d3.scaleLinear for scaling, and d3.line with a natural curve to generate the path. The SVG rendering includes labeled axes and tick marks, while the use of a CSV loading function via d3.csv populates the chart.

GGregS1290

world map

This example visualizes temperature data from the Data Canvas Sense Your City dataset as a time-series line chart. The y-axis displays temperature values while the x-axis represents time, with the line connecting data points to show trends over the course of a week. Built with React and D3 v5, the chart uses D3’s `scaleTime` for the time axis, `scaleLinear` for the temperature axis, and `line` with `curveNatural` to draw the smoothed path. The visualization is rendered as an SVG, with axes and marks generated by custom React components, though the data file is loaded via `d3.json` from a GeoJSON URL, suggesting a possible mismatch with the scatter plot described in the README.

HHaris Vidimlic

Stylized Line Chart

This stylized line chart visualizes temperature variations over time using the Data Canvas Sense Your City dataset, loaded via d3.csv. The React-based application renders an SVG with a natural curve path (d3.line with curveNatural) linking data points, while d3.scaleTime and d3.scaleLinear map timestamps and temperature values to axes. The axes, built with custom React components, display weekdays and temperature labels using d3.timeFormat. The chart omits individual data point markers, emphasizing the smooth curved trend line with a teal stroke styled through CSS.

Nnorangai

Working with Time

This visualization displays temperature readings over time from the Data Canvas Sense Your City dataset, plotting temperature against timestamps. The chart uses a line path rendered with d3.line and curveNatural, while employing scaleTime and scaleLinear to map the data domain to pixel coordinates. The React component structure includes custom AxisBottom and AxisLeft components for tick marks, with d3.timeFormat to display abbreviated weekday labels. The SVG rendering leverages D3 v7 within a React framework, showing a smooth natural curve through the temperature data points.

Rrmgoldberg24

Line Chart

This line chart displays temperature readings over time from the Data Canvas Sense Your City dataset, with a smooth natural curve connecting data points. The chart uses React components to render SVG elements, with d3.scaleTime and d3.scaleLinear handling the x and y axes respectively. The d3.line generator applies the curveNatural interpolation to create the smooth path, while d3.timeFormat formats the day labels on the bottom axis.

Yyuzhang21

Stylized Line Chart

This stylized line chart visualizes temperature measurements over time from the Data Canvas Sense Your City dataset. The data is rendered as a smooth, natural curve using D3’s `line` and `curveNatural` functions, displayed as a thick teal path within an SVG. Axes are labeled “Time” and “Temperature”, with ticks styled in muted grays and a Poppins font applied throughout. The React application loads CSV data via `d3.csv`, maps timestamps and temperatures, and uses `scaleTime` and `scaleLinear` with `extent` and `nice` to set domains and ranges.

Rreo440

Stylized Line Chart

This stylized line chart visualizes temperature over time using the Data Canvas Sense Your City Dataset, employing a smooth natural curve to connect data points. Built with React and D3 v5, the chart renders as an SVG with a teal stroke, Poppins font, and tick marks styled in muted tones. The code uses d3.csv for data loading, d3.scaleTime and d3.scaleLinear for scales, d3.line with curveNatural for the path, and timeFormat for the x-axis labels.

AAziz Jaffrey