SharmilaChowdhari

Tree

This radial tree visualization displays hierarchical cartoon character data, with nodes color-coded by category and sized by depth. The root “Cartoons” branches into two main groups—minion and mickeymouse—each with child nodes and leaf labels. Using d3.hierarchy, d3.tree, and d3.linkHorizontal, it renders SVG paths and text elements, while a zoom behavior enables interactive panning. The JSON data source defines node ids and colors, applied directly to text fill. Font size decreases with depth to emphasize hierarchy.

Apr 4, 2022

ICE-8 country map

This example displays a choropleth-style map of the United States using an Albers USA projection with territories via `geo-albers-usa-territories`. The visualization renders land polygons in sky blue and state boundary interiors in green, with the path geometries generated by `d3.geoPath`. React manages the component structure, while `d3.json` loads the TopoJSON data and `feature` and `mesh` from the `topojson` library extract the land and interior boundaries. The map focuses on geographic shape rather than quantitative values, using a simple two-color scheme for clear visual separation.

Apr 3, 2022

ICE-8 world map

This visualization displays a world map using an equal-area natural Earth projection, with countries rendered as light green filled paths and the globe’s sphere filled in sky blue. It loads geographic data from a remote TopoJSON file, converts it to GeoJSON features via the `topojson.feature` API, and projects them using `d3.geoNaturalEarth1` and `d3.geoPath`. The map is drawn as SVG elements, with a stroked outline for each country and a semi-transparent border.

Apr 3, 2022

ICE - 7 Pie Chart

A pie chart displays the distribution of accident rates across different countries, with each slice labeled with its percentage value. The visualization uses a legend to list countries with their corresponding values and color-coded swatches. The chart is built with D3 v5, using the `pie`, `arc`, and `scaleOrdinal` functions to generate arcs and assign colors from a custom palette. Data is loaded asynchronously from a CSV URL, and the code applies `format('.4~g')` to display tick values.

ICE 7 Area Chart

An area chart displays annual Goods and Service Tax values for a country over time, with a smooth curved line and semi-transparent fill highlighting the trend. The visualization loads CSV data from a GitHub gist, parses the tax values as numbers and years as dates, then uses d3.scaleTime and d3.scaleLinear for axes. D3 v5’s area generator with curveBasis draws the filled region, while a line generator adds the stroke. SVG rendering includes custom grid lines, tick labels, and axis labels.

Fork of ICE-7 Reusable Scatter Plot

This animated scatter plot visualizes the Iris dataset, showing the relationship between petal width and sepal length, with each point colored by species (setosa, versicolor, or virginica). It cycles through four attribute combinations every two seconds using `setInterval`, updating the x-axis scale via D3's `scaleLinear` and `axisBottom`. The visualization is built with a reusable `scatterPlot` function, leveraging D3 v6 modules like `csv`, `select`, and `extent`, rendered as SVG circles with custom fill colors and axis labels.

ICE 7 Line Chart

This line chart visualizes the Goods and Service Tax (GST) of a country across different years, using red axis labels and a thick black line to emphasize the trend. The code relies on D3 v5, specifically importing functions like `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `line` to construct the chart. Data is loaded from a CSV file hosted on GitHub, with years parsed using `d3.timeParse`. The SVG rendering applies green grid lines and blue tick text via CSS, while positional margins and axis tick formatting are handled through D3's layout utilities.

ICE-6 Iris dataset

This scatterplot of the classic Iris dataset displays petal length on the x-axis and petal width on the y-axis, with each point colored by species (pink, skyblue, or yellow). The visualization uses D3 v6 to load the data from a GitHub gist, then applies linear scales and axis generators (`axisBottom`, `axisLeft`) to plot the measurements. Circles are rendered as SVG markers with a fixed radius, while the code also reads sepal dimensions but does not use them in the plot, and axis labels are added via D3 text elements.

Mar 6, 2022

ICE6 Marks and Channels

A horizontal bar chart displays the count of movie types released in a particular year, using movie data from a GitHub gist. The visualization ranks movie types along the y-axis and encodes their counts with bar lengths along the x-axis. Built with React and D3 v5, the code uses `d3.csv` to load the data, `d3.scaleBand` for the categorical y-axis, and `d3.scaleLinear` for the numeric x-axis, rendering bars as SVG `rect` elements with light green fill.

Mar 6, 2022

Movie Ranks

This bar chart shows the top 50 highest-grossing movies by lifetime gross, with each bar representing a movie title ordered by rank. The chart uses D3 v5 with an SVG rendering approach, employing `scaleLinear` for the x-axis and `scaleBand` for the y-axis. Data is loaded from a CSV file and processed using `d3.csv`, with ranks scaled to thousands. The visualization customizes axes with `axisLeft`, `axisBottom`, and custom tick formatting, and highlights the data with green rectangles.

Mar 5, 2022

Fork of Fork of Loading and Parsing CSV Data with D3.js

This example displays movie ranking data loaded from a CSV file, showing the file size, row count, and column count on a styled HTML page. The visualization includes a custom SVG image created in Figma, rendered alongside the data summary. The page uses D3.js version 7 to fetch and parse the CSV via the `d3.csv` method, then computes the output with `d3.csvFormat` to determine file size. Styling is handled with a separate CSS file, and the SVG is embedded as an external image.

Fork of Loading and Parsing CSV Data with D3.js

This visualization displays metadata about a movie ranking dataset loaded from a CSV file, showing the file size, row count, and column count. The webpage presents this information as text beneath a static SVG title image. The example uses D3.js version 7 and the `d3.csv` method to asynchronously fetch and parse the remote CSV data from a GitHub gist, while also using `d3.csvFormat` to calculate the file size in kilobytes. The page layout is styled with custom CSS and renders the results in a preformatted text element.

Loading and Parsing CSV Data with D3.js

This example demonstrates how to load and parse a CSV dataset containing movie rankings using D3.js. It displays the dataset's file size, row count, and column count on a webpage alongside a custom SVG image created in Figma. The code uses the `d3.csv` method to fetch data from a GitHub Gist URL, then formats and presents the metadata within an HTML `<pre>` element. The visualization combines static SVG graphics with dynamic data-loaded information.

ICE-5: Loading and Parsing CSV Data with D3.js

This example demonstrates how to load and parse a CSV dataset using D3.js, displaying basic metadata about the file. It uses `d3.csv` to fetch a remote movies dataset from a GitHub gist, then computes and presents the file size in kilobytes, the number of rows, and the number of columns. The resulting information is rendered as plain text in a `<pre>` element, with styling applied through CSS. The page relies on D3 v7 and includes a custom background color and heading style.

Fork of Sharmila Chowdary (D3) image.js

This example shows a smiling face built from scalable vector graphics, rendered as an interactive SVG in a React application. It uses D3's `arc` API to draw the mouth and positions circles for the head, eyes, and outline, with a pink stroke set as the face’s border. The code demonstrates geometric composition with hardcoded coordinates and dimensions.

Feb 20, 2022

Fork of Viz-Hub Smiley

This example renders a yellow smiley face using React and D3 version 6, with SVG group and path elements. The face is drawn with three circles for the head and eyes, while the mouth uses the `arc` helper from the `d3-shape` package, configured with inner and outer radii and start/end angles. The SVG group’s `transform` attribute centers the face via ES6 template literals. D3’s `arc` generates the mouth path, and React’s `ReactDOM.render` mounts the component to the page, demonstrating a basic integration of D3 geometry with React’s declarative JSX syntax.

Feb 19, 2022