V

vegurusaiprathyusha

@vegurusaiprathyusha·31 public vizzes

Loading thumbnail…

Country map with Topojson data

This example shows a Mercator projection of Africa rendered as an SVG map, with each country outlined in white and filled with teal. The code loads GeoJSON data from a GitHub Gist URL using `d3.json`, then uses `d3.geoMercator` to define the projection and `d3.geoPath` to generate the SVG path data for each feature. The map is centered within a 600x400 SVG canvas, and the projection is scaled and translated accordingly. The visualization relies on D3 v4 and the `d3-geo-projection` library.

Loading thumbnail…

Network Graph

This network graph visualizes friendships among eight individuals, with nodes representing people and directed links showing the relationship between a source and target. The data comes from a local `data.json` file, and the layout is computed using `d3.forceSimulation` with forces for link distance, charge, collision, and centering. Rendered as SVG, nodes are draggable via `d3.drag`, and hovering highlights nodes with a color change. Links include arrow markers and vary in stroke style, while node labels display each person’s name.

Loading thumbnail…

Family tree

This example shows a family tree as a hierarchical node-link diagram, with colored circles representing individuals and curved paths showing parent-child connections. The visualization uses d3.stratify to convert flat data into a hierarchy and d3.tree to compute the layout, rendering nodes as SVG circles colored by their depth in the tree (pink, orange, or red) and labeling each with the person’s name. The code runs in a React environment with D3 v5, drawing all elements as SVG shapes.

Loading thumbnail…

Fork of family tree

A fork of a family tree visualizes generational relationships with colored nodes and animated connection paths against a black background. The D3.js v6 code uses the `d3.stratify()` and `d3.tree()` APIs to structure and position the hierarchical data, while SVG circles and text labels represent individuals. Node colors shift by generation depth, and yellow paths animate their drawing over 1.5 seconds, with circles growing into place. The example demonstrates a custom fork of D3's tree layout, using `select`, `append`, and `transition` methods for rendering.

Loading thumbnail…

World map with the world Topojson data

This example displays a world map using the Topojson world data, rendered as an SVG with a teal sphere background and white country boundaries. It employs D3.js v5’s geoEquirectangular projection and d3.geoPath to convert geographic coordinates into SVG paths. The data loads from a remote GitHub gist, and the topojson library’s feature function extracts country geometries. The map is styled via CSS classes for the sphere and individual countries.

Loading thumbnail…

ICE 7 Reusable Iris Scatter Plot

This interactive scatter plot visualizes the Iris dataset, showing the relationship between petal and sepal measurements for three flower species (setosa, versicolor, and virginica) using color-coded circles. Built with D3 v6, the visualization cycles through different measurement combinations every 2 seconds using setInterval, updating the x-axis and scatter positions. The implementation uses d3.scaleLinear for axes, d3.scaleOrdinal for species colors, and d3.axisLeft/d3.axisBottom for rendering axes in SVG. Data loads from a GitHub Gist CSV via d3.csv, with circles animated through D3's join pattern.

Loading thumbnail…

ICE 7 line chart

This line chart visualizes Amazon stock prices from 2010 to 2020, with the year on the x-axis and stock value on the y-axis. Built with D3 v5 and React, it uses `scaleTime` and `scaleLinear` to map the data, `line` to generate the path, and `axisLeft`/`axisBottom` for labeled axes. The SVG rendering includes grid lines and a styled orange line, with data loaded from a CSV file parsed via D3’s `csv` function.

Loading thumbnail…

Ice 7 area chart

This area chart visualizes Amazon stock prices from 2010 to 2020, with a smooth curved line and orange fill emphasizing price trends over time. The chart uses D3 v5’s `scaleTime` and `scaleLinear` for axes, `area` and `line` generators with `curveBasis` for smoothing, and `csv` to load external stock data. Rendered as an SVG within a React framework, it includes labeled axes and gridlines via `axisBottom` and `axisLeft`.

Loading thumbnail…

ICE 7 Pie Chart

This visualization displays a pie chart of the top 10 countries with the highest COVID-19 case counts, with each slice labeled with its corresponding value in millions. Legend entries list each country alongside its case count, and the chart uses a distinct color for each segment. The example loads CSV data from a GitHub Gist and renders the chart using D3 v5 APIs, including `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` for color assignment, with SVG as the output format within a React framework.

Loading thumbnail…

ICE7 reusable

This interactive scatter plot visualizes the Iris dataset, displaying petal length against sepal length for three species of iris flowers. The visualization cycles through different x-axis variable combinations every 2.1 seconds, enabling comparisons across all four floral measurements. Built with React and D3 v6, the code uses the `scaleLinear`, `scaleOrdinal`, and `axisBottom` APIs to render SVG circles and axes, with a `setInterval` timer driving the animation. Data is loaded from a CSV file via D3's `csv` parser.

Loading thumbnail…

Fork of Reusable Iris Dataset Scatter Plot

