Sathishvepuri143@gmail.com

@sathish-unt·12 public vizzes

activity 7 2

This visualization displays earthquake magnitudes in Hawaii from 2000 to 2025, using a line chart with a filled area beneath it to emphasize trends over time. The visualization loads data from a CSV file and uses d3.csv to parse it, then employs d3.scaleLinear, d3.axisLeft, d3.axisBottom, d3.line, d3.area, and d3.curveBasis to render the chart. The y-axis scales magnitude from 4 to 6, while the x-axis represents years, with axes labeled "Year" and "Magnitude" respectively.

Nov 5, 2024

Loading thumbnail…

activity 7

A pie chart displays the top 10 most populous countries in 2022, loading CSV data from a GitHub gist. The code uses D3 v5 modules including `d3.csv`, `d3.pie`, `d3.arc`, `d3.scaleOrdinal`, and `d3.format` to generate SVG paths and text labels showing population values in thousands. A legend with colored rectangles and text identifies each country alongside its population count.

Nov 5, 2024

Loading thumbnail…

activity-6-a-4-a

This example visualizes a bubble chart comparing cereal manufacturers, plotting cereal rating against sodium levels, with bubble size representing calorie content and color indicating the manufacturer. The code uses D3v7 to load CSV data, then leverages `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.schemeSet1` for scales and color encoding. It renders bubbles as SVG circles with legends for both size and color, displaying the data from a remote gist CSV file.

Oct 23, 2024

Loading thumbnail…

activity-6-a-4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 30 car makes. It uses D3.js (v7) with SVG rendering and animation, featuring interactive tooltips that display each car make on hover. The chart includes a size legend for MPG values and a color legend mapping each make to a unique color using the interpolateTurbo scale. Data is loaded from a CSV file containing aggregated vehicle specifications.

Oct 23, 2024

Loading thumbnail…

activity-6-a-3

This scatter plot visualizes penguin measurements, comparing culmen length against culmen depth across three species, distinguished by color through a d3.legendColor legend. The visualization uses D3.js (v7.8.5) with scales for the x-axis (culmen length) and y-axis (culmen depth, reversed), and an ordinal color scale for species categories. Axes are labeled and styled, with circles rendered at 5-pixel radius. Data is loaded from a remote CSV file containing penguin observations.

Oct 23, 2024

Loading thumbnail…

activity-6-t-3-2

This visualization displays the Iris dataset as a scatter plot, mapping sepal length against petal length and using distinct marker shapes to represent each species. The chart includes labeled axes, a shape legend, and reads data from a CSV file fetched at runtime. Built with D3 v7, it uses the `scaleLinear` and `scaleOrdinal` functions for scaling, `symbol` for rendering marks, and a custom `axes` module for chart furniture.

Oct 23, 2024

Loading thumbnail…

activity-6-t-3

This example displays a scatter plot of the Iris dataset, mapping petal length and width on the axes. The visualization uses D3.js v6 to load CSV data from a GitHub URL, with circle marks colored by species (skyblue, lightgreen, orange). The code uses `d3.csv`, `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to project and render the data. The chart includes labeled axes for petal and sepal measurements, with a red title and custom tick font sizing.

Oct 23, 2024

Loading thumbnail…

activity-6-a-2

A stacked bar chart shows the distribution of food ratings across five categories, from "Below 5.0" to "Above 8.5," for six food items. Each bar segment’s length encodes the proportion of ratings, with hover interactions displaying exact percentages via a tooltip. The visualization uses D3 v7’s `d3.stack`, `d3.scaleOrdinal`, `d3.scaleLinear`, and `d3.scaleBand` to render SVG rectangles, with data loaded from a CSV file and a custom color scale mapping each rating category.

Oct 23, 2024

Loading thumbnail…

activity-6-t-2

This horizontal stacked bar chart visualizes the distribution of IMDB movie ratings across genres, showing the proportion of films falling into five rating brackets from 'below 5.0' to 'above 8.5'. Each genre row is segmented with a sequential color scale, and hovering over a segment reveals a tooltip with the exact percentage. The visualization uses d3.csv to load the data, d3.stack and d3.scaleOrdinal for the stacking and coloring, and d3.axisBottom for the quantitative x-axis.

Oct 23, 2024

Loading thumbnail…

Fork of activity-6-a1-2

This bar chart displays the populations of 20 countries for the year 2010, using data fetched from a CSV file via the d3.csv function. The visualization renders as an SVG with React, using d3 scaleBand for the categorical y-axis and scaleLinear for the quantitative x-axis. Thick green bars represent population values, and hovering reveals tooltips via SVG title elements. The axis labels and tick formatting are built with custom React components for the bottom and left axes.

Oct 23, 2024

Loading thumbnail…

activity-6-a1-1

This horizontal bar chart displays the top 10 countries by population in the year 2000, with bars extending from a left-aligned baseline. The visualization uses React components for rendering SVG elements, with D3.js scales handling data mapping: `scaleBand` positions country categories along the vertical axis while `scaleLinear` maps population values to bar widths. The data loads from a remote CSV file, and axis labels use D3's `format` function to abbreviate large numbers (e.g., converting G to B for billions). The chart includes styled grid lines, tick marks, and hover tooltips showing precise population values for each country.

Oct 23, 2024

Loading thumbnail…

activity-6-t-1

This chart displays the population of 30 countries in 2020 using a horizontal bar chart. The React-based visualization uses D3 modules like `scaleBand` for the categorical y-axis and `scaleLinear` for the population x-axis, with formatted tick labels using `format.` Each bar is an SVG `rect` with a tooltip showing the population value. The data is loaded from a remote CSV file, and axes are rendered using the custom `AxisBottom` and `AxisLeft` components.

Oct 23, 2024