este

100%

✓ Published0🌍 Public

Last edited Dec 15, 2021

Created on Dec 15, 2021

This interactive scatter plot explores the data from the Data Canvas Sense Your City Dataset, allowing examination of relationships between variables. The visualization uses D3.js and React, rendering SVG circles for data points with tooltips. While the code initially suggests a scatter plot with axis components and marks, it also includes a nested data aggregation structure using `d3.nest()`. The final rendering shows a bar chart using D3's ordinal and linear scales, with axes and tick formatting, though the implementation appears incomplete or experimental.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot

This example renders a scatter plot of data points within an SVG using React. It leverages D3.js v5 to manage the visualization logic, while the rendering is handled through SVG elements defined in the JSX. The plot displays individual circles positioned on a 960 by 500 canvas, with a simple, uncluttered design. The code integrates D3 scales and axes to map data values to screen coordinates, though the specific dataset is not defined in the visible files.

Ppillliarun79

79% match

Loading thumbnail…

Temperature Scatter Plot

This scatter plot visualizes temperature readings over time from the Data Canvas Sense Your City dataset, with each point representing a single observation. The chart uses React with D3 v7, employing `scaleTime` and `scaleLinear` to map timestamps and temperature values to SVG coordinates. The `Marks` component renders circles with tooltips showing the day of the week, while `AxisBottom` and `AxisLeft` generate labeled tick marks. The visualization loads CSV data asynchronously via the `useData` hook and D3's `csv` function, with axes labeled "Time" and "temperature".

OOleg Zhernovoy

79% match

Loading thumbnail…

D3 scatter plot with react

This React-based scatter plot demonstrates animated data updates with D3.js. The visualization renders seven circles with distinct colors and sizes, positioned by x/y coordinates, with axes labeled X and Y. Data updates trigger a button click, which initiates D3 transitions using `transition().duration(1000).ease(easeLinear)` for enter animations and faster transitions for updates, while exit animations shrink circles to zero radius. The SVG rendering uses `scaleLinear`, `axisBottom`, `axisLeft`, and `selectAll('circle').join()` for binding data to DOM elements.

JJulien Tremblay

79% match

Loading thumbnail…

Stylized Area Chart with D3 and React

This stylized area chart displays temperature readings over time from the Data Canvas Sense Your City dataset. It uses React to render SVG elements while D3 v5 handles the data loading, scales, axes, and the area generator with a natural curve. The dashed line is commented out, so only the filled area path is shown, rendered in steelblue against a clean white background. Axis components are built as reusable React functions, with tick marks and labels styled through CSS.

NNita

78% match

Loading thumbnail…

Time Series: Part 1 - Scatter Plot

This scatter plot visualizes temperature readings over time from the Data Canvas Sense Your City dataset, displaying each observation as a circular mark positioned by a time-based x-scale and a linear y-scale. The React components render SVG axes with tick marks, while the Marks component generates circles with native tooltips showing the formatted date. Using d3.csv for data loading, d3.scaleTime and d3.scaleLinear for scales, and d3.timeFormat for tick labels, the chart emphasizes temporal patterns in temperature data with clear axis labels and a minimalist design.

Zzeeeeem

78% match

Loading thumbnail…

Working with Time

This scatter plot visualizes temperature readings over time from the Data Canvas Sense Your City Dataset, using a time-scaled x-axis and linear y-axis. The visualization employs React components with D3 v5 scales and SVG rendering, where each circle represents a temperature measurement with a tooltip showing the date. The code uses `scaleTime` and `scaleLinear` for axis scaling, `timeFormat` for tick labels, and custom React `AxisBottom`, `AxisLeft`, and `Marks` components. Data is loaded asynchronously via D3’s `csv` function from a GitHub gist URL.

Jjuanmy400

78% match

Loading thumbnail…

Working with Time Scatter Plot

A scatter plot displays temperature readings over time, with each circle representing a single observation. The visualization uses React and D3 v7, leveraging `d3.scaleTime` and `d3.scaleLinear` for axes and `d3.csv` to load the Data Canvas Sense Your City dataset. SVG circles render the points, with hover tooltips showing the formatted time via `timeFormat`. The axis components are custom React functions, and the plot includes labeled axes for time and temperature.

RRedSorrel

78% match

Loading thumbnail…

D3 Scatter Plot w/ other data set

This scatter plot displays the relationship between temperature and humidity using data from the Sense Your City dataset, which is loaded via a CSV URL. Each circle represents a data point, with position mapped along the x-axis for temperature and y-axis for humidity. The visualization leverages D3 v6.7.0 within a React environment, using `scaleLinear` and `axisLeft`/`axisBottom` from D3 to construct the plot, rendering circles as SVG elements. The margins are defined, and the plot area spans the full window dimensions.

Ccardoza-IPH

78% match