Isabella Jaya Rani C

@IsabellaJayaRaniC·14 public vizzes

ICE 8 - Tree and Network - Social Network

This example visualizes a small social network of seven people, showing connections between individuals with link thickness proportional to relationship weight, while node labels display each person’s name. It uses the D3.js v4 force layout (d3.layout.force) to position nodes and edges, rendering them as SVG circles and lines. The network data comes from a local network.json file containing node group assignments and weighted links. Dragging is enabled via force.drag, and the force simulation continuously updates node positions and link coordinates during each tick event.

Mar 30, 2023

Loading thumbnail…

Tree chart for Penguin species

This is an interactive tree diagram of penguin species, showing the hierarchical classification from the family Spheniscidae down through genera and individual species such as Emperor, Adelie, and Little Penguins. The visualization uses d3.tree and d3.hierarchy to compute node positions, with SVG circles and cubic Bézier paths rendering nodes and links. Node and edge colors are driven by data attributes like type and level, while node size reflects a value property. The example is built with React and D3 v5, rendering entirely as SVG.

Mar 30, 2023

Loading thumbnail…

ICE 8 - Making maps creating country maps for Sweden

This example displays a choropleth-style map of Sweden’s counties (län) rendered as SVG paths, with lavender fill for regions and indigo strokes for interior boundaries. It uses D3 v5 and React 16.9, fetching TopoJSON data from a GitHub gist and converting it with `feature` and `mesh` from `topojson`. The map is projected using `geoMercator` and displayed with `geoPath`.

Mar 30, 2023

Loading thumbnail…

ICE 8 - Making Maps - World Map

This example shows a world map rendered as an orthographic projection, with countries displayed as filled paths on a light blue sphere. The visualization loads geographic data from a TopoJSON file hosted on GitHub, converts it to GeoJSON features, and draws each country using d3.geoPath. The code uses d3’s geoOrthographic projection, d3.json for data loading, and topojson’s feature method to extract country boundaries. SVG paths are styled with Moccasin fills and black strokes, creating a simple, static globe view.

Mar 30, 2023

Loading thumbnail…

ICE 7- Area Chart

This area chart visualizes the weekly sales of Walmart over time, with a smooth, curved line and a skyblue fill beneath it to emphasize the trend. The visualization is built with D3 v6 using the `area` generator with a `curveBasis` interpolation, and it scales the x-axis with `scaleTime` and the y-axis with `scaleLinear`. The chart includes labeled axes and a title. The data is loaded from a CSV file containing weekly sales figures.

Mar 13, 2023

Loading thumbnail…

ICE 7 - line graph

This line chart visualizes the weekly sales of Walmart over a 52-week period. The y-axis represents sales figures, ranging from 0 to 4,000,000, while the x-axis tracks the week number. Using D3.js (v5), the code loads CSV data from a GitHub gist and renders an SVG line graph with a slateblue stroke. It employs d3.scaleLinear for both axes, d3.axisLeft and d3.axisBottom for ticks, and d3.line to generate the path. The chart includes labeled axes, gridlines, and a title, with margins positioning the plot centrally.

Mar 13, 2023

Loading thumbnail…

ICE7.4

This visualization shows the change in U.S. nuclear capacity in megawatts over time using an area chart. The data, sourced from a Walmart CSV file, is parsed and formatted with D3 v4’s `d3.csv` and `d3.timeParse`. The visualization uses `d3.scaleTime`, `d3.scaleLinear`, and `d3.area` to render a filled path with aquamarine fill and slateblue stroke, alongside labeled axes and axis generators.

Mar 13, 2023

Loading thumbnail…

ICE - 7 Pie Chart

This pie chart visualizes the peak RPM values of cars from the Car_Price dataset, with each slice colored by RPM range and labeled via a legend listing car names and abbreviated RPM values. The chart uses D3.js v5’s `pie` and `arc` generators to compute and draw the SVG paths, while `scaleOrdinal` assigns colors from a predefined array. Legends are built from the same pie data, with text formatted using `d3.format`. Data is loaded asynchronously from a CSV via `d3.csv`.

Mar 13, 2023

Loading thumbnail…

ICE-7 Reusable scatter plot

This example shows the Iris dataset as an animated scatter plot of petal width against sepal length, cycling through different measurement columns every two seconds. Each point uses a distinct symbol from D3’s `symbol` generator based on species, with alternating green and gold fills, and axes labeled directly in the SVG. The visualization relies on a reusable `scatterPlot` function built with D3 scales (`scaleLinear`, `scaleOrdinal`), axis components (`axisLeft`, `axisBottom`), and a `setInterval` loop that updates the x-value mapping, re-rendering the chart via `svg.call(plot)`.

Mar 13, 2023

Loading thumbnail…

SCATTER PLOT USING PENGUIN DATASET

This scatter plot visualizes the Palmer Penguins dataset, mapping flipper length on the x-axis and body mass on the y-axis for individual penguins. Each circle is colored by species (Adelie, Gentoo, or Chinstrap) using a custom color mapping. The visualization is built with D3 v5, using `d3.csv` to load the data, `d3.scaleLinear` for axis scaling, and `d3.axisBottom` and `d3.axisLeft` for the labeled axes. The plot uses SVG circles with a fixed radius, while axis labels and a title are added as SVG text elements.

Mar 9, 2023

Loading thumbnail…

ICE-6: Rendering Marks and Channels with React & D3 - Bar Chart

This bar chart displays the top 15 telecom circles in India ranked by their highest recharge plan expenditure, with each bar’s length encoding cost in INR and its color alternating between salmon and lightpink. Built with React and D3 v5, the visualization uses d3.csv to load the dataset, d3.scaleBand for the categorical y-axis, d3.scaleLinear for the numeric x-axis, and custom SVG elements for axes and bars. The rendering relies on React’s useState and useEffect hooks to fetch and manage data, while d3’s scale and tick functions generate the gridlines and labels.

Mar 9, 2023

Loading thumbnail…

ICE 6: Rendering Marks and Channels with React & D3 - Scatter Plot

This example renders a scatter plot using React and D3. It demonstrates how to combine D3’s `select` function with local ES6 modules to update a message on the page. The code loads D3 via UNPKG and uses the `import` syntax to access D3 APIs and a custom module. The visualization displays a scatter plot, with the message “Hello VizHub!” shown prominently. The example highlights the integration of D3’s mark and channel rendering within a React environment.

Mar 5, 2023

Loading thumbnail…

ICE 5

This visualization presents metadata about a telecom dataset, summarizing its size, row count, and column count in a styled text display. It uses D3 v7’s `d3.csv` to load the remote CSV file and `d3.csvFormat` to calculate the file size in kilobytes, then inserts the computed statistics into a `pre` element via `textContent`. The page features a circular button linking to the raw dataset and a dark grey header, with a Telecom-themed SVG as the background image.

Mar 2, 2023

Loading thumbnail…

Making a face with D3.js

This example builds a cartoon face from layered SVG shapes using D3.js v5, including eyes, eyebrows, a mouth, nose, blush, ears, earrings, a tongue, hair, and a mole. All elements are drawn with basic shapes like circles, rectangles, and an arc-generated path. The eyebrows animate up and down using chained `transition().duration()` calls, creating a simple facial expression. The code imports `select` and `arc` from the D3 library and constructs the face on a 960×500 SVG canvas with a light steel blue background.

Feb 23, 2023