R

RahulSai05

@RahulSai05·50 public vizzes

Loading thumbnail…

Untitled

This example automatically generates a suite of exploratory data visualizations from the COVID-19 dataset in the provided CSV file. It uses the AutoViz Python library to analyze the data and produce charts such as histograms and scatter plots, rendered as SVG images. The process is triggered through the `AutoViz` class, which handles data loading, statistical analysis, and visualization creation in a single call. The code relies on the `pandas` library for data handling and runs within a Jupyter environment, with `chart_format="svg"` specifying the output format.

Loading thumbnail…

Fork of Pie Chart

This example displays 2022 US auto sales by brand as a pie chart, with each slice’s color, percentage, and total sales in thousands labeled in a legend. It loads CSV data from a Gist URL using `d3.csv`, then uses `d3.pie` and `d3.arc` to generate the SVG paths, with `d3.scaleOrdinal` assigning colors. The legend, built with SVG rectangles and text, shows each brand’s name, percentage of total sales, and absolute count. The chart is rendered synchronously in SVG within a static HTML page, with styling defined in an external CSS file.

Loading thumbnail…

ICE8-Network Graph

This network graph visualizes relationships between eleven named individuals, grouped into clusters, with a force-directed layout. Nodes are rendered as grey circles with black outlines, linked by red lines whose thickness corresponds to the numeric weight of each connection. The graph is built using D3 v2’s `d3.layout.force` for physics-driven positioning and drag interaction, reading graph structure from a local `graphFile.json`. Node labels are added via SVG `<text>` elements, and link widths are mapped with `Math.sqrt(d.weight)` for visual scaling.

Loading thumbnail…

ICE8_Family Tree

This family tree uses D3.js v5 to visualize a hierarchical dataset as an SVG diagram. It renders circles for each person, colored cyan for root nodes, red for second-level nodes, and pink for leaves, with blue cubic Bézier curves linking parents to children. The layout is computed using the `d3.stratify()` and `d3.tree()` APIs, with node positions derived from the `tree` layout on an 850x300 canvas. Names are displayed as text labels offset from each circle. The data is a static array of parent-child relationships, manually encoded in the source.

Loading thumbnail…

ICE8_CountryMap

This example renders a choropleth-style map of the United States using D3 v4 and TopoJSON, with each state drawn as a blue SVG path with cyan strokes on an orange background. The code loads state boundaries from the us-atlas TopoJSON dataset, converts them to GeoJSON features via `topojson.feature`, and projects them using `d3.geoAlbersUsa`—a projection that repositions Alaska below the contiguous states. SVG paths are generated through `d3.geoPath`, with explicit margin settings and a translate transform to center the map within the viewport.

Loading thumbnail…

Tree Example

This interactive tree diagram displays hierarchical data with collapsible nodes. The visualization uses the D3.js library (version 3.5.17) with a static JSON dataset containing a root node and its descendants. The code employs `d3.layout.tree` for layout computation and `d3.svg.diagonal` for link rendering. Users can click nodes to expand or collapse subtrees, triggering smooth animated transitions via D3's `.transition()` method. The SVG rendering includes styled circles and text labels, with nodes colored steelblue or lightsteelblue depending on collapsed state.

Loading thumbnail…

Fork of America Map

This choropleth-style map displays Australian states using light green fills with brown borders and hover highlighting. The visualization uses a geo-albers-usa projection through `d3.geoPath` to render TopoJSON data fetched from a GitHub gist, with state names labeled at each region’s centroid. Built with D3 v5 and TopoJSON, the SVG paths include tooltips via appended `title` elements, while state labels are positioned using the path generator’s `centroid` method.

Loading thumbnail…

world map for Topojson data

This example displays a world map rendered from TopoJSON data, with countries shown as grey filled paths with cyan strokes against a light pink globe background. It uses d3.geoPath with a d3.geoNaturalEarth1 projection to generate SVG paths from geographic features. The code loads the TopoJSON file via d3.json and converts it to GeoJSON using topojson.feature. The visualization framework is D3 v5, with map styling controlled through the stylesheet’s `.country` and `.globe` classes.

