D

DeekshithVemula

@DeekshithVemula·17 public vizzes

Loading thumbnail…

Fork of Network graph

This example visualizes a small network of Facebook friends, where nodes represent individuals and links represent connections between them. The graph uses a force-directed layout to position nodes, with link thickness proportional to the connection weight. The visualization is built with D3.js v4, using the `d3.layout.force` API for the layout simulation and SVG rendering. Node labels are placed beside each circle, and the data is loaded from a local JSON file containing node names and link weights.

Loading thumbnail…

ICE 8 example of family Tree

This visualization displays a family tree using a hierarchical layout, with pink circles representing individuals and black lines showing parent-child connections. It begins by flattening the data into an SVG canvas, then uses `d3.stratify()` to transform the flat list into a hierarchy and `d3.tree()` to compute node positions. The animation is achieved through D3 transitions that draw the connecting paths over one second and fade in the circles. Text labels appear sequentially, with a delay based on each node’s depth, revealing the tree’s structure dynamically.

Loading thumbnail…

Fork of ICE8 - USA Map

This example displays a choropleth-style map of the United States, rendering land areas in purple and internal state boundaries in red on a silver sphere. It uses React to manage the component lifecycle, while d3-geo’s `geoAlbers` projection and `geoPath` generate the SVG paths. TopoJSON loads US Atlas data from a CDN, with `feature` and `mesh` extracting the nation outline and state borders. The map is static, showing the geographic layout without interactive elements.

Loading thumbnail…

ICE 8 World_Map

This world map visualization displays country boundaries as green polygons with black strokes on a blue sphere, set against a black background. It uses D3 v5’s geoNaturalEarth1 projection and geoPath to render geographic features from a TopoJSON file loaded via topojson’s feature method. The code appends SVG paths for the sphere and countries, demonstrating fundamental DOM manipulation with d3.select and data joins.

Loading thumbnail…

Fork of ICE7 Pie Chart

A pie chart visualizes sales figures for ten car brands, with each slice's area proportional to the brand's sales value and labeled in a side legend showing both the car name and its corresponding number. The chart renders as an SVG using D3 v5, employing the `pie()` generator to compute arc angles from the loaded JSON data, `arc()` to create the paths, and `scaleOrdinal` with `schemeCategory10` to assign colors to slices. The legend is built manually with appended rectangles and text elements, while numeric values are formatted using D3's `format()` function.

Loading thumbnail…

ICE 7 Area Chart

This area chart visualizes tuberculosis cases in India from 2009 to 2022, using a smoothed curve to trace the yearly case counts. The chart combines a black line path with a steel-blue filled area beneath it, with labeled axes for year and case numbers. Built with D3 v5, it uses `d3.line` and `d3.area` generators with `curveBasis` for interpolation, along with `scaleLinear` for both axes and `csv` to load the dataset from a GitHub gist. The SVG rendering includes gridlines via axis tick marks.

Loading thumbnail…

line chart section 3

This line chart shows bike sales from 2013 to 2021, with the x-axis representing years and the y-axis representing sales values. The chart uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generators to render an SVG path with red strokes, while CSV data is loaded via `csv()` and parsed with `d3.timeParse`. The visualization includes gridlines via tick sizes and axis labels for “years” and “sales.”

Loading thumbnail…

D3 Scatter Plot

This scatter plot visualizes the Iris Dataset, encoding sepal length against petal width and differentiating species with distinct symbols. The x-axis cycles through four measured attributes every 15 seconds, animating the plot’s transitions. Built with D3 v6, it uses `scaleLinear`, `scaleOrdinal`, and `symbolGenerator` for SVG paths, with axes via `axisLeft` and `axisBottom`. The reusable chart pattern, inspired by Towards Reusable Charts, exposes accessor methods like `.xValue` and `.symbolValue` to configure the visualization.

Loading thumbnail…

ICE7 Pie Chart

