sreekarthanda@gmail.com

@ThandaSreekar·31 public vizzes

Assignment2_Task7_NetworkGraph

This example visualizes the Vijayanagara family lineage as an interactive network graph. It renders a force-directed layout where nodes represent historical figures and links depict familial relationships. The graph uses d3.forceSimulation with forceLink, forceManyBody, forceCollide, and forceCenter to position the nodes, which are drawn as lightblue circles with labels. The code loads data from a JSON file via d3.json and renders the visualization in SVG, with node colors, text styling, and link strokes defined in CSS.

Jul 22, 2023

Loading thumbnail…

Assignment2_Task7_Tree

This example visualizes the Vijayanagara family lineage as an animated, color-coded tree diagram, showing hierarchical generations from the founding ruler downward through descendants. The visualization uses D3.js version 3, specifically the `d3.layout.tree` for node positioning and `d3.svg.diagonal` for link paths. Each node is rendered as a circle with a fill color indicating generation level (black for root, blue for first generation, red for second, green for third). The tree expands with a 1000-millisecond transition, using node data updates to shift positions and reveal new descendants dynamically.

Jul 22, 2023

Loading thumbnail…

Assignment2_Task6_India_districts_States

This example presents an interactive choropleth of India’s districts and states, colored by state and overlaid with major city markers. A Mercator projection is used with `d3.geoPath` to render TopoJSON boundaries for districts and states, while a color scale assigns hues per state. Users can zoom and pan the map via `d3.zoom`, and hovering over a district shows its name and state in a tooltip. District paths are semi-transparent, with state outlines emphasized in white.

Jul 22, 2023

Loading thumbnail…

Assignment2_task5_reusablescatterplot

This scatter plot visualizes the relationship between customer age and total transaction amount, using point color to distinguish existing customers from attrited customers. It loads bank customer data from a CSV file and renders circles as SVG elements, with black representing existing customers and red representing attrited customers. The visualization uses D3 v6’s `d3.csv` for data loading, `d3.scaleLinear` for both axes, and `d3.axisLeft` and `d3.axisBottom` to display the scales. The chart includes labeled axes for age and total expenditure, with semi-transparent points to reveal overlapping data density.

Jul 22, 2023

Loading thumbnail…

Assignment2_task3_scatterplot

This scatterplot visualizes Uber trip data, plotting trip distance on the x-axis against pickup hour on the y-axis, with points colored by weekday. The visualization uses React with D3 v5 scales and SVG rendering, featuring interactive hover highlighting that fades non-matching points and emphasizes the selected weekday category via a color legend. Data is loaded asynchronously from a CSV using d3.csv.

Jul 22, 2023

Loading thumbnail…

Assignment2-Task_1_Bar graph

This bar chart displays the top 12 video games by North American sales from a CSV dataset. Each bar’s height corresponds to the game name on the y-axis, while the bar’s length represents total sales on the x-axis, with a red-to-blue color scale indicating sales magnitude. The visualization uses React for component rendering and D3’s `csv`, `scaleBand`, `scaleLinear`, and `axisBottom`/`axisLeft` APIs within an SVG. Data is fetched from a GitHub gist and processed with D3’s CSV loader.

Jul 22, 2023

Loading thumbnail…

Assignment2_Task8_Pie chart

A pie chart displays the market share of car companies, with slices for Ford, Mazda, Toyota, Honda, and others. The chart uses Plotly's `newPlot` function to render the visualization, with labels and percentage values shown inside each slice using radial text orientation. The dataset is a static array of label-value pairs, and the layout specifies a 500 by 400 pixel chart with the title "Market share of car companies." The code loads Plotly via a CDN script tag and defines the chart data and layout objects in JavaScript.

Jul 22, 2023

Loading thumbnail…

Assignment2_task9_linechart

