Tusar

@Tusarkantapanda·10 public vizzes

India Map made with D3

This example shows a choropleth map of India’s states, each filled with a distinct color from a categorical scale and labeled with its name. Built with D3 v5, it loads TopoJSON state boundaries and renders them as SVG paths using a Mercator projection via `d3.geoPath` and `geoMercator`. State names are placed at each path’s centroid, while `d3.scaleOrdinal` and `schemeCategory10` assign colors.

Jan 23, 2022

Loading thumbnail…

India Map made ith D3

This choropleth map visualizes India’s states using D3 v5, with each state filled by a categorical color scale based on its name. A Mercator projection, configured with custom translation and scaling, renders the TopoJSON geometry as SVG paths, while state labels are placed at each path’s centroid. The code uses `d3.json`, `d3.geoPath`, `topojson.feature`, and a `scaleOrdinal` with `schemeCategory10`, with data loaded from a remote GitHub TopoJSON file.

Jan 23, 2022

Loading thumbnail…

WorldMap using D3

This example displays a world map by fetching geographic data from the world-atlas package. The visualization loads GeoJSON TopoJSON data and logs it to the console, but does not yet render any shapes. It uses the `d3.json` method to retrieve the dataset and relies on an SVG element with preset dimensions. The code sets up the coordinate space and imports the selection utility from D3 v7.

Jan 23, 2022

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3 version 7 setup by replacing the page body’s content with the text “Hello D3 version 7.” The visualization shows how to initialize a project using D3 v7 and the ES module `select` function imported from the `d3` package. The code renders static text directly into the DOM via `select('body').text()`, with the page styled through a large `font-size` in CSS. It serves as a simple starter template for building more complex data-driven visualizations.

Jan 23, 2022

Loading thumbnail…

Make face ith D3

This example uses D3.js v7 to render a simple smiling face in an SVG. It draws a yellow circle for the head with a black stroke, then positions two black circles for the eyes based on calculated offsets from the center. A mouth is created using the `arc` function with specified inner and outer radii and angular ranges. The code demonstrates basic D3 selection, attribute setting, and path generation for geometric shapes.

Jan 23, 2022

Loading thumbnail…

Fork of D3 Starter

This example demonstrates the minimal setup required to render text with D3 version 7 in a browser. It shows the string “Hello D3 version 7” centered on a blank page using a large font size. The implementation imports the `select` function from the D3 module and calls `select('body').text(...)` to set the content of the body element. The page loads D3 via a CDN link in the HTML head and runs the JavaScript from a separate `bundle.js` file.

Jan 23, 2022

Loading thumbnail…

Percentage bar chart

This percentage bar chart uses a horizontal bar layout to show a direct linear relationship between amount and percentage values. The bars extend proportionally from left to right, with the x-axis representing percentage and the y-axis categorizing amounts. The visualization loads CSV data using D3’s `csv` method, then renders with `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft` and `axisBottom` for the axes. SVG rectangles display the bars, colored with a deep maroon fill and styled via external CSS.

Jan 23, 2022

Loading thumbnail…

Bar Chart

This bar chart visualizes a small dataset relating Amount values to their corresponding Percentage labels. The chart is rendered using D3.js version 7, with the visualization built through the library’s `select` and `csv` functions. The example includes a commented-out line that would load data from a CSV file, though the active code currently just logs a message and writes text to the document, leaving the SVG canvas empty. The HTML page is styled with centered, large text, suggesting a title or label display.

Jan 23, 2022

Loading thumbnail…

Fork of Make face ith D3

This example demonstrates how to construct a simple smiling face using D3 version 7, with a yellow circular head, two black eyes positioned symmetrically, and a mouth drawn as an arc. The visualization renders entirely as SVG elements, using D3's `select` to target the root SVG and `append` to create circles for the face and eyes. The mouth path is generated with D3's `arc` function, specifying inner and outer radii and angular ranges in radians. The code also loads both D3 v7 and an older v5.6.0 version via script tags.

Jan 23, 2022

Loading thumbnail…

Make face ith D3

This example creates a cartoon face using D3.js version 7 with SVG rendering. A yellow circle forms the head, while two black circles positioned symmetrically serve as eyes, and an arc path generates the mouth. The code uses `d3.select` to manipulate the SVG, `d3.arc` to define the mouth’s curved shape, and explicit pixel coordinates for eye placement. It demonstrates basic geometric shape composition and coordinate positioning within D3’s data-joining-free API.

Jan 23, 2022