MalempatiSaranya

Fork of CO2 Emissions Over Time

This stacked area chart shows global CO2 emissions over time, segmented by fossil fuel sources including gas, liquids, solids, cement production, and gas flaring. The visualization uses d3.stack and d3.area to render the layered paths, with labels positioned automatically via d3-area-label. Data is loaded from a CSV file, and emissions values are converted from raw numbers to gigatons. The chart updates responsively on window resize, and includes hover effects that darken each area, with axis labels and a custom y-axis title.

Jul 13, 2022

ICE 8 Car brands

This interactive tree diagram visualizes the hierarchy of two car brands, Tesla and Toyota, and their respective models, using a collapsible node-link layout. Rendered with SVG in a React application using D3 v3, the visualization color-codes nodes by type and includes tooltips that appear on hover. The layout is computed with `d3.layout.tree`, and user interaction supports zooming and panning via `d3.behavior.zoom`. Data is loaded from an external JSON file specifying the brand, model, and relationship structure.

World map

This example displays a grayscale world map with yellow countries that highlight blue on hover, overlaid with blue data points and graticule lines. It uses D3 v5 and TopoJSON to project geographic features through `d3.geoPath`, while a helper module exports a message string. The visualization renders as SVG with styled spheres, country shapes, and tick marks, demonstrating module imports and UNPKG-hosted dependencies.

World map Saranya

A world map is rendered on an SVG canvas with children, using an equirectangular projection to display country boundaries. The visualization loads country geometries from the world-atlas JSON dataset and renders them as yellow paths with gray strokes, which turn blue on hover. The code uses D3's projection and path generation functions, D3's selection and data loading APIs, and TopoJSON's feature method to convert the data into GeoJSON features for rendering.

Friends Network Graph

This visualization displays a force-directed network of Instagram friends, with nodes representing named individuals and links showing connections weighted by interaction strength. The graph separates users into distinct group clusters, and hovering over a node reveals a tooltip with the friend's name. Built with React and D3 v4, the implementation uses `d3.layout.force` for physics simulation, SVG circles and lines for rendering, and drag behavior to let viewers reposition nodes. Data comes from a static `graph.json` file, and link thickness corresponds to the `weight` attribute.

Untitled

This example renders a hierarchical tree diagram as an interactive SVG animation. It displays nodes and links with color-coded types, tooltips on hover, and zoom-and-drag navigation via `d3.behavior.zoom`. Built with React and D3’s `d3.layout.tree`, the visualization reads JSON data and styles elements using custom CSS. The code uses SVG groups for nodes, links, and tooltips, with smooth transitions for updates.

Untitled

This example presents a minimal interactive visualization built with React and D3, rendered on an HTML page. It demonstrates how to integrate D3’s force simulation into a React component, using a simple dataset to position and animate circles based on simulated physics. The code leverages `d3.forceSimulation` with force links and charge, updating node positions via React state on each tick. The rendering approach uses SVG elements managed through React’s declarative JSX, showcasing a clean separation between D3’s computation and React’s view layer.

Jul 8, 2022

India Map: ICE-8

This example displays an interactive map of India with state capitals marked as colored circles, using a CSV dataset that includes city coordinates, population, and color values. It renders the geographic boundaries and city points as SVG elements, with D3 v5 and TopoJSON handling the map projection and path generation. The visualization uses `d3.csv` to load the data, `d3.geoPath` to draw the map, and `d3.select` to bind city positions to the SVG, with hover colors defined per city. The map is centered on India with a fixed 900x1500 viewport.

Jul 8, 2022

Fork of Fork of HTML Starter

This example displays a centered message reading “Hello HTML!” in large text, demonstrating a minimal HTML page styled with CSS. The title and text are rendered directly in the browser using standard HTML and CSS, with the message size set to 13em for prominent display. The page includes no JavaScript logic beyond the basic document structure, serving as a simple starter template. It provides a foundation for building more complex visualizations by showing the core markup and styling approach.

Jul 8, 2022

Fork of HTML Starter

This example displays a large, centered “Hello HTML!” message using plain HTML and CSS, with the text styled at 13em font size and aligned to the middle of the page. It serves as a minimal demonstration of structuring content with an HTML `div` element, applying visual properties via a CSS class inside a `<style>` block, and requires no JavaScript logic. The code uses no external libraries, relying only on standard HTML and CSS features. Its purpose is to show a basic webpage layout as a starting point for more complex visualizations.

Jul 7, 2022

Bonus ICE Saranya

