Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published0🌍 Public

Last edited Mar 21, 2024

Created on Mar 21, 2024

This scatter plot visualizes birth rate trends for U.S. states, comparing 2017 values on the x-axis against 2018 values on the y-axis, with each state represented as a green dot. The visualization uses D3.js v6 to load CSV data from a GitHub gist, parse it, and render an SVG chart with labeled axes. The code implements linear scales with `d3.scaleLinear`, draws axes via `d3.axisBottom` and `d3.axisLeft`, and creates circles with `append('circle')`. Interactive mouseover events log state-specific data to the console.

AI-generated description

-Visualisation of Scatter Plots This project uses D3.js to build a scatter plot that shows the trends in birth rates by state in the United States. retrieves information from a CSV file and creates a plot with movable elements.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Scatter Plot - ICE 6

This example visualizes birth-rate trends across U.S. states by plotting each state as a dot, comparing values from 2017 on the x-axis against 2018 on the y-axis. The scatter plot uses a fixed square scale domain (250,000 to 600,000) to emphasize changes between the two years, with green circles outlined in black. The code loads a CSV dataset via `d3.csv`, parses numeric fields, and renders the chart using D3 v6 with SVG elements, axes via `d3.axisBottom` and `d3.axisLeft`, and circle elements bound to the data. A mouseover handler logs the state and its two-year values to the console, but no interactive tooltip is displayed.

NNandini Maddula

89% match

Loading thumbnail…

Fork of HTML Starter

This horizontal bar chart visualizes the number of births across ten U.S. states, using a viridis color scale to encode magnitude. The chart displays the data as animated bars that grow from zero to their final width, with a color gradient legend beneath. Built with D3 v6, the visualization uses `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `interpolateViridis` for coloring. Hovering over a bar triggers a tooltip showing the state name and exact birth count. The underlying data comes from a CSV file containing state names and their corresponding birth statistics.

NNandini Maddula

87% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a bar chart visualization of population counts for several U.S. states, using a simple dataset of state names and numerical values. The rendering is built with React for component structure and D3.js (v5) for data binding and scale creation, while the visual marks are drawn as SVG rectangles. The chart displays each state’s value as a horizontal bar, with the length of each bar proportional to the population figure. The code uses D3’s `scaleLinear` to map data values to pixel widths, and React manages the dynamic rendering of the bars based on the imported CSV data.

NNandini Maddula

81% match

Loading thumbnail…

Fork of Bar Chart - ICE 6

This bar chart visualizes birth counts for ten U.S. states. The bars are rendered as SVG rectangles, colored with a viridis color scale based on the birth value, and animated to grow to their final width over one second. A linear gradient, defined in the SVG defs, covers the bars with a pink-to-black fill. The chart uses D3 v6 modules like `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `interpolateViridis`. Data is loaded from `data.csv` asynchronously. Hovering over a bar displays a tooltip with the state name and birth count.

NNandini Maddula

80% 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 Fork of HTML Starter

This interactive pie chart visualizes country-level data for 2022, loading CSV data from a GitHub gist via the `d3.csv` API. It uses D3 v7’s `pie()` and `arc()` generators to compute and draw SVG paths for each slice, with colors assigned by `scaleOrdinal` and `schemeCategory10`. Hovering over a slice or label changes its fill to orange, providing immediate feedback. The chart is rendered inside a static SVG container, with text labels positioned at arc centroids using `arcGenerator.centroid()`.

Mmukundakrishna.r@gmail.com

77% match

Loading thumbnail…

Fork of A4_Bar-chart

This fork of A4_Bar-chart presents a scatter plot of U.S. state data from the 2014_usa_states.csv file, mapping two numeric columns to axes. It uses d3.csv to load the data, then applies d3.scaleLinear for x and y scales, d3.extent for domain calculation, and d3.axisBottom and d3.axisLeft to render axes. Circles are appended via the SVG selection and enter/exit pattern, colored steelblue with black strokes. The chart is rendered entirely with SVG elements, sized at 800×600 pixels with margins.

Ppavan vasamsetti

77% match

Loading thumbnail…

Fork

This horizontal bar chart displays the population of U.S. states in 2014, sourced from a Plotly-hosted CSV dataset. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to map population values to bar lengths and state names to rows, with `axisLeft` and `axisBottom` rendering the axes. Custom tick formatting via `format('.3s')` abbreviates large numbers, while red bars and a title clarify the data. The code loads the CSV with `d3.csv`, converts population strings to numbers, and draws the chart in an SVG.

Ppavan vasamsetti

77% match