Skip to main content
SimilarExport ZIP
100%

Fork of ICE-7 Line Chart

✓ Published0🌍 Public
Aav.dj.2000@gmail.com
Last edited Apr 30, 2023
Created on Apr 30, 2023
Forked from 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.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Line Chart - Project 16

This visualization shows the relationship between glucose levels and BMI across countries, with each line representing a country's trajectory through the dataset. The chart uses a D3 line generator with curve basis to create smooth paths, scales from d3.scaleLinear for both axes, and d3.scaleOrdinal with schemeCategory10 for color encoding. Data is loaded from a CSV file using d3.csv, nested by country with d3.nest, and rendered as SVG. A custom colorLegend component displays the categorical color mapping.

Aav.dj.2000@gmail.com
88% match
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
84% match
Loading thumbnail…

Fork of ICE-7 Line chart SKM

This line chart visualizes how country-specific data values change over time, with each country represented by a distinct colored line from the D3 categorical color scheme. It emphasizes comparison of trends across multiple series on a shared time axis, highlighting overall patterns and disparities in the dataset. The visualization is built using D3 v7, fetching data from a CSV file and rendering it as SVG. It uses `d3.csv` to load the data, `d3.scaleLinear` for both axes, and `d3.line` with `d3.axisBottom` and `d3.axisLeft` to draw the chart. The x-axis represents years, while the y-axis maps the numeric values, with rotated tick labels for clarity.

Mmukundakrishna.r@gmail.com
80% 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
80% match
Loading thumbnail…

Fork of ICE-7 Line Chart

This example visualizes nutritional component comparisons across ten McDonald’s menu items, plotting three lines for total fat, protein, and carbohydrates on a shared band scale. It uses D3 v7 with SVG rendering, employing `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` with `curveMonotoneX` for smooth paths. Data is loaded from a CSV via `d3.csv`, and `d3.schemeCategory10` colors the lines. The chart includes rotated x-axis labels and a legend, with axes generated by `d3.axisBottom` and `d3.axisLeft`.

Mmanthenasirisha06@gmail.com
79% 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
78% match
Loading thumbnail…

Fork of ICE-7 : Reusable Scatter Plot

This example visualizes diabetes-related health metrics in a responsive scatter plot, mapping pregnancies on the x-axis, glucose levels on the y-axis, and varying symbol shapes based on skin thickness. It uses d3.scaleLinear, d3.scaleOrdinal, d3.axisLeft, d3.axisBottom, d3.symbols, and d3.symbol to generate SVG marks. The reusable chart function supports custom accessors, margins, and symbol size, drawing data from a CSV of diabetes records. The plot fills the browser window with hidden scrollbars and large axis tick text.

MM Hema
78% match
Loading thumbnail…

Fork of Fork of ICE5 - chaturya d3.js parsing

This example shows a BMI bar chart with two side-by-side graphs: one displaying BMI values per person, and another comparing Height and Weight as grouped bars. The visualization uses React for component structure and D3 v5 for data parsing via `d3.csv` and scales (`scaleBand`, `scaleLinear`). A CSV from GitHub Gist provides the dataset, which is loaded asynchronously and rendered as SVG with rounded rects, rotated axis labels, and custom axis text.

Rrobertotienonyaranga@gmail.com
78% match