Skip to main content
SimilarExport ZIP
100%

World Map

✓ Published0🌍 Public
AAlex Gomes
Last edited Mar 1, 2022
Created on Mar 1, 2022
Forked from Working with Time

This visualization displays temperature data over time as a line chart with circular markers for each data point. The x-axis uses a time scale (d3.scaleTime) with day-of-week tick labels, while the y-axis uses a linear scale (d3.scaleLinear). Built with React and D3 v5, it renders SVG elements, with the line path created using d3.line() with curveNatural smoothing. Data is fetched via d3.json from a world-atlas TopoJSON file (though the chart plots temperature readings, not map features). Hovering over circles shows tooltips formatted with d3.timeFormat.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities, and uses React state to keep track of the data.

MIT Licensed

Similar vizzes

Loading thumbnail…

World Map

This example visualizes a time series of temperature readings as a smooth line chart with circular data points, populated from an external JSON dataset. The chart uses React to render SVG elements, with D3 v5 handling data loading via `d3.json`, scale construction through `scaleTime` and `scaleLinear`, and path generation with the `line` function and `curveNatural` interpolation. Axes are built using `scaleTime.ticks` and `scaleLinear.ticks` with custom tick formatting, and hover tooltips are provided through native SVG `<title>` elements. The visualization also includes styled axis labels and gridlines from the accompanying stylesheet.

Ddumbdataguy@gmail.com
91% match
Loading thumbnail…

World Map

This visualization displays temperature readings over time as a smooth, connected line chart. It uses a time-scaled x-axis and a linear y-axis, with data sourced from the Data Canvas Sense Your City dataset. The implementation leverages React for the component structure, d3.scaleTime and d3.scaleLinear for scaling, and d3.line with a natural curve to generate the path. The SVG rendering includes labeled axes and tick marks, while the use of a CSV loading function via d3.csv populates the chart.

GGregS1290
91% match
Loading thumbnail…

Map of the World

This example displays a line chart of temperature over time, with each day’s temperature connected by a smooth, natural curve. The visualization loads geographic data from the world-atlas TopoJSON file but renders only the time-series path, with axes labeled “Time” and “Temperature.” Built with React and D3 v5, the code uses `scaleTime` and `scaleLinear` for scales, `line` with `curveNatural` for the path, and custom `AxisBottom` and `AxisLeft` components to render ticks and labels. The data source is the Data Canvas Sense Your City dataset, though the mapping is not applied here.

Bbdfee
91% match
Loading thumbnail…

World Map

A world map visualizes global temperature data over time, displaying a smooth curve and individual data points across a time-series chart. The visualization uses D3 v5 with React, rendering as SVG. It employs `scaleTime` and `scaleLinear` for axes, `line` with `curveNatural` for the path, and `json` to load geographic data from the world-atlas package, though the map itself is not drawn.

Kkatebacon32
90% match
Loading thumbnail…

world map

This visualization displays a temperature trend over time using a stylized line chart rendered as SVG. The graph plots temperature readings from a San Francisco dataset on the y-axis against timestamps on the x-axis, with smooth curves generated via d3’s `curveNatural` path interpolation. The React application loads geographic data from the world-atlas TopoJSON file, though the visible chart focuses on the line plot with axes created using scaleTime, scaleLinear, and custom tick components. The chart uses d3.v5, React hooks, and a light, modern style with Poppins typography.

Iinnocent thomas
89% match
Loading thumbnail…

world map

This example visualizes temperature data from the Data Canvas Sense Your City dataset as a time-series line chart. The y-axis displays temperature values while the x-axis represents time, with the line connecting data points to show trends over the course of a week. Built with React and D3 v5, the chart uses D3’s `scaleTime` for the time axis, `scaleLinear` for the temperature axis, and `line` with `curveNatural` to draw the smoothed path. The visualization is rendered as an SVG, with axes and marks generated by custom React components, though the data file is loaded via `d3.json` from a GeoJSON URL, suggesting a possible mismatch with the scatter plot described in the README.

HHaris Vidimlic
87% match
Loading thumbnail…

World Map

A temperature line chart displays one week of hourly temperature readings from San Francisco, with a smooth curve drawn through individual data points. The visualization uses React to render SVG elements, with D3 v5 handling scales, axes, and the natural curve interpolation via `d3.line` and `curveNatural`. Tooltips on each circle reveal the timestamp, and the data is loaded from a CSV file using `d3.csv`.

SSiddhant Bhardwaj
84% match
Loading thumbnail…

World Map

This visualization displays a world map using geographic data, rendering country boundaries as black strokes. The map is constructed with React and D3, utilizing the `d3.json` loader to fetch TopoJSON data from the `world-atlas` package, then converting it to GeoJSON features via the `topojson` `feature` API. The `Marks` component draws the map paths using D3’s `line` generator with the `curveNatural` interpolation, while also placing circular markers at data points from the SF temperature dataset. The SVG output is styled with a teal color scheme and Poppins font.

AAhmad Butt
84% match