himanshucse2012

@himanshucse2012·16 public vizzes

Fork of Historical Space Launches on a map

This interactive visualization combines a historical space launch map with a brushable time-series histogram. It displays launch sites as red circles on an equal-earth projection, with circle size proportional to launch frequency. A linked date histogram below filters the map by time range. The visualization uses d3.geoEqualEarth, d3.geoPath, and d3.bin for data aggregation, with d3.brushX enabling the interactive selection. Data comes from a CSV file of historical launches and a world atlas TopoJSON.

Jun 25, 2022

Loading thumbnail…

Fork of Fork of Practic 06 | Bowl of Fruit

Five apples arranged as circles transition in and out of a bowl over time, with one apple turning into a lemon. The example demonstrates enter, update, and exit selections using D3 v5 data joins, where circles animate their radius and fill color via d3-transition. Fruit positions and sizes are mapped through ordinal scales for color and radius. Timed callbacks trigger changes to the fruit array, showing smooth visual updates as elements are added, removed, or modified.

Nov 6, 2021

Loading thumbnail…

Fork of Practic 06 | Bowl of Fruit

This example demonstrates a dynamic fruit bowl visualization using D3.js where five apples are initially rendered as circles, one is removed, and another transforms into a lemon over time. The code uses D3's `select`, `scaleOrdinal` for color and radius scales, and `range` to generate the fruit array. It manipulates the SVG document directly by appending, updating, and removing circle elements through the `render` function to reflect changes in the data array. The visual comparison between the red apples and yellow lemon is created using a categorical color scale.

Nov 6, 2021

Loading thumbnail…

Practic 06 | Bowl of Fruit

This example demonstrates the enter-update-exit pattern in D3.js v5 by rendering a row of five red apples as SVG circles. Using `selection.selectAll('circle')` and `selection.data()`, the code binds an array of fruit objects to the DOM, appending circles with `enter().append('circle')` and positioning them via `attr('cx', (d, i) => i * 100 + 60)`. After two seconds, a `setTimeout` removes the last fruit from the array, and the `exit().remove()` method deletes the corresponding circle, showing how D3 handles data-driven updates. The visualization uses a static 960×500 SVG canvas with no interaction.

Nov 6, 2021

Loading thumbnail…

Fork of Practic 05 | Line Chart

This line chart displays dry air temperature (T) against date over time from the provided CSV dataset, with each data point marked as a blue circle connected by a steelblue line. The visualization uses D3 v5’s `scaleTime` and `scaleLinear` for the date and temperature axes, along with `axisBottom` and `axisLeft` to render gridlines and tick labels. Chart title and axis labels are added as SVG text elements, while the data is loaded via `csv()` and parsed into JavaScript `Date` objects before rendering.

Nov 5, 2021

Loading thumbnail…

Practic 05 | Area Chart

This area chart visualizes dry-air temperature readings over time, using a smoothed curve to connect daily temperature points across a date range in October and November 2021. The visualization displays the temperature trend with a filled maroon area beneath the curve, while circular markers indicate individual data points. The chart includes labeled axes for date and temperature in degrees Celsius, with a title describing the relationship. The code uses d3.csv to load the dataset, d3.scaleTime and d3.scaleLinear for scaling, and d3.area with curveBasis to generate the filled path.

Nov 5, 2021

Loading thumbnail…

Practic 05 | Line Chart

This line chart displays dry and air temperature readings (T and Tw) against date and UTC time, plotted as circles connected by a line. The visualization uses D3 v5 with `d3.csv` for data loading, `scaleTime` and `scaleLinear` for axes, and `axisBottom` and `axisLeft` for gridlines. SVG circles mark each data point, while the line rendering is prepared through the `g` selection. The chart includes labeled axes, a title, and a clean margin-based layout, with styling handled via an external CSS file.

Nov 5, 2021

Loading thumbnail…

Fork of Fork of Practic04 | Scatter Plot Chart Formatting

This scatter plot visualizes the relationship between dry air temperature (T) and date/UTC time, using data from a CSV file loaded via d3.csv. The visualization uses d3.scaleLinear for the x-axis and d3.scalePoint for the y-axis, with d3.axisBottom and d3.axisLeft generating gridlines and tick labels. Red semi-transparent circles mark each data point, while axis labels and a title are added via SVG text elements. The chart formats axes with tick sizes and padding, and removes default domain lines for a cleaner presentation.

