rvasp2

100%

✓ Published0🌍 Public

Last edited Jul 16, 2017

Created on Jul 16, 2017

This example visualizes two time series of housing affordability indices—new and used asking prices—as separate line charts overlaid on a shared time axis. The data spans 2013 to 2016, sourced from a small CSV file. The visualization uses D3.js v4 to parse the dates, scale the x- and y-axes with `d3.scaleTime` and `d3.scaleLinear`, and draw smooth lines with `d3.line` and `d3.curveBasis`. Two independent y-scales (left and right) are defined, with gridlines and axis ticks generated via `d3.axisBottom`, `d3.axisLeft`, and `d3.axisRight`. The rendering is done in SVG, with line strokes colored MidnightBlue and Orange.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/35degrees/'>35degrees</a>'s block: <a href='http://bl.ocks.org/35degrees/e431c742085d0840dc06a682bbf2cc4b'>rvsales2</a>

forked from <a href='http://bl.ocks.org/35degrees/'>35degrees</a>'s block: <a href='http://bl.ocks.org/35degrees/0c8a22818c1e2cd9e1a3a97600124228'>rvasp</a>

mit Licensed

Similar vizzes

Loading thumbnail…

rvasp

This visualization shows annual trends in average asking prices for new and used recreational vehicles (RVs) from 2013 to 2016, using two smooth lines over a time-based X-axis and a linear Y-axis. The blue line represents new RVs, while the orange line tracks used RVs, with both datasets drawn from a local CSV file. Built with D3 v4, the code uses `d3.csv` to load the data, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.line` with a basis curve to render the paths. Gridlines and axis ticks are styled via CSS, and the SVG output is fixed at 960 by 500 pixels.

335degrees

82% match

Loading thumbnail…

rvsales2

The visualization tracks recreational vehicle shipments and retail sales from 2008 to 2017, showing two overlaid line charts with a dual-axis design. It uses d3.v4 with SVG and animation, employing `d3.line` with curveBasis for smooth paths and `d3.scaleTime` for the x-axis. Two white curtain rectangles animate away sequentially to reveal the data, while axes use `d3.axisBottom` and `d3.axisRight` for the respective scales. The dataset comes from a CSV file containing yearly shipment and retail figures.

335degrees

75% match

Loading thumbnail…

ICE-7

This visualization shows the change in house prices over time, plotting yearly data points connected by a line to reveal the overall price trend. Using D3 v5, the code imports specific modules like `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to construct the chart. Data is loaded from an external CSV file, with cost values converted to numbers and years to JavaScript Date objects. The SVG output includes labeled axes with gridlines, a rotated y-axis label, and a bold title, all styled through external CSS.

KKovvuri Supraj

71% match

Loading thumbnail…

ICE-7 Line Chart

This example visualizes house prices over time using a line chart with a filled area beneath the curve, rendered as SVG in a React-based VizHub project. The chart uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `line`, `area`, and `curveBasis` to draw the smoothed trend, with axes from `axisBottom` and `axisLeft`. Data is loaded via `csv` from a remote GitHub Gist, parsed into `Date` and numeric cost values, and styled with CSS classes for bold black lines and a blue fill.

Aachyutanandmishra17@gmail.com

70% match

Loading thumbnail…

Multiple line graph in v4

This example displays two time-series lines—one for closing prices and one for opening prices—in a single SVG chart using D3 v4. The chart uses `d3.csv` to load data from a CSV file, `d3.timeParse` to convert dates, and `d3.scaleTime` and `d3.scaleLinear` for the axes. Two `d3.line` generators create the paths, with the second line styled red via `.style("stroke", "red")`. Axis rendering uses `d3.axisBottom` and `d3.axisLeft`.

Dd3noob

70% match

Loading thumbnail…

Linechart2

This example shows multiple time series as colored lines, with each line representing a distinct category tracked over time on a shared axis. It uses D3 v6 to load a CSV dataset with `d3.csv`, group the data by category with `d3.group`, and render the lines with the `d3.line` generator. The visualization sets up a linear x-axis for years and a y-axis for values, applying a categorical color scale via `d3.scaleOrdinal`. The SVG is appended to a `div` container with explicit margins and dimensions, and axes are drawn using `d3.axisBottom` and `d3.axisLeft`.

Nnicolekevans

70% match

Loading thumbnail…

Untitled

This visualization displays two time series lines from a CSV file, showing the "close" and "open" values of a data column over dates in April and May 2012. The chart uses a time-scaled x-axis and a linear y-axis, with the blue line representing the "close" values and the red line representing the "open" values. Built with D3.js v4 in a React framework, it renders as an SVG, parsing dates via `d3.timeParse` and drawing paths using `d3.line` with axes generated by `d3.axisBottom` and `d3.axisLeft`.

Rrichad97

70% match

Loading thumbnail…

Multiple line graph in v4

This example displays two time-series lines, showing "close" and "open" stock prices over a month, with circular markers at each data point. Built with D3 v4, it maps dates on a time scale and values on a linear scale, then appends SVG paths for each line and circles for the observances. The chart uses `d3.timeParse`, `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, `d3.axisBottom`, and `d3.axisLeft`, and loads its comma-separated data from a local CSV file.

GGerardoFurtado

70% match