M

manishabehera

@manishabehera·23 public vizzes

Loading thumbnail…

ctx

This example visualizes the presence or absence of antibiotic resistance genes across 10 bacterial isolates using a dataset from a CSV file. The visualization displays a circular node-link diagram where green circles represent individual genes or clades, connected by lines to show co-occurrence patterns. The implementation uses D3.js with a force simulation (`d3.forceSimulation`) to position the nodes, while the chart type is defined as a vertical bar-like layout via `cht=v` and `chd=t` parameters, suggesting a Google Charts API formatting. The data is parsed from a tab-separated CSV and rendered in an HTML page with custom styles for circles and text.

Loading thumbnail…

Untitled

This bubble chart displays the correlation between ciprofloxacin MIC values and the presence of fluoroquinolone-resistant genes, with the x-axis representing resistant determining factors and the y-axis measuring MIC in µg/mL. Each bubble’s size encodes the MIC value, while color distinguishes isolates. The visualization is built using Google Charts’ `google.visualization.BubbleChart` with `arrayToDataTable` to convert hardcoded data from `data.csv`, and includes options for axis titles and bubble text styling.

Loading thumbnail…

Untitled

This visualization compares ciprofloxacin MIC values with fluoroquinolone resistance genes across six bacterial isolates using a Google Bubble Chart. The x-axis shows fluoroquinolone-resistant determining factors, the y-axis displays MIC levels in µg/mL, while bubble size encodes MIC value and color distinguishes isolates. The chart uses the Google Charts API's `google.visualization.BubbleChart` with data embedded directly via `arrayToDataTable`. An untitled D3.js script in the same project renders a separate bar chart of population data from a CSV.

Loading thumbnail…

Fork of Heatmap for number of infection rate at orign of pandemic

This interactive heatmap shows the number of early COVID-19 infections across Chinese regions, broken down by age category. Rows represent locations, columns represent age groups, and cell colors intensify with higher case counts, revealing Hubei and Shaanxi as hotspots, especially among the 66+ age group. Built with D3 v4, the visualization uses `d3.scaleBand` for axes, `d3.scaleSequential` with an `interpolateReds` color scale, and SVG rectangles. Hovering over a cell triggers a tooltip displaying the exact count, while the data originates from the `age_v2.csv` file.

Loading thumbnail…

Fork of make a face

This example shows the impact of vaccines on measles cases across U.S. states from 1928 to 2003. A heatmap displays yearly case rates per 100,000 people, with a marker indicating when the measles vaccine was introduced in 1963. The visualization uses D3 v6 to create an SVG, employing scales like `d3.scaleLinear`, `d3.scaleBand`, and `d3.scaleSequentialSqrt` with the `d3.interpolatePuRd` color scheme. A line marks the vaccine introduction year, while the legend and tooltips clarify case counts.

Loading thumbnail…

Untitled

This visualization shows a bar chart of company performance, comparing sales, expenses, and profit across the years 2014 to 2017. The chart is rendered using the Google Charts loader with the bar package, and data is defined inline via `google.visualization.arrayToDataTable`. The chart element is a material bar chart drawn into a div with the ID `columnchart_material`. The README mentions world population data, but the displayed chart uses hardcoded sample values.

Loading thumbnail…

Untitled

This example compares degrees awarded across five academic majors at two points in time using three Google Charts pie charts. It displays the original data before, the data after, and a computed difference between them. The code loads the Google Charts corechart package through `google.charts.load` and uses `google.visualization.arrayToDataTable` to format data. It creates separate `PieChart` instances for each view, with the third chart deriving its values via the `computeDiff` method to highlight changes. Data comes from hardcoded arrays rather than the accompanying users.csv file.

Loading thumbnail…

Fork of Untitled

This example visualizes a multi-stage flow diagram using a Google Charts Sankey diagram. It shows the movement of migration or trade weights between countries across three sequential layers: from nations like Brazil, Canada, Mexico, and the USA, through European intermediate points, and finally to Asian destinations such as China, India, and Japan. The interactive diagram encodes connection strength through link width, with node colors defined in the options. The code uses the Google Charts `sankey` package to render the data from hardcoded arrays in the HTML file.

Loading thumbnail…

Untitled

This Sankey diagram visualizes migration flows from the Americas and Europe to African countries and onward to major Asian destinations. The chart displays weighted connections between countries, with thicker links indicating larger migrant populations. Built using the Google Charts Sankey visualization API, the code defines nodes and edges in a DataTable, specifying the origin, destination, and weight for each flow. The diagram uses gradient-colored links and a predefined color palette for nodes, rendering a multi-level flow structure. The data is hand-coded in the HTML file rather than loaded from the accompanying CSV.

Loading thumbnail…

Parallel Sets

This visualization shows the presence or absence of various genetic markers, including antibiotic resistance genes, across multiple bacterial isolates. A parallel sets diagram displays the data as interconnected vertical columns representing different genes, with flows between them indicating co-occurrence patterns. The code uses D3.js version 6 to render the visualization as an SVG, reading the dataset from a CSV file. Each isolate is a row in the data, and the diagram reveals how genetic markers cluster together across the sample population, though the README incorrectly references world population data.

Loading thumbnail…

Fork of make a bar chart

