fresh block

100%

✓ Published0🌍 Public

Last edited Apr 13, 2018

Created on Apr 13, 2018

This visualization displays three time-series lines representing maximum, minimum, and delay values for network delays, drawn as separate strokes on a shared time axis. It fetches JSON data from a remote API using axios, then maps each delay record’s timestamp and corresponding metric into a d3.line path. The x-scale is time-based, while the y-scale maps delay values linearly, with color categories assigned via d3.scaleOrdinal and the schemeCategory10 palette. The SVG chart uses d3.v4 for scales, line generation, and axis rendering, with data loaded asynchronously through the axios promise.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/andrewcowley/'>andrewcowley</a>'s block: <a href='http://bl.ocks.org/andrewcowley/8b31486af2e39159be8c58e36055a528'>fresh block</a>

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

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.

Aanojoual

79% match

Loading thumbnail…

fresh block

This visualization displays monthly values as a line chart with circular markers, showing a basic time series of twelve data points from January through December 2016. The SVG rendering uses d3.svg.line with an ordinal x-scale and linear y-scale to map the data. Hovering over a grey circle highlights it in red, reveals the corresponding value as text above the point, and draws a dashed vertical line from the marker down to the chart baseline. The code relies on d3.json for data loading and d3.time.format for date parsing.

MMarineRu

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

78% match

Loading thumbnail…

fresh block

A stylized area chart displays layered time-series data using a silhouette offset to show relative values across categories. The visualization uses D3 v2 with SVG rendering and cardinal interpolation to create smooth, overlapping curves in an orange color palette. Users can hover over any layer to highlight it while dimming others, with a tooltip revealing the specific category name and value at the cursor position. The chart loads data from an external CSV file and includes both left and right y-axes with a weekly time scale on the x-axis.

PPardhu448

78% match

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

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

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

78% match

Loading thumbnail…

fresh block

A simple two-panel chart divides a 400-by-600 pixel SVG into equal light-blue rectangles with green outlines. The left and right panels share a linear Y-axis scaled from 0 to 100, while the bottom X-axis uses d3.scaleTime spanning a three-hour window on January 1, 2016. Both axes are rendered with d3.axisLeft and d3.axisBottom, with the time axis displaying five ticks. The chart is built with D3 v4 and drawn entirely as SVG elements, with no underlying data or interactive behavior.

Aaaronbalthaser

78% match