Skip to main content
SimilarExport ZIP
100%

ICE-7 Line Chart

✓ Published1🌍 Public
LLG0498
Last edited Mar 26, 2022
Created on Mar 23, 2022
Forked from HTML Starter

This example shows a line chart depicting cricket run data over time, with the y-axis representing runs and the x-axis representing players. The chart uses a red gradient stroke for the line and includes labeled axes for clarity. The visualization is built with D3 v6, using `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the scales and axes, while a `line` generator with `curveBasis` smooths the data path. Data is loaded from a CSV file via `csv()`, and the SVG rendering is styled with CSS classes.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-7 Line chart

This line chart displays yearly run totals from a CSV file, using a blue line to show the trend over time. The D3 v5 code leverages `scaleTime` and `scaleLinear` to map data to axes, `axisBottom` and `axisLeft` for tick marks, and a `line` generator to create the path. The SVG is rendered with a grid and labeled axes, with data loaded via D3's `csv` function.

LLG0498
85% match
Loading thumbnail…

ICE-7 Area chart

This area chart displays yearly runs scored, with a smooth curve and a sky-blue filled region beneath the line. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate the SVG path, while axes are rendered with `axisBottom` and `axisLeft`. Data is loaded from a CSV file via `d3.csv`, with years parsed as dates and runs as numbers. The chart includes formatted tick labels and prominent axis titles, all styled with CSS.

LLG0498
84% match
Loading thumbnail…

ICE - 7 Line Chart

A line chart displays annual sales over time, with a single thick maroon line tracing the trend. The visualization uses D3 v5 to load CSV data via `d3.csv`, parse dates with `d3.timeParse`, and construct scales with `scaleTime` and `scaleLinear`. Axes are generated using `axisBottom` and `axisLeft`, while the line path is created with the `d3.line` generator. The SVG rendering includes labeled axes and gridlines, with data sourced from a GitHub gist.

Nnehabaddam
83% match
Loading thumbnail…

ICE-7 Scatter plot

This example visualizes Test Cricket player statistics with a scatter plot that maps runs against batting averages, animating through different data fields every three seconds to explore relationships between metrics like strike rate and innings played. The visualization uses D3.js version 6.7.0, employing the `scaleLinear` and `scaleOrdinal` functions for positioning and color encoding, while SVG symbols represent player types. Data from a CSV file hosted on GitHub Gist is loaded asynchronously, with circles colored by country and shaped by player role. The reusable chart module implements a configurable API, cycling through four quantitative fields on the x-axis.

Mmedurisk7@gmail.com
83% match
Loading thumbnail…

ICE_6

This example displays the top 10 all-time leading run-scorers in cricket as a horizontal bar chart. The SVG visualization uses D3 v5 with `d3.scaleLinear` and `d3.scaleBand` to map runs and player names, while `d3.axisLeft` and `d3.axisBottom` render the axes. Data comes from a CSV file loaded via `d3.csv`, with run values parsed as numbers. Each player’s total runs are shown as orange bars, with a titled chart and formatted tick labels using `d3.format`.

Vvineeth-001
82% match
Loading thumbnail…

ICE-7 (Line Chart)

This example shows a line chart of population growth rates over time, with years plotted on a time-based x-axis and population values on a linear y-axis. The visualization uses React to render SVG elements, with D3’s `scaleTime`, `scaleLinear`, and `line` generator to create the smoothed curve via `curveNatural`. Data is loaded from a CSV via `d3.csv` and formatted using `timeFormat`. Custom `AxisBottom` and `AxisLeft` components draw grid lines and tick labels, while axis titles are added as SVG text elements.

AAnjan Shrestha
82% match
Loading thumbnail…

ICE 7 task

This example visualizes the number of catches by non-wicket-keepers in cricket, plotting each player against their catch count over time using an SVG line chart. The visualization employs D3 v6 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `curveBasis`, and `line` to construct the chart, with a gradient stroke applied to the line path. The data is loaded from a CSV file hosted on GitHub, and the chart includes labeled axes and a title, with axes rendered via `axisLeft` and `axisBottom` and custom styling applied through CSS classes.

Ddineshtadepalli12
82% match
Loading thumbnail…

ICE 7 Line Chart

This chart shows sample sales data from 2010 to 2022 as a single line, with a time-scaled x-axis for years and a linear y-axis for sales values. The visualization uses D3 v5 to load CSV data, then draws an SVG line path using `d3.line`, with axes generated by `d3.axisBottom` and `d3.axisLeft`. The code imports modules like `scaleTime`, `scaleLinear`, `extent`, and `max` from D3 via a Rollup bundle that outputs to `bundle.js`. The styling applies custom CSS for gridlines, axis labels, and the stroke color of the line path.

Ddheeraj1509
82% match