Skip to main content
Log in
V

vaddepallinaveen

@vaddepallinaveen·12 public vizzes

Loading thumbnail…

socialnetwork

This social network visualization displays seven social media platforms as labeled nodes, with weighted green links connecting them. The graph shows relationships between applications like Facebook, Instagram, and Twitter through varying line thicknesses. Using D3.js v4, the visualization implements a force-directed layout via the deprecated `d3.layout.force()` API, which simulates attraction and repulsion between nodes. Node positions are updated dynamically on each tick, while JSON data from `data.json` defines the network structure. The SVG rendering includes draggable circles, orange text labels, and a sky-blue background.

Apr 3, 2022
Loading thumbnail…

familytree

This example renders a zoomable hierarchical tree visualization, displaying a color-themed taxonomy where root categories like Black, Blue, and Green branch into related items. The code uses D3 v5's `tree`, `hierarchy`, and `linkHorizontal` functions to compute the SVG layout, with node labels colored via data attributes and text shadows applied through CSS. Zooming is implemented using the `zoom` event, while font sizes scale based on node depth. The data loads from a local JSON file.

Apr 3, 2022
Loading thumbnail…

Country Map

This example displays a choropleth map of India rendered as an SVG, with each state filled using a categorical color scale. The visualization uses D3’s `geoMercator` projection, `geoPath`, and `scaleOrdinal` to draw the country’s boundaries from a TopoJSON file hosted on GitHub. Title text appears above the map, and hovering over any state highlights it in red via CSS. The code relies on the D3 v5, TopoJSON, and d3-geo-projection libraries.

Apr 3, 2022
Loading thumbnail…

creating world map

This example shows a natural Earth projection of the world map, with countries filled in yellow and a green sphere background. Hovering a country turns it blue and reveals its name via a tooltip. It loads GeoJSON country boundaries from the world-atlas dataset and country names from a TSV file, then renders them as SVG paths using d3.geoPath and d3.geoNaturalEarth1. The code uses d3.json, d3.tsv, and topojson.feature for data processing, with React managing the component structure.

Apr 3, 2022
Loading thumbnail…

Reusable Scatter Plot

This example presents a reusable scatter plot that visualizes the Iris Dataset, toggling between different measurement combinations every 1.8 seconds. It demonstrates the “Towards Reusable Charts” pattern using d3.scaleLinear, d3.extent, and d3.axisLeft/axisBottom within a custom scatterPlot function. SVG circles are colored by species, with axis labels and a fixed plot margin. The implementation uses D3 v6 modules (csv loading, selection, and joins) to render animated transitions between views.

Mar 27, 2022
Loading thumbnail…

Pie Chart

This pie chart displays car sales for the month of May across multiple car brands, with each slice labeled with its sales value in thousands. The chart uses D3 v5’s `pie` and `arc` generators to compute slice angles and paths, rendered as SVG. An ordinal color scale maps each brand to a distinct color from a hardcoded array. Legends appear at the right, listing each brand and its corresponding value, while the data is loaded asynchronously from a CSV hosted on GitHub Gist using `d3.csv`.

Mar 27, 2022
Loading thumbnail…

Area Chart

This area chart visualizes world population trends from 2010 to 2020 using a line to trace yearly values and a filled yellow region beneath it to emphasize magnitude. Built with D3 v5, the visualization loads a CSV dataset and applies time and linear scales to map years and population counts. The SVG output features styled axes with tick marks, axis labels, and a smoothed curve generated through d3.line and d3.area with curveBasis. The chart demonstrates population growth over the decade while showcasing D3's data binding and SVG rendering capabilities.

Mar 27, 2022
Loading thumbnail…

linechart

This line chart visualizes world population trends from 2010 to 2020, with time on the x-axis and population count on the y-axis. The chart is rendered as an SVG using D3 v5, with the line path styled in violet and grid lines in green. The code imports components like `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct axes, and parses CSV data from a GitHub gist. Data values are formatted and axis labels are customized through D3’s `axis` and `text` APIs.

Mar 27, 2022
Loading thumbnail…

carbrandsales

This horizontal bar chart displays the top ten car brands by 2016 sales, using React to render SVG elements and D3 scales for layout. The visualization loads CSV data via `d3.csv`, applies a linear scale for sales values, and a band scale for brand names. Orange rectangles represent each brand’s sales figures, with gridlines and tick labels generated from the x-axis scale. The chart focuses on comparing relative sales performance across brands in a single year.

Mar 7, 2022
Loading thumbnail…

creating scatter plot with iris data

This example uses D3 v6 to create an interactive scatter plot from the Iris dataset, loading CSV data via `d3.csv` and rendering SVG circles for each observation. It maps petal length and width to the x and y axes using `d3.scaleLinear`, with colors distinguishing the three iris species (setosa, versicolor, and virginica). The axes are generated with `d3.axisLeft` and `d3.axisBottom`, and axis labels identify the variables. The chart fills the browser window and includes a legend via the species colors, demonstrating a straightforward data-driven visualization workflow.

Mar 7, 2022
Loading thumbnail…

load Csv data with D3.js and showing svg

This example loads a CSV file from a GitHub gist using D3.js v7’s `d3.csv` method and displays metadata about the dataset, including its size in kilobytes, row count, and column count, in a styled HTML `<pre>` element. The page also embeds an SVG image directly in the markup. The code demonstrates basic asynchronous data loading and DOM text manipulation with `document.getElementById`, along with CSS styling for headers and text presentation.

Feb 28, 2022
Loading thumbnail…

my face look like

This visualization presents a stylized smiley face with animated eyebrows, rendered as a static SVG composition on a 900x400 canvas. The face uses a light green circle with a brown border, white eyes, and a red arc-shaped mouth drawn via D3’s `d3.arc` path generator. Eyebrows are positioned as black rectangles whose vertical offset is set in code, though the example does not include animation logic in the shown files. The code demonstrates fundamental DOM manipulation with D3.js v5, using `select`, `append`, and attribute setters to build the SVG structure directly.

Feb 21, 2022