S

Sheela2930

@Sheela2930·47 public vizzes

Loading thumbnail…

Multi-Cryptocurrency Line Chart

This example visualizes Yes Bank stock data with line charts and a candlestick chart. Two SVG line charts display opening and closing prices over time using D3 scales, axes, and a curveBasis line generator. A Plotly candlestick chart with zoom functionality renders the high, low, open, and close values. Data is loaded from a CSV file via D3’s csv function, with date parsing and numeric coercion applied before rendering. The visualization combines D3’s SVG approach with Plotly’s interactive plotting library to present the same financial dataset across multiple chart types.

Loading thumbnail…

Daily Return Graph

This chart displays the daily return percentage of a stock over time as a blue line plot. It uses D3 v7 to load CSV data via `d3.csv`, parse dates with `d3.timeParse`, and render axes and the line using `d3.axisBottom`, `d3.axisLeft`, and `d3.line`. The visualization presents the data in an SVG on a dark-themed background, showing how returns fluctuate across the trading period.

Loading thumbnail…

Untitled

This example presents an interactive stock chart with candlestick and line plots, accompanied by technical indicators such as moving averages, MACD, RSI, and volume. The chart also supports zooming, panning, and draggable annotations for trendlines and support/resistance levels. It uses the D3 v4 library with techan.js for financial charting, rendering to SVG within a React framework. Data is loaded from a TSV file containing historical stock prices and parsed using `d3.timeParse`.

Loading thumbnail…

Fork of NEW ZEALAND Country

This interactive map displays Japan’s districts, rendered as colored SVG paths that highlight region names on hover via tooltips. Built with D3 v4 and TopoJSON, it uses a Mercator projection and a custom `d3.geoTransform` to apply topology-preserving simplification controlled by a range slider, redrawing the map dynamically. The initial data comes from the deldersveld TopoJSON repository, with fill colors changing from LightSkyBlue to Maroon on mouseout.

Loading thumbnail…

Japan Country

This interactive map of Japan visualizes geographic regions as SVG paths, rendered with the Mercator projection. Users can adjust a range slider to simplify the map topology in real time, controlling the level of detail through a custom geoTransform filter that removes small areas. The visualization is built with d3.js v4, the topojson library for converting TopoJSON to GeoJSON, and d3.geoPath for generating path data. Hovering over a region displays its name in a tooltip and highlights it in light green.

Loading thumbnail…

Country Map

This example displays a map of Australia’s administrative regions, with each state filled in red and labeled with its name. The visualization loads GeoJSON data from `australia.json` and projects it using `d3.geoMercator` with a custom translation and scale. It uses `d3.geoPath` to generate SVG paths for the regions and `topojson.feature` to extract the geometry. State names are positioned at each region’s centroid using `d3.geoPath.centroid`, rendered as SVG text elements with a small font size.

Loading thumbnail…

ICE 8 - Country Map

This visualization displays a choropleth map of India, with each state filled using a categorical color scheme. It uses `d3.geoMercator` projection and `d3.geoPath` to render the geographic boundaries, with `d3.scaleOrdinal` and `d3.schemeCategory10` for coloring. The map loads TopoJSON data from a GitHub gist via `topojson.feature` and renders as SVG. Hovering over a state turns it orange via CSS, while a title attribute reveals the state’s interpolated color value.

Loading thumbnail…

ICE8 Network graph

This interactive network graph visualizes a small social network of ten friends, grouped into three clusters. Nodes are rendered as coral circles with labels, while links use varying stroke widths to indicate relationship weights. The example implements a classic force-directed layout using D3 v4’s `d3.layout.force`, with drag interactions and a tick handler updating SVG line and transform positions. Data is loaded from an external JSON file specifying node names, group IDs, and weighted edges.

Loading thumbnail…

TREE structure

This interactive tree diagram visualizes a hierarchical breakdown of an automobile, starting with the root node “VEHICLE” and branching into categories like Engine, Interior, and Body, with further subcomponents such as RPM, Seats, and Mirrors. Built with D3.js (version 3.5.17), the layout uses the `d3.layout.tree` and `d3.svg.diagonal` APIs to position nodes and draw curved links. Rendered as an SVG with animated transitions, clicking a node collapses or expands its children. Node colors reflect the data’s “level” field, while the styling is defined via CSS.

Loading thumbnail…

ICE_8_1