This visualization displays the top five most populous countries, using circles whose horizontal positions and radii encode each nation's population. The data comes from a CSV file containing country names and population figures, which are multiplied by 1000 for accurate representation. The chart is built with D3 version 6, leveraging its `svg`, `scaleLinear`, and `scaleBand` APIs for scaling and layout, while `axisLeft` and `axisBottom` render the axes. The circular marks, colored green via CSS, are positioned using bandwidth calculations, with the title appearing at the top of the SVG canvas.

Loading thumbnail…

make a bar chart

A horizontal bar chart displays the top five most populated countries using D3 v6, sourced from Worldometers population data. The visualization ranks China, India, the United States, Indonesia, and Pakistan by population, with indigo bars and labeled axes. The code uses `d3.csv` to load data, `d3.scaleLinear` and `d3.scaleBand` for scales, and `d3.axisLeft`/`d3.axisBottom` for ticks. A title is added via SVG text, and the chart renders in an SVG element with explicit width and height.

Loading thumbnail…

make a face

This example illustrates a simple face constructed from basic SVG shapes using D3 version 6. A yellow circle forms the head, with two smaller black circles serving as eyes, all positioned using absolute pixel coordinates. The mouth is created with D3's `arc` generator, which defines a path using inner and outer radii along with start and end angles. The visualization loads D3 via UNPKG and uses the `select` and `append` methods to build the SVG scene, showcasing D3's utility for creating primitive graphics through its DOM manipulation interface.

Loading thumbnail…

Fork of make a face

This example draws a simple yellow face with black eyes and a smiling mouth onto an SVG canvas using D3 version 6. The code imports `select` and `arc` from D3, appends circles for the head and eyes, and uses a path generated by `arc()` to create the mouth shape with specified radii and angle ranges. The SVG is 960 by 500 pixels, with elements positioned using absolute coordinates.

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape creation and styling using an HTML document with embedded SVG elements. It shows a black polyline and a blue filled path rendered on a 960x500 canvas, highlighting how SVG handles vector graphics through the `line` and `path` elements. The rendering approach relies on raw SVG markup with CSS applied through an external stylesheet that sets body margins to zero and hides overflow. This example uses the native SVG API via inline XML markup rather than JavaScript libraries, with shapes defined directly in the HTML structure.

Loading thumbnail…

Fork of HTML Starter

This example displays the text "Hello HTML" centered on a page with an extremely large font size, rendered entirely through plain CSS styling. The page also logs "Hello JavaScript!" to the browser’s developer console upon load. It uses a basic HTML document structure, inline CSS for text alignment and sizing, and a JavaScript script tag for the console output, demonstrating a minimal static webpage setup without any external libraries or frameworks.

Loading thumbnail…

cars report

The cars report displays the first car make from a static JSON dataset, rendering the text "nissan" prominently in the browser. It uses D3 version 6 to import and parse the embedded `cars` array from `cars.js`, which contains five car records with year, make, model, and price fields. The example demonstrates a minimal setup where `index.js` selects a DOM element by ID and sets its text content, with the page styled via an inline `pre` tag. The visualization is generated through Rollup, which bundles the modular JavaScript files before display.

Loading thumbnail…

Cars Report

This example displays a simple, static HTML report titled “Cars Report,” listing three used vehicles with their prices. The third item, a 2009 Chevrolet Trailblazer, is highlighted in red via the `highlighted` CSS class, while the entire page uses a large monospace font. The report is built with plain HTML structure and styled through an external `styles.css` file; the page also loads a `bundle.js` script, though its behavior is not visible in the provided code. No JavaScript visualization libraries or data-processing APIs are used.

Loading thumbnail…

cars report

This example displays the make of the first car in a small JSON dataset as plain text on a webpage. It loads D3 via UNPKG and uses local ES6 modules to import and parse the car data with `JSON.parse`. The index.js file selects a DOM element by ID and sets its text content, while CSS styles the message with a large font size. The visualization demonstrates basic data loading, module imports, and DOM manipulation with D3 v5.

Loading thumbnail…

car report

This example displays the make of the first car in a dataset that is defined as an embedded JSON string in `cars.js` and parsed with `JSON.parse`. It renders the text “nissan” inside a `<pre>` element, with the content set by `document.getElementById().textContent`. The chart uses no visualization library, relying solely on the imported `cars` array from a local module. The presentation is static, showing a single value rather than a graphical view.

Loading thumbnail…

car report

This example presents a concise text-based report on a small car dataset, listing each vehicle’s year, make, model, and price. It demonstrates a data-filtering workflow using JavaScript’s array methods (`filter`, `map`, `join`) to select cars priced under $2000, then formats the first qualifying car into a message. The result is displayed in a `<pre>` element via `document.getElementById`. The data originates from an embedded JSON string in the `cars.js` module, parsed with `JSON.parse`.

Loading thumbnail…

cars report

This example presents a report on cars data, displaying the information in an interactive visualization built with React. It uses HTML and CSS for structure and styling, with JavaScript powering the dynamic behavior. The visualization renders the cars dataset, allowing viewers to explore the information through the interface. The code leverages React's component-based architecture to manage the UI and data presentation, demonstrating a clean integration of web technologies for data reporting.

Loading thumbnail…

Fork of HTML Starter

This example displays the text "Hello HTML" centered on a page with an extremely large font size, rendered entirely through plain CSS styling. The page also logs "Hello JavaScript!" to the browser’s developer console upon load. It uses a basic HTML document structure, inline CSS for text alignment and sizing, and a JavaScript script tag for the console output, demonstrating a minimal static webpage setup without any external libraries or frameworks.