Fork of ICE-7 Line Chart

100%

Fork of ICE-7 Line Chart

✓ Published0🌍 Public

Last edited Apr 8, 2023

Created on Apr 8, 2023

This example shows a line chart of stroke incidence against BMI from 2000 to 2013, with time on the x-axis and stroke values on the y-axis. The chart is rendered as an SVG using D3 v5, with scales created via `d3.scaleTime` and `d3.scaleLinear`. Axes are generated using `d3.axisBottom` and `d3.axisLeft`, while the line path is drawn with `d3.line`. The data is loaded from a CSV file hosted on GitHub.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE-7 Line Chart

This visualization shows the relationship between Glucose and BMI across a dataset of countries, plotting each as a single connected line graph on an SVG canvas. The code uses D3 v5 to load the CSV data and apply the `d3.line` generator, with `d3.scaleLinear` for both axes and `d3.axisLeft` and `d3.axisBottom` for tick marks. A red path traces the ordered points, while axis labels and a title are appended as SVG text elements. The line plot is rendered within a centered SVG with explicit margins and tick sizing.

Aav.dj.2000@gmail.com

84% match

Loading thumbnail…

Fork of Fork of ICE-7 Line Chart

This example displays a line chart tracking population from 2005 to 2017, rendered as an SVG using D3 v5. The visualization uses `d3.scaleTime` for the year axis and `d3.scaleLinear` for population values, with axes generated via `d3.axisBottom` and `d3.axisLeft`. The line path is created with `d3.line`, and data is loaded from a CSV file using `d3.csv`. The chart includes labeled axes and a title, with gridlines styled by tick marks.

Ssnehareddygurram

83% match

Loading thumbnail…

Fork of ICE7_Linechart

This visualization shows the relationship between BMI and sleep time as they relate to heart attack deaths in India from 2011 to 2019. The chart plots data points where BMI appears on the x-axis and heart attack deaths on the y-axis, connected by a smooth blue line generated using d3.line with a curveBasis interpolation. The visualization uses D3 v5 APIs including scaleLinear, axisBottom, axisLeft, and extent to map the data, with data loaded from a CSV file hosted on GitHub Gist. The SVG rendering includes custom styling for the line path and axis labels, displayed on a pink background with a centered title.

TTekmal-Bhavana

82% match

Loading thumbnail…

Fork of ICE-7 Line Chart

This fork of ICE-7 Line Chart visualizes the cost of sales from 2000 to 2013 using an SVG line chart. The chart plots year-based data on the x-axis against cost values on the y-axis, with axis labels and a title displayed directly. Data is loaded from a CSV file via `d3.csv`, and the visualization is built with D3 v5, using `scaleTime`, `scaleLinear`, `line`, `axisBottom`, and `axisLeft` to construct the scales, path, and axes. The final rendering is a red stroke line path within a 960x500 SVG container.

Bbhanuteja1807@gmail.com

81% match

Loading thumbnail…

ICE-7 Line Chart

This visualization presents a line chart of heart disease data, plotting cholesterol levels against patient age. The chart uses D3.js v5 to create SVG-based graphics, with time and linear scales (`d3.scaleTime`, `d3.scaleLinear`) mapping data to positions on axes generated by `d3.axisBottom` and `d3.axisLeft`. A path generated by `d3.line` connects the data points. Data is loaded from a remote CSV file and parsed before rendering.

GGogineni44

80% match

Loading thumbnail…

Fork of ICE-7 Line Chart

This fork of an ICE-7 line chart visualizes the cost of sales from 2000 to 2013 using D3 v5. It renders an SVG line chart with time-scaled X-axis and linear Y-axis, using D3's `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` APIs. The chart loads CSV data from a GitHub gist, converts the Year field to `Date` objects, and draws a red line path via `line()`. The visualization includes labeled axes, a title, and grid lines generated through tick marks.

AAmrutha Mohan

80% match

Loading thumbnail…

Fork of ICE-7: Fork of Line Chart

A line chart depicts the population of India from 1955 to 2020, with the x-axis showing years and the y-axis showing population counts. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to render an SVG path. Data is loaded asynchronously from a GitHub-hosted CSV file via `d3.csv`, with axes and titles styled through CSS. The chart applies margins, tick padding, and removes default domain lines for a cleaner presentation.

Bblikitha

80% match

Loading thumbnail…

Fork of Fork of ICE-7 Line Chart

This visualization shows a single red line chart tracking one data series across time, with a clean, labeled SVG rendering and a bold title. The chart uses D3 v5 to create scales and axes, with tick marks and axis labels styled via CSS. The line itself is drawn as an SVG path with the `line_path` class, while the data is bundled and executed from `bundle.js`, suggesting the data is pre-processed or loaded separately. The page layout centers the chart within a 960x500 viewport.

Aabdhaseeeb

79% match