ICE-7 Line Graph_Bharath

100%

ICE-7 Line Graph_Bharath

✓ Published0🌍 Public

Last edited Jul 2, 2022

Created on Jul 2, 2022

Forked from ICE-7 Line_Graph (Dhanusree Kodali)

This interactive line chart displays MS Dhoni’s career run totals by year, using a blue line with circle markers and a vertical rule that follows the mouseover to highlight exact values. The visualization is built with the vega-lite-api library and rendered using Vega-Lite, with data loaded from a CSV via d3.csv. It includes tooltip handlers and custom styling from a separate config file, offering a clear, hover-driven exploration of performance metrics.

AI-generated description

A visualization constructed using the vega-lite-api.

The graph shows the trend of music component signature since 2010 to 2019. Data were preprocessed by Rstudio, taking the average data of top 10 Spotify playing music every year. Standard deviation is calculated to show the variant of each category.

See Data on Gist: Yearly Music Trend

Calculated Mean and SD

The original data comes from the Observable

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-7 Line chart-Srinivas

This line chart displays the number of runs Sachin Tendulkar scored each year, using a blue line plotted over an SVG canvas. The x-axis represents years, scaled with d3.scaleTime, while the y-axis shows runs, scaled with d3.scaleLinear. Data is loaded asynchronously from a CSV file using d3.csv. Axes are generated with d3.axisBottom and d3.axisLeft, and the line path is constructed with d3.line. The chart includes labeled axes and grid lines rendered via tick marks.

Ssrinivasaraosankula

82% match

Loading thumbnail…

ICE-7 Area_Graph (Dhanusree Kodali)

This example uses an area graph to show the number of runs scored by Virat Kohli in the Indian Premier League across multiple years. It layers a circle mark, area mark, and interactive text and rule marks, with a single selection tied to the x-axis that highlights data points on mouseover. The visualization is built with Vega-Lite API and d3.v5, pulling CSV data from a GitHub gist, and uses custom configuration for axis styling and tooltip formatting.

DDhanusree Kodali

81% match

Loading thumbnail…

ICE-7 Line Chart

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.

LLG0498

78% match

Loading thumbnail…

ice7

This line chart shows the number of wickets taken in ODI cricket from 2000 to 2010, with year on the x-axis and wicket count on the y-axis. Built with D3 v5, it uses `scaleTime` and `scaleLinear` for the axes, `axisBottom` and `axisLeft` for gridlines, and a `line` generator to create the blue path. The data is loaded from a CSV and rendered as SVG.

Vvineeth0000

77% match

Loading thumbnail…

ICE-7 Line chart SKM

This line chart displays the runs scored by the top 40 Test cricket players, sorted from highest to lowest, and uses a rotated x-axis to fit player names. The chart is built with D3.js (v7) and rendered as an SVG, fetching data from a remote CSV file via `d3.csv`. The visualization employs `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the continuous y-axis, with a line path created using `d3.line` and configured with `d3.axisBottom` and `d3.axisLeft` for the axes.

Mmedurisk7@gmail.com

76% match

Loading thumbnail…

ICE7

This visualization shows the number of wickets taken in ODI cricket from 2000 to 2010, with a filled area chart highlighting the trend over time. The code uses D3 v5’s `scaleTime`, `scaleLinear`, `line()`, and `area()` generators with `curveBasis` to render smooth paths in SVG. Axes are created via `axisBottom` and `axisLeft`, and data is loaded from a remote CSV using `csv()`. The chart includes styled tick lines, axis labels, and a bold orange fill for the area under the curve.

Vvineeth0000

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

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

74% match