Fork of Fork of Coursework 1.js!

100%

Fork of Fork of Coursework 1.js!

✓ Published0🌍 Public

Last edited Mar 11, 2023

Created on Feb 20, 2023

A static bar chart displays COVID-19 case counts for eleven countries, using green bars to encode the `covid_cases` value against a categorical country axis. The visualization is built with D3 v5, employing `scaleLinear` for the value axis and `scaleBand` for the categorical axis, with `axisLeft` and `axisBottom` to render the chart's axes. The data is loaded from a CSV file via `d3.csv`, and the bars are drawn as SVG `<rect>` elements. The chart's source code attempts to fetch a different remote dataset, but the final render uses the local `dataset.csv` file.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Coursework 1.js!

This example visualizes COVID-19 case counts for Afghanistan using a horizontal bar chart rendered in SVG. The chart displays daily cumulative case numbers along the x-axis against the country name on the y-axis, with green bars representing case values. The implementation uses D3 v5 APIs including `select`, `csv`, `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to load data from `dataset.csv`, scale the values, and generate the interactive axes and rectangles that comprise the visualization.

FFarhaan Qazi

90% match

Loading thumbnail…

Coursework 1.js!

This example displays a horizontal bar chart of COVID-19 case counts by country, using D3.js v5 to generate SVG rectangles. The code loads data from `dataset.csv`, scales case values linearly to bar widths with `d3.scaleLinear`, and maps country names to vertical positions using `d3.scaleBand`. The `select` and `csv` APIs from D3 handle DOM and CSV parsing. The visualization shows only rectangles without axes or labels, representing the ranking of cases from Afghanistan to Botswana.

FFarhaan Qazi

89% match

Loading thumbnail…

Fork of Fork of Fork of Bar Chart + Axis customisation

A horizontal bar chart displays total COVID-19 cases for eleven countries, using a linear gradient fill and customized axes. The visualization employs D3 v6 with `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render SVG bars, while tick labels use a text gradient and formatted numbers via `d3.format`. Data comes from a CSV file containing country names and case totals. The chart includes a title and axis labels, with gridlines removed from the axes.

YYash_Mistry

88% match

Loading thumbnail…

Fork of Fork of Fork of Bar Chart + Axis customisation

This bar chart visualizes total COVID-19 cases across eleven countries, using a horizontal layout with a blue-pink gradient fill for bars. The visualization customizes both axes: the y-axis removes tick lines and domain, while the x-axis formats values using D3’s `format` function (e.g., converting to compact notation) and includes a labeled axis title. Data is loaded from a CSV file using `d3.csv`, with scales created via `scaleLinear` and `scaleBand`. Text elements also feature gradient fills, and margins are explicitly set to position the chart within an SVG canvas.

RRohit-2710

88% match

Loading thumbnail…

Fork of Fork of Fork of Bar Chart + Axis customisation

This bar chart displays COVID-19 total cases per country, with countries listed on the y-axis and case counts on the x-axis. Each bar is filled with a purple-to-pink linear gradient, and the axis labels use a separate gradient for text styling. The visualization is built with D3 v6, using `scaleLinear` and `scaleBand` to map the data, which is loaded from a CSV file. The code customizes the axes and text appearance through CSS rules, including tick label colors and font sizes.

DDmitrii

86% match

Loading thumbnail…

Fork of Fork of Fork of Bar Chart + Axis customisation

This horizontal bar chart displays COVID-19 case totals for ten countries, using a purple-to-pink gradient fill for the bars and a separate gradient for axis tick labels. The visualization uses d3.csv to load the data, d3.scaleLinear for the x-axis, d3.scaleBand for the categorical y-axis, and d3.axisLeft and d3.axisBottom with custom tick formatting to abbreviate large numbers (e.g., converting billions to "B"). Both axis domain lines and tick lines are removed for a cleaner design.

SSudharsan A

85% match

Loading thumbnail…

Fork of Fork of Fork of Bar Chart + Axis customisation

A horizontal bar chart displays total COVID-19 cases for ten countries, sorted from highest (USA) to lowest (Argentina). The visualization uses D3 v6 with SVG rendering, employing `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the chart. Custom axis formatting converts large numbers using the `format` function, replacing 'G' with 'B' for billions. The bars and tick labels are styled with linear gradients defined in SVG defs, while the x-axis includes a custom label and tick marks that extend across the plot area. Data comes from a CSV file loaded via `d3.csv`.

Ttolik518

85% match

Loading thumbnail…

Fork of Fork of Bar Chart + Axis customisation

This example shows the total COVID-19 cases for ten countries in a horizontal bar chart, with a custom gradient fill for the bars and gradient text for the axis tick labels. It loads data from an external CSV file using `d3.csv`, then renders SVG rectangles scaled with `scaleLinear` for the x-axis and `scaleBand` for the y-axis. The chart includes a titled x-axis with formatted tick labels via `format('.2s')`, and uses `axisBottom` and `axisLeft` for axes.

RRohit-2710

84% match