17761A04F1

Fork by Jeevani ICE 8

This example displays a world map with an equirectangular projection, coloring all countries in pink against a blue sphere, and highlighting countries in gold on hover. The visualization loads country boundaries from the world-atlas TopoJSON/GeoJSON dataset and renders them as SVG paths. Built with D3 v5, it uses `d3.geoPath` for path generation, `d3.geoEquirectangular` for the projection, and the TopoJSON `feature` method to convert TopoJSON data into GeoJSON features. The styles handle the sphere fill, country stroke, and hover effects.

Mar 27, 2023

Jeevani ICE8

This example presents an interactive, animated tree diagram showing a biological classification of animals, from the root “Animals” down through vertebrates and invertebrates to specific groups like Mammals, Birds, and Insects. Built with D3.js version 3, it uses `d3.layout.tree` and `d3.svg.diagonal` to compute the hierarchical layout and draw curved links between nodes. The SVG rendering includes colored node strokes and text labels, with a 750-millisecond transition animation on update. The dataset is hardcoded as a JavaScript array with hierarchical parent-child relationships.

Mar 27, 2023

Fork of Jeevani Network

This network graph displays the friendships among a group of named individuals, with pink circular nodes and directed black links showing connections. Using D3 v6’s force-directed layout via `d3.forceSimulation`, the visualization applies a combination of link, many-body, collision, and centering forces to position nodes. Built on an SVG canvas, the graph loads relational data from a JSON file, and nodes are interactive, supporting drag-and-drop for repositioning and mouseover highlighting through applied CSS classes.

Mar 27, 2023

ICE 8 Q 1.2

A choropleth-style map of the United States renders state boundaries and nation outlines in SVG, using an Albers equal-area projection via `d3.geoAlbers` and `d3.geoPath`. The visualization fetches TopoJSON data from the US Atlas, converts it with `feature` and `mesh` from topojson, and applies a teal land fill with contrasting interior borders. Styling includes a light sphere background and a graticule path, though the graticule is not explicitly rendered in the current code. React manages the component state and data loading through a custom `useData` hook.

Mar 26, 2023

Fork of ICE 7 - REUSABLE SCATTER PLOT - WITH DIFFERENT SHAPES - IRIS DATASET

A reusable scatter plot built with D3 and React visualizes the Iris dataset, mapping petal width to the x-axis and sepal length to the y-axis. Each of the three Iris species appears as a distinct SVG symbol shape (circle, square, or diamond) generated with `d3.symbol` and `scaleOrdinal`, with colors assigned via a separate ordinal scale. The chart updates every 15 seconds by cycling the x-axis through four measurement columns using `setInterval`, re-rendering the plot with animated transitions. Axes are created with `axisLeft` and `axisBottom`, and the visualization fills the window with a custom "Share Tech" font style.

Mar 13, 2023

ICE - 7 Reusable Scatter Plot JM

This scatter plot visualizes the Iris dataset, mapping sepal length on the x-axis and petal length on the y-axis. Points are colored by species using a custom ordinal scale with a range of three colors. The visualization demonstrates a reusable scatter plot component that loads data from a CSV file, parses it, and renders it using D3's `scaleLinear`, `scaleOrdinal`, and SVG circle marks. The code defines reusable axis and scatter plot functions, which the main visualization calls upon to render the chart.

Mar 12, 2023

ICE - 7 Line Chart JM

This example shows the opening bid price of EURUSD across 2021, with dates on the x-axis and price on the y-axis, using a smooth curve to connect the data points. Built with React and D3 v7, it fetches a CSV file, parses and sorts the data by date, and renders axes with scaled tick marks. The line is drawn using the D3 `line` generator with a `curveBasis` interpolation, while time and linear scales handle the date and price ranges. SVG output is produced via ReactDOM.

ICE - 7 Line Chart JM

A line chart displays the opening bid price of EURUSD across the months of 2021 in a React application. The SVG rendering uses D3 v7 to create scales with d3.scaleTime and d3.scaleLinear, while the smooth curve is generated with d3.line and curveBasis. Data is loaded from a CSV file via d3.csv, with dates parsed and sorted ascending. Axis ticks and labels are colored gold and blue respectively, with the line drawn in red.

ICE - 7 Area Chart JM

This area chart displays the opening bid price of EURUSD throughout 2021, using an SVG rendered by D3 v5. The visualization combines an area path with a blue line to show price trends over time, with red tick labels and yellow grid lines. It loads data from a CSV file via `d3.csv`, then uses `scaleTime` and `scaleLinear` to map dates and prices, with `d3.area()` and `d3.line()` generators applying a curve basis for smooth transitions. The chart includes axis labels for month and opening bid value.

ICE - 7 Pie Chart JM

