C

chengalvasharanya@gmail.com

@Chengalva12·24 public vizzes

Loading thumbnail…

airtraffic dashboard

This dashboard presents twelve interactive views of air traffic data, including a year-by-month passenger heatmap with a `d3.scaleSequential` Turbo color scale, an airline performance bar chart with tooltips, and trend, CO₂, and correlation analyses. Each chart is toggled via buttons that control CSS `display`. The visualizations use D3 v7 to fetch a CSV from a GitHub gist and render SVGs with `d3.axisBottom`, `d3.axisLeft`, and `d3.scaleBand`/`d3.scaleLinear`, styled with a dark cyan-on-black theme.

Loading thumbnail…

ICE 8 2Q Sharanya

This example presents two linked D3.js visualizations side by side. The first, a family tree, displays three generations of a family using a hierarchical layout. The second, a social network diagram, shows relationships between seven individuals arranged through a force-directed simulation, where nodes can be repositioned via an interactive drag. Both visualizations use SVG canvases for rendering, with the family tree employing `d3.hierarchy` and `d3.tree` for layout, and the network using `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` for physics-based positioning and interaction.

Loading thumbnail…

ICE 8 - 1Q Sharanya

This visualization combines a world map and a U.S. map in a single SVG canvas. The world map, using a Natural Earth projection, colors countries by population with a blue sequential scale, while the U.S. map uses an Albers USA projection to depict state-level crime rates in greens. Both maps rely on TopoJSON datasets loaded from `world-atlas` and `us-atlas`, rendered via `d3.geoPath`. The code builds color legends with `d3.scaleSequential` and tooltips for each geographic feature.

Loading thumbnail…

ICE 8 1Q Sharanya

This visualization shows a world map displaying population by country, colored with a pink-to-red sequential scale where darker shades indicate higher population numbers. The map uses a Natural Earth projection and includes interactive tooltips that reveal each country's name and population on hover. Built with D3 v7, it loads GeoJSON country boundaries from the world-atlas package and population data from a CSV file hosted on GitHub. The code employs `d3.geoNaturalEarth1()` for projection, `d3.geoPath` for rendering paths, and `d3.scaleSequential` with `interpolatePuRd` for the color scale. Countries lacking population data appear in a light pink fill, and a pink outline marks the Earth's boundary.

Loading thumbnail…

ICE 7 4Q Sharanya

This area chart illustrates the trend of average electric vehicle range over model years. The visualization aggregates data from a CSV dataset, using D3.js v7 to compute the mean average range per year before rendering a monotone-smoothed area path. The chart is drawn as an SVG, with linear scales for both axes and a filled steelblue area that highlights the upward progression of range capabilities over time. Axis labels and a chart title provide context for the data.

Loading thumbnail…

ICE 7 Sharanya 4Q

A D3.7 area chart visualizes the average electric vehicle range in miles per model year from a CSV dataset. Using `d3.csv`, `d3.autoType`, and `d3.rollups`, it aggregates rows by year, computes the mean `AvgRangeMi`, and sorts chronologically. The chart employs `d3.scaleLinear` axes, a monotone-curve `d3.area` generator, and a steelblue semi-transparent SVG path. X and Y axes with labels are rendered via `d3.axisBottom` and `d3.axisLeft`, all drawn within an SVG canvas.

Loading thumbnail…

ICE 7 Sharanya 3Q

This visualization shows how the average electric vehicle range changes by model year, using a line chart that aggregates data points through D3’s `d3.rollups` and `d3.mean` functions. The chart loads CSV data via `d3.csv`, then applies `d3.scaleLinear` for both axes and generates a smooth monotone curve with `d3.line` and `d3.curveMonotoneX`. The SVG rendering includes labeled axes, a title, and a blue stroke path, all styled through D3 v7’s selection and axis APIs.

Loading thumbnail…

Fork of ICE 7 Sharanya 2Q

