D

DeepikaGoud08

@DeepikaGoud08·22 public vizzes

Loading thumbnail…

dpka- Family Tree

This interactive family tree visualizes a multi-generational hierarchy, starting with the root "Narsimha" and branching into descendants like Venkatesh, Satyanarayana, Murali, and Lakshmi. It uses D3.js v3 to render the tree as an animated SVG layout, with color-coded nodes based on type and expandable/collapsible children. The code leverages `d3.layout.tree`, `d3.behavior.zoom`, and transitions to animate node positions, while custom CSS and SVG filters add drop shadows and hover tooltips. Data is loaded from a JSON file defining the family structure and link relationships.

Loading thumbnail…

dpka-country-map

This example displays a choropleth map of the United Kingdom’s administrative districts, rendered as an SVG using React. It shows the geographic boundaries of English local authority districts, with each region colored green and outlined in pink, red upon hover. The code uses D3 v5’s `geoMercator` projection and `geoPath` to generate the map from TopoJSON data loaded via `d3.json`, while `topojson.feature` and `topojson.mesh` extract land polygons and interior borders.

Loading thumbnail…

deepika-network

This network graph visualizes a personal social circle, mapping friendships between individuals. It uses a force-directed layout with `d3.forceSimulation`, combining link, charge, collision, and center forces to position nodes. Rendered as SVG, the graph displays yellow circular nodes with labels and directed, purple edges with arrow markers. Interactive features include dragging nodes and highlighting connections on mouseover, which changes the node's stroke to blue. Data is loaded from a local JSON file, defining the nodes and links.

Loading thumbnail…

worldmap-dpka

A stylized world map displays country borders and graticules atop a sphere, rendered as SVG through React. The visualization loads country polygons from the World Atlas TopoJSON dataset, applying `d3.geoNaturalEarth1` projection and `d3.geoPath` to draw landmasses, interiors, and graticules. Distinct CSS colors style the land, ocean sphere, country boundaries, and graticule lines, with the sphere filled in a light teal and borders in contrasting tones.

Loading thumbnail…

dpka-france

This example displays an interactive map of Argentina, rendered as an SVG using the D3.js library. It uses the `d3.geoTransverseMercator` projection and `d3.geoPath` to draw geographic features, with zoom functionality implemented via D3’s `zoom` behavior. The map loads TopoJSON data from an external URL, styling the sphere background and district paths with CSS. Although the title references Argentina, the code fetches a Karnataka dataset, highlighting a mismatch between the intended and actual data source.

Loading thumbnail…

my-family-tree

A family tree chart shows three generations of a family, with the root ancestor Narasimha branching to children and grandchildren. Using the D3.js library, the visualization lays out nodes as cyan circles connected by blue paths, with orange as the page background. The tree uses a hierarchical layout (`d3.layout.tree`) and SVG rendering, with animated transitions (`transition().duration()`) that move nodes into position and support click-to-collapse interactions. Data is embedded directly in the code as a JavaScript array.

Loading thumbnail…

globetest

This interactive orthographic globe visualizes the world’s population distribution, plotting red circles at the locations of three cities whose radius encodes each population value. The visualization uses D3.js v4 with `d3.geoOrthographic` projection and `d3.geoPath` for country boundaries, rendering to SVG. Users can drag to rotate the globe, which adjusts the projection and swaps between 110m and 50m resolution world-atlas data for smooth interaction. Hovering over a circle shows a `d3-tip` tooltip displaying the city’s name and population.

Loading thumbnail…

3D chart

This 3D bar chart visualizes sales comparisons for the top six fast-food restaurants in Denton across four quarterly periods (Q1–Q4). The chart uses the d3-x3d library to render an interactive 3D scene within an X3D framework, with data loaded from a CSV file and parsed via d3.csv. The visualization employs d3’s scale-linear and axis functions to map quarterly values to bar heights, while the page includes a custom background image and styling via CSS.

Loading thumbnail…

Deepika Bonus ICE Scatter plot using D3.js

This example visualizes blood cell classification for male and female subjects using a 3D scatter plot. It plots neutrophil, basophil, and eosinophil values on the x, y, and z axes, with red circles representing male data and yellow squares representing female data. The visualization is built with Plotly’s `Plotly.newPlot` API, while D3.js (`d3.csv`) loads the CSV dataset from a GitHub gist. Axis titles are color-coded, and the layout includes custom margins and scene configuration for the 3D view.

Loading thumbnail…

dpka-scttr plot ICE 7

This animated scatter plot cycles through the Iris dataset's numeric columns on the x-axis, showing how petal width, sepal width, petal length, and sepal length correlate with sepal length on the y-axis. Each species appears as a distinct colored and shaped marker, with a static legend labeling setosa, versicolor, and virginica. The visualization uses D3.js scales, axes, and SVG paths via the reusable `scatterPlot` module, updating every two seconds through a `setInterval` that re-binds the x-value accessor.

Loading thumbnail…

dpka-ICE-7_Scatterplot

This interactive scatterplot animates through different pairings of measurements from the classic Iris dataset, cycling the x-axis among petal width, sepal width, petal length, and sepal length while keeping sepal length on the y-axis. Each of the three iris species is represented by a distinct color and is accompanied by a static legend. The visualization is built with React and D3, using `d3.csv` for data loading, `scaleLinear` and `axisBottom`/`axisLeft` for scales and axes, and a `setInterval` callback to update the chart. SVG circles render the points, with a custom `scatterPlot` module managing the reusable chart configuration.

