Skip to main content
SimilarExport ZIP
100%

map with react+D3js!

✓ Published0🌍 Public
NNaveenaS12
Last edited Dec 23, 2021
Created on Dec 23, 2021

This chart visualizes temperature over time for a week in San Francisco, using data from the Data Canvas Sense Your City dataset. A smooth line connects points of measured temperature, with time on the x-axis and temperature on the y-axis. Built with React and D3 v5, the visualization leverages D3's `scaleTime`, `scaleLinear`, `extent`, and `curveNatural` to scale data and draw the path. SVG rendering is handled through React components, with custom axes and marks.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Line Chart with d3

This example visualizes one week of temperature readings from the Data Canvas Sense Your City dataset for San Francisco. A natural curve connects daily temperature points, with circles marking each measurement and a tooltip showing the day of the week. The chart uses a React component structure with D3 scales (`scaleTime`, `scaleLinear`) for axes and the `line` generator with `curveNatural` for the path. SVG rendering handles all marks, including custom tick components and axis labels.

MMonish Vassantrai
89% match
Loading thumbnail…

Stylized Area Chart with D3 and React-playing around

This stylized area chart displays temperature readings over time for a week in San Francisco, sourced from the Data Canvas Sense Your City dataset. The visualization uses smooth natural curves to connect data points, creating a flowing, organic shape beneath a dark outline. Built with React and D3 v5, the example renders as an SVG and uses d3.scaleTime and d3.scaleLinear for axes, d3.area with curveNatural for the filled path, and custom React components for axis tick marks and labels. The chart includes a Poppins font and a muted color scheme defined in the accompanying stylesheet.

NNita
89% match
Loading thumbnail…

data canvas sense your city

This visualization displays temperature trends over a week in San Francisco using a line chart rendered with SVG. The React app loads CSV data via D3's `csv` parser, then uses `scaleTime` and `scaleLinear` to map timestamps to x-coordinates and temperatures to y-coordinates. The line path is generated with D3's `line` and `curveNatural`, while custom `AxisBottom` and `AxisLeft` components render ticks and gridlines. Circles with tooltips mark individual data points. The chart demonstrates integrating D3 scales, axes, and shapes within a React component structure.

GGuitong Li
88% match
Loading thumbnail…

Temperature in SF Line Chart with D3.js!

A line chart displays a week of temperature data for San Francisco, using timestamps on the x-axis and temperature in degrees Celsius on the y-axis, with data sourced from Data Canvas - Sense Your City. The example uses D3.js functions including `scaleTime`, `scaleLinear`, `line`, `curveBasis`, `axisLeft`, and `axisBottom` to render the SVG chart. The visualization includes grid lines, labeled axes, a title, and a maroon smoothed line path, all styled via CSS within a React framework.

Fforcox43
88% match
Loading thumbnail…

Temperature in SF Line Chart with D3.js!

This area chart visualizes one week of temperatures in San Francisco, using a smooth curve to show temperature changes over time. The data comes from Data Canvas - Sense Your City, with timestamps and Celsius readings plotted on time and linear scales. The code uses d3.area, d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.curveBasis to generate the SVG path and axes, with a maroon fill for the area and styled tick labels.

Fforcox43
88% match
Loading thumbnail…

line chart

This line chart displays temperature readings from San Francisco over the course of a week, with time on the x-axis and temperature on the y-axis. The visualization is built with React and D3 v7, using `scaleTime` and `scaleLinear` to map data, `d3.line` with `curveNatural` to draw the smoothed path, and SVG circles for data points. The code loads a CSV via `d3.csv`, includes native DOM title tooltips, and renders in a React component using `useData` and SVG elements.

BBlake McCarty
88% match
Loading thumbnail…

linechart -line d3 and React

This line chart displays temperature over time for a week in San Francisco, using D3 v5 scales and SVG rendering within a React component. The visualization combines React hooks for data loading with D3’s `scaleTime`, `scaleLinear`, and `extent` functions to map timestamps and temperature values. Axes are generated via custom React components that call `xScale.ticks()` and `yScale.ticks()`, while the line path and data point circles are drawn using D3’s `line()` generator. The data is loaded asynchronously from a CSV file using `d3.csv`, with circle tooltips showing the time via `timeFormat`.

SShane Carey
88% match
Loading thumbnail…

Untitled

This visualization displays the temperature of San Francisco over a week, using data from the Data Canvas Sense Your City dataset. A smooth, natural curve connects the data points, showing temperature trends over time on a scatter plot-like chart. Built with React and rendered as an SVG, the code uses d3’s `scaleTime`, `scaleLinear`, `extent`, `timeFormat`, and `line` with `curveNatural` to map timestamps and temperatures. Axes are generated via `AxisBottom` and `AxisLeft`, with a labeled time axis on the x-axis and temperature on the y-axis.

BBhawna Agarwal
88% match