GaneshPenumarthi

@GaneshPenumarthi·14 public vizzes

Collapsible Tree Example

This interactive visualization displays a collapsible tree diagram using d3.layout.tree, with nodes rendered as SVG symbols (circles, crosses, or diamonds) and links colored by a level property from the embedded JSON data. The code loads d3 v3 from a CDN and uses d3.svg.diagonal for curved edges, along with d3.svg.symbol to vary node shapes based on value thresholds. The tree includes hardcoded family hierarchy data, with fixed node depths and margin-based layout, though no collapse/expand behavior is implemented in the shown script.

Apr 4, 2022

Loading thumbnail…

Untitled

This example shows a force-directed network diagram of the characters from *Les Misérables*, with nodes representing characters and links representing co-appearances. Node color encodes community group, and link thickness reflects connection weight. Built with React and D3 v4, it uses `d3.forceSimulation` for physics, `d3.forceLink` and `d3.forceManyBody` for layout, plus `d3.drag` for interactive node dragging. Data comes from the included `miserables.json` file, rendered as SVG elements.

Apr 4, 2022

Loading thumbnail…

Tree Example

This example shows a collapsible tree diagram built with D3.js, displaying hierarchical data with nodes for “Grand parent,” “Parent A,” and “Parent B.” Clicking a node toggles its children, animating the layout transitions over 750 milliseconds. The visualization uses `d3.layout.tree` for positioning, `d3.svg.diagonal` for curved links, and SVG circles and text for nodes. Data is hardcoded in a JavaScript array, rendered with React-style CSS classes and pointer cursor interactions.

Apr 4, 2022

Loading thumbnail…

Country Map_ICE8

This interactive map visualizes yearly, monthly, and weekly sales figures for seven districts of Bangladesh, with data presented in BDT. Hovering over a district reveals its specific sales statistics as a tooltip. The visualization uses `d3.geoPath` and `d3.geoMercator` to render the TopoJSON geographic data as SVG paths, and supports zoom and drag interactions via the `d3.zoom` API. District paths are filled with a uniform blue color, turning green on hover, while the sales data is loaded from a local JSON file.

Apr 4, 2022

Loading thumbnail…

World Map ICE-8_Ganesh

This interactive visualization displays a world map showing the approximate physical locations of students who joined Datavis 2020, with each location marked by a green circle. The map uses the D3 geoNaturalEarth1 projection with geoPath and geoGraticule to render continents, graticules, and interiors. Location data from the Slack introductions is geocoded into latitude and longitude coordinates, and the circles are positioned using the projection function. The visualization follows a React component structure with D3 v5 and renders as SVG.

Apr 4, 2022

Loading thumbnail…

ICE-7 Pie Chart

This gallery example shows a pie chart displaying the number of new coronavirus cases admitted in the United Kingdom during the last week of January 2021, with each slice labeled with its value and a legend indicating the corresponding date. The visualization uses D3 v5’s `pie`, `arc`, and `scaleOrdinal` APIs to compute and render the SVG paths, while fetching data from a remote CSV via the `csv` function. Each slice is filled using a categorical color scale, and text labels are placed using the arc’s `centroid` method. The legend is built manually with appended rectangles and text elements.

Mar 27, 2022

Loading thumbnail…

ICE-7 Area Chart

An area chart shows the number of newly admitted coronavirus cases in the United Kingdom during the last week of January, using date on the x-axis and admissions on the y-axis. The visualization combines a black line and an orange filled area beneath it, both rendered with SVG paths generated by D3 v5's `line` and `area` generators with a basis curve. Data is loaded as CSV from a GitHub gist and parsed with `d3.timeParse`. Axes are created using `axisBottom` and `axisLeft`, with labels styled via external CSS.

Mar 27, 2022

Loading thumbnail…

ICE-7 Line Chart Ganesh

This example shows the number of newly admitted coronavirus cases in the United Kingdom during the last week of January, using a line chart. The x-axis represents dates, while the y-axis shows admission counts. The chart is rendered as an SVG using D3 v5, with scales created via `scaleTime` and `scaleLinear`, axes via `axisBottom` and `axisLeft`, and the line drawn with a `line` generator. Data is loaded from a CSV file, and dates are parsed with `timeParse` before plotting.

Mar 27, 2022

Loading thumbnail…

ICE - 7 Resuable Scatter Plot Ganesh

This interactive scatter plot displays the Iris dataset, mapping petal width against sepal length and coloring each point by species. The visualization is built using D3.js v6, with `scaleLinear` for axes, `axisLeft`/`axisBottom` for ticks, and a reusable `scatterPlot` function that accepts configurable width, height, margins, and data accessors. Circles are joined via `selection.join`, with species-based color coding (red, green, blue). The plot renders in SVG, initially showing petal width on the x-axis, which then switches to sepal width for the final view.

Mar 27, 2022

Loading thumbnail…

Resuable Scatter Plot_Ganesh

This reusable scatter plot, built with D3, visualizes the Iris dataset, mapping petal width and sepal length to the x and y axes. The visualization cycles through different data columns every two seconds, animating the scatter plot to show various relationships, including species classification with colorful data points. The chart is rendered as an SVG using D3’s `scaleLinear`, `axisLeft`, `axisBottom`, and `selectAll` APIs, with an interactive margin and radius configuration. The code follows a reusable chart pattern, allowing dynamic updates through a `scatterPlot` function.

Mar 26, 2022

Loading thumbnail…

Scatter Plot between Sepal Length and Petal Length

This visualization displays the classic Iris dataset as a scatter plot, mapping sepal length on the x-axis and petal length on the y-axis. Each circle represents an individual iris flower, colored by species to emphasize clustering patterns. Built with D3 v5, it uses `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.legendColor` to render axes and a color legend. The SVG is rendered at 960×500 pixels with margins tight enough to focus on data distribution, while tick lines and labels are styled with large fonts for readability.

Mar 6, 2022

Loading thumbnail…

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

This visualization presents newly admitted COVID-19 patients in the UK from January 23 to February 2, 2021, as a horizontal bar chart. The React application loads data from a CSV file using d3.csv and renders the chart as SVG elements. D3's `scaleBand` and `scaleLinear` handle the axes, while grid lines and tick labels are generated from `xScale.ticks()`. Each bar's length corresponds to the daily admission count, with the y-axis displaying dates and the x-axis showing admission numbers. The chart is styled with a steelblue fill for the rectangles.

Mar 6, 2022

Loading thumbnail…

ICE 5 Assignment Famous Locations Dataset

This example displays a message about the contents of a famous locations dataset, showing the file size in kilobytes, the number of rows, and the number of columns. The visualization uses the D3.js version 7 library to fetch a CSV file from a GitHub gist via the `d3.csv` API, then formats the file size using `d3.csvformat`. The resulting summary text is rendered inside a div element styled with CSS, centered at a large font size.

Feb 28, 2022

Loading thumbnail…

Fork of vendas_por_grupo_bar_chart

This bar chart displays the quantity sold for each product group, with horizontal bars sorted by category. The visualization uses D3 v7’s `scaleLinear` and `scaleBand` to map quantities to bar lengths and groups to vertical positions, respectively. Data from a CSV file is loaded via `d3.csv`, with string values converted to numbers. The SVG rendering includes axis labels, tick lines, and interactive hover titles showing exact values, styled with a custom gradient background and yellow bars.

Feb 21, 2022