Network Block Explorer

100%

Network Block Explorer

✓ Published0🌍 Public

Last edited Mar 29, 2021

Created on Mar 29, 2021

This interactive scatter plot, built with React and D3 v5, visualizes temperature over time using a connected line for each week's data. The visualization uses SVG rendering, with D3 utilities like `scaleTime`, `scaleLinear`, and `extent` for scaling, and `line` with `curveNatural` for the path. The data comes from the Sense Your City Dataset, loaded via D3's `csv` function. Axis components are custom React implementations that map scale ticks to SVG lines and text labels.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Working with Time

This scatter plot displays temperature readings over the course of a week, with time on the x-axis and temperature on the y-axis. Built with React and D3 v5, it uses `scaleTime` and `scaleLinear` to map the data, with `extent` and `max` computing the domains. The visualization renders as an SVG, with custom axis components and circular marks that include tooltips via SVG `<title>` elements. Data comes from the Data Canvas Sense Your City dataset, loaded as CSV through `d3.csv`.

Jjerate11

83% match

Loading thumbnail…

Line Plot

This line plot visualizes weekly temperature data from the ‘Data Canvas Sense Your City’ dataset, showing temperature readings over time. The chart uses D3 scales (`scaleTime`, `scaleLinear`) and axes components (`AxisBottom`, `AxisLeft`) to map time to the x-axis and temperature to the y-axis. The data is loaded via D3’s `csv` parser and rendered as a smooth curved line using `line()` with `curveNatural`. The visualization is built with React components, renders as SVG, and includes custom styling for ticks, labels, and the path stroke.

HHollyClarke19

83% match

Loading thumbnail…

Working with Time

This interactive scatter plot visualizes temperature readings over a week-long period, using a time-based x-axis and linear temperature scale on the y-axis. Built with React and D3 v5, the visualization loads CSV data from the Data Canvas Sense Your City dataset and renders SVG circles for each measurement. The code utilizes scaleTime, scaleLinear, extent, and timeFormat APIs to handle temporal scales and date formatting, while custom React components manage axis rendering and data point marks with tooltips showing the day of the week.

NNick

82% match

Loading thumbnail…

Working with Time

This scatter plot uses D3 v6 and React to visualize temperature readings from the Data Canvas Sense Your City dataset over one week. The x-axis uses a time scale with day-based tick formatting, while the y-axis shows temperature values with a linear scale. SVG circles represent individual data points, each with a tooltip showing the timestamp. The code demonstrates how to combine React components with D3 scales, including `scaleTime`, `scaleLinear`, `extent`, and custom axis components for rendering the visualization.

WWolfgang

82% match

Loading thumbnail…

Linechart

This line chart visualizes weekly temperature measurements from the Data Canvas Sense Your City Dataset, plotting timestamps along the x-axis and temperature values along the y-axis. The SVG rendering uses React components, with d3.scaleTime and d3.scaleLinear mapping data to coordinates, and d3.line with curveNatural producing a smooth path through the points. Axes are rendered via custom React components using d3 ticks, while the Marks component applies a teal stroke to the line. Data is loaded asynchronously from a provided CSV URL using d3.csv.

SSophia Cofone

82% match

Loading thumbnail…

Line Chart w/ d3, react

This line chart visualizes weekly temperature data from the Data Canvas Sense Your City dataset, plotting temperature over time. The React component uses d3-scale functions like scaleTime and scaleLinear to map data to SVG coordinates, while d3.line with curveNatural draws the smoothed path. Axis components are custom React elements that render d3 ticks, and the useData hook loads the CSV asynchronously with d3.csv.

Ddata-inside

82% match

Loading thumbnail…

Working with Time

This scatter plot visualizes weekly temperature readings from the Data Canvas Sense Your City dataset, with time on the x-axis and temperature on the y-axis. Built with React and D3 v5, it uses `scaleTime` and `scaleLinear` for coordinate mapping, and SVG circles as marks. Axes are generated using custom `AxisBottom` and `AxisLeft` components that call `xScale.ticks()` and `timeFormat`, with native SVG `<title>` elements providing tooltips. Data loading is handled via the `useData` hook, which fetches a CSV file using `d3.csv`.

CCurran Kelleher

82% match

Loading thumbnail…

Working With Time

This scatter plot visualizes weekly temperature data from the Data Canvas Sense Your City dataset, displaying temperature readings over time. Each circle represents a timestamp on the x-axis and its corresponding temperature on the y-axis. The visualization uses React with D3 v7, employing `scaleTime` and `scaleLinear` for axes, `extent` to compute domains, and `timeFormat` to display abbreviated weekday labels. Data is loaded via `csv` from a GitHub-hosted CSV file, with SVG rendering and custom axis components for a clean presentation.

JJoe Hutchins

82% match