This animated scatter plot cycles through different x-axis attributes of the Iris Dataset every two seconds, demonstrating a reusable chart pattern. Built with D3 v6, it uses `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` to render SVG circles and axes. The chart transitions through sepal width, petal length, and petal width against sepal length, with data loaded via `d3.csv` and parsed into numeric values. The visualization highlights how a single scatter plot function can be reconfigured dynamically to explore multiple variable relationships.

Loading thumbnail…

Fork of 3D Scatter Chart

This interactive 3D scatter chart visualizes the Iris dataset, plotting petal length, sepal length, and petal width as points in three-dimensional space. The chart uses the Highcharts library with its highcharts-3d module to render the scatter3d series, while D3.js (d3.csv) loads the data from a remote CSV file. Users can rotate the plot by dragging with mouse or touch events, which updates the chart’s alpha and beta angles via Highcharts’ chart.update method. The visualization also applies radial gradient colors to the points and frames the plot with semi-transparent grid planes.

Loading thumbnail…

Fork of 3D chart

This visualization presents a 3D bar chart of the top 10 countries with the highest COVID-19 death counts, rendered using the d3-x3d library, which leverages the x3dom framework for WebGL-based 3D graphics. The chart displays each country as a vertical bar, with height representing death numbers, populated from a CSV dataset loaded via d3.csv. The code explicitly uses `d3.x3d.chart.barChartMultiSeries()` to generate the 3D scene, combining D3 v5 for data handling and CSS for page styling.

Loading thumbnail…

Fork of 3D Bar Chart using D3.js

This example renders an interactive 3D bar chart showing the top 10 countries with the highest COVID-19 death counts, as loaded from a CSV file using D3’s `csv` function. It builds the visualization by combining D3 v5, the `d3-3d` plugin, and the `d3-x3d` library, which converts SVG-like scenes into X3DOM for hardware-accelerated 3D rendering in the browser. The chart uses multi-series bars, with each country represented as a separate series, and scales are implicitly handled via the x3d.barChartMultiSeries component. Axes and data parsing are managed with standard D3 utilities (`scaleLinear`, `axisLeft`, `axisBottom`).

Loading thumbnail…

Fork of Colm Lang A2 Bar Chart

This bar chart displays the average share of renewable energy production from 2000 to 2020 for EU member states, with each bar representing a year’s value from a CSV dataset of COVID deaths. The visualization uses p5.js to render the canvas, drawing axes, tick marks, and labeled bars via functions like `drawBars`, `drawAxis`, and `getHeight`. It loads data with `loadTable`, scales bar heights proportionally to the axis, and includes rotated y-axis text. The code relies on p5.js’s drawing API and custom layout logic for the fixed-size canvas.

Loading thumbnail…

Fork of ICE-6

This visualization displays a horizontal bar chart of the top 10 countries with the highest COVID-19 death counts, with country names on the y-axis and death totals on the x-axis. The chart uses React for component structure and D3 v5 modules including `scaleLinear`, `scaleBand`, and `csv` for data loading, rendering as SVG rectangles. Data is sourced from a public CSV file fetched asynchronously, and the bars are styled with a uniform purple fill against a dashed-border title.

Loading thumbnail…

Fork of Electric Bar Chart Using d3.stack

A stacked bar chart displays personal electricity consumption across two floors and common areas over a two-year period. The visualization uses d3.stack to group data by account number, with d3.scaleBand and d3.scaleLinear handling axes. Monthly totals are rendered as SVG rectangles with green and blue fills from d3-scale-chromatic, while hover states adjust opacity and title elements show kilowatt-hour values. The data comes from a CSV file of meter readings.

Loading thumbnail…

Fork of ICE-6 Tutorial Bar Chart

This bar chart displays the top 10 cosmetic products by revenue, using a horizontal layout where product names are on the y-axis and revenue in dollars on the x-axis. The visualization is built with D3 v5, using `scaleLinear` and `scaleBand` to map data, and `axisLeft` and `axisBottom` for customized axes with tick formatting that converts large numbers to abbreviations. Data is loaded from a CSV file via `d3.csv` and rendered as SVG rectangles. The chart includes a title and axis label, with a light styling applied through external CSS.

Loading thumbnail…

Fork of Fork of Colm Lang A2 Bar Chart

This bar chart displays the average share of renewable energy production from 2000 to 2020 for EU member states, with each bar labeled by year and scaled to the axis height using a custom `getHeight` function that rounds the maximum value to the nearest five. The visualization uses p5.js to render the canvas, load a CSV dataset via `loadTable`, and draw axes, gridlines, tick marks, and bars through functions like `drawAxis`, `drawTicks`, and `drawBar`, with the data sourced from a processed Europe power sector CSV file.

Loading thumbnail…

Fork of Colm Lang A2 Bar Chart

This visualization displays the average share of renewable energy production in EU member states from 2000 to 2020, using a bar chart where each bar represents a year with its corresponding percentage value. Built with p5.js, it loads CSV data from a GitHub-hosted file, draws axes with tick marks and labels, and renders bars scaled proportionally to the dataset’s maximum value. The chart uses a simple Cartesian coordinate system with custom scaling functions to map data values to pixel heights.

