fresh block

100%

✓ Published0🌍 Public

Last edited Jan 29, 2018

Created on Jan 29, 2018

A multi-line chart displays temperature readings for several cities over time, parsed from a tab-separated data file with `d3.tsv` and `d3.timeParse`. The code uses `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal` with `d3.schemeCategory10` to map dates, temperatures, and city colors, while `d3.line` with `d3.curveBasis` draws smoothed paths. Axis labels and city names appear via `d3.axisBottom`, `d3.axisLeft`, and SVG text elements. The visualization renders entirely as SVG, with each city’s series and its final value labeled at the line’s endpoint.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

A dark bar chart displays daily high temperatures for New York City from late 2011 through early 2012, using a green fill with white strokes over a black background. The visualization loads tab-separated data via `d3.tsv`, parses dates with `d3.timeParse`, and renders rectangular bars positioned by `d3.scaleTime` and `d3.scaleLinear`. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, and the chart is drawn as SVG, with margins fixed to an 800x300 pixel canvas.

JJWTappert

83% match

Loading thumbnail…

fresh block

A stacked area chart displays how four unnamed data categories change over time, with each layer labeled at the right edge and a y-axis formatted as a percentage. The code loads tab-separated data via `d3.tsv`, parses dates with `d3.timeParse`, and builds the visualization using `d3.stack`, `d3.area`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal` with `d3.schemeCategory10`. SVG rendering and axes are created with `d3.axisBottom` and `d3.axisLeft`.

AAsilve00

82% match

Loading thumbnail…

fresh block

This visualization shows multiple time-series lines representing different metrics (views, likes, dislikes, and comment counts) from a CSV dataset, plotted against dates in November 2017. The lines are smoothed using a basis curve and colored via a categorical color scale. A bottom time axis and left linear axis labeled "Temperature, ºF" frame the chart, while each line is labeled with its metric name at its final value. The data is parsed with d3.timeParse and rendered as SVG using D3 v4.

VVarsha-Ravi

81% match

Loading thumbnail…

fresh block

This example shows a simple time series line chart of monthly values, with each data point’s date label displayed beneath the line and the final value annotated at the end of the curve. The chart uses a D3 v4 SVG rendering with a time-scaled x-axis and a linear y-axis, both defined via `d3.scaleTime` and `d3.scaleLinear`. The line is drawn using `d3.line` and appended as a path, while text elements are bound to the data for labels and the last value. Data is loaded from `dataset.json` and pre-processed with a time parser (`d3.timeParse`) and number formatting.

BBkilian971

80% match

Loading thumbnail…

fresh block

This example shows a simple time-series line chart of numeric values plotted against monthly dates. The visualization uses an SVG-rendered line and includes text labels for each date along the x-axis and the final value displayed prominently to the right. The code relies on D3 v4’s `d3.line` for the path generation, `d3.scaleTime` and `d3.scaleLinear` for the axes, and `d3.timeParse` to convert date strings. Data is loaded from an external `dataset.json` file, with the y-domain fixed from zero to the maximum value.

BBkilian971

80% match

Loading thumbnail…

Untitled

A multi-line chart displays temperature readings for New York, San Francisco, and Austin over several days in October 2011, using D3.js v3 with SVG rendering. The visualization uses `d3.time.scale` for the x-axis, `d3.scale.linear` for temperature, and `d3.svg.line` with basis interpolation to draw smooth curves. It colors each city's line via `d3.scale.category10`, adds a legend, and includes a mouse-over effect with a vertical guide line. Data is parsed from tab-separated text using `d3.tsv.parse`.

LL1EO

80% match

Loading thumbnail…

fresh block

This example visualizes multiple time-series lines from a weather dataset, with each line representing a different category (`symbol`) and showing how a price-like value changes over time. The visualization uses D3 v3 to load CSV data, parse date strings with `d3.time.format`, and render the lines using `d3.svg.line`. A categorical color scale (`d3.scale.category10`) assigns distinct colors to each line dynamically, and the lines are drawn on an SVG canvas with a time-based x-axis and linear y-axis. The code nests the data by symbol using `d3.nest`, then appends a separate path for each group, highlighting the trend patterns across categories.

DDarienLiang

80% match

Loading thumbnail…

fresh block

This example shows a monthly time series as a simple line chart with circular markers for each data point, drawn using SVG. D3 v4 scales, a time parser, and a line generator map the dataset’s dates and values to positions. On mouseover, the code highlights the hovered circle in red, reveals its dashed vertical guide, and displays its numeric value with a font-size transition; mouseout reverses the effect. The data comes from a local JSON file, and all interactions rely on D3 selections and transitions.

AAminaSGitHub

80% match