This example presents a 3D bar chart of top car brand sales across countries, using the Highcharts library with the highcharts-3d module. The visualization groups sales data for brands like Tesla, Ford, and Toyota, with a stacked column layout that positions each country’s data point at a specific category index. The chart is rendered with alpha and beta rotation angles for a perspective view, showing sales figures in billions of USD. The code relies on jQuery to initialize the chart within a container div.

Jul 7, 2022

3D Scatter Plot Saranya

This 3D scatter plot visualizes the calcium, vitamin, and protein content of vegetables as three-dimensional points. Each blue marker represents a vegetable, positioned according to its nutrient values from a CSV file loaded via `d3.csv`. The code uses Plotly’s `Plotly.newPlot` with a `scatter3d` trace, while `d3.csv` handles data parsing with the `unpack` function to extract columns. The layout defines styled axis titles for the three nutrient dimensions.

Jul 6, 2022

Production of Rice-saranya

This visualization presents rice production across Indian states using a donut chart, with each segment sized proportionally to production values. The chart employs D3.js v4 to generate SVG paths via the `d3.arc` and `d3.pie` functions, while a custom legend and interactive hover tooltips reveal state names and production numbers. Data originates from a CSV file loaded asynchronously through React’s `useEffect` hook, with the top 10 records displayed. The visualization uses a color scale from `d3.schemeCategory10` and incorporates mouseover effects that adjust opacity and show contextual information.

Area chart - saranya

This interactive area chart visualizes the historical stock price data from a CSV file, allowing users to explore trends over time. The chart uses an area generator with a cardinal curve to create a smooth, filled line, and includes a time slider for filtering the date range. A brush feature enables zooming into specific time periods, with a reset button to return to the full view. Built with D3.js v4 and React, the visualization uses SVG rendering with animation and a tooltip for detailed value inspection.

Sales of each car model in millions ICE 7 Saranya

This visualization displays total sales of car models in millions, aggregated from a CSV dataset, as an interactive donut chart with a legend. The chart, built with D3 v2 and jQuery, uses `d3.layout.pie` and `d3.svg.arc` to generate proportional arcs, with `d3.scale.ordinal` mapping model names to colors. Each slice includes a hover tooltip via `svg:title` and shows the sales value as text. Animated opacity transitions and clickable legend entries highlight or toggle data segments, while the SVG rendering updates dynamically through `d3.select` and `append`.

US CO2 Emmisions by various sectors

This interactive line chart displays US CO2 emissions across various sectors over time, with each sector represented by a colored line. It uses Vega-Lite's API through the `vega-lite-api` library, running on D3.v5, to encode the temporal data with a zero-suppressed quantitative y-axis for CO2 in billion metric tons. The visualization pulls data from a remote CSV file and renders as scalable vector graphics with tooltips showing the year.

Line chart saranya

This line chart displays Apple stock prices over time, sourced from a CSV file. It uses D3.js v4 to render an SVG visualization with a blue-to-yellow gradient line. The chart includes interactive mouseover and mousemove events that reveal a data point’s exact price via a tooltip circle and text, leveraging D3’s `scaleTime`, `scaleLinear`, `line`, and `bisector` APIs.

Line chart saranya

This chart uses a line graphic to track the daily price of Apple stock over time. The graph is built with D3.js v4, using a time-scaled x-axis and a y-axis that starts at zero. The line is drawn with a linear gradient fill, shifting from blue to yellow. Hovering over the chart reveals a tooltip that shows the exact price at the cursor’s location, using a bisector to find the nearest data point. The data is loaded from a remote CSV file, and the visualization is rendered as an SVG.

line chart Saranya

A multi-line chart displays annual net forest conversion for Peru, Ecuador, and Colombia from 1990 to 2015, with each country shown as a colored line with a label legend. The visualization uses D3 v5 with d3.line, d3.scaleTime, and d3.scaleLinear to map years and forest values, while d3.nest groups the CSV data by country. SVG paths render the lines, and hover tooltips reveal the country name. The chart reads data from a local CSV file and uses d3.schemeCategory10 for color assignment.

line chart Saranya

This example shows how forest area in South American countries has changed annually from 1990 to 2015, with each country’s net forest conversion trend drawn as a separate blue line. The chart uses d3.csv to load the data, d3.timeParse and d3.scaleTime for the year axis, and d3.nest to group values by country. A d3.line generator creates the SVG paths, while d3.scaleOrdinal assigns distinct colors to each country. Interactive tooltips appear on hover, and the chart includes a title and legend built with SVG text elements.

ICE 7 scatter plotting - saranya

