megshe

@megshe·5 public vizzes

Fork of Customizing Axes

This bar chart displays the populations of the top 10 most populous countries in 2018, based on data from the United Nations World Population Prospects 2017. The chart uses d3.scaleLinear and d3.scaleBand to map population values and country names, while d3.axisBottom and d3.axisLeft render the axes, with axis labels and tick formatting applied via d3.format. Population values are loaded from a CSV, multiplied by 1000, and drawn as SVG rectangles.

Aug 6, 2021

Loading thumbnail…

Fork of Hello VizHub

This visualization displays the number of messages and shares over time as a grouped bar chart. The data, spanning from July 2020 to July 2021, is rendered as SVG with D3.js v5. It leverages `d3.scaleBand` for the axes and `d3.scaleOrdinal` for colors, with interactive tooltips on mouseover. The chart includes rotated x-axis labels and a legend, while the code imports `select` from D3 and uses local modules and a CDN-loaded D3 library.

Aug 6, 2021

Loading thumbnail…

mRay usage statistics

A bar chart shows active users per month for mRay at a specific Asklepios clinic over one year, with tooltips on hover. The visualization is built with React and D3 v5, using `d3.scaleBand`, `d3.scaleLinear`, and D3 axes. SVG rendering includes responsive resizing and wrapped x-axis labels, while a custom tooltip appears on mouseover. Data is embedded directly in the script.

Aug 6, 2021

Loading thumbnail…

Fork of Hello VizHub

A minimal D3.js example renders the text "Hello VizHub!" inside a single HTML div. The visualization demonstrates a basic D3 workflow by importing the `select` function from the D3 library and using it to target the `#message` element. An ES6 module, `myMessage.js`, supplies the string content, while `styles.css` centers the text with a large font size. The HTML loads D3 from UNPKG, local CSS, and executes the compiled JavaScript bundle.

Aug 2, 2021

Loading thumbnail…

Cars Report

This example displays the make of the first car in a small dataset, rendered as large text on a web page. The data is a hard-coded JavaScript array of five car objects, each containing year, make, and price, imported from a local ES6 module. The visualization uses the native `document.getElementById` API to update the text content of a pre-formatted HTML element, with styling provided by a separate CSS file. It demonstrates a minimal data import and DOM manipulation workflow without external libraries.

Aug 2, 2021