Fork of ICE7_Linechart

100%

Fork of ICE7_Linechart

✓ Published0🌍 Public

Last edited Apr 8, 2023

Created on Mar 30, 2023

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.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE-7 Line Chart

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.

Cchandanagandla

82% match

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

80% match

Loading thumbnail…

Fork of ICE7 Line Chart Q3

This visualization depicts India's deaths from 1960 to 2020, using a line chart to trace consumption values over time. The code employs d3.scaleTime and d3.scaleLinear for the axes, with d3.axisBottom and d3.axisLeft to generate tick marks and labels. The line is drawn using d3.line, which maps data points to pixel coordinates. Data is loaded via d3.csv from a GitHub-hosted CSV file, with year values parsed as dates. The chart is rendered as SVG, with styled axes, labels, and a blue line path defining the trend.

Aaashrithd4

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

77% match

Loading thumbnail…

Fork of Fork of ICE-7 question 4: Area chart

This area chart shows the death rate in India from 2000 to 2012, with years on the x-axis and the death rate on the y-axis. It uses d3.scaleTime and d3.scaleLinear to map the data, while d3.area and d3.curveBasis generate a smooth, grey-filled path. The chart displays axes with d3.axisBottom and d3.axisLeft, including gridlines and labeled axis titles, and loads CSV data from a GitHub gist. Rendered as SVG, the visualization includes a blue title and the d3.format function for tick labels.

Aaashrithd4

75% match

Loading thumbnail…

Fork of Fork of Fork of ICE-7 question 4: Area chart

This area chart displays death rates in India from 2000 to 2012, with years on the x-axis and the death rate on the y-axis. It uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `area` generator with `curveBasis` to render a smooth filled path in SVG. Data is loaded via `csv` from a GitHub gist, and the chart includes labeled axes and a title.

SSonuSriN

75% match

Loading thumbnail…

HeartDisease

This example visualizes the relationship between SleepTime and BMI using a scatter plot, where each point represents an individual, colored red or green based on HeartDisease status. The x-axis maps BMI and the y-axis maps SleepTime, with point sizes varying according to PhysicalHealth and MentalHealth values. It loads CSV data via d3.csv, scales the axes with d3.scaleLinear, renders circles in SVG, and uses d3.axisBottom and d3.axisLeft for the axes. The chart’s margins and dimensions adapt to the browser window.

Cchandanagandla

75% match

Loading thumbnail…

Fork of Untitled

This bar chart displays the relationship between BMI and age group from a heart disease dataset. Each bar represents the BMI value for a specific age category, plotted along the x-axis. The chart uses D3.js v4 with SVG rendering, specifically leveraging `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the continuous y-axis. The data is loaded from a CSV file using `d3.csv`, and bars are drawn as SVG rectangles with the class "bar". Axes are added using `d3.axisBottom` and `d3.axisLeft`.

Cchandanagandla

74% match