kotagirivarshith2411@gmail.com

@Varshithk2411·4 public vizzes

PieChart-D3JS

This pie chart visualizes the proportional distribution of six named categories (A–F) using their corresponding numeric values, with each slice labeled and a color-coded legend displayed below the chart. The visualization is rendered as SVG using D3.js v7, leveraging `d3.pie()` to compute arc angles, `d3.arc()` for path generation, and a `d3.scaleOrdinal` with the `schemeCategory10` color palette. The direct dataset is hardcoded, and slices are drawn via an enter selection appended to a centered group element.

Apr 13, 2025

Loading thumbnail…

AreaChart-D3

This D3.js v7 example renders an area chart titled "Website Visitors Per Day" from hardcoded sample data. The visualization maps days of the week on the x-axis and visitor counts on the y-axis, with the area beneath the line filled in steelblue. Using the SVG rendering approach, it employs `d3.scalePoint` and `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and the `d3.area` generator to create the filled path. Axis labels "Day" and "Number of Visitors" are added via text elements.

Apr 13, 2025

Loading thumbnail…

Fork of Activity 6_Task 1

This example presents a horizontal bar chart showing population by country, with each bar’s length encoding the population value and country names on the y-axis. The chart uses React to render SVG elements, with scales and axes created via d3.scaleBand and d3.scaleLinear. Data is loaded asynchronously from a CSV file using d3.csv, and population values are formatted using d3.format to display compact labels like billions. The visualization includes axis labels, tick marks, and styled bars with distinct colors.

Apr 6, 2025

Loading thumbnail…

Activity 6_Task 1

This example shows the 2020 populations of 30 countries as a horizontal bar chart. The visualization uses SVG rendering through React, with D3 version 5 APIs including `scaleBand`, `scaleLinear`, and `max` to map values. A `csv` loader fetches data from a remote GitHub-hosted file. Bars are drawn as `<rect>` elements via the custom `Marks` component, with axes generated by `AxisBottom` and `AxisLeft`. Tick labels use the `format` function to abbreviate large numbers.

Apr 6, 2025