Loading thumbnail…

Dpka-resuablescatter

A reusable scatter plot visualizes the Iris dataset, mapping sepal length to the x-axis, petal length to the y-axis, and encoding species with distinct shapes. Built with D3 v7, it uses `scaleLinear`, `scaleOrdinal`, and `symbolsFill` to position markers and generate symbol paths. A shape legend, drawn via a custom module, labels the three species, while axis components are modularized for reuse. Data loads asynchronously from a CSV file using `fetch` and `csvParse`.

Loading thumbnail…

dpka-ICE-7 Reusable D3 Scatter Plot

This example presents an animated scatter plot of vehicle tire measurements from a CSV dataset, cycling through four column combinations as axes every two seconds. Built with D3 v6, it renders SVG shapes whose form and color encode the tire brand via `d3.scaleOrdinal` with `symbols` and a custom color array. The reusable chart pattern from Bostock’s “Towards Reusable Charts” exposes setter/getter functions, while `setInterval` triggers axis updates. It uses `d3.csv`, `scaleLinear`, `axisLeft`, and `axisBottom`, with data parsed as numeric fields before plotting.

Loading thumbnail…

Dpka Line Chart ICE-7

This line chart visualizes Indonesia’s population from 2000 to 2022 using D3 v5. The SVG rendering employs `scaleTime` for the year-based x-axis and `scaleLinear` for the population y-axis, with axes generated via `axisBottom` and `axisLeft`. Data is loaded from a CSV via `csv()` and drawn using `line()` with `curveBasis` smoothing. The chart includes styled gridlines, axis labels, and a title, all configured through the `style.css` file.

Loading thumbnail…

Instagram Accounts with Highest Followers

A pie chart displays the number of followers, in millions, for the top eight Instagram accounts, including Instagram, Cristiano Ronaldo, and Lionel Messi. The visualization uses D3.js version 5 and 6 to load CSV data, generate the pie layout with `d3.pie()` and `d3.arc()`, and color each segment via `scaleOrdinal`. Text labels with follower counts are positioned using arc centroids, while a legend lists account names and values. The chart renders as SVG with a vibrant gradient background.

Loading thumbnail…

dpka-pie chart ICE-7

A pie chart illustrates the percentage of internet users within the total population for ten countries, with each slice labeled with its value and a legend mapping colors to country names. The chart employs D3 v5 to load CSV data via `d3.csv`, compute arc paths with `d3.arc`, and scale colors using `d3.scaleOrdinal`. SVG rendering positions the pie, slice text via `arcGenerator.centroid`, and a custom legend. Air pollution death counts are not shown; the dataset includes percentages derived from user and population counts.

Loading thumbnail…

dpka-piechart-ice7

This pie chart displays the relative values of thirteen listed countries, from Japan at 257 down to Singapore at 130, using a diverging yellow-to-red color scale. The chart is rendered as SVG with D3 v6, using `d3.pie()` to compute arc angles and `d3.arc()` to generate the path shapes. Each slice includes a label with the country name and value, positioned via `arc.centroid`. Data is loaded from a CSV file.

Loading thumbnail…

Dpka-assignment for area chart

This area chart visualizes Indonesia’s population growth from 2000 to 2022, using a smooth curve to highlight the upward trend. The chart renders as an SVG with D3 v5, employing `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.area` with `curveBasis` to fill the region beneath the line. Data is loaded from a CSV via `d3.csv`, with axes labeled and styled through CSS.

Loading thumbnail…

Deepika ICE-6 Submission

This visualization shows a horizontal bar chart of internet user percentages across 15 countries, with the United States leading at over 75% and Pakistan at the lowest around 30%. The bars are ordered by percentage, with each country’s rank displayed via a tooltip on hover. Built with D3 v7, it uses `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft`/`axisBottom` for gridlines. The chart loads data from a CSV file and renders as SVG, with bars colored in a solid red-orange.

Loading thumbnail…

Deepika ICE-6 Top Vehicle Tires plot

This scatter plot visualizes the relationship between tire dimensions (Rim Length and Rim Width) for three vehicle tire brands, using colored dots to distinguish Bridgestone, Falken Tires, and Continental. The code loads data from a CSV file via `d3.csv`, parses numeric fields, and renders an SVG using `scaleLinear`, `axisLeft`, `axisBottom`, and `selectAll`. Each dot’s position is mapped to rim measurements, while the fill color encodes the brand through a custom switch function, with a manually added legend.

Loading thumbnail…

Fork of Stylized Bar Chart

This bar chart displays the top three most populous countries—China, USA, and India—using horizontal bars scaled by population (in millions). Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, rendering SVG rectangles via the `Marks` component. Population values are formatted with D3’s `format` function to abbreviate large numbers (e.g., “12.06B”), and styled with red fills and Poppins font. Data comes from a local CSV file, with axes drawn through custom `AxisBottom` and `AxisLeft` components.

Loading thumbnail…

ICE-5-Assignment-dpka

This example displays a summary of the Candies dataset, presented as text metadata about the CSV file’s size, row count, and column count. It uses D3.js version 7 to load the data from a remote GitHub Gist URL with `d3.csv`, then formats the resulting array to calculate the file size in kilobytes and the number of rows and columns. The page is styled with a custom SVG background image and introductory headings. The visualization focuses on communicating dataset characteristics rather than plotting the data itself.