This example displays a world map using the Natural Earth projection, with landmasses filled in Cadetblue, graticules in DarkSeaGreen, and country borders in DarkMagenta. The visualization loads TopoJSON data from the world-atlas package using `d3.json` and `topojson.feature`/`topojson.mesh`. React renders the SVG elements, while D3’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule` compute the projected geometries and latitude/longitude lines.

Loading thumbnail…

Fork of Mexico map

This example visualizes a map of Mexico using a Mercator projection, displaying state boundaries and graticules. Built with React and D3 v6, the code fetches TopoJSON data from a gist, converts it to GeoJSON features with the `topojson` library’s `feature` function, and renders the paths using `d3.geoPath` and `d3.geoMercator`. The map is centered approximately on [-102, 24] and uses colorful strokes and fills to distinguish land, graticules, and other layers.

Loading thumbnail…

Untitled

This interactive banking dashboard visualizes daily closing prices for multiple bank stocks over time, with a dropdown menu that filters the chart to show a single stock or all groups. The visualization uses React with D3 v4, rendering an SVG line chart with a time-scaled X-axis, linear Y-axis, and a categorical color scale from `d3-scale-chromatic`. Data is loaded from a CSV file, grouped with `d3.nest()`, and each stock’s price trend is drawn as a separate colored line. The interface includes a styled header and descriptive text about banking sector risks.

Loading thumbnail…

stock

This visualization presents a comparative analysis of banking stock opening prices over time, with each stock plotted as a separate line chart arranged vertically. The animation begins by progressively drawing each line, then transitions to filled area charts beneath them, using a categorical color palette. Built with D3.js v3, the code employs `d3.svg.line` and `d3.svg.area` for the graphics, `d3.time.scale` for the date axis, and `d3.timer` for the animated draw sequence. Data is loaded from a CSV file containing stock symbols and their daily opening values.

Loading thumbnail…

Fork of Bar Chart of Netflix stock data

This bar chart visualizes Yes Bank stock closing prices over time, with each bar’s height representing the daily close value. The visualization uses D3.js (v7) to load CSV data, set up SVG scales and axes, and render pink rectangles for each date. The code explicitly employs `d3.csv`, `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`. Although the page loads React libraries, the chart itself is built purely with D3’s SVG elements—no React components manage the visualization.

Loading thumbnail…

Untitled

This interactive line chart visualizes the High and Low values of stock symbols from the National Stock Exchange of India, with an animated transition between the two metrics. A dropdown menu lets users switch between the High and Low series, triggering a smooth data update. The visualization uses d3.csv to load data, d3.scaleBand for the categorical x-axis, d3.scaleLinear for the y-axis, and d3.line to draw the path, with circles marking data points. The update function employs d3 transitions over 1000 milliseconds to animate the line and dots, rendered as SVG elements.

Loading thumbnail…

Area Chart

This area chart displays the daily trading volume of APU stock from January to September 2020, with the filled area emphasizing volume fluctuations over time. The visualization uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear for the axes, and d3.area with curveBasis to generate the smooth filled path rendered as SVG. Axis ticks are formatted with d3.timeFormat and d3.format, while gridlines and labels are styled via CSS.

Loading thumbnail…

Untitled

This example presents an interactive data visualization built with the d3.v4 library and embedded in a React framework. It renders a graph within a designated div element, loading D3.js from a CDN. The visualization appears to be a network or node-link diagram, though the specific data source is not identified in the provided files. The code sets up a blank canvas for the visualization, and the actual plotting logic would use D3’s force simulation or layout functions to position elements. The implementation relies on standard HTML and JavaScript, with CSS handling the visual styling.

Loading thumbnail…

Line graph

A line graph displays daily high stock prices for CS Bank over time, with a red-to-green vertical gradient applied to the stroke. The chart includes labeled axes, a title, and a hover interaction that reveals the exact price at any point via a movable circle and text label. Built with React and D3.js v4, it loads CSV data from a GitHub gist, parses dates with `d3.timeParse`, and renders the line using `d3.line` with a `linearGradient` fill. Interactive tooltips rely on `d3.bisector` for nearest-date lookup.

Loading thumbnail…

Line graph

This line graph displays the high price of CS Bank stocks over time, using a red-to-green gradient stroke to encode value magnitude. Data is loaded from a GitHub-hosted CSV file. Built with D3 v4, the visualization uses `d3.scaleTime` and `d3.scaleLinear` for axes, and a `d3.line` path for the series. Interactive mouseover events trigger a bisector-based search to reveal the exact price at the cursor, showing a tooltip and a circle marker. The chart includes labeled axes and an overall title, rendered as SVG.

Loading thumbnail…

stock

This visualization animates the high prices of banking stocks over time, first drawing each stock’s line progressively, then transforming the chart into a horizon graph by stacking and compressing multiple area layers with distinct fill colors. It uses D3 v3’s `d3.svg.line`, `d3.svg.area`, and `d3.svg.axis` to render SVG paths, with transitions driven by `d3.timer` and `setTimeout`. Data is loaded from a CSV file via `d3.csv`, nested by symbol, and sorted by maximum price.

Loading thumbnail…

stock

A multi-line chart animates banking stock prices over time, with each series plotted in its own horizontal band and labeled by symbol. The visualization first draws lines progressively using a `d3.timer`, then transitions into horizon charts by stacking filled areas with a `clipPath`. Data is loaded via `d3.csv` from a gist and parsed with `d3.time.format`. The SVG rendering uses `d3.svg.line`, `d3.svg.area`, and `d3.scale.linear` to map dates and prices, with color assigned by `d3.scale.category10`.

Loading thumbnail…

Fork of Pie Chart - test

This interactive pie chart visualizes the basic cost of Netflix across ten countries, with data loaded from a CSV file hosted on GitHub. The visualization uses D3 v5 APIs such as `pie()`, `arc()`, `scaleOrdinal()`, and `schemeCategory10` to generate the SVG sectors. A legend displays each country's symbol and its corresponding cost in dollars, formatted via a custom number formatting function. The chart is rendered using a React framework, with mouseover interactions logging the price to the console.

Loading thumbnail…

Bar graph-task1

This interactive bar chart, built with React and D3 v5, visualizes the top 12 video games by their North American sales figures. Each game is represented by a rectangular bar, with the horizontal axis encoding sales value and the vertical axis categorizing game titles. The chart is rendered as an SVG within a React component, using D3's `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, with data loaded from a CSV file via `d3.csv`. A second, separate plotly-based 3D scatter plot is also included in the project files, but the main gallery view shows the D3 bar graph.

