sridhardubala106@gmail.com

Fork of -scatter

This example visualizes a hierarchical tree of mobile phone data, organized by brand, model, and processor type. It uses the D3.js v7 library to construct a tree layout from the nested dataset and renders it as an SVG. The tree layout is applied with d3.tree() and d3.hierarchy(), with links drawn using d3.linkHorizontal() and nodes displayed as circles with labels. The visualization groups phone models under their respective brands, with processor brands as leaf nodes, and styles the connections with red links and black nodes.

Apr 2, 2024

Pie chart-ICE7

This pie chart displays the number of visitors to various tourist places in 2019, with each slice labeled by the destination’s name and state, and a legend positioned to the right. It uses Chart.js to render the chart on a Canvas element, pulling comma-separated data from a remote gist via `fetch()`. The code assigns random semi-transparent background colors to each slice and customizes tooltips to show both the raw visitor count and its percentage of the total, while the chart itself is configured with `responsive: false` and a fixed canvas size.

Area chart

This area chart displays the number of visitors for five selected U.S. states (California, Texas, Florida, New York, Illinois) from 2011 to 2021. The visualization fetches comma-separated data via d3.text and parses it into an array of objects. Using d3.area with a monotone X curve, it draws semi-transparent filled paths for each state, color-coded via d3.scaleOrdinal with d3.schemeCategory10. The SVG rendering includes linear scales for axes, a legend, and both axis labels, all positioned within defined margins.

Line chart

A multi-line chart displays tourist visitor counts for five US states—California, Texas, Florida, New York, and Illinois—from 2011 to 2021. Data is loaded via `d3.text` from a gist and parsed into per-state value arrays. The visualization uses D3 v7 to construct SVG paths with `d3.line`, linear scales, axis generators, and a drawn legend, with each state colored using `d3.scaleOrdinal` and `d3.schemeCategory10`.

-pie chart

A pie chart visualizes 2021 car sales data by type, fetched from a remote CSV file. Each slice is colored using `d3.scaleOrdinal` and `d3.schemeCategory10`, with arcs generated by `d3.arc()`. The chart displays car type labels and percentages, positioned using arc centroids. A legend, built with HTML `div` elements, is placed beside the SVG chart. The implementation uses D3 v5 with `d3.pie()` for data processing and `d3.csvParse` for data loading, all rendered as SVG.

-area

This D3.js area chart visualizes car sales data from 2019 to 2021, grouped by car type, with three semi-transparent filled areas representing each year's sales figures. The chart uses the d3.area component with monotone curve interpolation to render smooth area paths, while d3.scaleBand and d3.scaleLinear handle x- and y-axis positioning. Data loads from a text file via d3.text, which is parsed and transformed into the chart's structure. A legend with colored rectangles identifies the three years, and all elements render as SVG within an 800×400 viewport.

-Line

A multi-line chart displays car sales by type across the years 2019–2021, with each line traced using `d3.line()` and `d3.curveMonotoneX`. The code loads raw text data via `d3.text`, parses it into arrays, and renders the chart as SVG. Scales include `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the y-axis, with axes drawn via `d3.axisBottom` and `d3.axisLeft`. Year labels are appended at the end of each line, and the chart includes titled axes and a legend-free color encoding for the three yearly series.

Reusable scatter plot_ICE7

This reusable D3 scatter plot visualizes tourist visit data across three years (2019–2021) for various places, showing the relationship between 2021 and 2019 visitor numbers. The chart animates every two seconds, cycling the x-axis through each year's data while the y-axis remains fixed on 2019. Built with D3 v6, it uses `scaleLinear`, `extent`, and axis functions (`axisLeft`, `axisBottom`) within a custom `scatterPlot` function. SVG circles represent data points, with margins and radius configurable. Data loads from a CSV file parsed by `csv`, and the animation uses `setInterval` to update the x-value accessor and re-render.

Mar 27, 2024

Creating the Scatter plot - ICE6

This scatter plot visualizes tourist visitor counts across U.S. states, comparing 2019 figures on the x-axis with 2021 numbers on the y-axis. Each circle represents a state, with data loaded from a CSV file via `d3.csv` and rendered as SVG elements using `d3.axisBottom`, `d3.axisLeft`, and `d3.scaleLinear`. The chart includes axis labels, a title, and a subtitle, while hover effects on the dots change their fill color. The accompanying HTML provides a written analysis noting an overall upward trend in visitors between the two years, with notable increases in destinations like California, Hawaii, and Idaho.

Mar 21, 2024

Generating Bar Graph -ICE6

A bar graph displays tourist visitor counts for 13 US states across 2019–2021, using 2021 data for bar heights. The x-axis lists state names while the y-axis shows visitor numbers, with an accompanying analysis noting California and Hawaii as top destinations. The visualization uses D3 v7 with SVG rendering, employing `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`. Data is loaded via `d3.csv` from a remote gist file, and the graph updates by clearing existing groups before redrawing.

Mar 21, 2024

Fork of Simple Scatter Plot

This scatter plot compares visitor numbers at tourist locations between 2019 and 2021. Each dot represents a place, with its position determined by the number of visitors in each year. The visualization uses D3.js v7, loading CSV data from a remote gist URL. It renders as an SVG using `d3.select`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`, with circles positioned via the `x` and `y` scales.

