Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published0🌍 Public

Last edited Feb 19, 2024

Created on Feb 19, 2024

This bar chart visualizes the distribution of diseases in 1968, showing the number of infections for each disease type. Built with D3 v6 and SVG, it uses `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the numeric y-axis, and `d3.axisBottom`/`d3.axisLeft` for axes. The dataset is loaded via `d3.csv` from a GitHub Gist URL. Interactive tooltips appear on mouseover, displaying infection counts, implemented with D3 selection and event handlers.

AI-generated description

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

Similar vizzes

Loading thumbnail…

d3 bar chart

This bar chart visualizes the distribution of disease types by number of infections in 1968, using a logarithmic y-scale to accommodate wide value ranges. Built with D3 v6, it renders SVG rectangles with maroon fills that transition to crimson on hover, supported by an interactive tooltip displaying exact infection counts. The chart includes labeled axes, a title, and data simplified from the CORGIS health dataset, demonstrating the use of d3.scaleBand, d3.scaleLog, d3.axisBottom, and d3.axisLeft.

AAndrew

87% match

Loading thumbnail…

Fork of d3 bar sequential

This bar chart shows the distribution of disease types in 1968, using a sequential color scale to encode the number of infections from light to dark orange. The chart displays each disease category as a separate bar, with the color intensity reflecting the infection count. Built with D3 v6, the visualization uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.scaleSequential` with the ColorBrewer OrRd scheme to map values to colors. A legend, created with the d3-legend library, accompanies the chart, and the data is loaded from a CSV file. The SVG rendering includes labeled axes for disease type and infection numbers, with the chart styled on a black background.

Eeya.chaabani99@gmail.com

86% match

Loading thumbnail…

d3 bar sequential

This example visualizes the distribution of infectious diseases in 1968 using a sequential bar chart, with each bar’s height and color intensity encoding the number of infections. The chart employs a sequential color scale based on ColorBrewer’s OrRd scheme, mapping values from 0 to 150,000, and includes a legend generated with the d3-legend library. The visualization is rendered as SVG using D3 v6, with axes, labels, and a dark background for contrast. The data, simplified from the CORGIS Global Development dataset, is loaded from a CSV file, and the chart uses `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the quantitative y-axis.

AAndrew

82% match

Loading thumbnail…

HTML Starter

This example demonstrates a bar chart visualization of COVID-19 data, showing confirmed cases, recoveries, and deaths across multiple countries on a specific date. The chart uses the D3.js library, specifically `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with SVG rendering for the bars. The data is loaded from a CSV file containing country-level pandemic statistics. The visualization includes axes with labels and interactive mouseover/mouseout events, though the actual data displayed focuses on the initial case counts from January 2020.

SSarahKiyani

81% match

Loading thumbnail…

Fork of HTML Starter

A bar chart displays national-level data from a CSV dataset, filtered to include all years for the "National" level. The visualization uses D3.js to create an SVG rendering, with a band scale for the x-axis and a linear scale for the y-axis. Bars are drawn as rectangles filled with steelblue, and axes are generated using `d3.axisBottom` and `d3.axisLeft`. The data is loaded asynchronously via `d3.csv` from a GitHub gist URL.

Pprathyusha-reddy-arch

79% match

Loading thumbnail…

Fork of HTML Starter

This visualization uses a scatterplot to show cancer mortality trends in the USA from 1990 to 2019, with each circle representing a specific cancer type’s annual death count. It displays data from a CSV file loaded via D3’s `csv` function, with time-scaled x-axis and linear y-axis. React manages the component state and lifecycle, while D3’s `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom` render the axes. Hovering over a circle triggers a tooltip with details, and a color-coded legend identifies each cancer type.

NNandini Maddula

79% match

Loading thumbnail…

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

This bar chart displays the top 20 countries by reported COVID-19 cases, using horizontal bars to compare values. The visualization loads CSV data via `d3.csv` and slices the first 20 rows, with React managing state and rendering SVG elements. Scales are created using `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis, with axis ticks manually generated and mapped to React components. Each bar is drawn as a `rect` element, with the x-axis grid lines and tick labels rendered as SVG `line` and `text` elements.

Bblikitha

78% match

Loading thumbnail…

Fork of ice-6

A horizontal bar chart shows the number of hospitalized confirmed COVID-19 patients for the top 20 counties, fetched from a CSV file via `d3.csv`. The chart uses React state and effects to load data, then renders SVG `rect` elements scaled with `d3.scaleBand` for counties and `d3.scaleLinear` for patient counts. Orange gridlines and tick labels are drawn manually, with axes positioned using SVG transforms.

Hhm0421

78% match