Nov 5, 2021

Loading thumbnail…

Fork of Practic04 | Bar Chart Formatting

A horizontal bar chart displays dry-air temperature samples from the data.csv file, with each bar labeled by date and UTC hour. The visualization uses d3.csv to load data, d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis, and d3.axisBottom with custom tick formatting. SVG rectangles render the bars in steelblue, while axis labels and a title annotate the chart. The y-axis is stripped of its domain line and ticks, and the x-axis includes a custom temperature label.

Nov 4, 2021

Loading thumbnail…

Fork of Practic05 | Bar Chart Vertical

This bar chart displays temperature readings (T and Tw) from a CSV file, plotted against time-related categories created by concatenating date and UTC hour. Using D3 v5, the visualization applies a linear scale for the x-axis and a band scale for the y-axis, rendering vertical bars with steelblue fill. The chart includes axes labels and a legend, with a simple SVG-based rendering approach.

Nov 3, 2021

Loading thumbnail…

Practic04 | Bar Chart

This example displays temperature readings (T and Tw) across dates and times as a bar chart. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for the x-axis temperature range and `scaleBand` for the categorical y-axis combining date and time values. The chart includes `axisLeft` and `axisBottom` to display the scales, while bars are drawn as SVG rectangles colored steelblue. Data is loaded from a local CSV file and processed by converting temperature values to numbers before binding to the visualization.

Oct 20, 2021

Loading thumbnail…

Practic03 | SVG

This example demonstrates static SVG shapes and primitives, including circles, rectangles, lines, and paths, drawn directly on a 960x500 canvas. It uses D3 v5 only to load the library, while the visualization itself is composed entirely of hand-coded SVG elements with inline styles and CSS classes for grouping and theming. A JavaScript snippet parses a hardcoded JSON array of car data, filters it by price, and formats a text report, though this output is not visibly integrated into the SVG graphic. The page also imports a `bundle.js` file, suggesting additional external code.

Oct 17, 2021

Loading thumbnail…

Practic02 | HTML

This example displays a simple text-based car report, listing vehicles under a specified price from an embedded JSON array. The page shows a static list and a dynamically generated report of five cars with prices below $2000, formatted as year, make, model, and cost. The code uses JavaScript’s native `JSON.parse` and array methods like `filter`, `map`, and `join` to process data, then updates the DOM via `document.getElementById().textContent`. Styling relies on plain CSS, with no D3.js functions applied in the visible implementation.

Oct 17, 2021

Loading thumbnail…

Practic01 | Cars Report

This example presents a plain-text report of car inventory, listing each vehicle’s year, make, model, and price after filtering to show only cars under $2,000. The report is generated from an inline JSON array of five car objects, using JavaScript array methods `filter` and `map` in conjunction with a custom `formatCar` function to produce the formatted lines. The output is displayed directly in a `<pre>` element on the page, styled with large font size, and the code runs without any additional visualization library, relying solely on vanilla JavaScript and the DOM API.

Oct 17, 2021

Loading thumbnail…

Tw & T

This interactive visualization presents a date histogram of the monthly sum of dead and missing migrants from the Missing Migrants Dataset. The chart uses SVG rendering with React, and employs d3’s `bin` and `sum` functions to aggregate the data into monthly totals. The d3 time scale handles the x-axis, while a linear scale maps the count of casualties on the y-axis. Clicking on a bar displays a tooltip with the precise monthly figure.

Sep 22, 2021

Loading thumbnail…

Sikkim Map

This visualization displays the Indian state of Sikkim, rendered with its internal district boundaries highlighted in teal against a light gray globe. The map uses a natural Earth projection via d3.geoNaturalEarth1 and d3.geoPath to draw geographic features, while d3.geoGraticule adds the background graticule grid. The React component loads GeoJSON data through d3.json and converts it using topojson.feature and topojson.mesh, applying CSS styling to differentiate land, sphere, graticules, and interior borders.

Aug 29, 2021