Skip to main content
100%

fresh block

✓ Published0🌍 Public
Aanojoual
Last edited Nov 9, 2017
Created on Nov 9, 2017

A line chart displays monthly values for categories A through L, using a purple stroke on a light gray background with labeled axes and hover interactions. The chart includes a focus circle that appears on mouseover, with dashed hover lines tracing the x and y positions, while value labels and date annotations appear near each data point. The visualization is built with D3 v4, using `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` to generate the path. Data comes from a JSON file with `name`, `value`, and `date` fields, rendered as SVG elements within a fixed 960×500 canvas.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

A line chart displays monthly values for twelve categories labeled A through L, with circles marking each data point and dashed vertical guides from the baseline. Hovering a circle highlights it in red, fades in the corresponding value label and guide line, then restores them on mouseout. The visualization uses d3.line, d3.scaleTime, and d3.scaleLinear to position marks, with transitions on opacity for interactive feedback. Data comes from a local JSON file, and rendering occurs in SVG with a monospace font for numeric labels.

KKylaste
94% 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
93% match
Loading thumbnail…

fresh block with data binding

A line chart shows monthly values for categories A through L from a JSON dataset, with a visible trend line, labeled x-axis dates, and value annotations. Hovering over a semi-transparent circle highlights the corresponding data point in red, reveals its numeric value, and displays a dashed vertical guide line. The visualization uses D3 v4’s `d3.line`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.timeParse` for the SVG rendering, with mouseover and mouseout transitions controlling opacity and styling.

KKylaste
93% match
Loading thumbnail…

fresh block

A line chart displays monthly values over time, with each data point shown as a semi-transparent grey circle. Hovering a circle highlights it in red, displays the numeric value as text, and draws a dashed vertical guide line to the baseline. The visualization uses D3 v4 with `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.json` to load and render the dataset, while `d3.select` and `transition` manage the interactive hover effects in an SVG container.

MMilowB
91% match
Loading thumbnail…

fresh block

A single black line chart plots monthly values from a small JSON dataset, with light gray circles marking each data point. Hovering a circle turns it red, displays the exact value above it, and draws a dashed vertical guide line to the baseline. The visualization uses D3 v4 with SVG rendering, applying `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` for the chart, plus mouseover handlers to toggle the interactive details. Axis labels show abbreviated month-year formats, with the final value annotated in larger monospace text.

NNpfn
91% 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
90% 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
89% 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
88% match