Another Interaction Visualization

100%

Another Interaction Visualization

✓ Published0🌍 Public

Last edited Apr 24, 2024

Created on Apr 23, 2024

This interactive line chart displays monthly car sales data for Toyota and Mitsubishi from 1991 to 2013, with each series rendered as a smooth curve using D3’s `line()` generator with `curveBasis`. The visualization uses SVG and React, with scales from `d3.scaleTime` and `d3.scaleLinear` to map dates and values. Users can hover over a legend item to highlight its corresponding line in its original color while dimming others to light grey, or click the legend to toggle a series’ visibility. The data comes from a tab-separated `dataset.tsv` file.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Line Chart

This line chart visualizes automobile sales data from 2001 to 2017, with the year on the x-axis and sales figures on the y-axis. The visualization uses D3 v5 with an SVG rendering approach. It employs `scaleTime` for the time-based x-axis, `scaleLinear` for the y-axis, and the `line` generator to create the path. The data is loaded from a CSV file, and axes are rendered using `axisBottom` and `axisLeft` with custom tick styling.

Mmanishcheruku

78% match

Loading thumbnail…

ICE - 7 Line Chart

This chart visualizes monthly car sales trends over time, plotting total sales amounts against sale dates. The visualization uses React with D3 v7 to fetch and parse CSV data, then renders an SVG line chart with a smooth curved line via `curveBasis`. Axes are generated using D3 scales (`scaleTime` and `scaleLinear`), with custom tick components for x and y grids. The x-axis labels months, while the y-axis displays sales amounts, and axis titles clarify the variables. The chart’s styling includes red line strokes, grey gridlines, and green axis labels, with the data sourced from a remote GitHub CSV file.

66264kusuma@gmail.com

77% match

Loading thumbnail…

Line graph

This line graph displays car sales from 2010 to 2020, with years on the x-axis and sales on the y-axis. The visualization uses React with D3 v5 APIs such as `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to generate an SVG chart. Data is loaded from a CSV file hosted on GitHub, and rendered with styled axes, a red line path, and a title. The chart includes labeled axes and gridlines via tick sizes.

Ssumanthsomu1

77% match

Loading thumbnail…

Line chart For Car Sales

This line chart displays car sales from 2013 to 2021, with time on the x-axis and sales count on the y-axis. The visualization uses D3 v5 with SVG rendering, loading data from a CSV file and parsing dates with `d3.timeParse`. It implements `scaleTime` and `scaleLinear` for axes, and a `line` generator to draw the red trend line. The code adds labeled axes and removes default tick domains, with gridlines shown via `tickSize` on both axes.

GGARIDIDEEKSHITHREDDY

77% match

Loading thumbnail…

Car Sales

This line chart shows car sales by year from 2013 to 2021, with the years on the x-axis and total sales on the y-axis. The SVG rendering uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generator with data loaded via `csv` from a GitHub gist. The chart includes gridlines from tick marks, rotated axis labels, and a red path for the trend line.

JJyothicherukuri

76% match

Loading thumbnail…

Line chart

This line chart shows car sales data from 2013 to 2021, with years on the x-axis and total sales on the y-axis. It uses d3.csv to load external data, d3.scaleTime and d3.scaleLinear for positioning, and d3.axisBottom and d3.axisLeft for labeled axes. A d3.line generator draws the single red trend line, while d3.extent and d3.max calculate the domain ranges. The visualization renders as an SVG with custom margins and tick styling.

KKolliTeja

76% match

Loading thumbnail…

Assignment2-Area

This example shows a direct comparison of monthly car sales between Toyota and Ford as two layered area charts. The visualization uses D3 v6 to load CSV data from a GitHub gist, transform the monthly sales figures, and render smooth areas with the `area()` generator and `curveBasis` interpolation. Scales are defined with `scalePoint` for months and `scaleLinear` for sales values, with axes and a legend appended to the SVG. Both areas are filled in distinct colors with partial opacity to show overlap between the two brands.

Llokesh kautharapu

76% match

Loading thumbnail…

Fork of Fork of line chart section 3

This visualization displays car sales data from 2013 to 2021 as a line chart, showing the trend of total sales over time. The chart uses a time-scaled x-axis for years and a linear y-axis for sales totals, with axes enhanced by gridlines and labels. It loads data from an external CSV file, parsing dates with `d3.timeParse` and computing the line path using the `d3.line` generator. The SVG rendering employs D3 v5 selection, scales, axes, and margin conventions to produce the final graphic.

SSnapika

76% match