This line chart displays the average life expectancy in India over a range of years, with a smooth orange curve rendered as an SVG path using the d3.line generator with curveBasis interpolation. The chart uses d3.scaleLinear for both the year (x-axis) and life expectancy (y-axis) scales, along with d3.axisBottom and d3.axisLeft for labeled axes. Data is loaded from a remote CSV file via d3.csv, and the axes include gridlines and descriptive titles.

Jul 22, 2023

Loading thumbnail…

Assignment2_Task6_worldmap

This example renders an interactive world map using D3.js version 5 and the topojson library. It displays countries as white polygons with black outlines on a light blue sphere, using the `geoNaturalEarth1` projection and `geoPath` for shape generation. The map loads geographic data from a JSON file hosted on GitHub, and countries turn red when clicked, as defined by the CSS `:active` pseudo-class.

Jul 21, 2023

Loading thumbnail…

Assignment2_Task4_Bubble Chart

This bubble chart compares cereal manufacturers by plotting each product’s rating on the x-axis against its sodium level on the y-axis, with bubble size encoding calories and color distinguishing the seven manufacturers. A legend explains calorie sizes and color-coded manufacturer names. The visualization uses D3 v7 with SVG rendering, employing scales for position (d3.scaleLinear), bubble radius, and color (d3.scaleOrdinal with d3.schemeSet1). It loads data from a local CSV file and includes axis labels and a title.

Jul 21, 2023

Loading thumbnail…

Assignment_2_Task_2_Stacked_Bar_Chart

This stacked bar chart visualizes sales data across market segments, with each bar segmented by product sub-category. The visualization uses D3.js to load CSV data and render an SVG, featuring an interactive color legend that filters and highlights specific sub-categories on hover. The chart includes tooltips showing exact sales values and uses d3.legend for the color key, while the stack layout computes cumulative values for each segment.

Jul 21, 2023

Loading thumbnail…

Activity_7_Task1

This example shows a horizontal bar chart comparing the 2020 populations of twenty countries, using D3 v5 scales and React components to render an SVG visualization. The chart maps country names to a band scale on the y-axis and population values to a linear scale on the x-axis, with green bars representing each value. The code explicitly uses `scaleBand`, `scaleLinear`, `max`, and `format` from D3, while React components like `AxisBottom`, `AxisLeft`, and `Marks` handle the rendering. Population values are formatted with the `.2s` specifier, replacing ‘G’ with ‘B’, and the data is fetched from a CSV URL and parsed with `csvParse`.

Jul 21, 2023

Loading thumbnail…

Network Graph-Activity8_task6.2

