rajeshathakur

@rajeshathakur·10 public vizzes

Fork of Fork of Selecting a Year on a Line Chart

This interactive D3.js visualization displays global population trends over time by region, using a multi-line chart with a movable vertical selector. Users can hover over the chart to change the selected year, which shifts a vertical line across the graph, updating the visualization. The implementation uses D3's scaleTime, scaleLinear, nest, and axis utilities, with SVG rendering. It employs the colorLegend and lineChart modules for custom SVG elements, and loads UN population estimates from CSV data, using the curveBasis for line smoothing.

Apr 24, 2021

Loading thumbnail…

Fork of Let's make a map with D3.js!

This example displays a natural Earth projection of the world, with countries rendered as green SVG paths and oceans as a blue sphere. It uses D3 v5’s `geoNaturalEarth1` and `geoPath` to generate the projection, while TopoJSON’s `feature` extracts country boundaries from the world-atlas 110m dataset. The code loads geographic data asynchronously via `json`, then appends each country path to the SVG canvas.

Apr 17, 2021

Loading thumbnail…

Fork of Circles on a Map

This visualization displays country populations as scaled circles on a natural Earth projection map, with each circle’s area representing the 2018 population data. Hovering reveals country names and exact population values, while the map supports pan and zoom. The implementation uses d3.geoPath for map rendering, d3.scaleSqrt for circle sizing, d3.zoom for interaction, and TopoJSON data from the visionscarto-world-atlas. Two legends—a color legend using d3.scaleOrdinal with schemeSpectral and a size legend—explain the encoding. Population data comes from a CSV file, preprocessed to extract per-country figures.

Apr 17, 2021

Loading thumbnail…

Fork of Let's make a map with D3.js!

This example visualizes a world map using a natural Earth projection. The map is drawn with SVG paths, where countries are filled with light green and the surrounding sphere is dark blue. The code uses D3 v5 functions `geoPath` and `geoNaturalEarth1` to project geographic coordinates, while the `topojson` library’s `feature` function converts the world-atlas TopoJSON data into geometric features for rendering. The visualization loads country boundaries from the `world-atlas` package and applies a subtle black stroke with low opacity to each country outline.

Apr 16, 2021

Loading thumbnail…

Fork of Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the general update pattern for SVG elements, showing how a fruit bowl changes over time with apples and lemons added and removed. A JavaScript array acts as the data source, modified through pop, assignment, and filter operations. Using functions from `d3` including `select`, `range`, and custom `fruitBowl` logic with `scaleOrdinal` for colors and radii, the view updates render enter, update, and exit states on circles and text labels. The visualization relies on D3 v5’s selection merging and exit removal to reflect data changes.

Apr 15, 2021

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes automobile data from the UCI Machine Learning Repository’s Auto MPG dataset. Users select which data columns map to the X and Y axes via dropdown menus, with circles animating to their new positions over two seconds when the selection changes. The code uses D3 v5’s `scaleLinear`, `axisBottom`, `axisLeft`, and `transition().duration()` to render the SVG visualization. A reusable `dropdownMenu` module handles the selector UI, while `scatterPlot` manages the axes, labels, and animated circle transitions.

Apr 15, 2021

Loading thumbnail…

Fork of Selecting a Year on a Line Chart

This interactive line chart displays population trends over time by region, using data from UN population estimates. A vertical black line marks the currently selected year, and users can hover over the chart to update this selection, which the visualization updates in real time. The D3 code organizes regions by color using `d3.scaleOrdinal` and `d3.schemeCategory10`, draws the lines with `d3.line` and `d3.curveBasis`, and renders axes with `d3.axisLeft` and `d3.axisBottom`. A custom legend component maps colors to region names, and the data is loaded from CSV files.

Apr 15, 2021

Loading thumbnail…

Fork of Let's make a face with D3.js!

A cheerful SVG smiley face, rendered in orange with a red arc for a mouth and two circular eyes, demonstrates animated eyebrow movement. The animation uses two chained `transition().duration(2000)` calls on a group element to shift the eyebrows up and then back down. The face is constructed with D3.js v5 by appending SVG shapes—`circle`, `rect`, and `path`—to a central group, with the mouth’s arc computed via the `d3.arc()` function.

Apr 15, 2021

Loading thumbnail…

myViz

This example displays the text “Hello VizHub!” centered in the browser using a large font. It demonstrates fundamental VizHub capabilities: loading D3 v5 from a CDN via UNPKG, importing the `select` function from D3, and importing a local ES6 module named `myMessage` that exports the displayed string. The page structure is defined in HTML, with styling applied through an external CSS file. D3’s `select` method targets the `#message` div to set its text content, showcasing modular code organization and dynamic DOM updates.

Apr 14, 2021

Loading thumbnail…

Fork of HTML Starter

This example displays the text “Hello HTML” centered on the page at a very large font size, demonstrating the fundamental structure of an HTML document with embedded CSS and JavaScript. The CSS sets the body text alignment and font size, while the JavaScript uses the console’s `log` method to output “Hello JavaScript!” to the browser’s developer tools. It serves as a minimal template for combining HTML, CSS, and script in a single file.

Apr 14, 2021