fresh block

100%

✓ Published0🌍 Public

Last edited Nov 9, 2017

Created on Nov 9, 2017

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.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/Bkilian971/'>Bkilian971</a>'s block: <a href='http://bl.ocks.org/Bkilian971/cdee156daf8a735497cba8f861f9db7b'>fresh block</a>

mit Licensed

Similar vizzes

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

97% 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

90% match

Loading thumbnail…

fresh block

A small multiple line chart shows monthly values for a single series across twelve months, with grey circles marking each data point. Hovering over a circle highlights it in red, brings it to the front, draws a dashed vertical guide line to the baseline, and animates a large value label near the point. Built with D3 v3, the visualization uses an ordinal x-scale for month names, a linear y-scale for values, and SVG paths, circles, and text elements. The data comes from a local JSON file with name, value, and date fields, parsed via `d3.time.format`.

BBrunoDumas

87% match

Loading thumbnail…

fresh block

A monthly time-series line chart displays a dataset of twelve alphabetical categories (A–L) with associated values. The visualization uses an SVG line and red circular markers to trace value changes over time. Built with D3.js v3, it employs ordinal and linear scales, a line generator, and custom mouseover/mouseout interactions that highlight data points with blue fills, dashed vertical guide lines, and enlarged value labels. The chart reads from an external JSON file, rendering axis labels as text elements and supporting smooth transitions during hover effects.

BBrunoDumas

87% match

Loading thumbnail…

fresh block

This example shows a multi-line chart where three series track how their values change over roughly five weeks in spring 2012. The lines are distinguished by color and key, with each data point marked by a small circle on the SVG canvas. The x-axis uses a time scale for the dates, while the y-axis maps the numeric value. A legend identifies each line, and the chart includes axes and grid lines to aid in reading the values. The visualization demonstrates how D3.js v4 can render time-series data with multiple series using an SVG-based approach.

GGerardoFurtado

85% match

Loading thumbnail…

fresh block

This example displays a simple line chart of six numeric values from a static array, rendered as a single green path on a blank SVG canvas. The visualization uses D3 v4 to create linear scales for the x- and y-axes, with the x domain set to the indices of the data points and the y domain scaled from zero to the maximum value. An SVG path is drawn using `d3.line()` with coordinates mapped through those scales. The chart does not include axes, labels, or gridlines, showing only the raw trend line.

KKacieW

84% 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

83% match

Loading thumbnail…

fresh block

This example shows a simple line chart of 21 random data points, with each point represented as a circle. The visualization uses D3.js v4 to generate an SVG, with a black line connecting the dots and interactive hover effects that turn the circles red on mouseover and fade back to black on mouseout. The code applies the margin convention, scales the data with `d3.scaleLinear`, and uses the `d3.line` generator to draw the path. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, and the chart fills the browser window.

663anp3ca

83% match