线表 — VizHub

100%

线表

✓ Published1🌍 Public

Last edited Dec 20, 2020

Created on Dec 19, 2020

This visualization displays the temperature in San Francisco over time as a red area chart, with the title “top 10 population countries in the world” appearing above the plot. The SVG graphic uses d3.scaleTime and d3.scaleLinear for axes, d3.axisLeft and d3.axisBottom for ticks, and the d3.area generator to create the filled path. Data is loaded via d3.csv from a remote dataset, with timestamps parsed as Date objects. Grid lines are drawn using negative tick sizes, and axis labels are added as SVG text elements.

AI-generated description

A 散点图 of d3js. HTML page demonstrating use of CSS and JavaScript

MIT Licensed

Similar vizzes

Loading thumbnail…

World Population Area Chart

This area chart displays temperature trends in San Francisco over time, with a smooth curve filled in red. The visualization uses d3.scaleTime and d3.scaleLinear to map timestamps and temperature values, while d3.area with curveBasis generates the filled path. Axis elements are rendered with d3.axisBottom and d3.axisLeft, including gridlines and labeled axes. Data is loaded from a CSV file using d3.csv, with timestamps parsed as dates and temperatures converted to numbers. The SVG rendering includes a title and styled tick marks.

NNaveenaS12

85% match

Loading thumbnail…

Temperature in San Francisco (Line)

A dropdown menu lets users select a country, and a line chart displays that country’s population over time. The visualization uses D3.js to parse CSV data, render SVG axes and paths, and animate transitions between selections. A categorical color scale from `d3-scale-chromatic` assigns a distinct stroke color to each country’s line, while `d3.scaleLinear` maps years and population values to coordinates. The interface updates the line via a `transition` when the selection changes.

AAfnan Nazir

84% match

Loading thumbnail…

Temperature of San Francisco

This visualization presents the global population over time as a filled area chart, with a maroon region beneath a smooth curve. The data comes from a CSV file called `world-population-by-year-2015.csv`, loaded via `d3.csv`. The code uses D3 v5 functions such as `scaleTime`, `scaleLinear`, `area` with `curveBasis` for the curved path, and `axisBottom` and `axisLeft` for the axes, with gridlines and tick formatting. The y-axis labels abbreviate large numbers, converting billions from "G" to "B".

Ggcappadaniel

83% match

Loading thumbnail…

World population Area Chart

This area chart visualizes San Francisco temperature trends over time, using a green smooth curve against a white background. Built with D3 v5, it loads CSV data from VizHub and maps timestamps to a time scale and temperatures to a linear scale. The visualization includes styled axes with tick marks, grid lines, and rotated labels for the y-axis, while the x-axis displays time ticks and a title. The line is generated using `d3.line` with `curveBasis` for smoothing, and rendered as an SVG path with custom CSS styling.

PPavel Antoshkin

83% match

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart shows the growth of world population over time, using a smooth filled area to emphasize the trend. The visualization is rendered as an SVG using D3 v5, with a time-scaled x-axis and linear y-axis. It loads CSV data from a VizHub dataset, parses years as dates, and constructs the area path using `d3.area` with `curveBasis`. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, and the chart includes labeled axes and a title.

Eemntd

83% match

Loading thumbnail…

World Population Area Chart

This area chart shows a week of temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis. The chart uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear for scales, and d3.area with curveBasis to generate the filled path. Axes are rendered via d3.axisBottom and d3.axisLeft, with tick lines extending across the plot using negative tick sizes. The SVG output includes axis labels, a title, and a maroon-filled area beneath the curve.

Ssakhabutdinov

83% match

Loading thumbnail…

LinePlot of Temperatures in San Francisco

This visualization displays global population changes from 1950 to 2015, using a line chart rendered with SVG. The chart maps years on the x-axis and population counts on the y-axis, with grid lines for readability. Data comes from the World Population by Year 2015 dataset. The code uses D3 v5 methods including `area`, `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `curveBasis` to generate the filled area path, with axis labels and a title styled via CSS.

Jjlspangl

83% match

Loading thumbnail…

World Population Area Chart

This chart uses an area graph to show temperature trends in San Francisco over the course of a week, with time on the x-axis and temperature on the y-axis. The visualization is rendered as an SVG using D3 v5, with the `area` and `curveBasis` APIs to create the smoothed filled region. The data is loaded from a CSV file hosted on VizHub, and axes are styled using `axisBottom` and `axisLeft`, with gridlines and labels customized through CSS.

IIsabel

82% match