A6_LineChart with 4 qualitative color scale

100%

A6_LineChart with 4 qualitative color scale

✓ Published0🌍 Public

Last edited Mar 10, 2024

Created on Mar 10, 2024

This line chart visualizes the GDP of four Southeast Asian countries—Vietnam, Thailand, Indonesia, and Malaysia—from 2012 to 2022, using a qualitative color scale with distinct hues for each nation. The chart employs D3.js v7 to create SVG paths for each country’s trend line, with an ordinal color scale mapping countries to specific colors. A legend generated via d3-legend and an ordinal color scale is displayed horizontally. The data is loaded from a CSV file and parsed, with axes rendered using d3.axisBottom and d3.axisLeft.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays GDP against female school enrollment percentages for several South Asian and Oceanian countries, with each country represented by a distinct colored line. The data originates from Gray Area’s Data Canvas - Sense Your City project. The visualization uses D3 v5’s `scaleLinear`, `scaleTime`, `line` generator with `curveBasis`, and `nest` for grouping, rendering vector graphics via SVG. A custom `colorLegend` function adds an ordinal color scale legend, while axis labels and gridlines are styled through CSS.

SSukesh Kumar

75% match

Loading thumbnail…

D3 - Line chart (multiple)

This example displays multiple line charts on a single SVG canvas, tracking the average human wellness index for four countries (India, Sri Lanka, Vietnam, Cambodia) from 2010 to 2019. It first establishes linear scales for time and wellness values, then uses d3.line with path elements to draw each country’s trend, colored via an ordinal scale. The code employs d3.axisBottom and d3.axisLeft for axes, plus the d3-legend library’s legendColor for a horizontal ordinal legend. Data is loaded from a remote CSV using d3.csv, with parsing and flattening for the y-domain.

CChandana Srinivas

72% match

Loading thumbnail…

Line Chart

This line chart visualizes GDP growth for top countries across 2017–2018, using a time-scaled x-axis and linear y-axis. The SVG rendering relies on D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to draw the path. Data is loaded from a CSV via `d3.csv`, with axis labels styled through CSS. The chart includes grid lines and a single red trend line, with the y-axis tick format simplified using a custom formatting function.

SSRI RAM REDDY KOTERU

71% match

Loading thumbnail…

A7_HeatMap

This heat map visualizes GDP per capita for eight countries across the years 2017–2021. It uses a sequential color scale with the `d3.interpolateTurbo` interpolator, mapping GDP values to colored cells within a banded grid. The chart is rendered as an SVG using D3 v7, with axes for location and year, a horizontal legend, and tooltips that display the exact GDP value on hover. Data is loaded from a remote CSV file via `d3.csv`.

DDuc Pham

71% match

Loading thumbnail…

Assignment 6 -- Multiline chart with a qualitative color scale

A multiline chart shows annual net forest conversion for South American countries from 1990 to 2015, with each country’s time series drawn as a separate line using a qualitative color scale via d3.scaleOrdinal and d3.schemeCategory10. The visualization uses d3.csv to load the data, d3.nest to group by entity, and d3.line with d3.scaleTime and d3.scaleLinear for axes. SVG paths render the lines, and hover interactions trigger a yellow tooltip displaying the country name. The chart includes a legend and title, with the y-axis domain set from the minimum value to zero.

Vvishusikka

71% match

Loading thumbnail…

Multiple Line Chart of employment rate Final

This visualization compares the employment rates of Germany, Czech Republic, Thailand, and the United States from 1992 to 2022, plotting each country's ratio as a separate colored line on a shared time axis. The data is loaded as a CSV from a GitHub repository. Built with D3 v5, it uses `scaleTime` for the x-axis, `scaleLinear` for the y-axis, `nest` to group data by country, and a `lineGenerator` with `curveBasis` to draw smooth paths. A custom `colorLegend` component renders the categorical color scale in the SVG output.

CChawin Sungwalngern

69% match

Loading thumbnail…

Fork of ICE-7 Line chart SKM

This line chart visualizes GDP trends for multiple countries over time, with each line representing a single country’s annual GDP values. The chart uses a linear x-axis for years and a linear y-axis for GDP, with colored lines distinguishing countries. It is built with D3 v7, loading data from a CSV file via `d3.csv`, and renders as an SVG using `d3.line` and `d3.scaleLinear`. Axis labels are rotated for readability, and the chart is styled with custom CSS for a clean, minimal presentation.

Mmukundakrishna.r@gmail.com

68% match

Loading thumbnail…

Fork of Fork of Line Chart

This example visualizes India’s GDP in billion US dollars from 2009 to 2022 as a red line chart. The chart uses D3 v5 with SVG rendering, employing `scaleTime` and `scaleLinear` for axes, `axisBottom` and `axisLeft` with grid lines, and a `line` generator. Data is loaded from a CSV file via `d3.csv`, parsed with `new Date` and numeric conversion, then drawn in a centered group with margins, axis labels, and a title.

SSumanya4

68% match