Tutorial(migrants case study)

100%

Tutorial(migrants case study)

✓ Published0🌍 Public

Last edited May 14, 2023

Created on May 14, 2023

A line chart plots temperature over timestamp from a subset of the Missing Migrants Global dataset, with each point rendered as a circle and connected by a natural curve. The example demonstrates a React-based D3 workflow, using `d3.csv` for loading data, `scaleTime` and `scaleLinear` for axes, `extent` for domains, and `line().curve(curveNatural)` for the path geometry. SVG output is generated through React components for axes and marks, styled with a serif font and purple accents.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities, and uses React to render the data as a radial burst!

MIT Licensed

Similar vizzes

Loading thumbnail…

Stylised Line Chart

This stylised line chart displays temperature over time using data from a Missing Migrants Global 2019 subset CSV. The SVG rendering combines React components with D3 v7 scales and axes, including a smooth natural curve line via d3.line().curveNatural(). Time formatting uses d3.timeFormat("%a") for weekday labels, while Poppins font styling and teal-colored strokes create the distinctive visual design. Axis ticks leverage d3.ticks() implicitly through scaleTime and scaleLinear methods.

Qqtrfx

82% match

Loading thumbnail…

Missing and dead migrants I

This visualization plots the number of dead and missing migrants over time, using a line chart with circular markers for each reported incident. The chart is built with React and rendered as SVG, with scales from d3.scaleTime and d3.scaleLinear, and lines generated via d3.line with curveNatural interpolation. Data comes from the Missing Migrants Project subset, loaded with d3.csv. The axes are custom React components, and tooltips show the reported date for each point.

Ssmile2git

77% match

Loading thumbnail…

Line Chart Template

This line chart template visualizes temperature over time, displaying data points as small circles connected by a smooth, natural curve. The chart uses a time-scaled x-axis and a linear y-axis, with axis labels indicating time and temperature. Built with React and D3 v5, the implementation uses `scaleTime`, `scaleLinear`, and `curveNatural` from D3, alongside custom React components for axes and marks. The data is loaded from a CSV file using D3’s `csv` and rendered as an SVG, with a tooltip showing the time on hover.

SSam Hege

77% 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

76% match

Loading thumbnail…

react time line chart styled

This interactive visualization displays temperature readings over time as a smooth line chart with circular markers, rendered as SVG within a React application. The chart uses d3.scaleTime for the x-axis and d3.scaleLinear for the y-axis, with d3.line and curveNatural generating the smoothed path. Built with React 17 and D3 v7, the code loads temperature data from a CSV file via d3.csv, and includes tooltips on hover for each data point using SVG title elements.

MMalcolm Mead

76% match

Loading thumbnail…

Logscale of Missing and dead migrants I

This example visualizes reported dates versus total dead and missing migrants from the Missing Migrants Dataset, using a log scale for the y-axis to accommodate wide numerical ranges. It renders a smooth line and circles as SVG marks, generated with React components and D3’s `scaleLog`, `scaleTime`, `line`, and `curveNatural`. The chart includes custom axes built from D3 scales, with the data fetched via `d3.csv`.

Ssmile2git

76% match

Loading thumbnail…

Migrant Deaths

A line chart displays the total number of dead and missing migrants over time, with each reported date plotted along the x-axis and the corresponding death count on the y-axis. The visualization uses React with D3 v7, employing `scaleTime`, `scaleLinear`, `line`, and `curveCardinal` to generate the smooth path and individual data points. Data is loaded from a CSV file containing global migrant incidents. Small circles with tooltips on hover provide additional details for each date.

JJohn Lewis

76% match

Loading thumbnail…

line chart

This line chart visualizes temperature trends over time using a smoothed cardinal spline curve. The React-based code renders SVG marks, including a path for the line and circles for individual data points, with hover tooltips. It leverages d3's `scaleTime`, `scaleLinear`, and `line` API, along with `curveCardinal` for the interpolated curve. Data is loaded from a CSV file.

MMATTE-blz

76% match