This scatter plot visualizes the relationship between average horsepower and average torque across car brands, with each brand represented by a colored point and a legend. The chart uses a D3 v6 linear scale for both axes, and circles are colored via `d3.scaleOrdinal` with `d3.schemeCategory10`. A custom tooltip, displayed on mouseover, shows the brand and exact values. Data is loaded from a CSV file using `d3.csv`, and the visualization is rendered as an SVG within a React framework.

scatter plotting

A scatter plot shows average engine horsepower versus torque for various German car brands, using one point per car make. The visualization relies on a D3.js v6 SVG rendering, reading data from a CSV file, and mapping the `Avg_Torque` values to the x-axis and `Avg_Horsepower` values to the y-axis. Points are colored by car make using `d3.scaleOrdinal` with the `d3.schemeCategory10` palette, and a tooltip appears on hover displaying the make and both axis values. The chart includes axis labels, a title, and a legend indicating the car brand identity.

Untitled

This interactive visualization displays a chart area with circular elements and a tooltip that appears on hover, showing the text "popup" with pointer-events disabled. The React-based implementation uses JavaScript to dynamically render content into a `chartArea` div, while CSS styles define the tooltip’s visual appearance with a lightsteelblue background and rounded corners. The code leverages standard DOM manipulation via JavaScript, with styling handled through CSS rules specified in the stylesheet.

ICE 7 Saranya

This example displays a donut chart of aggregated sales data, with each arc labeled by its total value and a legend identifying categories. The visualization also includes tooltips on hover and uses opacity to differentiate segments. Built with React and D3 v2, it loads CSV data and processes it through a custom `TransformChartData` function to sum values by category. The chart is rendered as an SVG using `d3.layout.pie` and `d3.svg.arc`, with color mapping via `d3.scale.ordinal` and interactive legend elements.

Fork of Monthly Deaths in Syria

This bar chart shows the monthly death toll in Syria from 2011 through June 2019, using aggregated data from the Violations Documentation Center. Each red bar represents a single month, with a hover tooltip displaying the exact date and count. The visualization is built with D3 v4, using `d3.scaleTime`, `d3.axisBottom`, `d3.axisLeft`, and `d3.tip` for interactivity. Data is loaded via `d3.csv` and aggregated with datalib’s `groupby` and `summarize` methods.

Fork of Aditya - React D3 Conditional Line Chart Practice

A line chart displays monthly risk values over time, with point markers colored green, amber, or red to indicate values below 50, between 50 and 75, or above 75, respectively. Dashed reference lines mark the 50 and 75 thresholds. The visualization, built with React and D3 v6, uses SVG for rendering and loads time-series data from a CSV file. D3's `scaleTime`, `scaleLinear`, and `line` functions generate the axes and path.

Fork of VizHub User Count Over Time

A line chart tracks the cumulative number of unique VizHub users over time, from the platform's launch in August 2018 to May 2022. Annotated callouts mark key growth events, including the VizHub 1.0 release, a Kickstarter campaign, and the Datavis 2020 course launch, highlighting notable upticks. The visualization uses D3 v4 with an SVG rendering approach, leveraging `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` for the path, and the `d3-svg-annotation` library for labels. Data comes from a CSV file containing date and user count pairs.

Fork of Scatterplot Visualization

This scatterplot shows the relationship between the average price of boba tea and the cost of living index across 34 U.S. cities. Each purple circle represents a city, with hover interactions revealing a yellow tooltip displaying the city name, price, and index. The visualization uses D3.js v7 with SVG rendering and animations triggered through mouse events. The data is loaded from a CSV file, and the chart includes axis labels, a title, and blue-colored axis annotations. The code specifically employs `d3.scaleLinear`, `d3.axisLeft`, `d3.axisBottom`, and `d3.csv` to construct the plot.

Fork of Fork of ICE 7 Area Chart

This visualization shows the number of US cancer cases from 2009 to 2022 using a combined line and area chart. A smooth curve represents the trend, with the area beneath it filled in purple to emphasize the magnitude of cases over time. The chart includes labeled axes for year and case count, with gridlines and a tooltip that displays the entity name on hover. Built with D3 v5, it uses `scaleLinear`, `line()`, `area()`, `curveBasis`, and `axisBottom`/`axisLeft` to render SVG elements, with data loaded from a CSV dataset.

Fork of Coronavirus Deaths by Country over Time (with Voronoi Hover)

