Fork of A Week in San Francisco Line Chart

100%

Fork of A Week in San Francisco Line Chart

✓ Published0🌍 Public

Last edited Mar 24, 2023

Created on Mar 24, 2023

Forked from A Week in San Francisco Line Chart

This example shows a line chart of San Francisco temperatures over a week, with a smoothed curve and labeled axes for time and temperature. The chart uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render an SVG path. Data is loaded from a CSV via `d3.csv`, and margins, tick marks, and an axis label are added through SVG groups and text elements.

AI-generated description

D3 course follow along.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of A week in San Francisco - Line chart

A line chart shows hourly temperature readings in San Francisco over a week, with time on the x-axis and degrees on the y-axis. The chart is rendered as an SVG using D3 v5, with scales built via `scaleTime` and `scaleLinear`, and the line path generated by `line` with `curveBasis`. Axes are added with `axisBottom` and `axisLeft`, and the data is loaded from a CSV file using `csv`.

Mmorjyooo

94% match

Loading thumbnail…

Fork of A week in San Francisco - Line chart

This visualization shows temperature readings in San Francisco over a week, using a smooth line chart with time on the x-axis and temperature on the y-axis. The chart includes labeled axes, gridlines, and a title, with the line rendered in a thick maroon stroke. The code uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear for scaling, and d3.line with curveBasis to generate the path. Axes are drawn with d3.axisBottom and d3.axisLeft, while the SVG structure and styling are managed through d3 selections and CSS.

RRoque Luís Pina

94% match

Loading thumbnail…

Fork of A week in San Francisco - Line chart

This visualization displays a line chart of temperature in San Francisco over time, with the title “Temperature in San Francisco” and labeled axes for time and temperature. The chart uses D3 v5, leveraging `d3.scaleTime`, `d3.scaleLinear`, `d3.line` with `curveBasis`, and `d3.axisBottom`/`d3.axisLeft` to render gridlines and axes in SVG. Data is loaded from a CSV file via `d3.csv` and parsed into date and numeric values. The line is styled with a maroon stroke, and tick labels are enlarged for readability.

SShishiraRudrabhatla

94% match

Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This fork of the D3.js example visualizes one week of temperature data for San Francisco using a line chart. The chart plots temperature on the y-axis against time on the x-axis, with data loaded from a CSV file containing timestamp and temperature values. The code leverages D3 v5 APIs including `scaleLinear`, `scaleTime`, `axisLeft`, `axisBottom`, and `line` with `curveBasis`, rendering the result as SVG elements. Axis labels and a title are added using SVG text elements, while CSS styles define the appearance of the maroon line and tick marks.

DDevyn Chew

93% match

Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This line chart displays a week of temperature data in San Francisco, using a smooth curved line to connect daily measurements. The visualization, titled “A Week in San Francisco,” plots temperature in degrees Celsius over time. The code uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render the SVG. Data is loaded from a CSV file provided by Data Canvas - Sense Your City, with a styled maroon line, grid lines, and labeled axes.

CCheng Tang

93% match

Loading thumbnail…

Fork of Temperature in San Fransisco Linechart

This chart shows a week of temperature readings in San Francisco over time, with a smooth curved line connecting the data points. The visualization uses D3 v7 with an SVG rendering approach, employing `scaleTime` and `scaleLinear` for the axes and `line` with `curveBasis` for the smooth path. Data is loaded as CSV from a remote source, and the chart includes labeled axes and a title. The code uses `axisBottom` and `axisLeft` for ticks, and custom styling is applied via CSS.

FFahad Bin Emran

93% match

Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This line chart displays one week of temperature data in San Francisco, with time on the x-axis and degrees Celsius on the y-axis. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with a `curveBasis` smoother to draw the maroon temperature curve. Data is loaded via `csv` from a remote dataset, and the SVG rendering includes styled axes, tick marks, and a title. The code demonstrates a typical margin-based layout with axis labels and gridlines, sourced from Data Canvas - Sense Your City.

NNoobSaiyan

93% match

Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This fork displays a week of temperature data for San Francisco as a smooth line chart, from a Data Canvas dataset. D3 v5’s `scaleTime` and `scaleLinear` map timestamps and temperatures to SVG coordinates, while `axisBottom` and `axisLeft` render labeled grid axes. The `line` generator with `curveBasis` draws the curved path, and the SVG titling and styling come from appended text elements and CSS classes.

Vvk

93% match