srisailapu.rc@gmail.com

@nagarajesh94·13 public vizzes

Fork of "The Human Timeline: Key Events in Climate History"

This visualization presents a timeline of key climate indicators—CO₂ levels, temperature anomaly, and sea-level rise—from 1880 to the present. Three smoothed normalized line series show each metric’s trend, marked with color-coded endpoint labels and vertical annotations for major climate agreements. Built with D3 v7, the SVG chart uses `d3.scaleTime`, `d3.line` with `curveMonotoneX`, and CSV data from a public GitHub dataset. Interactive tooltips powered by `d3.bisector` display exact yearly values as users hover across the chart.

Apr 6, 2025

Loading thumbnail…

"The Human Timeline: Key Events in Climate History"

This visualization overlays three climate indicators—CO₂ levels, temperature anomaly, and sea level rise—on a shared timeline from 1993 to 2021, using d3.line to draw normalized paths. Red dashed annotations mark the Kyoto Protocol, Paris Agreement, and COP26. An animated stroke-dashoffset transition draws each line sequentially upon load, while a tooltip with d3.bisector and d3.pointer reveals exact values on hover. Data comes from merged_climate_data.csv, rendered as SVG with D3 v7 scales and axes.

Apr 4, 2025

Loading thumbnail…

Fork of D3 Starter

This D3.js visualization displays three climate change metrics—CO₂ levels, temperature anomaly, and global mean sea level—as multi-line trends over time, using red, blue, and green strokes to distinguish each series. It employs dual y-axes, with temperature and sea level sharing a left scale while CO₂ uses a right scale, rendered via `d3.line` path generators. The SVG output loads data from a remote CSV using `d3.csv`, converts numeric fields with unary plus operators, and applies `d3.scaleLinear` domains and `d3.axisBottom`/`d3.axisLeft`/`d3.axisRight` for tick marks. Axes are formatted with integer tick labels, and lines are drawn with a 2-pixel stroke width.

Apr 3, 2025

Loading thumbnail…

CO2 Emissions Over Time

This interactive SVG chart visualizes three climate indicators—CO2 levels, temperature anomaly, and sea-level rise—over time from a remote CSV dataset. The chart uses a linear time axis on the x-axis and a single shared y-axis for all three metrics. Built with D3.js, the code loads the data via `d3.csv`, processes the parsed values, and renders axes using `scaleLinear`, `axisBottom`, and `axisLeft`. The visualization employs a common vertical scale to accommodate the differing ranges of the three variables, with axes and ticks formatted appropriately.

Apr 3, 2025

Loading thumbnail…

CO2 Emissions By Country

This interactive bar chart displays CO2 emissions by country, with a dropdown menu to select the year and a tooltip revealing exact values for emissions and population. The visualization updates dynamically using D3.js v7, rendering SVG bars with scales for year and emissions data. It loads a preprocessed dataset from GitHub via d3.csv, maps country codes to names, and rotates x-axis labels for readability.

Apr 2, 2025

Loading thumbnail…

CO2 vs Population Scatter Plot

This interactive scatter plot displays the relationship between population and CO2 emissions for various countries over time, with a year slider controlling which time slice is visible. Each country is represented as a circle, sized by CO2 per capita and colored by country, with a tooltip showing precise values on hover. The visualization uses D3 v7 with `d3.csv` to load data, `d3.scaleLinear` and `d3.scaleSqrt` for axes and sizing, and `d3.axisBottom`/`d3.axisLeft` for chart axes. SVG rendering places circles, axes, and a country legend, while the slider input triggers a complete redraw of the chart elements for each selected year.

Apr 2, 2025

Loading thumbnail…

v3

This example visualizes global CO₂ emissions over time using a smooth line chart, with the x-axis representing years and the y-axis representing emissions in million tonnes. The chart filters the loaded CSV data for the "World" country and plots it as a red line. Built with D3.js v7, the code uses `d3.csv` for data loading, `d3.scaleLinear` for axes, `d3.line` with the `d3.curveCatmullRom` curve for the smoothed path, and `d3.axisBottom` and `d3.axisLeft` for labeled axes. The SVG rendering is configured within a fixed chart area, and the data originates from the `preprocessed_owid_co2_data.csv` file.

Apr 2, 2025

Loading thumbnail…

CO2 Per Capita OverTime

This line chart visualizes global CO₂ emissions per year, filtering the dataset to the “World” country and plotting emissions over time with a red monotone curve. The visualization uses D3 v7 to load CSV data via `d3.csv`, create linear scales with `d3.scaleLinear`, generate the path with `d3.line` and `curveMonotoneX`, and render axes with `d3.axisBottom` and `d3.axisLeft`. The SVG output is fixed at 900 by 500 pixels, with a 50-pixel margin, and the chart is unadorned beyond the axes and line.

Apr 2, 2025

Loading thumbnail…

Cricket_Pie Chart

This pie chart displays the cricket performance of five players based on their total runs, with each slice colored and labeled by player name, and a legend positioned to the right. Hovering over a slice triggers a tooltip that reveals the player’s runs and career years. Built with D3 v7, the visualization uses `d3.pie` and `d3.arc` to generate the chart, `d3.scaleOrdinal` with `schemeCategory10` for colors, and SVG rendering. The hardcoded sample dataset includes players like Sachin and Virat, while the tooltip is implemented via mouse events.

Apr 2, 2025

Loading thumbnail…

Cricket_Area Chart

This area chart visualizes cricket players’ yearly run totals from 2010 to 2021, using a filled steel-blue path to show the trend. Each data point is marked by a red circle that reveals a tooltip with the player’s name, year, and runs on hover. The visualization uses D3.js v7 with SVG rendering, including `d3.area()` for the area generator, `d3.axisBottom()` and `d3.axisLeft()` for axes, and `d3.scaleLinear()` for scales, alongside manual gridlines and axis labels.

Mar 27, 2025

Loading thumbnail…

Cricket - Pie Chart

This pie chart visualizes the distribution of runs scored by cricket players, with each slice representing an individual player. The chart uses D3.js v6 with an SVG rendering approach, loading data from a CSV file and applying an ordinal color scale. Interactive tooltips appear on hover, and slice labels display player names directly on the chart. A legend translates additional player information alongside the pie, providing a complete overview of the dataset's run values.

Mar 27, 2025

Loading thumbnail…

Assignment 2

This example displays a minimal D3.js visualization that renders the text message "Hello VizHub!" centered on the page. The code imports the `select` function from D3 and uses it to set the text content of a `div` element with the id `message`. Styling is applied through an external CSS file, making the text large and centered. The visualization demonstrates a basic D3 selection and DOM manipulation workflow within a VizHub project structure.

Mar 26, 2025

Loading thumbnail…

Fork of Hello VizHub

This fork of Hello VizHub displays the text “Hello VizHub!” in the center of the page, using a large, horizontally aligned font. The rendered text is static, with no interaction or animation. The example demonstrates a minimal D3.js v6 setup, where the `select` function from D3 targets the `#message` div and sets its text content to a value imported from a local ES6 module. The page is styled with a separate CSS file, and the code is organized into separate JavaScript and HTML files for clarity.

Mar 26, 2025