This pie chart displays the distribution of electric vehicles by vehicle segment, with each slice labeled by segment name and count and accompanied by a color-coded legend. The visualization loads a CSV dataset from a GitHub Gist using `d3.csv` with `d3.autoType`, aggregates counts via `d3.rollups`, and renders the chart as SVG using D3 v7’s `d3.pie` and `d3.arc` generators. A categorical color scale, `d3.scaleOrdinal` with `d3.schemeSet2`, assigns slice colors, while labels are positioned using `arc.centroid`.

Loading thumbnail…

ICE 7 Sharanya 2Q

This pie chart visualizes the distribution of electric vehicles by vehicle segment, showing the count of EVs in each category. Built with D3 v7, the code loads a CSV dataset from a GitHub Gist and aggregates segment counts using `d3.rollups`. The chart applies a pie layout with `d3.pie()`, generates arc paths via `d3.arc()`, and colors slices with a `d3.scaleOrdinal` using `d3.schemeSet2`. Labels are placed at arc centroids, and a legend accompanies the SVG rendering.

Loading thumbnail…

ICE 7 Sharanya 2Q

This example shows the distribution of electric vehicles by vehicle segment using a D3.js pie chart. The visualization loads a CSV dataset from a GitHub Gist, aggregates vehicle counts per segment with `d3.rollups`, and renders slices with the `d3.arc` generator inside an SVG. Each slice is labeled with its segment name and count, and a legend lists the segments with colors from `d3.schemeSet2`. The chart uses `d3.csv`, `d3.pie`, and `d3.scaleOrdinal` to transform the data into a clear, annotated visualization.

Loading thumbnail…

Fork of ICE 7 1Q Sharanya

This scatter plot visualizes electric vehicle data, showing the relationship between average range in miles and average price in USD, with each point colored by vehicle segment. It displays a legend mapping the Tableau10 color scheme to vehicle categories. The visualization is built using D3 v7, loading data from a CSV file via `d3.csv` and rendering as an SVG. It uses `d3.scaleLinear` for both axes, `d3.scaleOrdinal` for color encoding, and `d3.axisBottom` and `d3.axisLeft` for the axes.

Loading thumbnail…

ICE 7 1Q Sharanya

This scatter plot visualizes an EV dataset, showing the relationship between average range in miles and average price in USD, with each point colored by vehicle segment using a Tableau10 ordinal scale. The chart loads CSV data from a GitHub Gist via `d3.csv`, then uses D3 v7 scales and axes to position circles in an SVG. A legend maps segment colors, and axis labels and a title clarify the variables. The code explicitly sets margins, applies `.nice()` to domains, and uses `d3.autoType` for data parsing.

Loading thumbnail…

ICE 7 Sharanya 1q

This visualization compares sepal dimensions of Iris flowers, plotting sepal length against sepal width with each species represented by a distinct color. The scatter plot uses a linear scale for both axes and an ordinal color scale for species classification. Interactive hover effects on the legend dim non-matching points, while the rendering leverages D3.js APIs including `d3.csv`, `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.axisBottom`. Data comes from Fisher's Iris dataset, styled with BBC-inspired color palettes and Roboto typography through custom SVG rendering.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example shows an animated scatter plot of the Iris dataset, cycling through different flower measurements on the x-axis every two seconds. The visualization uses D3 v6’s `scaleLinear`, `axisLeft`, and `axisBottom` within a custom reusable `scatterPlot` function, rendering SVG circles with `selectAll` and `join`. Data loads from a CSV via `d3.csv`, with axes updating dynamically through repeated `svg.call(plot)` invocations.

Loading thumbnail…

Fork of ICE 6 BAR CHART-EV sharanya

This interactive scatter plot visualizes the Iris dataset, showing species classifications through color-coded points. Hovering over the legend highlights the selected species and fades the others, while raising those points to the top for emphasis. Built with D3 v7, it uses scaleLinear for axes, scaleOrdinal for species colors, and svg.selectAll joins with enter/update/exit patterns for dynamic rendering. The chart includes customized BBC-style axes, labels, and a source attribution.

Loading thumbnail…