This interactive network graph visualizes a social network of ten people and their friendship connections, with nodes sized by friend count and directed edges showing relationships. The visualization uses D3.js v6 with a force-directed layout powered by `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes. Users can drag nodes via `d3.drag`, and hovering highlights nodes through CSS classes. The SVG rendering loads data from a local `graph.json` file, with nodes labeled and edges drawn as blue lines with arrow markers.

Jul 18, 2023

Loading thumbnail…

MuscleCars tree_Activity8_Task6.1

This interactive tree diagram visualizes the hierarchical relationships among muscle car manufacturers and their models, using data from a JSON file where nodes represent brands like Ford and Dodge, and leaf nodes show specific cars such as Mustang and Charger. Rendered as an SVG with D3 v3, the visualization uses collapsible nodes, color-coded node types, and animated transitions to expand or collapse branches on click, while a zoom and drag behavior allows panning and scaling. The layout is computed with `d3.layout.tree`, and tooltips provide additional details on hover.

Jul 18, 2023

Loading thumbnail…

Activity 8 Task 5.2

This example displays a choropleth map of India rendered as an SVG using D3 v5 and TopoJSON. It loads world country geometries from the world-atlas dataset, isolates India by finding its feature in the geographic data, and applies a Mercator projection fitted to the country’s bounds. The map is drawn with d3.geoPath, while topojson.feature extracts the relevant geometry for rendering.

Jul 18, 2023

Loading thumbnail…

Activity 8 TASK 5 Map

This interactive choropleth displays a world map using light green countries against a sky-blue ocean, rendered as SVG paths with indigo borders. It highlights individual countries in maroon when hovered. Built with D3 v5, the visualization loads GeoJSON country boundaries from the world-atlas dataset, applies an equirectangular projection via `d3.geoPath` and `d3.geoEquirectangular`, and converts TopoJSON features using the `topojson.feature` API. Users can pan and zoom the map using the included D3 `zoom` module, which transforms the SVG group on zoom events.

Jul 18, 2023

Loading thumbnail…

Area Chart Activity 8 task 4

This area chart displays the cost of sales from 2000 to 2013, using a smooth, filled curve to emphasize the trend over time. The SVG visualization is built with D3 v5, employing `scaleTime` and `scaleLinear` for the axes, and the `area` and `line` generators with `curveBasis` for the smoothed path. The chart loads data from a CSV file and uses custom axis labels and styling to highlight values, with red tick labels and a light green area fill.

Jul 18, 2023

Loading thumbnail…

Activity8Task3-linechart

This line chart displays the cost of sales from 2000 to 2013, with a light green stroke highlighting the trend across yearly data points. The visualization uses D3 v7 to load a CSV file via `d3.csv`, map years to a `d3.scaleBand` for the x-axis, and costs to a `d3.scaleLinear` for the y-axis. The line is drawn using `d3.line`, with red axis labels and a centered title. The SVG rendering approach is visible, with margins and axes configured for clarity.

Jul 18, 2023

Loading thumbnail…

Actvity 8 Task 2

This interactive pie chart visualizes the distribution of students across academic majors at UNT, with each slice labeled by its percentage value. Built with D3 v5, the chart uses `d3.pie` and `d3.arc` to generate SVG paths and `d3.scaleOrdinal` to assign a fixed palette of colors to slices. A manually positioned legend alongside the chart maps each color to its corresponding major and student count, using data fetched from a remote CSV hosted on GitHub.

Jul 18, 2023

Loading thumbnail…

Fork of Activity 7 task 5

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. Each circle's position encodes horsepower (x-axis) and torque (y-axis), while its radius represents highway MPG. Color distinguishes different car manufacturers, with a legend for MPG values and a categorical color key. Built with D3 v7, the SVG visualization uses `d3.scaleLinear` for axes and bubble sizing, `d3.scaleOrdinal` for color mapping, and `d3.interpolateTurbo` for the color palette. Interactive tooltips, implemented with mouseover events, display the car make for each data point.

Jul 18, 2023

Loading thumbnail…

Activity 7 task 4

This bubble chart shows the correlation between average horsepower, torque, and highway MPG across 31 car makes, with each circle’s position mapping to horsepower and torque while its size and color encode highway MPG and brand identity. The visualization uses D3.js v7 with SVG rendering, scaling bubble radius via d3.scaleLinear and assigning colors through a d3.scaleOrdinal. Hovering reveals a tooltip with the make name, and animated transitions adjust its opacity. A legend conveys MPG values through circle sizes and make-specific color swatches from the CSV dataset.

Jul 18, 2023

Loading thumbnail…

Activity7_task2

This stacked bar chart shows the distribution of movie ratings across five genres, with each bar segment representing the percentage of films falling into one of five rating categories from below 5.0 to above 8.5. It highlights how genre influences ratings, for example showing Action films have a higher proportion of low ratings compared to Documentaries. Hovering over a segment reveals the exact percentage via a tooltip. The visualization uses D3.js (v7) with stacked data processing and maps data from a CSV file loaded using `d3.csv`, rendered as an SVG with a categorical color scale.

Jul 18, 2023

Loading thumbnail…

Activity 8 Task 1

This animated scatter plot explores the Iris dataset, cycling through four different x-axis features (petal width, sepal width, petal length, sepal length) while the y-axis remains fixed on sepal length. Data points are colored by species (setosa, versicolor, virginica), with a legend and dynamic axes updating on a timer. The visualization is built with D3.js (v6.7.0), using the `csv` loader, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` utilities. It renders as an SVG with HTML/CSS styling, refreshing the plot at set intervals via `setInterval`.

