Rinoj-Gautam

Fork of Japan Map

This example displays a map of Japan with its administrative level-1 regions rendered as beige SVG paths with black borders. The visualization uses a geoMercator projection with clipExtent and scale settings to focus the map. Users can pan and zoom interactively through d3.zoom, which applies transforms to the grouped map elements. The code loads geographic data from a remote JSON file and processes it with topojson.feature to extract state boundaries, then renders them using d3.geoPath.

Fork of World_Map_ICE_8

This visualization displays a world map using the Natural Earth projection, with landmasses filled in purple and country borders overlaid in red. Graticule lines appear in blue against a white sphere background. Built with React and D3 v5, it loads GeoJSON topology from the `world-atlas` package via `d3.json`, then uses `topojson.feature` and `topojson.mesh` to extract land polygons and interior borders. The `d3.geoNaturalEarth1` projection and `d3.geoPath` render the SVG paths, with `d3.geoGraticule` generating the latitude-longitude grid.

Fork of Country Map

This example displays a choropleth map of Italy, highlighting its regional borders and using a Mercator projection to shape the geographic outlines. The visualization is rendered as an SVG, with sky-blue fill for regions and black strokes for interior boundaries, while a hover effect changes the region color to PaleVioletRed. The code leverages D3 v5’s `geoMercator` and `geoPath` for map projection and path generation, TopoJSON’s `feature` and `mesh` functions to process geographical data from the italy.json file, and React with a custom `useData` hook to fetch and manage the data.

Fork of Europe Map ICE8

This example renders a simple map of Europe using D3’s `d3.geoMercator` projection and `d3.geoPath` to convert GeoJSON features into SVG paths. The code fetches geographic data from a remote GeoJSON URL, assigns each feature a white fill and grey stroke, and displays the map in a 600×500 SVG container. It integrates React 16.9 and D3 v5, with the map drawn imperatively by selecting the body and appending SVG elements rather than using React’s virtual DOM.

Fork of Social_Network_graph_ICE-8

This network graph shows the relationships between six individuals, visualized as pink nodes connected by red links. Using the D3.js v4 `d3.layout.force` API with a force-directed layout, the distance between nodes is set to 350 units and charges are negative to create repulsion. The graph loads its node and link data from `graph.json`, and each link's stroke width is proportional to the square root of its weight. Node dragging is enabled via `force.drag`, and the SVG renders text labels with green stroke, circles with blue stroke, and pink fill.

tree diagram of countries of Asia ICE-8

This interactive tree diagram displays the hierarchical structure of Asian countries, organized into four regional subgroups (East, South East, South, and West Asia). The visualization uses a collapsible node layout with clickable circles to expand or collapse branches. Built with D3.js v3.5, it employs the `d3.layout.tree` and `d3.svg.diagonal` APIs to generate the SVG node-link diagram with animated transitions. Node styling includes cyan circles with red strokes and green curved links, while the data is hardcoded as a JavaScript object array.

Fork of japan map

This interactive map of Mexico uses a Mercator projection to display the country's states and boundaries. Built with React and D3 v6, it fetches geographic data from an ArcGIS-hosted JSON file and renders the map as an SVG. The `d3.geoPath` and `d3.geoMercator` APIs handle the projection and drawing, while a graticule overlay shows latitude and longitude lines. The map uses a color scheme with green fill for land and yellow strokes for state borders.

Fork of Japan map

This example displays a choropleth-style map of Mexico, rendered with a Mercator projection using d3.geoPath. The map shows state boundaries and graticules, with land areas filled in green and outlined in yellow, while graticules appear in blue and teal. The visualization is built with React, using d3.json to fetch TopoJSON data from a GitHub gist and topojson.feature to convert it into GeoJSON. The code is a fork of a Japan map example, adapted to focus on Mexico’s geographic layout.

Fork of Nepal Map ICE8

