bharathsivakumar07

@bharathsivakumar07·12 public vizzes

ICE 8: World Map with Topojson Data

This example displays an interactive world map using a natural Earth projection, with each country rendered as a distinct filled path. The visualization loads GeoJSON data from the world-atlas TopoJSON file, converts it using the `feature` method from topojson, and projects it with `d3.geoNaturalEarth1` and `d3.geoPath`. The SVG output includes a light sphere background and hover highlighting on countries, driven by CSS and D3 v5’s `select` and `data` binding.

Jul 10, 2022

Loading thumbnail…

ICE-8 Tree Classification of Matter(Bharath Siva Kumar)

This interactive tree diagram visualizes the classification of matter, using an animated, collapsible layout to show the hierarchical relationships between categories like pure substances, mixtures, elements, and compounds. The visualization is built with D3.js v3 and uses the `d3.layout.tree` API to compute the graph structure. Node colors and link styling are applied dynamically through custom CSS and JavaScript functions, with tooltips that appear on hover. The data is loaded from a JSON file containing the hierarchical structure.

Jul 10, 2022

Loading thumbnail…

ICE-8 state Map of Kerala (Country: India)

This example displays a choropleth-style map of Kerala, India, with district boundaries rendered in teal and individual regions in gray that turn orange on hover. The visualization uses a Mercator projection fitted to the SVG canvas via `projection.fitExtent`, with geographic features drawn using `d3.geoPath`. TopoJSON data is loaded through `d3.json` and converted to GeoJSON using the `feature` and `mesh` functions from the topojson library. The React-based interface loads the map asynchronously and renders it as SVG paths.

Jul 10, 2022

Loading thumbnail…

ICE-8 Graph for Social Network(Bharath Siva Kumar)

This example visualizes a small social network as a force-directed graph, with nine named people connected by weighted links. Black circles represent nodes, and line thickness reflects link weight. Users can drag nodes, and hovering over a node displays a tooltip with the person’s name. The visualization uses d3.layout.force (from d3.v4) with gravity, distance, and charge parameters, rendering SVG circles, lines, and text. It loads node and link data from a local graph.json file and animates node positions via the force simulation’s tick event.

Jul 10, 2022

Loading thumbnail…

ICE-7 Reusable Scatter Plot with Menu

This interactive scatter plot displays daily wind measurements from multiple weather stations over time, with each station represented by a distinct color in an ordinal color scale. A dropdown menu lets viewers switch the y-axis among five different wind attributes, including sustained wind speed and peak wind direction. Hovering over a color legend item triggers React’s state management to fade non-selected stations by 80%, isolating their data points for comparison. Built with React and SVG, the visualization uses D3 v6 utilities like `scaleLinear`, `scaleTime`, and `scaleOrdinal` for axes and coloring, while the `react-dropdown` library powers the menu, all rendered from CSV data fetched via D3’s `csv` function.

Jul 3, 2022

Loading thumbnail…

ICE-7 Pie Chart for Students Studying Abroad

This pie chart visualizes the number of students from Indian states pursuing higher studies abroad, with each slice representing a state’s count. Built with D3 v4, it uses `d3.arc`, `d3.pie`, and `d3.scaleOrdinal` with the Category 10 color scheme for SVG rendering. Interactive hover behavior uses `d3.mouse` events to display a tooltip showing the state name and value, with opacity changes on slice selection. The dataset includes ten hard-coded entries, such as Goa (10,653) and Jammu and Kashmir (7,709), rendered as a static, non-animated chart.

Jul 2, 2022

Loading thumbnail…

ICE-7 Area Graph_Bharath

This area chart shows the trend of Suzuki employee numbers over time, with circles highlighting individual yearly values and interactive tooltips on hover. The visualization uses Vega-Lite API with d3.v5 for data loading, layering area and circle marks, plus a rule mark for hover selection. Data comes from a CSV of Suzuki employees, and the chart includes labels and a purple-themed interface.

Jul 2, 2022

Loading thumbnail…

ICE-7 Line Graph_Bharath

This interactive line chart displays MS Dhoni’s career run totals by year, using a blue line with circle markers and a vertical rule that follows the mouseover to highlight exact values. The visualization is built with the vega-lite-api library and rendered using Vega-Lite, with data loaded from a CSV via d3.csv. It includes tooltip handlers and custom styling from a separate config file, offering a clear, hover-driven exploration of performance metrics.

Jul 2, 2022

Loading thumbnail…

ICE-6 Marks and Channels

A horizontal bar chart ranks the top ten food-producing countries by million tons, using bar length to encode quantities and the y-axis for country names. Filtered from a CSV file of global food production data, the visualization uses React for the user interface and a D3 SVG rendering pipeline, with `scaleBand` for categorical axes and `scaleLinear` for the quantitative scale.

Jun 27, 2022

Loading thumbnail…

Task2 ICE6 Scatter Plot

This scatter plot visualizes the relationship between petal length and sepal length in the classic Iris dataset, with each of the 150 flowers depicted as a small SVG circle. The code uses d3.csv to load the data, d3.scaleLinear for the x and y axes, and d3.extent to compute the scales from the data domains. Axis labels are added as SVG text elements with custom styling. The visualization is rendered directly into the browser window using SVG, with the plot dimensions resizing to match the full viewport. The chart clearly shows a positive correlation between these two iris flower measurements.

Jun 27, 2022

Loading thumbnail…

Loading and parsing CSV Data_Bharath

This example demonstrates loading and parsing CSV data using D3.js version 5 within a React framework, rendering the results as an SVG visualization. The code uses `d3.csv` parsing methods to read and process tabular data, then displays the parsed content in a styled HTML page. The visualization features colorful abstract shapes and paths rendered via SVG, with a decorative header and message container. The implementation includes custom CSS styling for layout, and the SVG elements are drawn using D3's path generation capabilities to create the visual composition.

Jun 23, 2022

Loading thumbnail…

ICE-4 Bharath

This visualization draws a stylized panda face using React and the D3.js arc API. The face is composed of geometric primitives—including arcs for the eyes, nose, mouth, and ears, plus circles and ellipses for the eye sockets and blush—rendered as SVG paths. The code constructs each shape with d3.arc() to define inner and outer radii and angular spans, then applies transforms for positioning and rotation. The final composition sits centered on a black circular canvas with a white stroke outline.

Jun 19, 2022