This example visualizes the top 10 countries with deaths caused by air pollution in an interactive pie chart. Each slice represents a country, with its death count labeled in thousands and a legend linking countries to their corresponding colors. The visualization uses D3 v5, specifically the `pie`, `arc`, and `scaleOrdinal` APIs, to generate the chart in an SVG canvas. Data is fetched asynchronously from a CSV file hosted on GitHub, and the accompanying code includes integration with a YouTube tutorial in the README.

Fork of Fork of Penguin Data by Pran

This scatter plot visualizes Palmer Penguins data, mapping flipper length on the x-axis and body mass on the y-axis, with each point colored by species (Adelie, Gentoo, or Chinstrap). The SVG rendering uses D3 v5’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to position points and draw axes. Circle radius is fixed, while bill length and depth values are set as unused `rx` and `ry` attributes. The code loads CSV data via `d3.csv`, parses numeric fields, and appends axes and labels directly within a React-based HTML page.

Mar 7, 2023

ICE-6

This example visualizes Palmer Penguins data as a scatter plot, mapping flipper length to the x-axis and body mass to the y-axis, with circles colored by species (Adelie, Gentoo, and Chinstrap). It shows how d3.csv loads and parses the data, d3.scaleLinear and d3.extent set the scales, and d3.axisLeft and d3.axisBottom add labeled axes. The SVG rendering positions circles via d3.selectAll and .join, while CSS styles the tick text.

Mar 7, 2023

Fork of Penguin Data set scatter Plot

This scatter plot visualizes the Palmer Archipelago penguin dataset, showing the relationship between flipper length and body mass for three species, with each point colored by species (yellow for Adelie, green for Gentoo, brown for Chinstrap). The chart uses D3 v5’s `csv` parser, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render an SVG visualization. Data is loaded from a remote GitHub gist CSV file, and the plot is customized with a 30px Times font title and enlarged tick label text.

ICE-6

This bar chart displays the cocoa percentage for various chocolate companies, ordered along the y-axis with horizontal bars extending to represent each value. The visualization uses D3 v7 with an SVG rendering approach, employing `scaleLinear` and `scaleBand` to map the data from the CSV file. Interactive tooltips appear on mouseover, and the bars are colored brown with a darkening effect on hover. The chart includes axis labels and a title, all rendered within a 960×500 SVG canvas.

ICE-6 Q1

This stacked bar chart shows the distribution of cocoa percentages across chocolate companies, with each bar representing a company and colored segments showing the proportion of ratings within different percentage bands. The visualization uses d3.csv to load data and d3.stack to compute stacked segments, with d3.scaleBand for the y-axis and d3.scaleLinear for the x-axis. Hover interactions trigger tooltips revealing exact percentage values via d3.format, while a legend maps colors to rating categories. The SVG rendering uses explicit margin-based layout and custom styling from the linked stylesheet.

Fork of Religions of Largest 20 Countries

This stacked bar chart visualizes the estimated 2010 religion breakdown of the world’s 20 most populous countries, with each bar segment representing a faith’s population share. Hovering over a bar shows a tooltip with the specific religion, country, and population count, while hovering over the legend highlights matching segments. The visualization uses D3.js v3 with d3.layout.stack for layering, d3.scale.ordinal for bar positioning, and d3-tip for tooltips. Data comes from the Pew Research Global Religious Landscape, rendered as an SVG with a color legend via d3-legend.

Untitled

This example displays a custom webpage dedicated to presenting the "ICE-5" dataset, showing the file size, row count, and column count of a forest coverage CSV. The page uses a tiled background image and loads data asynchronously with `d3.csv`. A D3 promise callback formats the metadata into a text message displayed in a red `<pre>` element, with a link to view the raw CSV data.

Mar 1, 2023

Untitled

This example displays metadata for a CSV forest coverage dataset, showing its size in kilobytes, row count, and column count. It also presents a static SVG illustration of trees and a sun against a sky-blue background. The page loads D3 v7 and fetches the remote CSV file using `d3.csv`, then formats the dataset with `d3.csvFormat` to compute and display the statistics. The SVG is hand-coded within the HTML, not generated by D3.

Feb 28, 2023

Untitled

This visualization displays a simple scene of three trees on a grassy field beneath a sun, rendered as a static SVG. The page loads a forest coverage dataset from a GitHub gist using D3’s `d3.csv` method, then displays metadata about the file—including its size, row count, and column count—in a message container. The SVG image is embedded directly in the HTML, styled with CSS in `jm.css`. The example demonstrates basic D3 data loading and DOM manipulation within a plain HTML page.

Feb 28, 2023

Fork by Jeevani

This example renders a stylized Danny Phantom face using React and D3 v6. It computes the SVG layout dynamically from the window dimensions, centering the face within a custom coordinate system. The visualization uses primitives like `circle`, `polygon`, and `polyline` for facial features, with D3’s `arc()` generating the mouth path. Hardcoded numeric constants define eye, iris, pupil, eyebrow, hair, and nose positions, while the hair polygon references explicit points derived from the viewport size. The rendering is purely SVG-based, with no external data source.

Feb 22, 2023