This example displays a map of Canada rendered as SVG paths, with each province or territory filled white and outlined in grey. The code uses React for the page structure and D3 v5’s `d3.geoMercator` projection and `d3.geoPath` to convert GeoJSON features into drawable path data. GeoJSON is fetched from a remote GitHub source via `d3.json`, and the selected map geometry is appended to the SVG container. The visualization demonstrates a straightforward integration of D3’s geographic utilities within a React-based HTML setup.

World_Map Fork

This world map visualization displays global landmasses and country boundaries using an equirectangular projection, rendered as SVG via React. The map shows light gray land areas, blue ocean, red interior borders, and graticule lines in a distinct color. The code uses d3.geoPath and geoEquirectangular for geographic projection, along with geoGraticule for generating the grid lines. Data comes from the World Atlas TopoJSON file, processed through topojson’s feature and mesh functions to extract land polygons and country interiors. The visualization is built with React components, where the `Marks` component renders each geographic path element.

Fork of Bonus ICE - 3D Bar chart_rinoj

This 3D bar chart visualizes the number of women in the House of Representatives across nine election years, from 2001 to 2017, split by political party. The chart uses the Highcharts library with the highcharts-3D module, setting an isometric view with a depth projection and groupZPadding to separate the two stacked series. Republican values appear in one stack, while Democratic values appear in another, with the z-axis labeled “Different Parties.” The data is hardcoded as arrays of [x, y] pairs, and the chart’s interactivity and 3D rotation are enabled by Highcharts’ built-in rendering pipeline.

Apr 2, 2023

Fork of 3D bar chart

This example visualizes the number of women in the House of Representatives over time, grouped by political party. It renders a 3D multi-series bar chart where each year displays separate bars for Democratic and Republican counts. The chart uses the d3-x3d library alongside D3 v5's `csv`, `select`, and data-binding methods, with the X3DOM library handling the 3D scene. Data is loaded from a CSV file hosted on GitHub, and the visualization updates the chart after parsing the data into the required multi-series format.

Mar 31, 2023

Fork of BONUS ICE 1: 3D Scatter Plot

This 3D scatter plot visualizes the relationship between Glucose, Blood Pressure, and Diabetes Pedigree Function from a diabetes dataset. Red circular markers with black outlines and 80% opacity represent individual data points. The visualization uses Plotly’s `scatter3d` trace type within a `Plotly.newPlot` call, with data loaded via D3’s `d3.csv` parser from a GitHub gist. Axes are labeled with custom font styling, and the plot includes a minimal margin layout for a clean presentation.

Mar 31, 2023

Fork of Pie Chart_Rinoj Gautam

This example visualizes the smoking rates of the top 10 US states using a pie chart rendered with SVG. The chart uses D3 v5 to load CSV data from a GitHub gist, sorted in descending order, and encodes each state’s rate as a pie segment. Legends display each state name and its percentage value. The code leverages `d3.csv`, `pie`, `arc`, `scaleOrdinal`, and `schemeCategory10` for data loading, layout, and color mapping, with hover events logging values to the console.

Mar 30, 2023

Fork of Women in Parliament

This chart uses a green area graph with a red stroke to show the total number of women in the U.S. Congress from 1993 to 2000, based on a CSV dataset from a GitHub gist. Built with d3.v5, it uses `area`, `scaleLinear`, `axisBottom`, and `axisLeft` to render the SVG, with the x-axis labeled "Years" and the y-axis labeled "Women_total." The visualization is a fork of an original example, and it only displays a sliced subset of the data (rows 44–52).

Fork of Women in House of Representative_area

This example visualizes the total number of women in the U.S. House of Representatives over an eight-year period, drawn from a CSV dataset of women in Congress. The chart presents the data as a red filled area beneath a curve, with labeled axes for years and total count, and includes a title. The visualization is built using D3 v5, leveraging the `area` generator with the `curveBasis` interpolation for smooth lines, along with `scaleLinear` and `axisBottom`/`axisLeft` for scales and axes. The SVG output is rendered through D3's selection and append methods, with data loaded via `csv`.

Women in House of Representative

