Fork of ICE7 Line Chart

100%

Fork of ICE7 Line Chart

✓ Published2🌍 Public

Last edited Mar 27, 2024

Created on Mar 25, 2024

This line chart visualizes miles per gallon (mpg) for car models, with temperature data from San Francisco sourced via CSV. The chart uses D3 v5’s `scaleBand` and `scaleLinear` for axes, `line` with `curveBasis` for a smoothed path, and `axisBottom` and `axisLeft` for labeled ticks. Data is loaded with `csv` and rendered in SVG via `select`. The chart includes rotated x-axis labels, a title, and axis labels.

AI-generated description

This line chart shows one week of temperature (in degrees Celcius) in San Francisco. The data comes from Data Canvas - Sense Your City.

Made in this video:

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE 7 Area Chart

This fork of the ICE 7 Area Chart displays miles per gallon (mpg) for various car models using a line chart with a smooth basis curve. The SVG visualization uses D3 v5’s `scaleBand` and `scaleLinear` to map car models and mpg values, with axes labeled and styled via CSS. The line generator, `d3.line` with `curveBasis`, connects data points, while the dataset is loaded as CSV from a GitHub gist. The chart lacks a filled area, despite its title, focusing instead on the trend line.

NNanditha Reddy

89% match

Loading thumbnail…

Fork of Fork of Fork of Carsline

This visualization displays temperature data from San Francisco over time, drawing a smooth line through the points using D3’s line generator with curveBasis. The SVG render includes labeled axes, gridlines from axis tick marks, and a title. The code imports specific D3 v5 functions like scaleTime, scaleLinear, axisLeft, and axisBottom, and loads the dataset from a CSV file via d3.csv. The scatter plot’s underlying data comes from the UCI Machine Learning Repository’s Auto MPG dataset, though the visual focuses on timestamp versus temperature.

Ddanish-nix

83% match

Loading thumbnail…

Fork of ICE7 Line Chart

This line chart visualizes the median PM 2.5 concentration for each month in San Francisco, using data from Data Canvas - Sense Your City. The chart renders as an SVG using d3.v5, with a smoothed line generated by the `line` and `curveBasis` functions, and axes created via `scaleLinear`, `axisBottom`, and `axisLeft`. A CSV file is loaded with `csv` and processed to convert month names into numeric indices. The chart includes labeled axes, a title, and a blue line path styled via CSS.

SSólveig Hákonardóttir

82% match

Loading thumbnail…

Fork of Fork of Fork of Fork of Cars area

This area chart visualizes temperature in San Francisco over time, using a maroon filled path with rounded curves to emphasize the trend. The visualization loads CSV data from a VizHub dataset, parsing timestamps and numeric temperatures before rendering with D3 v5’s `scaleTime`, `scaleLinear`, `area`, and `curveBasis` APIs. It includes custom axes with tick marks, rotated axis labels, and a title, all drawn as SVG elements. The data source is the Auto MPG dataset from UCI, though the code actually plots temperature data instead.

Ddanish-nix

81% match

Loading thumbnail…

Fork of ICE-7

This visualization displays car sales data over time as a line chart, with years on the x-axis and sales figures on the y-axis. It uses D3 v5 to load CSV data, parse dates with d3.timeParse, and render scales and axes via scaleTime, scaleLinear, axisBottom, and axisLeft. The line is drawn using the d3.line generator, with the SVG path styled in orange. The chart includes labeled axes and uses margins to position the plot within the SVG canvas.

CCherukuriMilind

81% match

Loading thumbnail…

Fork of Cars Scatter Plot

This fork of the Cars Scatter Plot visualizes temperature in San Francisco over time, using a smooth line chart instead of points. The code imports D3 v5 modules including `select`, `csv`, `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render the SVG path. It loads data from a CSV file hosted on VizHub, parses temperature as numbers and timestamps as dates, then draws axes with tick marks and labels. The dataset originates from the UCI Machine Learning Repository’s Auto MPG set, though the plotting logic here applies it to weather readings.

HHojjat Karami

81% match

Loading thumbnail…

Fork of Fork of Cars Scatter Plot

This scatter plot visualizes temperature over time for San Francisco, using data from a CSV file loaded via `d3.csv`. The chart displays a line path generated with `d3.line` and `curveBasis`, along with axes created by `d3.axisBottom` and `d3.axisLeft`. Scales are set using `d3.scaleTime` for the x-axis and `d3.scaleLinear` for the y-axis. The visualization is rendered as an SVG, with styling applied through CSS classes for titles, labels, and grid lines.

Ddanish-nix

80% match

Loading thumbnail…

Fork of ICE 7 Area Chart

This visualization shows annual car sales in the United States over time, combining a blue line chart with a pink filled area beneath it. The chart uses D3 v5’s `scaleTime`, `scaleLinear`, `line`, and `area` generators with `curveBasis` to smooth the path. Data comes from a CSV file loaded via `d3.csv`, with years parsed using `d3.timeParse`. Axes are rendered with `axisBottom` and `axisLeft`, and the SVG output includes gridlines from tick sizes.

Nnagamaheswar

79% match