Fork of Responsive Bar Chart

This responsive bar chart displays estimated state populations using horizontal bars, with each bar’s length proportional to visitor counts. It first renders a gray inner rectangle behind the plot area, then draws axes and labels using `d3.scaleLinear` and `d3.scaleBand`. The chart adapts to container resizing via `observeResize` and `@curran/responsive-axes`, while data originates from the `@curran/un-population-estimates-2024` module.

Fork of Responsive Bar Chart

This example displays a horizontal bar chart showing visitors per year for different states, with each bar labeled by its numeric value. It uses D3 v5 to fetch CSV data from a remote gist and render the visualization as an SVG. The code employs `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis, appending rectangles for bars and text elements for labels. The chart highlights the relative visitor counts across states, with the data source directly loaded via `d3.csv`.

Fork of Simple Bar Chart

This bar chart displays the top 10 most populous countries as of January 1, 2024, using data from the UN population estimates. It emphasizes ranking by population, with country names on the x-axis and population values in thousands on the y-axis. The visualization is built with D3.js, utilizing `scaleBand` for the categorical axis and `scaleLinear` for the continuous population scale. The code filters the dataset to include only entries marked as "Country/Area," sorts them in descending order, and selects the top ten for rendering. The `viz.js` module handles the chart’s layout, including axes, labels, and bars, while `index.js` orchestrates data preparation and SVG creation.

Fork of Simple Scatter Plot

This example visualizes the Palmer Penguins dataset, plotting bill length against flipper length for individual penguins. The scatter plot encodes each penguin as a semi-transparent circle, revealing the distribution and correlation between the two measured traits across species. The visualization is built using D3.js, leveraging `scaleLinear`, `axisLeft`, and `extent` to construct scales and axes, while custom axis-label functions from `@curran/axis-labels` add annotations. A light gray background rectangle highlights the plotting area. The code dynamically computes scales from the data extents and uses SVG joins to render circles, axes, and labels, with margins and dimensions set to fit the container.

ICE-5 The shapes of data

This example, "ICE-5 The shapes of data," visualizes a dataset of 50 U.S. tourist places through an interactive D3.js dashboard. It combines a sortable HTML table with a summary and analysis section, alongside a custom SVG beach scene that uses D3 v7 to draw geometric shapes—a blue water rectangle, a red sun, and stylized people—to evoke the dataset’s themes. The visualization transforms tabular CSV data into a playful, narrative-driven SVG illustration, demonstrating how D3 can extend beyond charts to create thematic, data-inspired graphics.

Mar 7, 2024

Fork of Smiley Face Part-3 (React and d3)

This example shows a smiley face with exaggerated features, including large yellow eyes, a curved mouth, and additional decorative elements like a house, trees, and sun, all rendered as SVG shapes. The visualization demonstrates how to build a cartoon-like scene using React and D3, with the smiley face positioned off-center to accommodate the extra scenery. The code uses the `arc` helper from the `d3-shape` package to generate the mouth’s path, while SVG circles, rects, polygons, and lines compose the remaining elements. The rendering relies on React’s declarative JSX syntax, with D3’s `arc` function creating the mouth’s curved outline.

Mar 1, 2024

Fork of Main.js

This example shows a nature scene composed of simple geometric shapes, including trees, flowers, birds, cats, dogs, and butterflies, arranged on an SVG canvas. The visualization uses raw HTML and CSS, with no external libraries, to style elements via class selectors that define fill colors and positioning. Shapes such as circles, rectangles, and paths are manually coded in SVG, while the CSS file applies gradients and clip-path for additional styling. The scene is static, with no data binding or interaction, and relies solely on inline SVG markup and stylesheet rules.

Feb 27, 2024