This line chart visualizes the total number of women in the U.S. House of Representatives across a selected range of years, highlighting the growth in female representation. The SVG rendering uses d3.v5 with `scaleLinear`, `axisBottom`, `axisLeft`, and a `line` generator with `curveBasis` to draw the red trend line. Data is loaded via `csv()` from a GitHub gist, and the code filters to rows 44–52 before plotting, with axes labeled “Years” and “Total Number of Women.”

Smoking rate in United states

This visualization displays smoking rates across United States, with states plotted along the x-axis against their corresponding smoking rates on the y-axis. The data, sourced from a GitHub gist, is visualized as an orange line chart with a curved basis spline. The chart is built using d3.v5, leveraging the `line`, `scaleLinear`, `axisBottom`, and `axisLeft` functions to construct the axes and the line path. The SVG rendering includes axis labels and a title, with the line styled using a custom CSS class.

Reusable D3 Scatter Plot_Rinoj

This animated scatter plot visualizes the Iris dataset, cycling through different x-axis variables (petal width, sepal width, petal length, sepal length) while keeping sepal length on the y-axis. The SVG rendering uses D3's modular `scaleLinear`, `scaleOrdinal`, `axisLeft`, and `axisBottom` APIs to construct a reusable chart. Data points are colored and shaped by species, with a dynamic legend. The animation is driven by `setInterval`, re-calling the plot function to update axes and marks.

Mar 26, 2023

Fork of Reusable_D3_Scatter_Plot_Rinoj.

This interactive scatter plot visualizes the Iris dataset, showing relationships between sepal and petal measurements. Colored circles represent three flower species—setosa, versicolor, and virginica. Using d3.csv for data loading and d3.select for SVG rendering, the plot cycles through different x-axis variables every few seconds via setInterval, while the y-axis remains sepal length. The scatterPlot custom module uses d3.scaleLinear, d3.extent, and d3.axisLeft/axisBottom for scales and axes, with HTML/CSS styling for the interface.

Mar 24, 2023

ICE6 scatter plot

This scatter plot visualizes the relationship between glucose levels and the Diabetes Pedigree Function, with each point colored red or blue to indicate the outcome of diabetes diagnosis. The axes are scaled linearly using `d3.scaleLinear`, and tick labels are rendered at 24 pixels. The visualization is built with D3 v6 and React, loading CSV data from a GitHub gist, and uses `d3.axisLeft` and `d3.axisBottom` for the axes. Circles are positioned by glucose and pedigree function values, while age and blood pressure are encoded as `rx` and `ry` attributes, though they do not affect the visual output.

Mar 23, 2023

ICE6Rinoj Bar Graph

A horizontal bar chart displays smoking rates across twelve U.S. states, with a pink rectangle for each state scaled by its rate. The visualization is built with React and rendered as SVG, using d3.scaleBand for the y-axis and d3.scaleLinear for the x-axis. Data is loaded asynchronously via d3.csv from a GitHub gist, and axes are drawn manually with grid lines. The chart includes a title and visual emphasis through colored bars, with tick labels generated by d3's scale methods.

Mar 23, 2023

Fork of Making Scatter Plot ICE6

This visualization displays a scatter plot of the Pima Indian Diabetes dataset, plotting Glucose levels on the x-axis against DiabetesPedigreeFunction on the y-axis. Each circle is colored by the Outcome variable using d3.scaleOrdinal with two distinct colors, and size is fixed at a radius of 7. The React component uses d3.scaleLinear for both axes, with SVG rendering via React elements. The code leverages d3.csv for data loading, custom AxisBottom and AxisLeft components for tick marks, and tooltips generated through SVG title elements within the Marks component.

Mar 22, 2023

Fork of Fork of Fork of ICE-6 Bar Graph Rinoj

This interactive bar chart compares Amazon monthly basic subscription costs across twelve countries, with bars extending horizontally from a red gridline backdrop. Built with React hooks and D3 v5, it loads CSV data via `d3.csv`, scales values using `scaleLinear` and `scaleBand`, and renders SVG rectangles and text labels. The visualization updates when data arrives, providing a clear ranking of regional price differences.

Mar 22, 2023