ikshwakalluri

@ikshwakalluri·7 public vizzes

PieChart_Task9

This example uses D3.js to render a pie chart displaying the populations of the top ten countries. Each slice of the pie corresponds to a country, using a categorical color palette, while a legend lists each country alongside its population value. The chart is generated from JSON data, with the D3 library's `pie` and `arc` functions used to compute the slice geometries, and `scaleOrdinal` for coloring. The entire graphic is drawn as SVG elements within an 860x500 pixel canvas.

Apr 21, 2024

Loading thumbnail…

AreaChart_Task9

This area chart depicts the population of China from 1950 to 2020, using a smooth, curved line to trace the trend over time and a filled orange area beneath it to emphasize the magnitude. The chart is rendered as an SVG using D3.js v5, with data loaded from a remote CSV file via `d3.csv`. Axes are generated with `d3.axisLeft` and `d3.axisBottom`, while the line and area paths are created using `d3.line` and `d3.area` with a basis curve for smoothing. Axis labels are styled via CSS.

Apr 21, 2024

Loading thumbnail…

Acitivity8_Task4

A bubble chart displays the Iris dataset, mapping sepal length to circle radius and petal length and width to x and y axes. Each circle is labeled with its species name. The code uses D3 v7 to load the CSV file, create linear scales, render SVG circles, and add axes and text labels. Hovering highlights a bubble with a black stroke.

Apr 11, 2024

Loading thumbnail…

Activity8_Task3

This example demonstrates a scatter plot of vehicle horsepower versus highway MPG, with data points shaped by car make. The visualization uses D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, and `symbol()` to render distinct shapes, while custom modules handle axes and a shape legend. Data is loaded asynchronously from a CSV file via `csvParse`, and the plot updates responsively to fill the browser window.

Apr 11, 2024

Loading thumbnail…

Task8_Activity2

This example visualizes the distribution of petal lengths across three Iris species using a stacked bar chart with tooltips. The code loads data from a local CSV file and renders the chart as SVG using D3 v7. It employs `d3.stack()` to create stacked segments, `d3.scaleBand()` for the categorical species axis, and `d3.scaleLinear()` for the continuous petal length axis. Interactive mouseover events display tooltips showing the exact petal length for each species and segment.

Apr 11, 2024

Loading thumbnail…

Task8_DataViz

This visualization displays population figures for countries in 2010 using a horizontal bar chart. The chart uses React to render SVG elements, with D3 v5 providing scales and formatting. D3’s `scaleBand` and `scaleLinear` position the bars, while custom `AxisBottom` and `AxisLeft` components create labeled ticks. Data is loaded from a CSV file via D3’s `csv` method, and each bar includes a tooltip showing the formatted population value.

Apr 11, 2024

Loading thumbnail…

Buddha Image

A Buddha silhouette, rendered as a black SVG path, is overlaid with hundreds of semi-transparent colored circles. The circles are generated by three nested loops, each mapping an array of numbers to random x and y coordinates and random RGB fill values. This React application uses ReactDOM to render the SVG output, with circles and the path drawn directly via JSX, creating a colorful, abstract pattern over the figure.

Mar 15, 2024