pvreswar7@gmail.com

Area Chart Activity 8

This area chart visualizes the cost of sales from 2000 to 2013, using a smooth curved line and a light green filled area beneath it. The visualization employs D3 v5 with an SVG rendering approach, using `scaleTime` and `scaleLinear` for the axes, and `area` and `line` generators with `curveBasis` to create the smooth shapes. Data is loaded from a CSV file via `d3.csv`, with the year parsed as a date and cost as a numeric value. The chart includes styled tick labels, a titled axis, and a custom axis label format.

Jul 2, 2023

Fork of fork of ICE8

This visualization displays a map of Kazakhstan, rendered as an SVG using the Mercator projection. The map is generated from the world-atlas TopoJSON data, with the country of Pakistan specifically extracted. The code employs the `d3.geoMercator` projection and `d3.geoPath` to draw the path, with the projection fitted to a 960 by 500 pixel canvas. The map is created using D3 v5 and the topojson-client library.

Jul 2, 2023

ICE6-ESWARPVR

This bar chart displays the top 30 countries by population in 2010, with country names on the y-axis and population values on the x-axis. It uses React and D3 v5, with scaleBand for the categorical axis and scaleLinear for the numeric scale, rendering SVG rectangles for each bar. Data loads from a CSV via d3.csv, formatted with d3.format to abbreviate values like "1.2B". Tooltips appear on hover using native SVG title elements, and axes use custom React components with CSS-styled tick marks.

ICE-6 Scatter Plot-ESWARPVR

This interactive scatter plot visualizes the Iris dataset by mapping petal length and petal width to the x- and y-axes, with each point colored according to species. The visualization renders as an SVG using D3 v6, loading data via `d3.csv` from a GitHub gist. It employs `scaleLinear` and `extent` for axis scaling, along with `axisLeft` and `axisBottom` to display tick marks. The code also defines a `marker` function that assigns colors to different species, though the actual color mappings are not fully implemented.

ICE-6 Scatter Plot-ESWARPVR

This scatter plot visualizes the Iris dataset, mapping petal length and width for each sample while color-coding points by species (setosa, versicolor, virginica). The visualization uses D3 v6’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to construct the axes, with raw SVG circles for marks. Data is loaded asynchronously via `d3.csv` from a remote GitHub gist, and point color is determined by a switch statement on species. The chart adapts to the browser window’s dimensions, with labeled axes for petal and sepal measurements.

Fork of Activity 7

This example shows the 30 most populous countries in 2020 as a horizontal bar chart, with each bar’s length encoding population size and a tooltip revealing the exact value. The chart is rendered as SVG using React components for the axes and marks, while D3’s `scaleBand` and `scaleLinear` handle the positional scales. Data is loaded from a CSV file via a custom `useData` hook and the `d3.csv` function, with population values formatted using `d3.format`.

Fork of Fork of Largest Population in the USA

This bar chart visualizes the top 200 largest U.S. cities in 2020, highlighting their population counts and regional distribution. It uses D3 v5 and the vega-lite-api to render bars for each city, with color encoding by region and tooltips showing population and region. The data originates from World Population Review and is loaded via d3.csv. Dropdown menus allow interactive filtering of displayed attributes, while the chart’s axes and labels are styled through a custom Vega-Lite config for readability.

Apr 27, 2023

ICE8-MuscleCars tree

This interactive tree diagram visualizes the hierarchy of muscle cars, starting with a root node for "Muscle Cars" and branching into manufacturers (Ford and Dodge) and specific models like the Mustang, Torino, Charger, and Challenger, with sub-models (Hellcat, SRT) indicated by type-based colors. It is rendered as an SVG using D3.js v3, employing the `d3.layout.tree` for layout and `d3.behavior.zoom` for pan and zoom interaction. The data is loaded from a JSON file, with node colors, link strokes, and arrowheads defined via CSS and a custom inline defs, and includes click-to-expand functionality and hover tooltips.

Apr 13, 2023

ICE8-Network Graph

This is a social network graph that visualizes friendships between individuals, with nodes representing people and links representing connections. The graph uses a force-directed layout via `d3.forceSimulation`, where node size and link thickness reflect the value of each relationship. The SVG rendering includes green arrow markers on links, labels for each node, and drag interactions enabled through D3's drag behavior. Data is loaded from a JSON file containing node and link definitions with relationship attributes.

Apr 13, 2023

ICE8Country Map(Uruguay)

This example displays a geographic map of Uruguay using a Transverse Mercator projection, with the country filled in light green and a white sphere background. The map loads TopoJSON data from a GitHub gist and renders it as SVG paths via `d3.geoPath`. The visualization supports interactive zooming through `d3.zoom`, which applies a transform to the map group. Hovering over the country changes its fill to maroon, demonstrating user interaction with the geographic shapes.

Apr 13, 2023

ICE8-ESWAR

This visualization displays a world map using an equirectangular projection, with countries rendered as light green SVG paths on a skyblue sphere. The map is built with D3 v5 and TopoJSON, loading country boundaries from the world-atlas dataset. The `geoEquirectangular` projection feeds into `geoPath` to generate each country’s shape, while a zoom behavior allows interactive pan and zoom on the entire SVG. Hovering changes a country’s fill to maroon, highlighting individual regions.

Apr 12, 2023

Fork of Poverty vs Wealth in the World

