ice7-linechart

100%

ice7-linechart

✓ Published0🌍 Public

Last edited Mar 29, 2026

Created on Mar 29, 2026

This line chart displays the rising popularity of Python from 2015 to 2024, using annual percentage values from a local CSV file. The chart renders as an SVG via React and D3, with data points marked by circles and labeled with their exact percentages, connected by a blue line. The implementation leverages a custom reusable chart factory, D3’s scaleLinear, axisLeft, axisBottom, and line generators, with axes and labels clearly annotated.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE7-area chart

This area chart visualizes the rising popularity of Python from 2015 to 2024, with percentages increasing from 12.5% to 28.11%. The visualization, built with React and D3 v7, combines a semi-transparent blue area with a 3-pixel stroke line, circular data points, and value labels. It uses D3's `scaleLinear`, `area`, `line`, `axisLeft`, and `axisBottom` functions to render the SVG chart, drawing from a CSV dataset where each year is mapped to its corresponding popularity percentage.

Vvarshitreddy02@gmail.com

91% match

Loading thumbnail…

ice_7

This example presents a top-10 programming languages chart as an interactive scatter plot, showing the 2024 market share percentages from `data.csv`. Each language is a black circle positioned on an x/y grid; clicking a circle turns it white with a black outline. The visualization uses React with D3 v7, employing `renderCircles` with `scaleLinear` for axes and click handlers for selection. An SVG pie chart with a legend is also available via `pieChart`, using `pie` and `arc` with `scaleOrdinal` and `schemeTableau10` for coloring.

Vvarshitreddy02@gmail.com

78% match

Loading thumbnail…

Fork of ICE 7question 3 Line Chart

This line chart visualizes visitor counts per year from 2010 to 2019, with a green title, blue axis labels, and an orange trend line. Built with React and rendered as SVG, it uses d3.csv to load data from a GitHub gist, then applies d3.scaleTime and d3.scaleLinear for scales, d3.axisBottom and d3.axisLeft for axes, and d3.line to generate the path. Grid lines extend from the ticks, and margins position the chart within the 960×500 viewport.

SSaikiran2029

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

77% match

Loading thumbnail…

line chart ice7

This line chart displays bike users from 2012 to 2022, with time on the x-axis and user counts on the y-axis. The SVG visualization uses d3.scaleTime and d3.scaleLinear for scaling, d3.axisBottom and d3.axisLeft for axes, and d3.line to generate the path. Data is loaded via d3.csv from a GitHub gist, then parsed with Date and numeric conversions before rendering.

Ddivyagunuguntla

77% match

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

77% match

Loading thumbnail…

ICE7

This interactive pie chart visualizes the distribution of the top 10 programming languages of 2024, with each slice’s size proportional to its usage percentage and a legend on the right listing each language with its exact value. Built as a reusable chart function using the `d3.pie` layout and `d3.arc` generators, it assigns categorical colors via `d3.scaleOrdinal` and `d3.schemeTableau10`. The React application loads the CSV dataset and renders the SVG to fill the browser window, labeling slices with values above 3%.

Vvarshitreddy02@gmail.com

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

76% match