ICE 6 BAR CHART-EV sharanya

This visualization compares sepal length and sepal width across three iris species. It uses a scatter plot with color-coded data points for Setosa, Versicolor, and Virginica, and includes an interactive legend that highlights matching points when hovering. The chart is rendered using D3.js with scaleLinear and scaleOrdinal APIs, and loads data from a CSV file of Fisher's Iris dataset. Point styling and legend appearance are configured through a separate config file.

Loading thumbnail…

ice 6 sharanya

This example displays a static web page with the message "Hello HTML!" centered on the screen. The code uses raw HTML, CSS, and JavaScript, with the `index.html` file linking to external `styles.css` and `index.js` files. The CSS class `.message` sets the font size to 12em, while the JavaScript file simply logs "hello world" to the console. It demonstrates a minimal HTML/CSS layout with a basic script, without any data visualization or interactive features.

Loading thumbnail…

ice 6 sharanya

This example displays a static web page with the message "Hello HTML!" centered on the screen. The code uses raw HTML, CSS, and JavaScript, with the `index.html` file linking to external `styles.css` and `index.js` files. The CSS class `.message` sets the font size to 12em, while the JavaScript file simply logs "hello world" to the console. It demonstrates a minimal HTML/CSS layout with a basic script, without any data visualization or interactive features.

Loading thumbnail…

ICE 6 Sharanya

This example displays a blank page with the text “Hello D3” centered horizontally and vertically. The code uses the D3.js v7 library’s `select` function from the `d3` module to target the `body` element and set its text content. The HTML structure is minimal, with a large font size and top margin applied via inline CSS. No data source or complex visualization is present; the example serves as a basic starter template for D3 projects. The rendering relies solely on DOM manipulation, without any SVG, canvas, or geographic or simulation APIs.

Loading thumbnail…

ICE 6 sharanya

This bar chart compares the heights of different flower species from a CSV dataset. It displays each flower’s name on the x-axis and its height in centimeters on the y-axis using cyan rectangles. The visualization uses d3.csv to load the data and d3.scaleBand and d3.scaleLinear for positioning, while d3.axisLeft and d3.axisBottom render the axes. SVG elements are styled with a dark theme via CSS, and the code applies rotated x-axis labels for readability.

Loading thumbnail…

Fork of ICE 5 Q3 assignment sharanya

This example shows the first five rows of a flowers dataset loaded from a public Gist CSV. D3 v7 parses the CSV and renders a styled HTML table with color swatches for flower colors, category tags, bloom-season pills, sunlight and water-need badges, and mini bar charts for fragrance intensity. The page uses `d3.csv` to fetch and parse the data, then builds the table dynamically by populating the `<thead>` and `<tbody>` elements with matched column headers and cell values.

Loading thumbnail…

ICE 5 Q3 assignment sharanya

This example displays the first five rows of a flowers dataset in a styled HTML table, with categorical values rendered as color-coded tag pills and a miniature bar chart indicating fragrance levels. D3 v7 loads the CSV from a public Gist using `d3.csv` and populates the table headers and body dynamically. The dark-themed interface applies custom CSS classes to encode season, sunlight, and water requirements, while the caption notes that the data comes from an external source.

Loading thumbnail…

Fork of ICE-5 · Flowers Dataset

This fork of ICE-5 visualizes the Flowers Dataset, showing a data summary and the first ten rows in a styled table alongside an inline SVG flower badge. The page uses D3.js v7 to render the summary statistics and CSS grid for layout, while the static SVG includes a radial gradient and drop shadow filter. The dataset is loaded from a CSV file with the table displaying raw attributes in a dark-themed interface.

Loading thumbnail…

ICE-5 · Flowers Dataset Summary

This dark-themed dashboard summarizes the Flowers Dataset using D3.js v7 and an inline SVG flower badge. It displays key-value statistics, a styled table of the first ten CSV rows, and color-coded chips for categorical attributes. The layout uses HTML/CSS grids and cards, with D3 handling data binding and rendering the SVG summary graphic.