N

nagamaheswar

@nagamaheswar·31 public vizzes

Loading thumbnail…

Fork of Fork of Network graph

This network graph displays eight employees and their weighted connections using a force-directed layout. The visualization reads data from a local `data.json` file and renders nodes as red circles with blue text labels, while purple links vary in stroke width according to each connection’s weight. The graph uses the older `d3.layout.force` API to apply gravity, charge, and distance parameters that position the nodes. SVG is the rendering approach, with drag interactions enabled through the force layout’s drag method.

Loading thumbnail…

Fork of Interactive Tree

Interactive tree visualization renders a hierarchical family dataset from `treeData`. Nodes are SVG groups containing a colored rectangle and text label, connected by horizontal links. Clicking a node collapses or expands its children, triggering `transition` animations that reposition descendant nodes and labels. The visualization uses `d3.hierarchy`, `treeLayout`, and `linkHorizontal` to compute the tree layout, and a custom `zoom` event for panning and scaling the SVG canvas.

Loading thumbnail…

Fork of Tree Example

This example shows an animated, collapsible tree diagram built with D3.js v3. The visualization presents a hierarchical dataset of fictional nodes and sizes, with the root node branching into two children and deeper sub-nodes. Users can click any node to collapse or expand its children, with smooth transitions adjusting node positions and links. The code uses `d3.layout.tree`, `d3.svg.diagonal`, and SVG transitions, with circles and text labels rendered for each node and gray paths connecting them.

Loading thumbnail…

Fork of US states map : with colorScale. One color for each country

This visualization displays a choropleth map of US states, where each state is filled with a distinct color from a categorical palette. The map uses the d3.geoAlbersUsa projection to render the geographic boundaries as SVG paths. Data is loaded from the us-atlas counties-10m.json file, with state names mapped to colors via d3.scaleOrdinal. States turn blue on hover, using CSS styling within the d3.select, d3.geoPath, and d3.json workflow.

Loading thumbnail…

Fork of Swedish map

This visualization displays the counties of Sweden as a choropleth-style map, with each region filled in teal and internal borders highlighted in cyan. It renders county boundaries using the TopoJSON format, converted to GeoJSON features and an interior mesh. The map is projected with a Mercator projection and fitted to the viewport via `d3.geoPath`’s `fitExtent`. Built with React and D3 v5, the code loads geographic data from a remote TopoJSON source and renders the paths as SVG elements.

Loading thumbnail…

Fork of Portland Map

This example displays a choropleth-style map of Portland neighborhoods, rendered as a single-color outline using a conic equal-area projection. The visualization uses React to manage the component lifecycle, with `useData` fetching TopoJSON from a GitHub gist and converting it to GeoJSON via `topojson.feature`. The `d3.geoPath` function, configured with `d3.geoConicEqualArea`, transforms the geographic coordinates into SVG paths, which are styled with a teal stroke. The map is centered on Portland’s coordinates and scaled to fit a 960×500 viewport.

Loading thumbnail…

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

A choropleth map of India displays each state as a colored SVG path, with state names labeled at path centroids. The visualization uses D3 v5’s `d3.geoMercator` projection and `d3.geoPath` to render TopoJSON data from a remote GitHub repository. State colors are assigned via `d3.scaleOrdinal` with `schemeCategory10`, while `topojson.feature` extracts the geographic shapes. The code excludes the first feature, presumably to remove a national boundary, and appends hover-less, static text labels for each state.

Loading thumbnail…

Fork of Polished World Map

