K

Kinjal-Goyani

@Kinjal-Goyani·32 public vizzes

Loading thumbnail…

Military spending GDP

This chart displays military expenditure as a percentage of GDP for seven countries from 2001 to 2021, using a color-coded line chart with a legend. The visualization highlights trends and comparisons over time, with each country represented by a distinct line. Built with D3 v5, it uses SVG rendering and scales such as `scaleTime` and `scaleLinear` for axes, along with `nest` and `line` to create the paths. The data is loaded from a CSV file, and a custom legend is constructed using the `colorLegend` module.

Loading thumbnail…

Military spending

This chart visualizes military spending from 2001-2020 for major countries. Each colored line represents a country, with the x-axis showing time and the y-axis showing spending in US dollars. The visualization orders the lines by each country's final spending value to make comparisons easier. Built with D3 v5, the code uses `scaleTime`, `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, and `line` to construct the SVG rendering. The data comes from a CSV file, and a color legend is rendered using a custom `colorLegend` function.

Loading thumbnail…

Fork of Coronavirus Deaths Over Time by Country With Voronoi Overlay

This visualization displays cumulative COVID-19 deaths over time for multiple countries as a log-scaled line chart, using data from the Johns Hopkins Coronavirus Dataset. The React component renders lines with d3.line and scales with d3.scaleTime and d3.scaleLog. A d3.Delaunay-based Voronoi overlay, implemented via d3-delaunay, enables hover interactions to highlight the nearest line segment, making it easy to identify individual country trajectories.

Loading thumbnail…

Fork of Multiple Line Chart

This visualization displays military spending trends from 2001 to 2020 across multiple countries, with each country’s annual spending plotted as a line over time, and the aggregated data using all points rather than separating by nation. It employs D3 v5’s `scaleLinear` for both axes, `line` with `curveBasis` to smooth the path, and `nest` to group the dataset by country, though the chart ultimately draws a single combined line. The SVG rendering includes custom axes with gridlines, a title, and axis labels, sourced from a CSV file containing country, year, and spending values.

Loading thumbnail…

Fork of Line Chart with Multiple Lines

This line chart displays the temperature in cities around the world over one week, using data from the Data Canvas - Sense Your City initiative. The visualization plots each city as a separate line, colored using a categorical color scale, with the x-axis representing time and the y-axis representing temperature in degrees Celsius. The chart is rendered as an SVG using D3 v5, employing `scaleTime` and `scaleLinear` for the axes, `line` with `curveBasis` for the paths, and a custom `colorLegend` function for the legend. A title and axis labels are included, with the lines sorted by their final temperature value.

Loading thumbnail…

Multiple Line Chart

This multi-line chart displays military spending trends from 2001 to 2020 across eight countries, with the y-axis showing spending amounts and the x-axis representing years. The visualization uses D3 v5 to render an SVG, applying `scaleLinear` for both axes, `line` with `curveBasis` for the path, and `nest` to group data by country. The chart includes axis labels, a title, and a single maroon line path, though the nested data structure is logged but not separately rendered as distinct lines.

Loading thumbnail…

Fork of map exemple

This example displays a zoomable world map where each country is filled with a color intensity based on its population estimate. The choropleth uses a linear scale transitioning from light to dark red, with hover effects changing the fill to purple. It builds the map using `d3.geoPath` with a `geoMercator` projection and TopoJSON data from world-atlas, while population and country names come from a TSV file. Zoom interactions are handled through d3’s `zoom` behavior, transforming SVG paths.

Loading thumbnail…

Walking steps in October 2022

This area chart visualizes the daily step count from a Google Fit app for October 2022. The visualization highlights the variation in physical activity, with peaks above 14,000 steps and many low-activity days. Built with D3 v5, it uses `scaleTime` and `scaleLinear` for the axes, and an `area` generator with `curveBasis` to create the smooth filled region. Data is loaded from a CSV file via `csv()`, and the SVG is rendered with axis ticks, labels, and a title.

Loading thumbnail…

Fork of map exemple

This example displays a zoomable world map where each country is filled with a color intensity based on its population estimate. The choropleth uses a linear scale transitioning from light to dark red, with hover effects changing the fill to purple. It builds the map using `d3.geoPath` with a `geoMercator` projection and TopoJSON data from world-atlas, while population and country names come from a TSV file. Zoom interactions are handled through d3’s `zoom` behavior, transforming SVG paths.

Loading thumbnail…

Fork of Temperature in San Francisco Area Chart

This area chart displays one week of temperature data in San Francisco, with time on the x-axis and degrees Celsius on the y-axis. The visualization uses an SVG-based area path filled with maroon, rendered via D3 v5’s `area`, `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` APIs. The data is loaded from a CSV file and processed to convert timestamps and temperatures. Axes include labeled ticks and gridlines, with a smooth curve applied through `curveBasis`.

Loading thumbnail…

