SACHINSHUKLA99

@SACHINSHUKLA99·7 public vizzes

Customizing Axes

This scatterplot displays the relationship between horsepower and weight for various car models, with each point representing a vehicle from the auto-mpg dataset. The chart emphasizes customized axes using D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` functions, which are enhanced with tick marks that span the full plot area, custom tick formatting (e.g., converting billions to ‘B’), and rotated axis labels. The SVG rendering includes semi-transparent yellow circles, a purple title, and styled tick texts, demonstrating how to tailor axes for clarity and visual appeal.

Aug 30, 2020

Loading thumbnail…

HTML Starter

This example displays the text "Hello HTML" at a massive 13em font size, centered on a plain white page. It demonstrates the minimal structure of an HTML document, including a `<style>` block for CSS styling and an inline `<script>` tag that logs "Hello JavaScript!" to the browser’s console. The rendering relies on standard HTML, CSS, and JavaScript APIs, with no external libraries or data sources used.

Aug 30, 2020

Loading thumbnail…

Population Histogram of Country

This visualization presents a horizontal bar chart of the top 10 most populated countries as of 2018, derived from a CSV file with population figures in thousands. The chart uses D3 v5’s `scaleLinear` and `scaleBand` to map population values and country names to SVG rectangles, with axes generated by `axisBottom` and `axisLeft`. A custom tick formatter converts large numbers into abbreviated labels, and the SVG is styled with a yellow background and blue bars.

Aug 8, 2020

Loading thumbnail…

Untitled

This example shows how CSS filters can be applied interactively to an image. Two sliders control different visual effects: the first slider adjusts the blur radius of the pineapple image using the `-webkit-filter: blur()` property, while the second slider is intended to modify brightness but remains non-functional. The code uses plain JavaScript event listeners (`oninput`) to update the filter style and display the slider value in a `<p>` element. No external libraries or frameworks are used, despite the React metadata.

Jul 24, 2020

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. It highlights how to customize D3 axes: the code uses `d3.axisBottom` and `d3.axisLeft` with tick sizes that extend across the chart, and removes the default axis domain lines. The x-axis includes custom tick formatting (converting abbreviations like “G” to “B”) and an axis label, while the y-axis uses `d3.scalePoint` with padding. Data is loaded from a CSV file.

Jul 20, 2020

Loading thumbnail…

Population Histogram by Country 2

This histogram displays the population of the ten most populated countries as of 2018, using horizontal bars ordered from China to Mexico. Rendered as an SVG within a 960 by 500 pixel canvas, the chart draws data from a local CSV file. The code uses D3 v5’s `select` and `csv` APIs to load the data and prepare the visualization, though the bar-drawing logic is not yet implemented in the provided script.

Jul 18, 2020

Loading thumbnail…

Report

This visualization presents an interactive network diagram of report data, revealing clusters and connections through a force-directed layout. The view shows nodes positioned by physics-based simulation, with links drawn between related entities. Built with React and D3, the example uses `d3.forceSimulation` to compute node positions and `d3.forceLink` for edge constraints, while rendering the graph as SVG elements. Node colors and sizes differentiate categories, and the simulation updates continuously to settle into a stable configuration. The code loads data from an external source defined in the React component, demonstrating how D3's layout algorithms integrate with a modern component-based framework.

Jul 17, 2020