Loading thumbnail…

Untitled

This example visualizes the Iris flower dataset, plotting sepal length against petal length with points colored by species (setosa, versicolor, virginica). It uses d3.scaleLinear for the x and y axes, d3.scaleOrdinal for categorical colors, and d3.axisBottom/axisLeft with tickSize to create a ggplot2-style gray background with white gridlines. The SVG circles are appended via d3.selectAll and .enter(), with data loaded through d3.csv. The chart includes axis labels and a legend-free design, emphasizing the three species clusters through distinct color ranges.

Loading thumbnail…

3D BarChart

This 3D bar chart visualizes global video game sales across genres, broken down by major publishers like Nintendo and Electronic Arts. It uses AnyChart’s `column3d()` chart type with custom 3D settings for z-axis angle and padding. The chart includes animated rendering, a legend, tooltips showing revenue values, and axis labels for genre and price. Data is hardcoded in the script, with values representing sales in USD, and the visualization is built using AnyChart’s JavaScript API within a React-compatible HTML page.

Loading thumbnail…

Fork of Fork of 3D Scatter Plot-sheela

This example visualizes video game sales data as an interactive 3D scatter plot, comparing North America and Japan sales across different game titles and years. North American sales appear in blue, while Japanese sales are shown in purple. The visualization uses Plotly’s `scatter3d` trace type to render the data points, with each trace configured via `Plotly.newPlot` and drawn inside a designated HTML div. The data is loaded asynchronously using D3’s `d3.csv` function from a GitHub-hosted CSV file, and the chart’s axes are labeled for game names, year, and sales figures.

Loading thumbnail…

task - 1

This example visualizes game-wise revenue across multiple publishers as a 3D multi-series bar chart. It imports game sales data from a remote CSV file, parses each record into genre-based groups with sales values for publishers like Nintendo, Electronic Arts, Ubisoft, and Sony. The chart renders using d3-x3d, which integrates D3.js v5 with the X3DOM library for interactive 3D scenes; the code attaches the parsed data to a `d3.x3d.chart.barChartMultiSeries()` component and displays it within an HTML div. Axis titles are configured via the chart's chained methods.

Loading thumbnail…

Fork of Major Project

This interactive bar chart compares multiple machine learning algorithms across four performance metrics: accuracy, time, precision, and recall. The visualization loads JSON data from a GitHub gist and uses React with D3 v7 to render an SVG chart. Users can select which metric to display on the y-axis, and hovering over a bar triggers a tooltip showing all four metric values for that algorithm. The bars are animated using SMIL `<animate>` elements, and colors are randomly assigned from a predefined palette.