This choropleth map visualizes global economic categories using D3’s `geoNaturalEarth1` projection and `geoPath`. Countries are colored via a `scaleOrdinal` with `schemeOranges`, and hovering or clicking a country updates a title showing its name or economic category. The legend uses D3’s data joins to render clickable color swatches, while a `d3.zoom` handler enables pan and zoom. Data is loaded from the World Atlas TopoJSON and TSV files.

crime

This interactive visualization displays the number of crime cases against women across Indian states, with a choropleth map colored by crime type and two donut charts for selecting the year and crime category. The map updates dynamically when users change the dropdown selections. Built with D3 v7 and React, the code uses `d3.rollups` for data aggregation, `d3.geoPath` for rendering the TopoJSON map of India, and `d3.scaleOrdinal` with custom color themes. Data comes from a CSV file hosted on GitHub Gist.

Fork of Cheap tricks for interactions

This example shows a world map rendered in SVG using D3.js v5. Countries are drawn with `d3.geoPath` and a `geoNaturalEarth1` projection, using TopoJSON data from the world-atlas package. The map supports pan and zoom via `d3.zoom`. Hovering over a country changes its fill color and displays the country name in a tooltip, which is generated from a TSV file using `d3.tsv`. The visualization demonstrates simple, lightweight interactions built entirely with D3's declarative SVG and data-binding APIs.

line graph group-4

This line graph visualizes inflation rates across countries, with each country positioned along the x-axis and its inflation value plotted on the y-axis. The chart uses a violet, six-pixel-wide line to connect all data points, highlighting the variation in inflation across nations. It loads data from a CSV file and renders an SVG using d3.csv, d3.scaleBand for the x-axis, d3.scaleLinear for the y-axis, and d3.line to generate the path. Axis labels and titles are included, with the graph built in a React framework using D3 v7.

Fork of Fork of Line Chart Group-4

This example displays a line chart of inflation rates across countries, with country names on the x-axis and inflation values on the y-axis. The chart uses d3.scaleTime despite the categorical x-axis labels, d3.scaleLinear for the y-axis, and d3.line to generate a red path connecting data points. Axis labels and a title are added via SVG text elements. Data is loaded asynchronously from a remote CSV using d3.csv, with inflation values coerced to numbers and dates parsed before rendering.

Bonus ICE-3D Bar chart(ESWAR)

This example shows a 3D bar chart comparing mobile phone sales across eight brands and six retail channels, with each series stacked along the chart’s depth axis. The visualization uses the Highcharts library with its Highcharts 3D extension, enabling a perspective view through configurable alpha, beta, and depth settings. Categories on the x-axis list brand names, the y-axis measures total sales, and the z-axis labels the store type; data points are hardcoded arrays within the series definitions. The chart’s dark background and light-green title emphasize the rendered columns for each retailer’s sales figures.

Apr 6, 2023

3D Scatter Plot-ESWAR

This 3D scatter plot visualizes video game sales across three regions—North America, Japan, and other territories—using individual traces for each region. The plot shows sales values on the z-axis, release years on the y-axis, and game names on the x-axis, with distinct markers (circles and squares) and colors (default, red, and orange) to differentiate regional data. Built with Plotly.js and D3.js, it loads a CSV dataset from a GitHub gist and uses Plotly’s `newPlot` function to render the interactive 3D scene. Marker opacity and sizing vary by trace, while axis titles are styled in teal.

Apr 5, 2023

ICE-7 Area Chart-ESWAR

This example visualizes the cost of sales from 2000 to 2013 using a smooth area chart rendered with SVG. The visualization pairs a black curved line with a light green filled region beneath it to emphasize trends over time, with red tick labels and orange axis labels. It loads CSV data via `d3.csv`, parses year strings into `Date` objects, and applies `d3.scaleTime` and `d3.scaleLinear` for positioning. The line and area paths are generated with `d3.line` and `d3.area`, both using `curveBasis` for smoothing, while axes are created with `d3.axisBottom` and `d3.axisLeft`.

Reusable Scatter plot-ICE7 ESWARPVR

This animated scatter plot explores the Iris dataset, visualizing relationships between sepal and petal measurements. It cycles through different attribute combinations on the x-axis while keeping petal width on the y-axis, with points colored by species. Built with D3.js, it uses `scaleLinear`, `axisLeft`, and `axisBottom` for scales and axes, and `setInterval` to rotate the displayed variables. The SVG rendering includes a legend and custom labels, with data loaded via `d3.csv` from a GitHub Gist.

ICE7Pie Chart-ESWAR

This pie chart shows the count of students from each major at UNT, with each slice labeled by its value in thousands and accompanied by a legend that maps colors to majors. The visualization uses D3 v5’s `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate the SVG paths, while data is loaded asynchronously from a CSV file via `d3.csv`. Slices are colored from a fixed array, and both the chart and legend are rendered as SVG elements with custom text styling.

ICE7-linechart-ESWAR

This line chart visualizes the cost of sales from 2000 to 2013, with each year plotted as a point connected by a thick light-green line. The chart uses D3 v7’s scaleBand for the x-axis and scaleLinear for the y-axis, rendering as an SVG. Data is loaded from data.csv, and the line is drawn with d3.line, while axes are generated using d3.axisBottom and d3.axisLeft. Red labels for "Year" and "cost" are added.