Fork of Fork of Cars Scatter Plot

This scatter plot visualizes walking steps taken each day in November, using red circles to map date against step count. The data comes from the UCI Machine Learning Repository's Auto MPG dataset. Built with D3 v5, the code uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct axes and scales. SVG circles are positioned via `attr('cx')` and `attr('cy')`, with axis labels and titles styled through CSS classes like `.axis-label` and `.title`.

Loading thumbnail…

Bowl of Fruit - General Update Pattern

This example demonstrates D3’s general update pattern by animating a bowl of fruit as apples are removed or replaced with lemons. It shows the enter, update, and exit selections in action: new circles enter, existing circles transition their radius based on fruit type, and removed circles shrink to zero before being deleted. The code uses d3.scaleOrdinal for color and radius mapping, with d3.transition handling the 1-second animations. The visualization is driven by timed updates to a JavaScript array, which is re-rendered through the fruitBowl function.

Loading thumbnail…

World Population Area Chart

This area chart displays world population growth over time, using a filled path to emphasize the magnitude of change. The chart encodes years on the x-axis and population on the y-axis, with a title and labeled axes. Built with D3 v5, it uses `d3.scaleTime`, `d3.scaleLinear`, `d3.area` with `curveBasis`, and `d3.axisBottom`/`d3.axisLeft` for the grid and ticks. Population values are formatted as billions, and the data comes from a CSV file loaded via `d3.csv`. The visualization is rendered as an SVG.

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays a week of temperature data in San Francisco, with time on the x-axis and degrees Celsius on the y-axis, using data from a remote CSV file. The visualization renders as an SVG, constructed with D3 v5, and employs `scaleTime` for the time-based x-axis and `scaleLinear` for the temperature y-axis. It draws a smoothed line using `line` with `curveBasis`, and adds gridlines and labels via `axisBottom`, `axisLeft`, and explicit text elements. The chart includes a title and axis labels, with points not plotted as circles.

Loading thumbnail…

Fork of Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for a sample of cars from the UCI Auto MPG dataset. The code uses d3.scaleLinear, d3.axisBottom, and d3.axisLeft to construct the axes, and renders the data as red, semi-transparent SVG circles. The chart includes axis labels, a title, and a grid, with the data loaded via d3.csv and parsed into numeric fields before being passed to the render function.

Loading thumbnail…

Fork of Customizing Axes

This horizontal bar chart displays the population of the top 10 most populous countries using 2018 UN estimates. Written with D3 v5, the visualization uses `scaleLinear` for the x-axis and `scaleBand` for categorical y-axis placement of each country. The chart customizes axes by removing default domain lines and tick marks, adding gridlines via negative tick sizes, and styling labels with large fonts. The SVG rendering includes a title and an axis label, with data loaded from a local CSV file.

Loading thumbnail…

Cars Report

This visualization displays a plain-text report of cars priced under $2,000, listing each vehicle’s year, make, model, and price on separate lines. It filters an inline JSON array of car objects, then maps each entry through a `formatCar` function and joins the results with newline characters. The final message is rendered as text content inside a `<pre>` element using the DOM API `document.getElementById`. The code uses native JavaScript methods `JSON.parse`, `filter`, `map`, and `join` to process the static dataset embedded directly in the script.

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3 starter template that renders the text “Hello D3 version 7” in the center of the page. The visualization uses the `select` function from D3 to target the body element and sets its text content, while CSS styling applies a large font size and center alignment. It loads D3 v7.6.1 from a CDN and runs the main code from a separate `bundle.js` file. The page includes a related video tutorial in its README.

Loading thumbnail…

Fork of HTML Starter

This example displays a large, centered message reading “Hello HTML!” using a simple HTML page styled with CSS. It demonstrates the core structure of an HTML document, including a `<style>` block that sets the font size and alignment of the message text. The page relies on standard HTML elements and CSS properties, with no external libraries or JavaScript logic beyond the static markup, serving as a minimal starter template for web development.

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a minimal D3.js setup within VizHub, displaying the text “Hello VizHub!” centered on the page. It shows how to load D3 v5 from a CDN and use ES6 module imports for both external libraries and local JavaScript files. The code uses `d3.select` to target the `#message` div and sets its text content from an exported constant in a separate module. Styling is applied via CSS, centering the text and enlarging the font size dramatically.

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a minimal D3.js setup within VizHub, displaying the text “Hello VizHub!” centered on the page. It shows how to load D3 v5 from a CDN and use ES6 module imports for both external libraries and local JavaScript files. The code uses `d3.select` to target the `#message` div and sets its text content from an exported constant in a separate module. Styling is applied via CSS, centering the text and enlarging the font size dramatically.

Loading thumbnail…

Fork of SVG Fundamentals1