Loading thumbnail…

Bonus ICE - 3D Bar chart

This interactive 3D bar chart displays top video game sales by platform, with stacked vertical bars grouped along a depth axis to show both platform categories and individual game titles. The visualization loads CSV data from a GitHub gist and renders it using Highcharts with the highcharts-3d module, enabling a perspective view with configurable alpha, beta, and depth settings. The chart uses jQuery to fetch the data and constructs a series array where each game is a separate series, with x-axis platforms, y-axis sales in millions, and z-axis game names.

Loading thumbnail…

barchart

This stacked bar chart displays the estimated 2010 religious breakdown of the world’s 20 most populous countries, using data from the Pew Research Center’s Global Religious Landscape. Each bar segments a country’s population by religion, with hover tooltips showing exact values and a legend that highlights individual religious groups on hover. The visualization uses D3 v3 with `d3.layout.stack`, `d3.scale.ordinal`, and `d3.svg.axis`, rendering animated SVG bars and incorporating d3-tip for tooltips and d3-legend for the interactive color key.

Loading thumbnail…

3D Bar Chart

This example shows a 3D bar chart of game publisher revenue across different genres. It uses the d3-x3d library to render X3D scenes in the browser, with d3.v5 for data loading via `d3.csv` and the d3-3d plugin for 3D bar construction. The data comes from a GitHub Gist CSV file with video game sales figures, and the chart is rendered into a div using `d3.x3d.chart.barChartMultiSeries()`.

Loading thumbnail…

3d bar

This example visualizes USA vehicle sales by quarter for major automotive brands using a 3D bar chart. The chart displays multi-series data, with bars representing sales figures for Nintendo, Electronic Arts, Ubisoft, and Sony Computer Entertainment, though the data labels reference game genres. It renders interactive 3D graphics using the X3DOM library and the d3-x3d integration, with d3.v5 handling data loading and chart configuration. The visualization pulls CSV data from a GitHub gist and displays it within an HTML page that includes a background image of car logos.

Loading thumbnail…

Fork of Multiple Line plot with Dropdown

This visualization displays monthly air quality measurements for London from January 2010 through August 2018, using data from the Kings College London Air Quality Dataset in the London Datastore. A dropdown menu lets users select which pollutant to plot, showing time-series lines for each year from 2010 to 2018, colored by year. The chart uses D3 v5 with d3.line, d3.scaleTime, d3.scaleLinear, d3.nest, and d3.axisBottom/axisLeft to render SVG paths with animated transitions. A color legend identifies the year for each line.

Loading thumbnail…

task -2

This interactive 3D scatter plot visualizes the Iris flower dataset, showing the relationship between sepal and petal measurements across three species. Users can drag to rotate the visualization, which displays colored points representing individual flowers alongside a wireframe grid and axis labels. The example uses the d3-3d plugin with d3.v4 to project 3D coordinates onto an SVG canvas, handling rotation updates through mouse drag events. Data is loaded from a CSV file and rendered with WebGL, with points colored by species category.

Loading thumbnail…

Reusable-1

This example presents an animated scatter plot of the Iris dataset, cycling through different feature pairs on the x-axis (petal width, sepal width, petal length, sepal length) while the y-axis remains fixed. The visualization uses a custom reusable `scatterPlot` module built with D3.js (`scaleLinear`, `axisLeft`, `axisBottom`) to render SVG circles and axes. Points are colored by species (Iris-setosa in pink, Iris-versicolor in green, Iris-virginica in brown) with a legend and title. The animation updates the x-axis and plot data every interval, demonstrating a reusable chart component.

Loading thumbnail…

area chart -4