A multi-line chart tracks cumulative COVID-19 deaths over time for each country, using a log scale to accommodate wide value ranges. Hovering over any point triggers a Voronoi overlay, built with `d3.Delaunay`, to highlight the nearest data point, illuminate that country’s line, and display a tooltip with the death count and date. The visualization uses React and d3.v5, rendering SVG elements and pulling data from the Johns Hopkins Coronavirus dataset.

Fork of test

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. Each circle’s position encodes horsepower (x-axis) and torque (y-axis), while its size represents highway MPG and its color distinguishes the car brand. The visualization uses D3 v7 with SVG, rendering static bubbles that reveal a tooltip showing the car make on hover. Data is loaded from a CSV file and styled via inline attributes and CSS.

scatter plot

This scatter plot visualizes the relationship between engine displacement, horsepower, and vehicle origin, with circle size encoding weight. The visualization uses the vega-lite-api to construct the chart, which is rendered with Vega-Lite and Vega. Data is loaded from a remote CSV file of auto-mpg records using d3.csv. The plot maps displacement to the x-axis and horsepower to the y-axis, while color differentiates origin and size scales by weight.

ICE 7

This visualization displays a scatter plot of automobile data from the UCI Auto MPG dataset, mapping miles per gallon against horsepower. Points are colored by origin, with point size encoding vehicle weight, and hovering reveals the car name via tooltip. Built with the vega-lite-api and D3’s csv loader, it renders using vega-lite’s markCircle, with axes customized to remove domain lines and configure tick and label styling.

Fork of Pie chart

A pie chart displays the top 10 countries by population in 2022, with each slice labeled in thousands and accompanied by a legend showing country names and values. The chart uses D3 v5 to load CSV data via `d3.csv`, compute slice angles with `d3.pie`, and generate SVG paths with `d3.arc`. A `d3.scaleOrdinal` maps population values to a preset color array. Text labels are positioned using the arc centroid, while the legend is built with appended rectangles and text elements.

Fork of Pie chart

This fork of a D3 pie chart visualizes the top 10 countries in the world for 2022, using an interactive, animated donut chart rendered as SVG. The chart segments expand on mouse hover and, upon clicking, drill down to reveal a nested second-level breakdown based on additional data attributes. Built with D3 v2 and jQuery, the visualization uses `d3.layout.pie`, `d3.svg.arc` with inner and outer radii, and `transition.attrTween` for smooth entry animations, while handling color assignments via a categorical ordinal scale.

Fork of Pie Chart

This fork of a pie chart visualizes 2022 US auto sales by brand, showing each brand's market share as a slice of the pie. The chart also provides a legend that lists each brand, its percentage of total sales, and the sales volume in thousands. The visualization is built with D3 v5, using `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate the SVG paths and color the segments. Data is loaded from a CSV file hosted on GitHub using `d3.csv`.

Fork of Fork of Pie Chart

This visualization shows the total number of movies and shows on Netflix, broken down by country for the top eight entries. A pie chart displays proportional slices, with a color-coded legend listing each country alongside its numeric total. The chart is rendered as SVG using d3.v5, with d3.pie and d3.arc generating the segments and d3.scaleOrdinal assigning colors. Data is loaded via d3.csv from a GitHub gist, sorted by library size, and limited to the top eight rows before rendering.

ICE 6 Scatter Plot

This example shows a scatter plot of the Iris dataset, mapping petal length and width on the axes while coloring points by species (setosa, virginica, and versicolor) using blue, red, and black. The code loads CSV data via d3.csv, parses numeric fields, and scales values with d3.scaleLinear and extents. Rendered as SVG circles with a fixed radius, it also includes custom axis labels and tick styling. The visualization uses D3 v6 within a React-free HTML setup, with axes generated via d3.axisLeft and d3.axisBottom, and it leverages window dimensions for a responsive full-screen layout.

Jun 26, 2022

Fork of ICE 6 Data Visualization

This bar chart displays the sales units for the top ten car models, ranked by name along the vertical axis. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` for axes, and SVG `rect` elements for bars. Data is loaded from a CSV file via `d3.csv` and rendered with a margin-based layout featuring a blue axis grid.

Jun 25, 2022

ICE 5 Data Visualization

This example demonstrates loading and parsing a weather dataset from a remote CSV file using D3 v5. The visualization displays weather data in a dynamic, interactive format, with custom styling applied through CSS including a red background and centered text layout. The code utilizes d3.csv to fetch and parse the dataset, then renders the visualization as SVG elements within a React framework. The visualization incorporates custom styling with both inline SVG and embedded CSS, highlighting the integration of data loading, parsing, and visual presentation in a single-page application.

Jun 23, 2022