S

sumanthsomu1

@sumanthsomu1·22 public vizzes

Loading thumbnail…

Social Network graphic

This social network graphic visualizes family relationships using a force-directed layout, with nodes representing individuals and links showing connections weighted by line thickness. The red circular nodes display names and support dragging, while blue links scale their stroke width based on relationship weight. Built with d3.v4 and the legacy d3.layout.force API, the visualization loads data from family.json and renders everything as SVG. The simulation applies gravity, charge, and distance parameters to position nodes dynamically.

Loading thumbnail…

MY family Tree

A family tree chart displays hierarchical relationships among relatives, with clickable nodes that expand and collapse child branches. The visualization shows names of family members across multiple generations, using red circular nodes and connecting red lines on a silver background. The chart is built with D3.js version 3.5.17, utilizing the `d3.layout.tree` for positioning and `d3.svg.diagonal` for curved link paths. The SVG-based animation transitions nodes smoothly over 750 milliseconds, while node size and text styling remain consistent throughout.

Loading thumbnail…

FAMILY TREE

This example displays a bold, full-page message reading “Hello HTML!” in massive, centered type. The visualization demonstrates a minimal HTML page styled with CSS and rendered using plain JavaScript. It uses no external libraries or data sources, serving as a basic starter template for web-based visualization projects. The code defines a div with a single CSS class to control font size and text alignment, showing how simple static text can be presented as a visual composition.

Loading thumbnail…

Fork of MY Tree ICE-8

This tree chart displays a family lineage starting with peddi kumara, with branching generations of descendants shown as clickable nodes. Built with D3.js v3.5, the visualization uses the `d3.layout.tree` algorithm and `d3.svg.diagonal` links to connect nodes. The SVG renders cyan circles with red borders for nodes, blue curved paths for links, and an orange page background. Animated transitions of 750 milliseconds reposition nodes when clicked, and the tree is arranged with fixed-depth spacing of 180 pixels per level.

Loading thumbnail…

India Map: ICE-8

This example renders a choropleth map of Indian states using D3.js v5 and TopoJSON, with a Mercator projection and SVG paths generated via `d3.geoPath`. Each state is filled with a categorical color from `d3.scaleOrdinal` and labeled with its name at the path centroid. Clicking a state toggles its fill color between the original and a brighter white-blended version using `d3.interpolateRgb`. State boundaries are styled with a white stroke, and the map is layered over a yellow SVG background.

Loading thumbnail…

World Map with TopoJSON

This example displays a world map rendered as green SVG paths on a light blue background, with countries brightening on mouseover. It loads country boundaries from the world-atlas TopoJSON dataset and converts them to GeoJSON features using topojson.feature. The d3.geoMercator projection and d3.geoPath API generate the map geometry, while event handlers dynamically change path fill colors to highlight individual countries.

Loading thumbnail…

Fork of Fork of Fork of ICE 08 11540905

This visualization displays a world map with countries filled in green and blue, highlighting hovered regions in red. It uses D3 v5 and TopoJSON to render geographic boundaries as SVG paths via `d3.geoPath`, with the `topojson` library parsing the map data. Country styling and hover effects are controlled through CSS classes, while the SVG canvas is sized to 960 by 500 pixels. The map focuses on interactive exploration of national borders without additional data layers or animations.

Loading thumbnail…

Fork of Iris Scatter Plot

This scatter plot visualizes the Iris dataset, mapping sepal width against petal length for three iris species. Each species appears as a distinct symbol—circles, crosses, and diamonds—with a legend in the upper right corner. The visualization uses D3.js v7, with the data loaded via `d3.csv` from a GitHub Gist. The chart is rendered as SVG, using `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for tick marks, and `d3.symbol` to generate the custom point shapes.

Loading thumbnail…

Area Chart

This area chart visualizes car sales in India from 2009 to 2019, with a smooth curve representing sales over time and a green filled area beneath the line. The SVG chart uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, `line`, `area`, and `curveBasis` to construct the visualization. The data is loaded from a CSV file hosted on GitHub and parsed using D3's `csv` and `timeParse` functions, with the chart rendered in a React framework.

Loading thumbnail…

Line graph

This line graph displays car sales from 2010 to 2020, with years on the x-axis and sales on the y-axis. The visualization uses React with D3 v5 APIs such as `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to generate an SVG chart. Data is loaded from a CSV file hosted on GitHub, and rendered with styled axes, a red line path, and a title. The chart includes labeled axes and gridlines via tick sizes.

Loading thumbnail…

Untitled

This example shows India’s population from 2010 to 2019 as a single steelblue line chart. The visualization uses d3.line to generate the path, with a time scale on the x-axis and a linear scale on the y-axis. Data comes from a CSV file containing country-level population figures, parsed into year and population pairs. The chart includes styled axes, tick marks, and a rotated y-axis label, rendered as SVG in the browser.

Loading thumbnail…

Line Chart - India Population