Loading thumbnail…

Fork of Fork of Map of India with D3 - chloropleth map

This choropleth map displays the states of India, with each state filled by a categorical color and labeled with its name. It uses D3 v5 with a geoMercator projection and d3.geoPath to render TopoJSON state boundaries from a GitHub-hosted dataset. State names are positioned at path centroids, while d3.scaleOrdinal with schemeCategory10 assigns fill colors. The initial feature is removed from the data, and the SVG renders both shapes and text labels.

Loading thumbnail…

Fork of Line Chart

This fork of a line chart displays a single red data series against a clean, minimalist background. The SVG visualization relies on D3.js v5 to generate the axes and grid lines, with tick labels and axis titles styled via CSS. The chart’s line is rendered as a thick red path, while the overall presentation is centered on the page, using a sans-serif font for readability. The code imports D3 from a CDN and applies the styling from an external stylesheet.

Loading thumbnail…

Fork of D3 map

This example displays a world map using geographic data loaded from a TopoJSON file. The map is rendered as an SVG, with each country filled in pink and outlined with red, while the oceans appear green. The visualization is created using D3.js version 5, specifically leveraging the `d3.geoPath` projection and the `topojson` library to parse the topology data. The map is based on Curran’s earlier D3 map example, and the countries are drawn using a Robinson projection.

Loading thumbnail…

Fork of ICE 7 Area Chart-ICE-7_RahulSai

A combined line and area chart displays automobile sales trends from 2009 to 2019, with the line tracing sales values and the area beneath filled in light blue. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `line`, and `area` generators with a `curveBasis` smoothing, rendering as SVG. Axis ticks are formatted with `d3.format`, and data is loaded from a CSV via `d3.csv` with dates parsed using `d3.timeParse`. Gridlines are drawn through negative tick sizes on both axes.

Loading thumbnail…

Fork of Line Chart-ICE-7_RahulSai

This example displays annual US automobile sales from 2003 to 2018 as a single blue line chart. It uses d3.csv to load the dataset, then applies d3.scaleTime for the x-axis and d3.scaleLinear for the y-axis. The line is generated with d3.line, axes are drawn using d3.axisBottom and d3.axisLeft, and the SVG is rendered in black with pink and red axis labels.

Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

A pie chart displays the top 10 countries by deaths from air pollution in 2020, with each slice labeled with the death count in thousands (e.g., "123K"). Built with d3.v5, it uses `pie()`, `arc()`, and `scaleOrdinal()` to generate and color the sections, with a legend positioned to the right. Data is loaded from a CSV via `d3.csv()`. Custom text elements and a legend are appended directly to the SVG.

Loading thumbnail…

Fork of Scatter Plot - ICE7_RahulSai

This interactive scatter plot visualizes the Iris dataset, displaying species as colored points. The chart cycles through different x-axis variables—petal width, sepal width, petal length, and sepal length—while the y-axis remains fixed on sepal length. Built with D3.js, it uses the `scatterPlot` reusable chart module, `scaleLinear`, `axisLeft`, and `axisBottom` for scaling and axes. Animated transitions via `setInterval` update the plot's x-value mapping. The SVG render includes a color legend for the three Iris species: setosa (blue), versicolor (cyan), and virginica (yellow).

Loading thumbnail…

Fork of Area Chart

This fork of an area chart visualizes electronic sales from 2013 to 2021 using D3 v5 with SVG rendering. The view combines a smooth green area path with a black line overlay, both generated via d3.area and d3.line with curveBasis, while scaleTime and scaleLinear map the Year and Sales data. Axes are drawn with axisBottom and axisLeft, and the CSV data is loaded asynchronously from a GitHub gist.

Loading thumbnail…

Fork of ICE 7 Area Chart

This fork of ICE 7 Area Chart visualizes car sales in India from 2009 to 2019, using a smooth curve to show the sales trend over time. The chart combines a black line and an orange filled area beneath it, with labeled axes for year and sales. The code loads CSV data via `d3.csv` and renders an SVG using D3 v5, employing `scaleTime`, `scaleLinear`, `line` and `area` generators with `curveBasis` for smoothing. Axis labels are styled with CSS classes.