This pie chart visualizes the total runs scored by ten prominent cricketers, with each slice’s size proportional to a player’s run total. The chart uses D3 v5’s `pie`, `arc`, and `scaleOrdinal` APIs to generate SVG paths, applying a category-10 color scheme. A legend lists player names alongside their formatted run values. Data is loaded asynchronously from a JSON file using `d3.json`, and the visualization renders entirely as static SVG elements.

Loading thumbnail…

Reusable Scatter Plot

This reusable scatter plot visualizes the Iris flower dataset, showing petal width versus sepal length as colored circles representing species. The chart cycles through all four attribute combinations on the x-axis every few seconds using setInterval, with a legend identifying yellow, violet, and orange markers. Built with D3 v6, it uses d3.csv to load data, d3.scaleLinear for axes, and dynamically updates the scatterPlot function’s xValue property. The SVG rendering includes axis labels, a title, and manually positioned legend squares and text.

Loading thumbnail…

Fork of Fork of Customizing Axes

This example shows a bar chart of the top ten scores by Indian batsmen, with each bar’s length proportional to the runs scored and the player names on the vertical axis. The chart applies custom axis styling, including labeled tick lines, a rotated axis title, and a formatted tick scale. The visualization uses d3.csv to load data, and d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom to render the SVG. The axis labels and title are added as SVG text elements, with margins controlling layout.

Loading thumbnail…

Fork of Fork of Stylized Scatter Plot with Color Legend

This scatter plot visualizes the Iris dataset, mapping petal length to the x-axis and sepal length to the y-axis, with each circle representing an individual flower. Species are distinguished through color, and a legend identifies the three categories. The visualization uses D3 v5 and the d3-legend library, employing d3.scaleLinear for continuous axes and d3.scaleOrdinal with the d3.schemeCategory10 palette for categorical coloring. Axes are rendered with d3.axisBottom and d3.axisLeft, and the legend is generated using d3.legendColor. The SVG canvas is 1050 by 500 pixels, with data loaded asynchronously via d3.csv.

Loading thumbnail…

Fork of ICE-6 Tutorial Bar Chart

This bar chart displays the top 10 cosmetic products by revenue, using 2018 population data from the United Nations World Population Prospects 2017 as a proxy for ranking. The visualization uses D3 v5 with `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render SVG bars and axes. Data is loaded via `d3.csv` from a GitHub gist, with revenue values parsed as numbers. The chart customizes axes by removing domain lines and adds a formatted tick label that replaces "G" with "B" for billions.

Loading thumbnail…

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

This example displays a page that loads a CSV file containing chess data and reports basic statistics about it, such as file size, row count, and column count. The computed information is rendered as text within a red-highlighted `<pre>` element. The code uses the D3.js library’s `d3.csv` method to fetch and parse the data from a GitHub gist URL, then formats and displays the result using `d3.csvFormat` and DOM manipulation. A static SVG traffic sign image is also included on the page.

Loading thumbnail…

Fork of Fork of HTML Starter

This example renders a simple yellow smiley face using React and SVG. The code defines an `App` component that draws a large yellow circle with a black stroke for the head and a single eye using `circle` elements. It uses ReactDOM to mount the component into the DOM, with styling applied via CSS to remove the page margin. The visualization demonstrates basic SVG coordinate positioning and JSX syntax in a React application with D3 v7 loaded for potential utility.

Loading thumbnail…

Fork of Fork of HTML Starter

This example renders a simple smiley face using React and SVG. It draws a yellow circle with a black stroke as the head, plus a single black eye circle positioned with fixed offsets from the center. The code uses React’s `ReactDOM.render` to mount the component and defines the SVG shapes inline with JSX, while D3 is loaded but only used to create a sample arc path that is not displayed. The page resets the body margin via CSS for full-window rendering.

Loading thumbnail…

Fork of emoji-like face with mouth (D3)

This example shows a yellow emoji-like face with two eyes and a mouth, rendered as an SVG graphic centered on a 960×500 canvas. The code combines React for component structure with D3’s `arc` generator to create the mouth shape, while simple SVG `circle` elements handle the face and eyes. The face is positioned inside a `<g>` element using a `translate` transform, and styling is applied via SVG attributes such as `fill`, `stroke`, and `strokeWidth`.