This line chart displays India’s population over time, using a single line path to trace growth from 1960 to 2020. The visualization encodes years on a linear x-axis and population counts on a y-axis, with axes formatted via `d3.axisBottom` and `d3.axisLeft`. Data is fetched from a CSV file using `d3.csv`, then parsed into year-population pairs. The chart is rendered as an SVG using `d3.line` and `d3.scaleLinear`, with a steelblue stroke and margins applied through a translated group element.

Loading thumbnail…

Fork of Fork of line plot 3d

A line plot shows the temperature in San Francisco over a week, with time on the x-axis and temperature in degrees on the y-axis, using a smoothed curve. The visualization is rendered as an SVG using D3 v7, employing `scaleTime` and `scaleLinear` for axes and `line` with `curveBasis` for the path. The data comes from a CSV file, with axis labels and a title added via SVG text elements.

Loading thumbnail…

Fork of Fork of line chart section 3

This visualization displays car sales totals from 2013 to 2021 using a line chart, with time on the x-axis and total sales on the y-axis. The SVG-based chart uses d3.scaleTime and d3.scaleLinear for axes, while d3.line generates the red path. Data is loaded from a CSV file via d3.csv, and d3.timeParse converts date strings into time objects. Both axes include labeled ticks and gridlines, with the chart rendered entirely through D3’s SVG manipulation.

Loading thumbnail…

Fork of line plot 3d

This visualization shows hourly temperature readings in San Francisco over a week, displayed as a smooth line chart with a time-based x-axis and a linear temperature scale. The data is loaded from a local CSV file with d3.csv, then parsed and rendered using d3.scaleTime, d3.scaleLinear, and d3.line with curveBasis interpolation. Axis elements are generated with d3.axisBottom and d3.axisLeft, producing a clean SVG chart with labeled axes and gridlines.

Loading thumbnail…

India Population Line Chart

This line chart visualizes India's population growth over time, using a green line to show annual values. The chart loads a CSV dataset, renders axes with rotated labels, and draws the line with `d3.line()`. It uses D3 v6’s `d3.csv()` for data ingestion, `d3.scaleBand()` for the categorical year axis, and `d3.scaleLinear()` for the population range, outputting as an SVG element.

Loading thumbnail…

Fork of ICE-7 Line Chart

This fork of the ICE-7 Line Chart visualizes marketing cost trends from 2000 to 2013 using a red line on an SVG canvas. The chart includes labeled axes for year and cost, with a title displayed above the plot. Built with D3 v5, the code imports specific modules like `scaleLinear`, `scaleTime`, `extent`, `axisLeft`, `axisBottom`, and `line` to handle scaling, axes, and path generation. Data is loaded asynchronously from a CSV via the `csv` function, then parsed and rendered into the SVG.

Loading thumbnail…

India Population from 2010 to 2019

This example presents a line chart showing India’s population changes from 2010 to 2019. The visualization uses D3.js v6 with a React framework, rendering as an SVG. The chart reads data from a CSV file hosted on GitHub, converts year and population values to numbers, and uses `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for tick marks, and `d3.line` to draw the trend line. The SVG is appended to a styled HTML div.

Loading thumbnail…

Line Chart: Population of India

This line chart visualizes the population of India from 2010 to 2019 using data fetched from a CSV file. A single steelblue line traces the population trend across the years, with labeled x- and y-axes rendered via SVG. The code leverages D3 v6’s `d3.csv` for data loading, `d3.scaleLinear` for coordinate mapping, and `d3.axisBottom` and `d3.axisLeft` for tick marks. The chart is embedded directly as an SVG within an HTML page, with styling applied through CSS.

Loading thumbnail…

Top 10 Countries with highest population

A pie chart displays the top 10 countries by population in 2019, with each slice sized by the country's population value from the linked CSV file. The chart uses D3.js v6 to load the data, compute the pie layout, and render SVG paths for the arcs. Slices are colored with a categorical scale, labeled directly on the chart, and accompanied by an interactive legend. Hovering over an arc increases its fill opacity, and drop shadows highlight each segment.

Loading thumbnail…

Iris Scatter Plot

This animated scatter plot explores the Iris dataset by cycling through different feature pairs on the x- and y-axes every three seconds, revealing relationships between sepal and petal measurements. Three Iris species—setosa, versicolor, and virginica—are distinguished by distinct geometric symbols (circle, cross, diamond) and colors. Built with D3.js v7, the SVG visualization uses `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.symbol` to render the points, axes, and a legend, updating the entire chart on each feature switch.

Loading thumbnail…

Iris Scatter Plot

This scatter plot visualizes the Iris dataset, displaying sepal width against petal length. Each point represents a flower sample, with iris species distinguished by both shape—circles for setosa, crosses for versicolor, and diamonds for virginica—and color via a legend. The visualization uses D3.js v7 to create an SVG with linear scales and axis generators, loading data from a CSV file. Customizable axes allow viewers to explore relationships between any pair of the four measured features.