Loading thumbnail…

Fork of India CO2 emissions

A filled area chart displays India’s annual CO2 emissions per capita over time, with a maroon smoothed curve against a gray grid. Built with D3 v5, it uses `scaleTime` and `scaleLinear` for axes, `area` with `curveBasis` for the path, and `axisBottom`/`axisLeft` for ticks. Data loads from a remote CSV via `d3.csv`, mapping year strings to dates and emission values for rendering in SVG.

Loading thumbnail…

Fork of ICE - 7 Pie chart

This pie chart visualizes survey respondents’ top choices for social media usage, with each slice labeled by its percentage and a matching color-coded legend. The chart is built with D3 v5, using `d3.pie` and `d3.arc` to generate the paths and `d3.scaleOrdinal` to assign categorical colors. Data is loaded asynchronously from a CSV via `d3.csv` and rendered as SVG. The code also employs `arc.centroid` to position the percentage labels directly on each slice, while the legend pairs colored rectangles with social media names and values.

Loading thumbnail…

Fork of Fork of Pie Chart

This visualization displays people's top choices for social media usage as a pie chart, with each slice labeled by its percentage value. The code loads a CSV file from a Gist URL using `d3.csv` and renders the chart in SVG using D3 v5. The pie chart is drawn with `d3.pie` and `d3.arc`, with colors assigned via `d3.scaleOrdinal`. Legends at the right show each category with its name and corresponding percentage, also formatted using `d3.format`.

Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

This example shows the top 10 countries by deaths in 2020 attributed to air pollution as an SVG pie chart. The visualization uses d3.pie and d3.arc to generate the chart segments and a color scale with d3.scaleOrdinal. It loads data from a CSV file via d3.csv and displays a legend listing each country with its death count formatted in thousands. The chart is rendered with D3 v5 and uses an async fetch function to process the data before drawing.

Loading thumbnail…

Fork of ICE 7 Area Chart

This area chart displays car sales in India from 2009 to 2019, combining a smoothed black line with an orange filled area to emphasize the sales trend over time. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `line` and `area` generators with `curveBasis` smoothing, rendering as SVG. Data comes from a remote CSV file, loaded via `d3.csv`, with axes drawn using `axisBottom` and `axisLeft`. The chart includes clear axis labels and formatted tick values for readability.

Loading thumbnail…

Fork of World Population Area chart

This area chart displays the estimated world population from 1950 to 2015, using data from the United Nations World Population Prospects 2017. The SVG visualization, built with d3.scaleTime, d3.scaleLinear, and d3.area, shows a filled path with a smooth basis curve and gridlines. The chart’s axes are labeled "Year" and "Population," with y-axis tick values abbreviated in billions. Population is presented as an unbroken upward trend over the sixty-five year period, highlighting the sustained global growth during this timeframe.

Loading thumbnail…

Fork of Area Chart