Jul 18, 2023

Loading thumbnail…

Activity_7_Task_4

This scatterplot visualizes the Iris dataset, plotting sepal length against petal length while encoding species identity through point shape. The chart renders an SVG using D3 v7, with axes and scales built via `scaleLinear` and `axisBottom`/`axisLeft`. A custom shape legend using `scaleOrdinal` and `symbolsFill` distinguishes the three species, while data loads from a remote CSV and is parsed with `csvParse`. Markers are drawn as positioned `path` elements with `symbol` generators, and the visualization adapts to the full window size.

Jul 18, 2023

Loading thumbnail…

Activity 7 Scatter Plot_task_3

This scatter plot visualizes the Iris dataset, showing petal length against petal width for three species—setosa, versicolor, and virginica—with each point colored by species. Data is loaded from a CSV file via `d3.csv` and parsed with custom row conversion. The plot uses `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` to map the data, while circles are appended to an SVG with a fixed radius and fill colors determined by a species-based switch function. Axis labels are added as SVG text elements.

Jul 18, 2023

Loading thumbnail…

Activity 6

This example parses electric vehicle population data from a CSV file and displays the first 10 rows as plain text in a black preformatted block. It uses d3.csv to load and convert the data, then maps each row’s values into joined strings for display. The SVG background is a static image embedded via base64, while the output is rendered in an HTML pre element styled with aqua text.

Jul 4, 2023

Loading thumbnail…

Activity 6 Task 4 Transforming Data

This visualization shows a JSON summary of average sepal length grouped by species, calculated from a CSV dataset. The code uses D3 v7 functions including `csvParse` to load data from `data.csv`, `flatRollup` and `sum` to aggregate the data, and `select` to render the resulting summary as a `<pre>` element. The visualization initially loads the CSV asynchronously, parses numeric fields, and then displays the computed group averages.

Jul 4, 2023

Loading thumbnail…

Activity 6 Task 5 Histogram

This histogram shows the average Body Mass Index across age groups from CDC survey data, with BMI calculated from weight and height. The visualization uses D3 v7’s `bin` generator to group ages, then renders orange rectangles scaled by `scaleLinear` and axes with `axisBottom` and `axisLeft`. Data is loaded via `csv`, and SVG output displays gridlines and labels for Age and Average Body Mass Index.

Jun 14, 2023

Loading thumbnail…

Transforming Data

This example shows the Iris dataset transformed into a summary of average sepal length per species, displayed as formatted JSON text in a `<pre>` element. The visualization fetches and parses `data.csv` using `d3.csvParse`, then applies `d3.flatRollup` and `d3.sum` to compute the species averages. The code also demonstrates a state management pattern with `setState` for handling loading states, rendering the result with D3’s `select` and `join` methods.

Jun 14, 2023

Loading thumbnail…

Activity 6 Task 4

This example displays the text "Hello VizHub!" in a large, centered message on a webpage. It demonstrates a fundamental D3.js workflow by using the `select` function to target the `#message` div and set its text content. The text itself is defined in a separate local ES6 module, `myMessage.js`, and imported into the main `index.js` file. The page's styling is handled through a linked CSS file, utilizing the `#message` selector to control font size and alignment.

Jun 14, 2023

Loading thumbnail…

5 Buddhas

This visualization depicts a dense, chaotic field of randomly generated, rotated polygons layered over a single large, ornate Buddha figure drawn as an SVG path. The abstract geometric noise, built through nested array iterations, contrasts with the detailed, scripture-like path data of the central icon. The piece is rendered using React and ReactDOM to output SVG elements, with the Buddha’s shape derived from a set of intricate quadratic Bézier curves. The code relies on inline SVG polygon and path elements, with styling controlled via CSS for a black background and large red text.

Jun 7, 2023