mynedisanjana@gmail.com

@SanjanaMynedi·13 public vizzes

ICE-8 Network Sanjana

This example visualizes the singing industry as a force-directed network, showing relationships among artists like Taylor Swift, producers, and platforms such as Spotify. The nodes are colored by entity type. Using d3.forceSimulation, the layout computes positions based on link forces, charge repulsion, and centering. The code renders SVG circles and lines, with drag support via d3.drag to manually reposition nodes. Labels are added to each node for identification.

Apr 11, 2026

Loading thumbnail…

ICE-8 Tree Sanjana

This tree diagram maps the structure of the music industry, branching from the root into genres like Pop, Rock, and Classical, and then down to specific artists such as Taylor Swift and Coldplay. It uses d3.hierarchy to build the tree, and both d3.tree and d3.linkVertical to calculate the layout and draw the connecting paths. The SVG rendering distinguishes nodes by depth, using rectangles for the root, and circles of varying sizes for genre and artist levels.

Apr 11, 2026

Loading thumbnail…

ICE-8 Sanjana

This visualization presents global literacy rates through a static world map alongside a U.S. state-level map with simulated data values from 70 to 100. The U.S. map uses a soft blue gradient color scale via `d3.scaleSequential` and `d3.interpolateGnBu`, with hover tooltips showing state names and values. Rendered in SVG using `d3.geoPath` with `d3.geoMercator` and `d3.geoAlbersUsa` projections, it includes a legend built with `d3.axisBottom`. Geographic data comes from World Atlas and US Atlas TopoJSON sources, while state values are randomly auto-generated in the code.

Apr 11, 2026

Loading thumbnail…

ICE-7 Sanjana Area Chart

This stacked area chart visualizes the cumulative popularity of the top four music artists across years, using data from a songs CSV file. Built with D3.js, it employs `d3.stack()` to layer cumulative values and `d3.area()` with a step-after curve to render each singer’s contribution. The chart includes axes, labels, and an HTML legend, with colors mapping to artists via `d3.scaleOrdinal`. Data is aggregated in `index.js` before rendering through an SVG canvas.

Mar 29, 2026

Loading thumbnail…

ICE-7 Pie Chart

This pie chart visualizes the distribution of song streams across the top six singers from a CSV dataset, showing each singer’s share as a labeled slice with percentages for segments larger than 10%. The visualization is built with D3.js v7, using `d3.pie` and `d3.arc` to generate the slices, `d3.rollups` to aggregate stream counts by singer, and `d3.scaleOrdinal` with `schemeCategory10` for coloring. A legend on the right lists all singers with their exact percentage shares, while the SVG renders in a white rounded container.

Mar 29, 2026

Loading thumbnail…

ICE-7 Sanjana Line Chart

This line chart tracks cumulative song popularity for the top four singers over time, revealing how each artist’s total popularity grows across released years. The code filters a CSV dataset using `d3.rollups` and `d3.groups`, then sorts by singer and computes running sums of popularity. It renders with D3 v7’s `d3.line`, `d3.scaleLinear`, and `d3.axisBottom`/`axisLeft`, applying `curveMonotoneX` for smooth paths and a color legend via `d3.scaleOrdinal`. The SVG is drawn inside a fixed 800×500 canvas.

Mar 29, 2026

Loading thumbnail…

ICE-7 Resusable Pie Chart

This reusable scatter plot, titled "Song Performance Analysis," visualizes the relationship between a song's number of streams and its popularity score. Each circle represents a song, positioned by the linear scales from `d3.scaleLinear()`, with color assigned to the singer using the ordinal color scheme from `d3.scaleOrdinal`. The code loads a songs.csv dataset from a GitHub gist, converts numeric fields, and renders the chart in SVG. It constructs the visualization by merging axes, labels, and a categorical legend, all within a reusable `scatterPlot` function that accepts data and dimension parameters.

Mar 29, 2026

Loading thumbnail…

ICE-7 Resusable Scatter Plot

This scatter plot visualizes song performance by comparing streams against popularity, with each point colored by singer and displayed on a reusable scatter plot component built with D3 v7. The visualization uses `d3.scaleLinear` for both axes, `d3.scaleOrdinal` with `d3.schemeCategory10` for color encoding, and `d3.axisBottom`/`d3.axisLeft` for axis rendering. Data loads from an external CSV file containing song attributes, and the reusable `scatterPlot` function manages SVG rendering, including axis labels and a categorical legend. The chart is designed with margins to accommodate labels and legend placement.

Mar 28, 2026

Loading thumbnail…

Fork of React & D3 Starter

This example presents a reusable React-based scatter plot that visualizes the relationship between song duration and popularity from a CSV dataset. The visualization employs D3.js v7 for data processing, linear scaling, and axis generation, while React 19 manages the component structure. The code uses `d3.csv()` to load data, `d3.scaleLinear()` for coordinate mapping, and `d3.axisBottom()` and `d3.axisLeft()` to render axes. All elements are drawn as SVG circles with a steelblue fill, positioned using `cx` and `cy` attributes derived from the scaled data values.

Mar 28, 2026

Loading thumbnail…

MultiSeries

This visualization compares song streams and popularity across release years for the top 15 songs from a CSV dataset. It combines green bars, drawn with SVG `rect` elements scaled by `d3.scaleLinear`, to show streams, while a yellow line and circles, rendered using `d3.line` and appended `circle` elements, overlay popularity on a secondary right axis. The chart employs `d3.scaleBand` for the x-axis, `d3.axisLeft`, `d3.axisRight`, and `d3.axisBottom` for ticks, with data loaded via `d3.csv`.

Mar 8, 2026

Loading thumbnail…

Scatter Plot

This scatter plot shows the relationship between song release year and streaming counts for popular songs, with purple circles plotted across axes for release year and stream totals. The visualization uses D3.js v7 to load CSV data from a GitHub gist, then applies d3.scaleLinear for both x and y axes, d3.extent to determine the year domain, and d3.max for the stream range. Circles are appended as SVG elements, with d3.axisBottom and d3.axisLeft providing the labeled axes.

Mar 8, 2026

Loading thumbnail…

Bar chart

This bar chart displays the top 20 songs by streaming counts from a CSV dataset of popular songs. Colored bars represent each song’s Streams value, with axes labeled via d3.axisBottom and d3.axisLeft. Using d3.scaleBand and d3.scaleLinear, the visualization maps categorical song names and numeric stream totals to SVG rectangles, with d3.scaleOrdinal and schemeTableau10 assigning distinct colors to each bar.

Mar 8, 2026

Loading thumbnail…

Popular Songs dataset

This example summarizes a dataset of popular songs by loading it from a GitHub Gist as CSV. The page uses D3.js v7 to fetch and parse the data, then displays the total row and column counts, column names, and a preview table of the first ten records. Inline HTML strings construct the summary and table, while a static SVG circle is also included. The file size is estimated using the Fetch API, and styling is handled with CSS.

Feb 28, 2026