This chart displays electronic sales from 2013 to 2021, combining a smooth line and a filled area to emphasize the sales trend over time. The visualization uses a time-scaled x-axis for sales dates and a linear y-axis for year values. Built with D3 v5, it employs `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, and `area` generators with a basis curve. The SVG rendering includes styled grid ticks and axis labels, with data loaded from a remote CSV file.

Loading thumbnail…

Fork of ICE 7 Area Chart

This fork of ICE 7 Area Chart visualizes car sales in India from 2009 to 2019. The SVG chart combines a smoothed line and an orange area fill to show the sales trend over time. It uses d3’s scaleTime, scaleLinear, axisBottom, axisLeft, line, area, and curveBasis with CSV data loaded from a GitHub gist. The axes include gridlines, and both the chart title and axis labels are styled in blue.

Loading thumbnail…

Fork of Area_Chart_facebook_users_anually

A combined line and area chart displays annual automobile sales in the USA from 2002 to 2018. The chart uses d3.line and d3.area with curveBasis to create a smoothed blue line over a filled aqua region, while d3.axisBottom and d3.axisLeft render labeled axes with green tick text. Data is loaded via d3.csv from a GitHub gist, parsed with unary plus operators, and rendered as SVG using d3.scaleLinear for both dimensions.

Loading thumbnail…

Fork of Fork of Line Chart

This example shows the annual sales of automobiles from 2003 to 2018 as a single blue line, with red tick labels and a pink y-axis label on a black background. The chart uses d3.scaleTime and d3.scaleLinear to map data, d3.axisBottom and d3.axisLeft for gridlines, and d3.line to generate the path. Data is loaded asynchronously from a GitHub-hosted CSV file using d3.csv, and the visualization is rendered as SVG.

Loading thumbnail…

Fork of ICE - 7 Pie Chart

This pie chart displays the percentage of sales for different items, with a legend positioned to the right showing each item’s name and corresponding value. The chart is built with D3 v5, using `d3.pie` and `d3.arc` to generate the segments, `d3.scaleOrdinal` for color mapping, and `d3.csv` to load the dataset from a GitHub gist. The visualization renders as SVG, with section labels and legend text styled via CSS.

Loading thumbnail…

Fork of ICE 7 Pie Chart

This D3.js pie chart displays the top 10 car-producing countries in 2019, using a dataset loaded from a CSV file via `d3.csv()`. The chart uses a pie layout from `d3.pie()` with custom arc segments, while a scaleOrdinal color palette distinguishes each country. A custom legend, built with SVG circles and text, shows country names alongside their production values formatted in thousands. The visualization is rendered entirely as SVG, with the pie centered in a 960×500 canvas and styled via external CSS.

Loading thumbnail…

Fork of Pie Chart

This example visualizes mortality rates across U.S. states as an annotated pie chart, with each slice labeled and accompanied by a legend showing state names and death counts. The visualization uses D3 v5 (d3.pie, d3.arc, d3.scaleOrdinal) to generate SVG paths and text elements, pulling data from a remote CSV file. It applies a custom color scale to distinguish slices and renders the chart centered on an SVG canvas with a static legend to the right.

Loading thumbnail…

Fork of Fork of Line Chart

This example displays a line chart of US cancer cases from 2009 to 2022, plotting student names against student marks as a proxy for years and case counts. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.axisLeft` and `d3.axisBottom` for ticks, and a `d3.line` generator for the path. Data is loaded via `d3.csv` from external GitHub gist URLs, with parsing of dates and numeric values before rendering.

Loading thumbnail…

Fork of ICE - 7 Line Chart Maanas Katta

This example charts the opening bid price of EURUSD over 2021, displaying the data as a smooth line across an SVG. The visualization uses React to manage state and D3 version 7, specifically leveraging `scaleTime`, `scaleLinear`, `extent`, and a line generator with `curveBasis` to render the curve. Data is fetched as CSV and parsed with `d3.csv`, while custom React components build the axes and tick marks. Axis labels and a title are styled with CSS classes, and the chart includes gold tick lines and blue tick text.

Loading thumbnail…

Fork of Coronavirus Linear Y Axis

This chart visualizes the global total of COVID-19 deaths over time from the Johns Hopkins dataset, using a linear y-axis to emphasize the absolute scale of growth. A single thick black line traces the rising cumulative death count, with light gray gridlines and date labels on the axes. The visualization is built with React and D3 v5, leveraging `scaleTime` and `scaleLinear` to map data, and `axisBottom` and `axisLeft` for ticks. Data is loaded via `d3.csv` and rendered as an SVG path.

Loading thumbnail…

Fork of ICE 7 Pie Chart

This D3.js pie chart displays the top 10 car-producing countries in 2019, using a dataset loaded from a CSV file via `d3.csv()`. The chart uses a pie layout from `d3.pie()` with custom arc segments, while a scaleOrdinal color palette distinguishes each country. A custom legend, built with SVG circles and text, shows country names alongside their production values formatted in thousands. The visualization is rendered entirely as SVG, with the pie centered in a 960×500 canvas and styled via external CSS.

Loading thumbnail…

