Missing Migrant Part I

100%

Missing Migrant Part I

✓ Published0🌍 Public

Last edited Aug 15, 2021

Created on Aug 15, 2021

This interactive scatter plot visualizes a week of temperature readings from San Francisco, plotting time on the x-axis against temperature on the y-axis. The visualization is built with React and D3 v5, using `scaleTime` and `scaleLinear` for axes and SVG circles to represent data points. It pulls data via the `csv` loader from the Data Canvas Sense Your City dataset, with tooltips showing the exact time for each point.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Missing Migrant Part I

A scatter plot displays temperature readings over a week from the Data Canvas Sense Your City dataset. Each circle marks a temperature observation at a specific timestamp, with time formatted by day of the week on the x-axis and temperature on the y-axis. Built with React and D3 v5, the visualization uses `scaleTime` and `scaleLinear` for axes, renders circles as SVG elements with tooltips via the `<title>` tag, and loads CSV data through `d3.csv`.

Aadewole-top

92% match

Loading thumbnail…

Working with time

This visualization displays a week of temperature readings in San Francisco using a scatter plot. It shows the relationship between time on the x-axis and temperature on the y-axis, with a tooltip on each point that reveals the day of the week. Built with React and D3 v5, the code uses `scaleTime` and `scaleLinear` to map data, `AxisBottom` and `AxisLeft` for axes, and SVG circles for marks. Data comes from a CSV file loaded via D3's `csv` function.

Llaplantalaplanta

84% match

Loading thumbnail…

Missing Migrant Part I

A scatter plot displays the total number of dead and missing migrants over time, with each circle representing a reported incident. The visualization uses React to render an SVG, employing d3.scaleTime and d3.scaleLinear for axes, with d3.csv loading data from the Data Canvas Sense Your City Dataset. Circles are positioned using d3's scale functions, while tooltips reveal exact dates via d3.timeFormat.

Aadewole-top

84% match

Loading thumbnail…

Working with time

A scatter plot shows temperature readings over time for San Francisco, with each circle representing a daily measurement. The x-axis displays weekdays using a time scale, while the y-axis maps temperature values on a linear scale. Built with React and D3 v5, the visualization uses `scaleTime`, `scaleLinear`, and `extent` to set domains, with custom axis components rendering SVG ticks and labels. Data loads asynchronously via the `csv` function from Data Canvas Sense Your City.

TtrwMK

84% match

Loading thumbnail…

Working With Time

This interactive scatterplot visualizes San Francisco’s temperature readings over one week, with time on the x-axis and temperature on the y-axis. Using D3 v5 scales (`scaleTime` and `scaleLinear`) and React, the chart renders SVG circles for each data point via the `Marks` component, while `AxisBottom` and `AxisLeft` generate tick marks and labels. The data comes from a CSV file loaded asynchronously with `d3.csv`, and hovering over a circle shows its exact time via a native SVG `<title>` tooltip.

Aaakarsh satyam

84% match

Loading thumbnail…

Time based scatter plot

This visualization is a time-based scatter plot that displays temperature readings from San Francisco over a week. The x-axis represents time, formatted to show day abbreviations, while the y-axis shows temperature values. The plot updates dynamically, rendering each data point as a circle. The code uses React for the user interface and D3 v6 APIs such as `scaleTime`, `scaleLinear`, and `extent` to map data to coordinates. The data is loaded from a CSV file via D3's `csv` function, and the chart is rendered as an SVG using custom Components like `AxisBottom`, `AxisLeft`, and `Marks`.

AAnthony Ynami

84% match

Loading thumbnail…

Working with Time

This example visualizes a week of temperature readings in San Francisco as a scatter plot, with time on the x-axis and temperature on the y-axis. Each circle represents a single measurement, and hovering reveals the exact timestamp. Built with React and D3 v5, the visualization uses `scaleTime` and `scaleLinear` to map data to SVG coordinates, while custom `AxisBottom` and `AxisLeft` components render the ticks. The code loads data from a CSV file containing the "Data Canvas Sense Your City" dataset and formats the time axis using `timeFormat("%a")` for day abbreviations.

RRajat Dangat

83% match

Loading thumbnail…

Working with Time

This scatterplot shows temperature readings from the "data canvas sense your city" dataset over a one-week period in San Francisco. The visualization uses D3 v6 scales (`scaleTime` and `scaleLinear`) to map timestamps and temperatures to SVG circle positions, with axes rendered as custom React components (AxisBottom, AxisLeft). The code loads CSV data via `d3.csv`, formats time ticks with `timeFormat('%a')`, and includes native SVG `<title>` elements as tooltips showing each point's day.

HHollyClarke19

83% match