Skip to main content
SimilarExport ZIP
100%

Coursework 1.js!

✓ Published1🌍 Public
FFarhaan Qazi
Last edited Mar 2, 2023
Created on Feb 19, 2023

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.

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
91% match
Loading thumbnail…

Fork of Fork of Coursework 1.js!

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.

FFarhaan Qazi
89% match
Loading thumbnail…

Making bar chart

A horizontal bar chart displays COVID-19 case counts per country, with bars ordered by the data’s CSV order. The visualization uses D3 v5’s `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `axisLeft`/`axisBottom` for gridlines. Data is loaded via `d3.csv` and rendered as SVG rectangles with a steelblue fill, while a clickable “Hello” button triggers a browser alert.

Llori99-data
80% match
Loading thumbnail…

barchart1

This example loads a CSV dataset containing COVID-19 statistics for Afghanistan, using d3.csv to parse the data and log it to the console. The page sets up a 960x500 SVG canvas with D3 v5, though no visual marks are yet rendered. The code demonstrates importing specific D3 modules like `select` and `csv`, preparing the foundation for future bar-chart visualizations of the pandemic data.

RRockkmr
80% match
Loading thumbnail…

<iframe width="560" height="292" src="https://vizhub.com/blikitha/f111e8fa345c43fa9a6e6d45227a5024?mode=embed" title="Untitled" frameborder="0" ></iframe>

This example presents a horizontal bar chart that displays the top 20 countries by reported COVID-19 cases, based on data from a CSV file loaded via `d3.csv`. The visualization uses React to manage component state and render an SVG, with D3 v5 scales (`scaleBand` and `scaleLinear`) to map country names and case counts to pixel positions. Each rectangle’s width encodes the case count, and the chart includes a blue gridline for the x-axis ticks.

Bblikitha
80% match
Loading thumbnail…

Let's make a face with D3.js!

This example visualizes the total number of COVID-19 infections per country using a simple bar chart. It loads data from a CSV file containing country names and case counts, then displays the values as vertical bars on an SVG canvas. The chart is built with D3.js version 5, using the `d3.select` and `d3.csv` APIs to fetch and parse the data, while the SVG element is sized directly from its width and height attributes. The bars represent the relative infection totals, with the US showing the largest value.

Jjorgebotas
79% match
Loading thumbnail…

Making a bar chart

This example shows a bar chart of COVID-19 total cases by country, ordered from China at the top to Qatar at the bottom. The chart is rendered as an SVG using the D3.js library, which loads the CSV data asynchronously via the `csv` function. The code selects the existing SVG element using `select` and reads its width and height attributes with `attr` to establish the chart dimensions.

Kkhuton
79% match
Loading thumbnail…

D3.js v7+ Example

This dashboard visualizes COVID-19 data across multiple countries using linked SVG charts, including a world choropleth map with zoom and tooltips, bar charts for latest case counts, a ranked list of the top six infected nations, and a multi-line time-series graph with a brushable context view. Built with D3 v7, it employs d3.geoPath, d3.geoMercator, d3.scaleThreshold, d3.brushX, and d3.zoom for interactive exploration. Data is loaded from local TSV/CSV files, with animations and transitions updating the visualizations dynamically.

FFarhaan Qazi
79% match