This example displays a natural Earth projection world map, with landmasses rendered in a solid color, country borders highlighted, and graticules forming a grid overlay. The visualization is built with React and D3 v5, using `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to project and draw the map, while `topojson` converts World Atlas TopoJSON data into GeoJSON features and mesh boundaries. The SVG output is styled via CSS, giving the sphere a distinct fill and stroke colors.

Loading thumbnail…

Fork of Historical Space Launches on a map

This interactive visualization combines an equal-Earth projected world map with a brushed time-series histogram to explore historical space launches. Circles sized by launch frequency mark geographic sites, while a linked date histogram with a brush filter controls which launches appear on the map. The example uses React with d3-geo’s `geoEqualEarth` and `geoPath` for map rendering, d3-scale’s `scaleSqrt` for circle sizing, and d3-brush’s `brushX` for filtering. World topology comes from the World Atlas TopoJSON dataset.

Loading thumbnail…

Fork of Historical Space Launches on a map

A choropleth-style world map displays historical space launch sites as red dots, with a linked date histogram below showing launch frequency over time. The map and histogram are synchronized through a brush filter: dragging across the histogram updates the map to show only launches within the selected time range. The visualization uses React for component structure and D3 v7 APIs such as `d3.bin`, `d3.brushX`, `d3.scaleTime`, and `d3.geoPath` to render the world atlas and plot the filtered data points. Launch data is loaded from a CSV file.

Loading thumbnail…

Fork of ICE 7 Area Chart

This visualization shows annual car sales in the United States over time, combining a blue line chart with a pink filled area beneath it. The chart uses D3 v5’s `scaleTime`, `scaleLinear`, `line`, and `area` generators with `curveBasis` to smooth the path. Data comes from a CSV file loaded via `d3.csv`, with years parsed using `d3.timeParse`. Axes are rendered with `axisBottom` and `axisLeft`, and the SVG output includes gridlines from tick sizes.

Loading thumbnail…

Fork of Fork of ICE 7 Line Chart

This example shows annual car sales in the United States from 2010 to 2019 as a single red line chart. The x-axis represents the year, parsed with `d3.timeParse`, and the y-axis shows the number of cars sold. Using D3 v5 with SVG, the code loads CSV data from a GitHub gist, scales the axes with `scaleTime` and `scaleLinear`, and draws the line with `line()`. Grid lines are rendered via axis ticks, with red and blue axis labels and a bold title.

Loading thumbnail…

Fork of ICE 7 Area Chart

This example visualizes car sales in India from 2009 to 2019 using a combined line and area chart. The line shows sales trends over time, while the filled area beneath it emphasizes the magnitude of sales. It uses d3.scaleTime and d3.scaleLinear to map the data, along with d3.line and d3.area generators with a curveBasis smoothing. Data is loaded as CSV and formatted with d3.timeParse, rendered as SVG with axes labeled “Year” and “Sales.”

Loading thumbnail…

Fork of ICE 7 Line Chart

This line chart shows annual car sales in the United States from 2010 to 2019, with years on the x-axis and the number of cars sold on the y-axis. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generators to render an SVG path. Data is loaded from a CSV file via `d3.csv` and parsed with `d3.timeParse` to convert year strings into date objects. Grid lines are styled through tick marks, and the line itself is drawn in red with a custom CSS class.

Loading thumbnail…

Fork of Fork of Fork of ICE 7 Line Chart

This line chart shows car sales in India from 2009 to 2019, with years on the x-axis and sales figures on the y-axis. The visualization uses D3 v5 to load CSV data, parse dates with `d3.timeParse`, and render an SVG path via the `d3.line` generator. Axes are built with `d3.axisBottom` and `d3.axisLeft`, while scales use `d3.scaleTime` and `d3.scaleLinear`. The chart includes labeled axes, grid lines, and a red line styled through CSS, with a dark background theme.

Loading thumbnail…

Fork of Fork of ICE 7 Line Chart

This example visualizes car sales in India from 2009 to 2019 using a single line chart. The chart plots sales figures against parsed dates, with red grid lines and a red line path connecting annual data points. The visualization uses d3.csv to load data from a GitHub gist, d3.scaleTime and d3.scaleLinear for axes, and d3.line to generate the SVG path. It employs d3.axisBottom and d3.axisLeft with tick marks removed from the domain to create sparse gridlines. The chart is rendered entirely as SVG with custom CSS styling for text, ticks, and the line stroke.

Loading thumbnail…

Fork of ICE 7 Line Chart

This line chart displays car sales in India from 2009 to 2019, with the x-axis representing years and the y-axis showing sales volume. The visualization uses d3.scaleTime and d3.scaleLinear to map the data, while d3.axisBottom and d3.axisLeft generate the labeled axes with grid lines. A d3.line generator creates the red path connecting data points, with the data loaded from a CSV file via d3.csv and parsed using d3.timeParse. The SVG output is styled with CSS, applying red coloring to text, axes, and the line stroke against a dark background.

Loading thumbnail…

Fork of ICE 7 Line Chart

This line chart shows the number of cars sold in India from 2009 to 2019, with time on the x-axis and the count of sold cars on the y-axis. The visualization uses D3 v5 to render an SVG element, employing `d3.scaleTime` and `d3.scaleLinear` for the axes, `d3.axisBottom` and `d3.axisLeft` for tick marks, and `d3.line` to generate the path. Data is loaded from a CSV file hosted on GitHub and parsed with `d3.csv`. The chart features red axes and a thick red line on a dark background.

Loading thumbnail…

Fork of Temp Line Chart

This line chart visualizes the number of cars sold per year, with time on the x-axis and sales figures on the y-axis. Built with React and D3 v7, it uses `scaleTime` and `scaleLinear` for scaling, `line` with `curveNatural` for the path, and SVG `circle` elements for data points. The chart reads from a CSV file, includes labeled axes with gridlines, and uses `timeFormat` for tick labels.

Loading thumbnail…

Fork of [Vega-Lite] 3.2 li Chart

This example displays a simple line chart of the number of cars sold in millions over time, using temporal data for the x-axis and quantitative data for the y-axis. Built with Vega-Lite, it loads a CSV from a GitHub gist and renders the visualization through Vega-Embed, which handles the parsing and drawing of the chart from the JSON specification. The chart is given a fixed width of 360 pixels and uses a red—or default—line mark to connect the data points across the years.

Loading thumbnail…

Fork of Coronavirus Linear Y Axis

The chart plots global cumulative COVID-19 deaths over time on a linear y-axis, using a black line spanning the full window. It renders as an SVG via React, with D3 scales (`scaleTime`, `scaleLinear`) and the `d3.line` generator. The y-axis includes a custom `YMarkerLine` at 10,000 deaths, while the x-axis uses `d3.axisBottom`. Data comes from the Johns Hopkins time-series CSV, aggregated daily by summing deaths across all regions.

Loading thumbnail…

Fork of Pie Chart

This fork of a pie chart visualizes the top 10 countries by medal count, with each slice and corresponding legend colored by a manually specified scaleOrdinal range. The code loads CSV data from a GitHub gist via `d3.csv`, then uses `d3.pie` and `d3.arc` to generate the SVG paths, while `d3.scaleOrdinal` assigns colors and the legend is built with appended SVG rectangles and text elements. The total sum of medals is computed but not displayed in the chart itself.

Loading thumbnail…

Fork of Fork of Stylized Scatter Plot with Color Legend

A scatter plot displays the Iris Dataset, mapping petal width to sepal length for individual flowers, with color indicating species. Rendered as SVG via D3 v5, the visualization uses `d3.csv` to load data, `d3.scaleLinear` for axes, and `d3.legendColor` for the categorical color legend. Axes are styled with grid lines and labels using `d3.axisBottom` and `d3.axisLeft`, while the `d3.schemeCategory10` palette colors the circles.

Loading thumbnail…

Fork of Fork of Fork of Fork of Customizing Axes

This bar chart displays the top 10 scores by Indian batsmen, with player names on the y-axis and runs scored on the x-axis. It uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render axes. The y-axis ticks are cleaned by removing their domain lines, while the x-axis applies a custom tick format via `format('.3s')` and replaces “G” with “B”. Data is loaded as CSV from a GitHub gist, and SVG rendering is styled with CSS for tick lines and labels.

Loading thumbnail…

Fork of Fork of Fork of Customizing Axes

This bar chart displays the top 10 scores by Indian batsmen, with runs scored on the x-axis and player names on the y-axis, sourced from a CSV file embedded in the code. Built with D3 v5, it uses `scaleLinear` and `scaleBand` for axes, `axisBottom` and `axisLeft` for tick generation, and custom formatting via `format('.3s')`. The SVG rendering applies extensive styling through CSS, including large green tick labels, red axis labels, and a green title, demonstrating axis customization.

Loading thumbnail…

Fork of Customizing Axes

This bar chart displays Olympic medal counts for the top 10 countries, with orange bars labeled by country and an x-axis showing medal totals in abbreviated format. The data comes from a CSV file loaded via `d3.csv`. The visualization demonstrates axis customization using `d3.axisLeft` and `d3.axisBottom` with `d3.scaleLinear` and `d3.scaleBand`, including custom tick formatting, tick lines in green, and rotated labels. The chart renders in SVG with a red title and axis labels styled through CSS.

Loading thumbnail…

Fork of Stylised Scatter Plot

This scatter plot visualizes the Iris dataset, showing the relationship between petal length and sepal length. The visualization uses React components for the axes and marks, with D3 v6 handling data loading via `useCsv` and scaling through `scaleLinear` and `extent` for domain calculation. SVG is the rendering approach, with circles representing data points and tooltips showing precise values. The chart includes styled axis elements with custom tick formatting using D3's `format` function. The code demonstrates a modular structure with separate React components for axes, marks, and data handling.

Loading thumbnail…

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

This example visualizes the top 10 most populous countries in 2020 using a horizontal bar chart rendered as SVG. It loads medal data from a CSV via `d3.csv`, slices the first 10 rows, and uses `scaleBand` for the y-axis and `scaleLinear` for the x-axis to map country names and population values. The React app manages data with `useState` and `useEffect`, while custom tick labels and grid lines are generated manually with D3 scales instead of using `axisLeft` or `axisBottom`. Bars are drawn as `<rect>` elements inside a translated `<g>` group.

Loading thumbnail…

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

This example analyzes the contents of a flight dataset loaded from a remote CSV file, displaying a summary of its size, row count, and column count. Using D3.js v7, it calls `d3.csv` to parse the data and `d3.csvFormat` to calculate the file size in kilobytes. A simple pre-styled HTML element presents the result. The page also includes two inline SVG images, with a plane graphic moving across a marquee and a static chart centered below, though no interactive visualization or data-driven rendering is performed.

Loading thumbnail…

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

This visualization displays a text summary of a flight dataset, showing its size in kilobytes, row count, and column count. It loads CSV data from a remote GitHub Gist using `d3.csv` and formats the analysis with `d3.csvFormat`. The page presents the message in a large `pre` element and includes a static SVG image. The code demonstrates asynchronous data fetching with Promises and uses D3.js v7 alongside basic HTML and CSS styling.

Loading thumbnail…

Fork of Smiley Face Part I-edit

This visualization displays a smiling face composed of a yellow circle with a red outline, two solid black eyes, and a curved mouth, all centered within a 900-by-500 SVG canvas. The image is rendered using React and D3 v7, with the mouth generated by D3’s `arc` function to create a precise arc path spanning from 90 to 270 degrees. The face elements are positioned using hardcoded offsets and radii, and the rendering leverages React’s declarative SVG output within a simple `App` component.