Fork of Fork of Pie Chart

A pie chart displays 2022 US auto sales by brand, with each slice sized by YTD sales and a color-coded legend listing brand names and sales values in thousands. The visualization loads CSV data from a GitHub gist using d3.csv, then constructs the chart with d3.pie, d3.arc, and d3.scaleOrdinal, rendering SVG paths and legend elements via d3-selection. The code uses D3 v5 with an async data-loading pattern and custom tick formatting for sales figures.

Loading thumbnail…

Fork of Fork of 3D Scatter Plot

A 3D scatter plot visualizes economic indicators as colored spheres positioned by x, y, and z attributes from a CSV file. The visualization slowly rotates continuously, while users can pan to adjust the viewing angle. Built with Three.js for WebGL rendering and D3 for data loading and scaling, the example uses D3's `scaleLinear`, `extent`, `csv`, `schemeCategory10`, and `zoom` APIs. Points are rendered as canvas-generated sprites with distinct colors from D3's categorical color scheme.

Loading thumbnail…

Fork of Bar Chart - React & D3 (Part 24) - Stylised

A stylized bar chart displays estimated UN population data by country for selectable years, ranking a user-chosen number of countries by population. The chart uses React hooks to manage state and CSS transitions for animated bar growth. Built with D3 v5 scales and SVG rendering, bars are colored by continent and given a 3D shadow effect via SVG filters and linear gradients. Population values are formatted with d3.format abbreviations, and data comes from a CSV loaded using d3.csv.

Loading thumbnail…

Fork of Religions of Largest 20 Countries

A stacked bar chart displays the estimated 2010 religious composition of the world’s 20 most populous countries, with each bar segmented by religion and colored via `d3.scale.category10`. Hovering a segment shows a tooltip from `d3-tip`, while hovering the legend highlights that religion’s segments. The visualization uses D3.js v3 for scales, axes, nesting, and stacked layout, with data from the Pew Research Center’s Global Religious Landscape. Animated transitions and SVG rendering present the breakdown, with a custom SI tick formatter for population values.

Loading thumbnail…

Fork of Bar Chart interactive

This bar chart visualization displays a dataset of 50 randomly generated values as SVG rectangles, with each bar labeled by its numeric value and colored on a purple scale. Built with D3 version 6, the chart uses `d3.scaleBand` for the x-axis positioning and `d3.scaleLinear` for the y-axis scaling. Clicking the text above the chart triggers a one-time update that replaces the dataset with 25 new random values, recalculating the bar heights and positions accordingly.

Loading thumbnail…

Fork of Bar Chart - React & D3 (Part 24) - Stylised

This interactive bar chart displays estimated UN population levels for the top N countries in a selected year, with bars color-coded by continent to reveal global population distribution. Users can dynamically adjust both the year (1950–2020) and the number of countries shown via dropdown menus. Built with React and D3 v5, the chart uses `scaleBand` and `scaleLinear` for layout, SVG `<rect>` elements with linear gradients and drop-shadow filters for a stylized 3D effect, and loads data from a CSV file processed through D3's `csv` method.

Loading thumbnail…

Fork of Bar Chart - React & D3 (Part 24) - Stylised

This interactive bar chart displays the top N countries by estimated population for a selected year, using a React front end with D3.js v5 for data processing and SVG rendering. Data comes from a UN population dataset loaded via `d3.csv`. The chart features horizontally oriented bars styled with CSS gradients and drop shadows, colored by continent, with dropdowns to change the year and number of countries shown. Axes are built with `d3.scaleBand` and `d3.scaleLinear`, and the bar widths stretch using an SVG `<animate>` element on load.

Loading thumbnail…

Fork of 3d Bar Chart

This example displays a 3D bar chart using d3 and SVG, with bars rendered as extruded blocks and a pseudo-3D perspective projection. The chart uses a custom `bar3d.js` module that computes visible faces (front, top, left, right) based on a camera position, and animates changes via d3's transition system. The data is loaded from a TSV file and mapped to categorical x- and z-axes, with bar heights representing frequency. The bars are drawn with distinct face colors and highlight on hover, while axis labels and gridlines are styled using the d3.svg.axis API.