This area chart displays the number of Hulu subscribers over time, with the title “subscribers incresing frequency” and axes labeled “Years” and “number_of_subscribers.” It uses D3 v5 APIs such as `d3.area`, `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to render an SVG path with an orange fill, based on CSV data loaded via `d3.csv`. The chart applies `d3.curveBasis` for smoothing and includes custom tick formatting with `d3.format`.

Loading thumbnail…

line graph -3

This line graph visualizes yearly subscriber counts for Hulu, with the x-axis representing years and the y-axis showing the number of subscribers. The chart uses D3 v5's scaleLinear, scaleTime, axisLeft, axisBottom, and line APIs, rendered as an SVG with a smooth curveBasis path. The data is loaded as CSV from a GitHub gist.

Loading thumbnail…

Pie Chart -2

This pie chart visualizes the proportion of total savings left per unique job type, using data from a GitHub-hosted CSV file. It shows the top 10 job categories sorted by remaining balance, displaying each segment with a corresponding legend that lists the job name and its dollar amount. The visualization is rendered as an SVG using D3 v5, leveraging the `pie` and `arc` generators to create the circular segments, and `scaleOrdinal` with `schemeCategory10` for color assignment.

Loading thumbnail…

Ice7-1

This interactive scatter plot visualizes the Iris dataset, plotting sepal length against petal width with colored points for each iris species. Every two seconds, the x-axis switches between the four numeric measurements (petal width, sepal width, petal length, sepal length), animating the data through successive views. The chart uses a reusable scatterPlot function built with D3 v6, employing scaleLinear for axes, extent for domains, and axisLeft/axisBottom for grid lines. The SVG renders circles with a fixed radius, while setInterval triggers re-renders with updated xValue mappings.

Loading thumbnail…

task -2

This scatter plot visualizes the Iris dataset, showing the relationship between petal length and petal width, with each point colored by species (setosa, versicolor, virginica). The visualization uses D3 v6's `select`, `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to load the CSV data, map the measurements to x and y coordinates, and render the axes. Points are drawn as SVG circles in the browser window, with a custom color-mapping function assigning distinct colors to each iris species. The chart also includes descriptive axis labels for the petal measurements.

Loading thumbnail…

scatter-plot

This scatter plot visualizes video game sales, comparing NA_Sales on the x-axis against EU_Sales on the y-axis, with each circle’s color representing a different game publisher or developer. The visualization uses d3.csv to load the dataset, d3.scaleLinear to map data values to pixel coordinates, and d3.axisLeft and d3.axisBottom to render the axes. Circles are drawn as SVG elements within a React framework, with their fill color determined by a switch statement that assigns distinct colors to known studios and a default brown for others. The chart also includes axis labels for the variables plotted.

Loading thumbnail…

bar graph-1

This bar chart displays the ten most populous countries based on 2019 United Nations population estimates, with country names on the vertical axis and population on the horizontal axis. Built with React and D3 v5, the visualization uses `scaleBand` for the categorical axis, `scaleLinear` for the continuous axis, and renders SVG rectangles with tooltips. The code loads the data using `d3.csv` from a GitHub gist and formats population values using `d3.format`.

Loading thumbnail…

Bar graph-task1

This bar graph displays Amazon prices across different states, with a prominent title and a chart rendered below. The visualization uses D3.js version 5 to construct the bar chart, while React 16.9.0 manages the user interface components. The page layout is styled with CSS, featuring a centered heading and a full-width body without margins. The code leverages D3’s charting capabilities to encode price data spatially, with the specific state names and price values represented through bar heights.

Loading thumbnail…

ICE - 5

This example displays a dataset summary for Netflix shows, presenting key statistics such as file size, row count, and column count in a text overlay. The visualization loads a CSV file from a GitHub gist using `d3.csv` and computes the metrics with `d3.csvFormat` and array length properties. The page uses D3 v7 within a React framework, styled with an SVG background image and custom CSS layout. The dataset link is provided for further exploration.

Loading thumbnail…

Fork of KR - DV -

This example summarizes a weather dataset for Denton, Texas, covering December 2022 to February 2023. It displays the dataset’s size, row/column counts, and a summary table of minimum, maximum, mean, median, and standard deviation for nine key weather attributes. The code uses D3 v7’s `d3.csv` to load data, then `d3.min`, `d3.max`, `d3.mean`, `d3.median`, and `d3.deviation` to compute statistics, populating HTML table cells via `document.getElementById`. A CSS background image and styled table present the results.

Loading thumbnail…

ICE-5

This visualization displays the contents of a CSV dataset using D3’s `d3.csv` and `d3.csvFormat` methods to summarize its size, row count, and column count. The example renders the result in a styled HTML `<pre>` element with React-compatible ES6 syntax. It also embeds an SVG image, using D3 v7 within a React framework to provide a gallery-based data overview.

Loading thumbnail…

Overlapping budda-iCE-4

Overlapping budda-iCE-4 renders a dense, abstract composition of thousands of small, semi-transparent colored rectangles layered over a large buddha-like SVG path. The rectangles are generated by triply nested loops over a fixed array, with random positions, fills, and rotations creating a chaotic, overlapping effect that obscures the underlying figure. The visualization uses React components to create the SVG elements, leveraging JavaScript's built-in `Math.random()` for stochastic placement and color selection, with the buddha path drawn directly as raw SVG path data.