Skip to main content
SimilarExport ZIP
100%

Fork of line chart

✓ Published0🌍 Public
Kkoppulasudhakar03@gmail.com
Last edited Oct 25, 2025
Created on Oct 25, 2025
Forked from Hello VizHub

This line chart displays fertilizer use per hectare for ten countries, using a green line and dark green circles positioned along a horizontal axis of country names. The y-axis maps fertilizer values from zero to the dataset’s maximum. The code loads data from a CSV file via `d3.csv`, sorts records, and renders the visualization with D3 v7’s `d3.scaleBand`, `d3.scaleLinear`, and `d3.line` in SVG. Axis labels and rotated tick text are added using `d3.axisBottom` and `d3.axisLeft`. Circle elements include `title` tooltips showing country and value.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the relationship between fertilizer use and crop yield for ten countries, using data from a CSV file. Each circle represents a country, with its position determined by the `d3.scaleLinear` axes and its color assigned by `d3.scaleOrdinal` with the `d3.schemeSet2` palette. The circles animate into view using `transition()` with staggered delays, and hovering reveals a tooltip via `d3.select` and `tooltip.html`, while also highlighting the selected point with a stroke.

Kkoppulasudhakar03@gmail.com
83% match
Loading thumbnail…

Fork of area chart

This fork of an area chart visualizes agricultural land percentage across ten countries using data from a CSV file. It encodes each country as a categorical band on the x-axis with a filled polygon drawn by `d3.area()`. The y-axis uses a linear scale to map values, and `d3.scaleBand()` positions the countries. The SVG rendering includes rotated x-axis labels, grid-free axes via `d3.axisBottom()` and `d3.axisLeft()`, and annotations for country, percentage, and title. The lightgreen fill with darkgreen stroke highlights the distribution from Nigeria's 77.4% to Japan's 12.3%.

Kkoppulasudhakar03@gmail.com
79% match
Loading thumbnail…

Fork of Fork of PIE CHART

This example visualizes country-level data over time as a multi-line chart, with each line representing a country’s values across a series of years. The chart is rendered in SVG using D3 v7, fetching data from a CSV file via `d3.csv`. It employs `d3.scaleLinear` for both axes, `d3.line` to generate the paths, and `d3.axisBottom` and `d3.axisLeft` for tick marks, with rotated x-axis labels for readability. Each country’s line is colored using `d3.schemeCategory10`.

Mmukundakrishna.r@gmail.com
77% match
Loading thumbnail…

Fork of Making a bar chart

This horizontal bar chart displays population figures for ten countries, using data from a CSV file with populations scaled by a factor of one thousand. The visualization relies on D3 v5’s `scaleLinear` for the x-axis and `scaleBand` for the y-axis, with SVG rectangles representing each country’s value. Axes are generated via `axisBottom` and `axisLeft`, while tick labels are formatted using `format` to abbreviate numbers, and gridlines are styled through CSS. The chart includes custom axis titles and a chart title, all rendered as SVG elements.

Llinyyyyyyyyy
76% match
Loading thumbnail…

Fork of line graph group-4

This visualization displays inflation rates for 12 countries using a violet line on an SVG chart, with the x-axis showing country names and the y-axis showing inflation values. The chart loads data from a CSV file and renders axes, grid lines, and a thick 6-pixel line using d3.scaleBand, d3.scaleLinear, d3.line, and d3.axisLeft. A blue axis label pair marks the axes as “country” and “inflation,” while text elements position the labels on the chart. The code applies a modified stylesheet that increases font sizes for axis text.

SSurikanti Swathi
76% match
Loading thumbnail…

Fork of Line Chart

This visualization presents a line chart of population over time for different countries, with the year on the x-axis and current population on the y-axis. The code uses d3.csv to load population data from a GitHub gist, then applies d3.scaleTime and d3.scaleLinear to map the data, and d3.line to generate the path. The SVG rendering includes axis labels and a title, with the line path styled in red via CSS. The example demonstrates a straightforward data-driven chart using D3 v5.

0057SatvikDamera
76% match
Loading thumbnail…

Fork of Fork of D3.js Line Chart

This line chart visualizes crime indices for ten countries, with each country plotted along a categorical x-axis and its index value on a linear y-axis. The visualization uses D3.js v7, loading data from a local CSV file via `d3.csv`. The chart is rendered as an SVG using `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and a `d3.line` path with a thick steelblue stroke. Axis labels and ticks are generated with `d3.axisBottom` and `d3.axisLeft`, while custom CSS styles the axes and line.

Bbhanuprasadk19
75% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This fork of a line chart with multiple lines visualizes yearly data across countries, using color-coded lines to show trends over time. The visualization displays the data through D3.js’s `scaleLinear`, `scaleOrdinal`, and `schemeDark2` for color mapping, with a custom `colorLegend` component. Lines are generated with the `line` function and `flatGroup` aggregates data by country. The chart includes axes via `axes` from `@curran/responsive-axes` and a semi-transparent inner rectangle background, with opacity applied to lines for readability.

AAkanksha
75% match