Loading thumbnail…

Fork of Stylized Bar Chart

This example displays the top 10 most populous countries as horizontal bars, using data from the United Nations World Population Prospects 2019. Built with React and D3 v5, it maps country names to the y-axis via `scaleBand` and population values to the x-axis with `scaleLinear`, rendering SVG rectangles through the `Marks` component. The axes are custom-built using `AxisBottom` and `AxisLeft`, with formatted tick labels (e.g., “1.4B”) and a hover tooltip showing the exact value.

Loading thumbnail…

Fork of dataset

This visualization displays the trading volumes of Brazilian stocks listed on B3, represented as a horizontal bar chart. The chart ranks the top 20 securities by volume using a linear scale for the x-axis and a band scale for the y-axis, with the longest bar corresponding to the highest volume. The SVG-based visualization is built with D3 v5, using `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` APIs. Data is loaded from a CSV file and parsed from strings to numbers, with the axes styled and labeled to show volume values.

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This example shows a horizontal bar chart of COVID-19 case counts for 20 countries, using SVG marks rendered through React components. It combines React state management with D3 scales (`d3.scaleBand`, `d3.scaleLinear`) to position rectangles and axes. The code fetches CSV data from a GitHub gist, maps values with `d3.csv`, and manually draws tick lines and labels using JSX rather than D3 axis generators.

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This visualization displays the Iris dataset as a scatter plot, mapping petal length to the x-axis and petal width to the y-axis, with points colored by species (orange, darkpink, and gold). It loads CSV data via `d3.csv`, parses numeric fields, and uses `d3.scaleLinear` with `d3.extent` to set domains. Axes are rendered with `d3.axisLeft` and `d3.axisBottom`, while circles are drawn using SVG `selectAll().data().join()`. Although labels mention sepal dimensions, the axis text is inconsistent, and the `rx`/`ry` attributes do not affect circle rendering.

Loading thumbnail…

Fork of Let's make a Bar Graph with D3.js

This example shows a horizontal bar chart of the world’s ten most populous countries, using population values from a CSV file. It renders SVG bars with a linear scale for population and a band scale for country names, adding axis labels via `axisLeft` and `axisBottom`. The code imports `select`, `csv`, `scaleLinear`, `scaleBand`, `max`, and the axis functions from D3 v7, and transforms the raw population numbers by multiplying by 1000 before drawing.

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3_Ramakanth

This visualization displays the top 10 highest-grossing movies in USD as a horizontal bar chart, with movie titles on the y-axis and weekend gross earnings on the x-axis. The React app fetches CSV data from a GitHub gist, uses `d3.scaleBand` and `d3.scaleLinear` to map film names and gross values, and renders SVG rectangles for bars with tick lines and labels. It relies on React's `useState` and `useEffect` hooks to load and sort the data, while D3 v5 handles the scales and chart layout.

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This example shows a horizontal bar chart of COVID-19 case counts for 20 countries, using SVG marks rendered through React components. It combines React state management with D3 scales (`d3.scaleBand`, `d3.scaleLinear`) to position rectangles and axes. The code fetches CSV data from a GitHub gist, maps values with `d3.csv`, and manually draws tick lines and labels using JSX rather than D3 axis generators.

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This fork of an ICE-6 example visualizes the top 10 most populous countries as a bar chart, rendered as SVG marks within a React application. Using D3’s `scaleBand` and `scaleLinear` for axes, it maps country names to y-positions and population values to bar widths, with axis lines and tick labels generated from D3's scale methods. Data is loaded asynchronously from a CSV URL via `d3.csv`, and the chart is updated through React state management as the data loads.

Loading thumbnail…

Fork of ICE-6 Tutorial Bar Chart

This bar chart displays the top 10 cosmetic products by revenue, using a horizontal layout where product names are on the y-axis and revenue in dollars on the x-axis. The visualization is built with D3 v5, using `scaleLinear` and `scaleBand` to map data, and `axisLeft` and `axisBottom` for customized axes with tick formatting that converts large numbers to abbreviations. Data is loaded from a CSV file via `d3.csv` and rendered as SVG rectangles. The chart includes a title and axis label, with a light styling applied through external CSS.

Loading thumbnail…

ICE 5

This example displays a hand-drawn SVG snowflake in the center of the page, along with a title, author name, and a message about the loaded data. The page uses D3 v7 to fetch a CSV file containing a houses dataset, then formats the data to display its size in kilobytes, row count, and column count. The SVG is rendered as a static image, while the data summary appears in a styled `<pre>` element, demonstrating D3’s `d3.csv` and `d3.csvFormat` functions for data loading and inspection.

Loading thumbnail…

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

This example demonstrates how to load and parse CSV data using D3.js (v7). The page displays a summary message showing the dataset's size in kilobytes, row count, and column count, which is fetched from a GitHub gist. The code uses `d3.csv` to fetch and parse the data, `d3.csvFormat` to calculate its size, and DOM manipulation via `document.getElementById` to update the message container. An embedded SVG illustration of a city scene accompanies the textual output.