jayanthkumar22

@jayanthkumar22·7 public vizzes

D3.js Bar Chart Example

This D3.js bar chart example visualizes country populations using a clean, static layout rendered with SVG. The chart employs `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with custom axis components built from `d3.axisBottom` and `d3.axisLeft`. Population data is loaded asynchronously via `csv` from the D3 library, pulling from a remote URL, and displays the top 20 countries by 2010 population. The visualization is built within a React framework using an ES6 module structure, with bars styled in steelblue.

Jul 22, 2023

Loading thumbnail…

Activity 7

This bar chart displays the population of the top 20 countries in 2020, sorted vertically with a horizontal bar for each country. The visualization uses React with D3 v5, employing `d3.csv` to load the data, `d3.scaleBand` for the y-axis, and `d3.scaleLinear` for the x-axis. Population values are formatted with D3’s `d3.format` to abbreviate large numbers. The chart is rendered as an SVG with custom React components for the axes and bars, and includes a tooltip showing the exact population on hover.

Jul 22, 2023

Loading thumbnail…

Activity 7

This example shows a horizontal bar chart ranking 20 countries by their 2020 population, with the data loaded from a CSV file and rendered as SVG. The React-based code uses D3 v5’s `scaleBand`, `scaleLinear`, `csv`, and `max` to map country names to rows and population values to bar widths, while custom `AxisBottom` and `AxisLeft` components generate ticks and labels. Bars are drawn as colored rectangles with tooltips showing formatted population values.

Jul 22, 2023

Loading thumbnail…

Reusable Scatter plot Activity 8

This animated scatter plot visualizes the Iris dataset, switching between four different flower measurements on the x-axis while sepal length remains constant on the y-axis. Points are colored by species (setosa, versicolor, virginica) and use custom ellipse-like shapes via circle elements with rx and ry attributes. The visualization updates every few seconds using setInterval, re-rendering axes through the d3.scaleLinear, axisLeft, and axisBottom APIs. A custom scatterPlot function manages the reusable chart structure, with data loaded via d3.csv from a GitHub gist and rendered as SVG.

Jul 21, 2023

Loading thumbnail…

BMI by Age

A scatterplot-style chart visualizes average Body Mass Index across age, binned into uniform intervals, with orange bars rising from the baseline to show BMI values per age group. The visualization uses D3 v7’s `bin` generator to group CDC dataset records by age, then computes each bin’s mean BMI via `sum` before rendering as SVG rectangles. Linear scales map age and BMI to pixel coordinates, while `axisBottom` and `axisLeft` add tick marks with custom labels, and axes are styled with muted colors and sans-serif typography.

Jun 14, 2023

Loading thumbnail…

Transforming Data

This example demonstrates how D3 can transform raw CSV data into a meaningful summary using the `d3.flatRollup` and `d3.sum` APIs to aggregate the iris dataset by species and calculate the average sepal length. The visualization renders the resulting summary as formatted JSON text inside a `<pre>` element, showcasing D3's data loading, parsing, and transformation workflows. It uses `d3.csvParse` to load and type-convert the dataset, with state management handled through a custom `setState` function. The example highlights dynamic data fetching, transformation, and reactive rendering in a single-page D3 application.

Jun 14, 2023

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

Randomly positioned SVG polygons overlap across a green canvas, their semi-transparent fills cycling through bright RGB values as each shape rotates and scales unpredictably. A dense Buddha path is layered over this generative backdrop, rendered in a contrasting dark stroke. React manages the component state, while raw SVG elements, including `polygon` and `path`, handle the visual output. The code relies on `Math.random()` for placement and color generation, producing a chaotic, intersecting composition.

Jun 12, 2023