Skip to main content
100%

line and axis

✓ Published0🌍 Public
Aandrewcowley
Last edited Apr 17, 2018
Created on Apr 16, 2018

Two line charts track the maximum, minimum, and delay values from a remote JSON dataset, which can be toggled between two API endpoints using the provided buttons. The SVG visualization uses d3.scaleTime, d3.scaleLinear, and d3.line to render the paths, with d3.axisBottom and d3.axisLeft for the axes. Data is fetched asynchronously via the Axios library, and the chart updates in place when a new dataset is selected.

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>

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

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

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.

Aandrewcowley
77% match
Loading thumbnail…

linechart

This line chart displays monthly price changes over time, with the x-axis representing dates and the y-axis mapping price values from zero to the dataset maximum. The visualization loads data from a CSV file using d3.csv, parses dates with d3.timeParse, and renders an SVG line path via d3.line. It uses d3.scaleLinear for both axes, d3.axisLeft and d3.axisBottom for ticks, and d3.extent to determine the date range. The chart is drawn inside a translated SVG group, with the line path appended directly to that group.

Aadityajain15
75% match
Loading thumbnail…

Line Chart

Two small line charts, built with the D3.js library and jQuery, visualize two hard-coded data arrays of nine points each. The charts plot the data on a linear scale, with an orange line connecting circular data points. Interactive mouseover events enlarge the circles, and clicking a point logs its value and index to the browser console. The rendering includes grid lines, axis ticks, and labels, all styled with CSS. The data is hardcoded within the script, not loaded from an external source.

CCaged
75% match
Loading thumbnail…

Basic line chart

This line chart shows the relationship between two numerical values and time, plotting two series from a CSV file across the years 2010–2015. It uses d3.csv to load the data, then applies d3.scaleTime and d3.scaleLinear for axes, while d3.line constructs the paths. The chart renders in SVG, with each line styled via a separate stroke color. Axis labels are added using d3.axisBottom and d3.axisLeft, and the code includes configurable column names for easy reuse as a template.

EEleonore9
75% match
Loading thumbnail…

simple line chart from dataset

A simple line chart displays monthly values from a small JSON dataset, plotting each data point as a grey circle. Hovering over a circle turns it red, enlarges it, reveals its numeric value above, and draws a dashed vertical line down to the x-axis. The visualization uses D3 v3 with SVG, employing an ordinal scale for x-positions, a linear scale for y-values, and mouseover/mouseout event handlers to animate the transitions.

AAlexdef74307
74% match
Loading thumbnail…

line chart

This line chart example presents two datasets: ticket prices by year and Klout scores by day. Clicking color swatches animates the chart between the two data sets, updating both the x- and y-axes, and the line’s gradient stroke. The visualization is built with D3 v4, using SVG rendering and transitions to animate axis rescaling and path redrawing. The code uses `d3.timeParse`, `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.line` for drawing the line.

MMike Z
74% match
Loading thumbnail…

simple line chart from dataset

A simple SVG line chart plots monthly values from an 11-point JSON dataset, with a black polyline, labeled x-axis dates, and a large final-value annotation. The visualization adds interactivity through gray circular markers at each data point; hovering a circle turns it red, reveals its value, and displays a vertical dashed guide line. The chart uses D3 v4’s `d3.scaleTime`, `d3.scaleLinear`, and `d3.line`, with mouseover and mouseout events controlling opacity and stroke transitions. Animation effects appear via `transition().duration(300)` when changing marker color and opacity.

GGaret005
74% match
Loading thumbnail…

Axis

This example demonstrates how axes and gridlines respond to changing data domains in a D3.js visualization. It shows a simple SVG chart with an x-axis and y-axis spanning a 500×500 pixel area, with dashed gridlines extending from each tick mark. The visualization randomly rescales both axes by generating a new maximum value between 0 and 100, smoothly animating the axis transitions using `d3.transition()` and updating gridlines dynamically. Built with React, the code uses `d3.axisBottom`, `d3.axisLeft`, and `d3.scaleLinear` to render and update the axes, while the gridlines are appended as `line` elements within each tick group.

苏苏巨亮
74% match