Loading thumbnail…

Fork of 04 - let's make a face - dataviz 2018

This interactive scatter plot explores the Iris Dataset, displaying three flower species distinguished by color. Users select which measurements appear on the x- and y-axes via dropdown menus built with d3.select and event listeners. The visualization uses d3.scaleLinear for axes, d3.axisBottom and d3.axisLeft for ticks, and SVG circles with dynamic positioning. Data loads from a remote CSV file using d3.csv, demonstrating a classic D3 v7 workflow.

Loading thumbnail…

Fork of D3 Scatter Plot

This scatter plot visualizes the Iris Dataset, plotting petal length against sepal length for individual flowers. The visualization uses D3 version 6, loading the data via the `csv` function and parsing numeric fields. The code employs `scaleLinear` to map data domains to pixel ranges, `extent` to calculate domains, and `axisLeft` and `axisBottom` to render the y- and x-axes. Data points are drawn as SVG circles using the `.join` operator, while axis labels are added as SVG text elements.

Loading thumbnail…

Fork of Fork of Rendering Data with React & D3

This example shows a horizontal bar chart of student marks, ranking the top 10 students by their scores. The visualization uses React hooks (`useState`, `useEffect`) to load CSV data via `d3.csv`, then renders SVG rectangles scaled with `d3.scaleBand` and `d3.scaleLinear`. Axes are drawn manually using mapped tick values rather than D3 axis generators, with React creating the SVG elements. The chart updates reactively as data loads, displaying a loading message until the CSV arrives from the GitHub gist URL.

Loading thumbnail…

Fork of Fork of Stacked bar chart of Yelp data: top cities

This stacked bar chart displays the count of highly-rated restaurants (4 stars or above) across ten cuisine types for nine Massachusetts cities, excluding Boston. Each horizontal bar represents a city, segmented by food category using distinct colors from a custom ordinal scale via `d3.scaleOrdinal`. The visualization is built with D3.js v7, processing CSV data through `d3.csv` and `d3.stack`. Interactive tooltips appear on mouseover, showing the cuisine and its count, while a manually positioned legend lists food types alongside the axis.

Loading thumbnail…

Fork of Stylized Bar Chart

This bar chart displays the top 10 most populous countries using United Nations World Population Prospects 2019 data, with population values formatted in billions. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to map country names and population sizes to screen coordinates, rendering SVG rectangles for each bar. The chart includes styled axes with formatted tick labels, a population axis label, and native SVG tooltips via `<title>` elements, all styled with the Poppins font.

Loading thumbnail…

dataset

This visualization displays the top 20 trading volumes on the B3 stock exchange as a horizontal bar chart, using an SVG canvas. It loads data from a CSV file, scales the quantity values by 1,000, and renders bars with D3's `scaleLinear` for the x-axis and `scaleBand` for the y-axis. The chart includes labeled axes with custom tick formatting via `axisBottom` and `axisLeft`, and removes default axis lines for a cleaner look.

Loading thumbnail…

ICE-5: Loading and Parsing CSV Data with D3.js

This example demonstrates loading and parsing a remote CSV file using D3.js version 7. The page displays the dataset's size, row count, and column count within a styled HTML element, alongside an embedded SVG image. It uses the `d3.csv` method to fetch and parse the data from a GitHub gist URL, then formats the summary with `d3.csvFormat` and updates the DOM via `document.getElementById`. The code also includes an unused `index.js` that imports from D3 and a local ES6 module, illustrating VizHub's modular workflow.

Loading thumbnail…

Fork of Let's make a face with D3.js!

This example uses D3.js to draw a cartoon face with SVG shapes, including a blue head, red outline, eyes, and a mouth. The code selects the SVG element and uses `append` with `g`, `circle`, `rect`, and `path` to construct the face, while setting coordinates and dimensions through `attr`. A D3 `transition` chain animates the eyebrows, moving them up and down over a four-second loop. The face displays fundamental DOM manipulation and animation techniques in D3 v5.