Fork of ic7

100%

✓ Published0🌍 Public

Last edited Mar 25, 2023

Created on Mar 25, 2023

Forked from ic7

This visualization shows the highest nuclear energy consumption from 2010 to 2020 as a line chart, with a green title and red axis labels and blue gridlines. It uses d3.line, d3.scaleTime, d3.scaleLinear, d3.axisBottom, and d3.axisLeft to render an SVG path, parsing data from a CSV file with d3.csv and d3.timeParse. The line’s stroke is brown, and axis labels are formatted with d3.format.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ic7

This example shows the highest nuclear energy consumption from 2010 to 2020, using a line chart that plots yearly values with red tick labels, blue gridlines, and a brown line. The chart uses d3.csv to load data from a GitHub gist, d3.timeParse to convert year strings to dates, and d3.scaleTime and d3.scaleLinear for axes. The line is generated with d3.line, while d3.axisBottom and d3.axisLeft render the axes with custom tick sizing and padding.

Ppreethamkesa

88% match

Loading thumbnail…

ic7

This visualization displays nuclear energy production over time from 2010 to 2019, combining a smooth line and filled area chart to emphasize both trend and magnitude. The x-axis maps years using d3.scaleTime, while the y-axis uses d3.scaleLinear for energy values. The code employs d3.line, d3.area, and d3.curveBasis to generate the curved shapes, with d3.csv loading the data from a GitHub gist. Red strokes and a sky-blue area fill highlight the changes in nuclear usage across the decade.

Ppreethamkesa

85% match

Loading thumbnail…

ICE-7

This example shows a line chart of the highest nuclear energy consumption from 2010 to 2020, with the year on the x-axis and nuclear usage on the y-axis. The visualization uses D3 v5 to load CSV data, parse dates with `d3.timeParse`, and render an SVG with `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generators. The chart includes labeled axes, red tick text, blue grid lines, and a brown stroke for the line path. The data is fetched from a GitHub gist.

Ppreethamkesa

84% match

Loading thumbnail…

ICE-7:Line Chart

This line chart displays the highest nuclear energy consumption from 2010 to 2020, with the year on the x-axis and nuclear usage on the y-axis. Built with D3 v5 and rendered as SVG, the visualization uses `scaleTime` and `scaleLinear` for axes, `axisBottom` and `axisLeft` for ticks, and the `line` generator to create the path. Data is loaded from a CSV file via `csv`, with dates parsed using `d3.timeParse`. The styling uses custom CSS classes for grid lines, labels, and the brown line stroke.

BBajiSharifPatan@my.unt.edu

84% match

Loading thumbnail…

Fork of ICE-7:Area Chart

This example visualizes nuclear usage from 2010 to 2020 as a combined line and area chart, with the red line tracing the trend in units over time and an indigo fill beneath the curve. It uses D3 v5 via the `d3` module, employing `scaleTime` and `scaleLinear` for the axes, `line` and `area` generators with `curveBasis` for smoothing, and `axisLeft`/`axisBottom` for tick marks. The chart loads CSV data from a Gist, parsing the year and unit columns, and renders to an SVG with custom-styled axes and labels.

SSheshidharreddy

80% match

Loading thumbnail…

ICE 7- Line Chart

This line chart displays nuclear energy usage across countries from 2010 to 2019, with year on the x-axis and nuclear usage values on the y-axis. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to render an SVG path. Data is loaded asynchronously from a CSV file via `d3.csv` and parsed into date and numeric values. Axes include tick lines and labels, with custom styling for axis text, titles, and the maroon line path defined in an external stylesheet.

BBajiSharifPatan@my.unt.edu

79% match

Loading thumbnail…

ICE-7:Area Chart

This area chart visualizes nuclear energy usage from 2010 to 2020, with a red line showing the trend and an indigo-filled area beneath it. Time is mapped on the x-axis and nuclear values on the y-axis, using D3 v5 with scaleTime, scaleLinear, axisBottom, and axisLeft. The line and area paths are generated with d3.line and d3.area using curveBasis for smoothing, while CSV data is loaded and parsed via d3.csv and d3.timeParse. Grid lines and styled axis labels enhance readability.

BBajiSharifPatan@my.unt.edu

77% match

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This visualization presents a horizontal bar chart of the top 10 most populous countries based on their nuclear energy usage in 1980, sourced from a CSV file. The chart uses D3 scales (scaleBand and scaleLinear) to map country names and usage values to SVG rectangles. React manages the component state and rendering, while D3’s csv function loads and parses the data. The SVG output includes custom grid lines, tick labels, and styled marks.

BBajiSharifPatan@my.unt.edu

76% match