This example demonstrates a minimal HTML page that displays the text “Hello HTML!” centered and styled with a 13em font size. It serves as a basic introduction to structuring content with HTML and applying visual styling through CSS. The page uses inline `<style>` tags to define the `.message` class, which controls the font size and text alignment, while the body contains a single `<div>` element holding the message. No JavaScript libraries or frameworks are utilized, and the example relies solely on native web technologies.

Loading thumbnail…

Fork of Fork of HTML Starter

This example displays a single centered message, “Hello HTML!”, rendered in large text using a CSS class. The page is a minimal HTML document that demonstrates the fundamental structure of a web page, including a `<style>` block for styling and a `<body>` containing the content. It relies on plain HTML and CSS, with no JavaScript logic or external libraries, serving as a basic starter template. The rendering approach is straightforward static markup, showcasing how CSS properties like `font-size` and `text-align` control visual presentation.

Loading thumbnail…

Fork of HTML Starter

This example displays a large, centered message reading “Hello HTML!” using a simple HTML page styled with CSS. It demonstrates the core structure of an HTML document, including a `<style>` block that sets the font size and alignment of the message text. The page relies on standard HTML elements and CSS properties, with no external libraries or JavaScript logic beyond the static markup, serving as a minimal starter template for web development.

Loading thumbnail…

Fork of Radial Tree of Countries Hierarchy

This radial tree visualizes the hierarchical relationships between world regions and their constituent countries. The data is loaded from a local JSON file and rendered as an SVG, with the root node placed at the center and branches extending outward. The visualization supports panning and zooming interactions through `d3.zoom`, allowing users to explore the hierarchy at different scales. Node labels are rotated and positioned based on their depth and angle, with font size scaling according to hierarchy level. The implementation builds on the `d3.cluster`, `d3.hierarchy`, and `d3.scaleSqrt` APIs.

Loading thumbnail…

Fork of Chart

The visualization presents the number of crime cases against women in India through a geographic choropleth map of Indian states and two animated donut charts. Users can filter the map by year and crime type via dropdown menus, while the donuts show the distribution of crime types for a selected year and crime types across all years. It is built with D3 v7, using `topojson.feature` to convert the TopoJSON map data, `d3.rollups` for aggregating the dataset, and D3’s selection and event handling for the interactive controls. The underlying data comes from a CSV file hosted on GitHub gists.

Loading thumbnail…

Fork of IndiaMap

This visualization displays a color-coded map of India’s states, with each state labeled by name and rendered using D3’s `geoMercator` projection and `geoPath` generator. State boundaries are drawn with a white stroke, and hovering over a state fills it white. The code loads TopoJSON data from a GitHub gist, applies a `scaleOrdinal` with `schemeCategory10` for fill colors, and positions state name labels at path centroids. It uses D3 v5, TopoJSON, and renders to SVG within a React project.

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This example visualizes a hierarchical dataset as a zoomable sunburst chart, where clicking a ring segment zooms in to show that subtree, with a central circle allowing navigation back to the root. The chart uses D3 v5’s `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute and render the radial layout, with smooth animated transitions driven by `transition.attrTween` and `d3.interpolate`. Data is loaded asynchronously from the `@observablehq/flare` package via the Observable stdlib.

Loading thumbnail…

Fork of Country Map of India

This interactive map of India displays each state as a distinct SVG path, colored using a categorical scheme from `d3.scaleOrdinal`. The visualization uses `d3.geoMercator` with a custom translation and scale to project geographic coordinates, and `d3.geoPath` renders each feature. TopoJSON data from a GitHub Gist provides the map boundaries. Hovering highlights the state in pink. The example is built with React and relies on `d3.select` to manage the SVG, demonstrating projection, path generation, and categorical color encoding within D3 v5.

Loading thumbnail…

Fork of Fork of India Map: ICE-8

This visualization displays a map of India with its states, each filled with a distinct categorical color and labeled with state names positioned at their centroids. It uses a Mercator projection configured with specific translation and scaling to focus the geographic region. The code loads TopoJSON state boundaries from a GitHub repository, then leverages d3’s `geoPath` projection generator to render the SVG paths, with `scaleOrdinal` and `schemeCategory10` for coloring. State names are drawn as SVG text elements at each polygon’s centroid.

Loading thumbnail…

Fork of map exemple

This example displays a zoomable world map where each country is filled with a color intensity based on its population estimate. The choropleth uses a linear scale transitioning from light to dark red, with hover effects changing the fill to purple. It builds the map using `d3.geoPath` with a `geoMercator` projection and TopoJSON data from world-atlas, while population and country names come from a TSV file. Zoom interactions are handled through d3’s `zoom` behavior, transforming SVG paths.

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a minimal D3.js setup within VizHub, displaying the text “Hello VizHub!” centered on the page. It shows how to load D3 v5 from a CDN and use ES6 module imports for both external libraries and local JavaScript files. The code uses `d3.select` to target the `#message` div and sets its text content from an exported constant in a separate module. Styling is applied via CSS, centering the text and enlarging the font size dramatically.